:root {
  color-scheme: light dark;
  --bg: #fff;
  --fg: #111;
  --muted: #666;
  --tile-bg: #f2f2f2;
  --accent: #0d6efd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --fg: #eee;
    --muted: #aaa;
    --tile-bg: #1c1c1c;
  }
}

/* Grotto by Vladimir Nikolic: https://www.1001fonts.com/grotto-font.html */
@font-face {
  font-family: "Grotto";
  src: url("/fonts/Grotto.ttf");
}

/* Category badge font tryouts (Reposts/Comments) - "Newyear Coffee" won
   out (see .category-badge below); the rest stay declared here in case any
   of them get reconsidered later. Owners/Shadowchrome/New Academy rejected,
   Zero Cool was the runner-up. */
@font-face {
  font-family: "New Academy";
  src: url("/fonts/NEWACADEMY.ttf");
}
@font-face {
  font-family: "Newyear Coffee";
  src: url("/fonts/Newyear Coffee.ttf");
}
@font-face {
  font-family: "Owners";
  src: url("/fonts/Owners.ttf");
}
@font-face {
  font-family: "Shadowchrome";
  src: url("/fonts/Shadowchrome-Regular.ttf");
}
@font-face {
  font-family: "Zero Cool";
  src: url("/fonts/ZeroCool.ttf");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* Firefox: gradients aren't supported here, so approximate with a flat
   color from the title gradient. scrollbar-color is inherited, so
   setting it on html covers the whole page. */
html {
  scrollbar-color: #e6683c var(--tile-bg);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--tile-bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-radius: 6px;
  border: 2px solid var(--tile-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #cc2366;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.site-header h1 {
  margin: 0;
  flex: 1;
}

/* Sized to fit the text itself (not the full flexed h1 width) so the
   gradient's stops land across the visible letters instead of mostly
   spilling out to the right of them, past the end of the short title. */
.brand-title {
  display: inline-block;
  font-family: "Grotto", system-ui, sans-serif;
  font-size: 3.6rem;
  line-height: 1.1;
  padding: 0.5rem 0;
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#sync-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: linear-gradient(to left, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

#sync-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.sync-status {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Desktop: sync-btn/sync-status sit inline next to the title as normal.
   Hidden here, shown only at the mobile breakpoint below, where the
   button moves onto its own line under the title and this hint explains
   what it's for - on a small screen there's no surrounding context (no
   admin link visible, nothing else nearby) to make a bare "Sync now"
   button self-explanatory the way there might be on a wider layout. */
.sync-hint {
  display: none;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Desktop-only counterpart to .sync-hint above - same explanation, sat on
   the button's left instead of its right, arrow flipped to point at the
   button from that side. */
.sync-hint-desktop {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .site-header {
    flex-wrap: wrap;
  }

  .site-header h1 {
    flex-basis: 100%;
  }

  .sync-hint {
    display: inline;
  }

  .sync-hint-desktop {
    display: none;
  }
}

main {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

h2 {
  display: inline-block;
  font-family: "Grotto", system-ui, sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0 0 0.75rem;
}

/* Colors pulled from the title gradient's 5 stops, one per section heading:
   reposts (0%), comments (25%), images (50%), following (75%), reels
   (100%). */
#reposts-heading {
  color: #f09433;
}

#comments-heading {
  color: #e6683c;
}

#images-heading {
  color: #dc2743;
}

#reels-heading {
  color: #bc1888;
}

#following-heading {
  color: #cc2366;
}

.tile-row {
  display: grid;
  gap: 0.75rem;
}

.tile-row--reels {
  grid-auto-flow: column;
  grid-auto-columns: min(45vw, 260px);
  overflow-x: auto;
  /* overflow-x: auto implicitly computes overflow-y to auto too, which
     clips the New flag's negative top offset - same fix as .following-row.
     Reels' flag is the --large variant (bigger static offset) and its
     banner's flag-wave skew lifts the far edge even higher at the peak of
     the wave, so this needs more headroom than the 8-10px used elsewhere. */
  padding-top: 18px;
  padding-bottom: 0.5rem;
}

.tile-row--images {
  grid-template-columns: repeat(auto-fill, minmax(242px, 1fr));
}

/* Reels/Images' "See more" (see renderScrollSection in app.js) - a real
   button in normal document flow below the horizontal-scroll row, not a
   tile inside it, so it needs its own spacing rather than the row's own
   gap handling it. */
/* :not([hidden]), not a bare selector - this class's own display:block
   has the same specificity as the native [hidden] -> display:none UA
   rule, and author CSS wins a specificity tie against the UA stylesheet
   regardless of which one is declared "later" - so an unqualified
   display:block here would always override [hidden] and leave the
   button visibly rendered (with real layout/position) even while its own
   hidden property was correctly true. Reels' standalone "See more" hit
   exactly this before the :not() was added. */
.section-see-more-btn:not([hidden]) {
  display: block;
  margin: 0.9rem auto;
}

/* Interactions/Comments' see-more+see-less pair (see renderRepostsByDate/
   renderCommentCards in app.js) - real buttons below the grid, not a
   card/tile inside it, same reasoning as .section-see-more-btn above but
   for the two-button case (a lone see-more has no row of its own to
   center, so .section-see-more-btn handles that directly instead). */
.section-see-more-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.9rem 0;
}

/* What "See more" loads into, for both Reels and Images - a plain
   wrapping grid below the scroll row, deliberately not itself
   horizontally-scrolling (only the first row is). Generic sizing works
   for either tile shape (.tile--reel/.tile--image each set their own
   aspect-ratio). */
.tile-row--more {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.tile-row--more:empty {
  display: none;
}

/* First-tile-only "you can scroll" affordance (see addScrollHint in
   app.js) - removed outright once the row's actually been scrolled, so
   this never needs a visible/hidden state of its own, just absence. */
.scroll-hint {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: linear-gradient(to left, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

.scroll-hint:hover {
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* Followed's own hint (see addFollowingScrollHint in app.js) sits lower
   than the mid-right default above - bottom-anchored near the 3rd
   circle's handle text/the row's own scrollbar, rather than vertically
   centered against the whole row. Fine to overhang the scrollbar itself,
   just shouldn't read as floating in the middle of the row. ID selector
   so it reliably wins over the plain .scroll-hint rule regardless of
   source order. */
#following-row .scroll-hint {
  top: auto;
  bottom: 0.4rem;
  transform: none;
}

@media (max-width: 520px) {
  .tile-row--reels {
    /* Desktop's min(45vw, 260px) only ever shows a cropped sliver per
       tile - on mobile the tile (plus the Reels heading/scroll row
       around it) should read as close to a full screen's worth, the way
       swiping through an actual reels feed does. .tile--reel's existing
       9:16 aspect-ratio already approximates a phone screen's own
       proportions, so widening the column is enough on its own to also
       bring the height close to full-screen - no separate height rule
       needed.
       calc(100vw - 3rem), not a bare vw percentage - main's own 1.5rem
       side padding isn't part of the viewport width vw measures, so a
       plain min(90vw, 420px) could still end up wider than the actual
       space available inside that padding and overhang past it (which is
       also what was pushing the scroll-hint arrow, anchored to the
       tile's own right edge, out past the visible area). This subtracts
       that padding explicitly so the tile - and the arrow on it - never
       exceeds what's actually visible. */
    grid-auto-columns: min(calc(100vw - 3rem), 420px);
    /* Each swipe lands on a tile boundary instead of stopping wherever
       momentum happens to run out. */
    scroll-snap-type: x mandatory;
  }

  /* Images keeps its current tile size (aspect-ratio: 1/1 on .tile--image
     already makes it full-width/full-height-of-its-own-width) - this just
     adds the same horizontal-scroll mechanism .tile-row--reels already
     has, converting the wrapping grid into a scroll row instead of
     resizing anything. grid-auto-columns: 100% isn't subject to the same
     overhang risk as Reels' vw-based width above - percentages here
     already resolve against this row's own (correctly padding-aware)
     content box, not the raw viewport. */
  .tile-row--images {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-top: 8px;
    padding-bottom: 0.3rem;
  }

  .tile-row--reels .tile,
  .tile-row--images .tile {
    scroll-snap-align: start;
  }

  /* Mobile only (desktop reverts to the last-tile-in-row pattern above,
     where this doesn't apply) - "See more"'s newly-loaded batch should
     appear above the button, pushing it further down each click, rather
     than loading in below a button that stays put. Flexing the section
     and reordering its children achieves that without touching the DOM
     order renderScrollSection already relies on (row, then button, then
     more-row) - order:1 on the more-row/wrapper puts it ahead of order:2
     on the button, while the row itself and the heading stay at the
     default order:0 and keep their original relative position. */
  .reels-section,
  .images-section {
    display: flex;
    flex-direction: column;
  }

  #reels-more-row,
  #images-more-row {
    order: 1;
  }

  .reels-section .section-see-more-row,
  .images-section .section-see-more-row {
    order: 2;
  }
}

.tile {
  display: block;
  width: 100%;
  background: var(--tile-bg);
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}

.tile--reel {
  aspect-ratio: 9 / 16;
}

.tile--image {
  aspect-ratio: 1 / 1;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Memes (see makeMediaTile in app.js) - two stacked <img>s instead of the
   single cover-cropped one every other tile uses, since their usual
   full-height-screenshot shape crops badly square. overflow: hidden clips
   the backdrop's scale(1.15) back to this tile's own rounded corners. */
.tile--meme {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tile--meme .tile-img-backdrop {
  position: absolute;
  inset: 0;
  object-fit: cover;
  filter: blur(18px) brightness(0.6);
  transform: scale(1.15);
}

.tile--meme .tile-img-fg {
  position: relative;
  object-fit: contain;
}

.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  pointer-events: none;
}

.carousel-dots i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.tile--link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.825rem;
  text-decoration: none;
  color: var(--fg);
}

.tile-caption {
  font-size: 0.935rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.tile-cta {
  font-size: 0.88rem;
  color: var(--accent);
  font-weight: 600;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.lightbox[hidden] {
  display: none;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: min(92vw, 720px);
  max-height: 90vh;
  background: var(--tile-bg);
  border-radius: 12px;
  overflow: hidden;
}

.lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  /* flex: 1 1 auto (not a fixed vh max-height) - shares .lightbox-content's
     90vh budget with .lightbox-namecard below it, shrinking to whatever's
     actually left after the namecard takes its own (now bounded by the
     3-sentence caption truncation) space, rather than claiming a fixed
     75vh regardless of how much room the namecard needs. A tall portrait
     reel plus a long caption used to both want more room than 90vh had,
     and since .lightbox-content clips overflow, the loser was whichever
     one laid out second - the caption, in practice. */
  flex: 1 1 auto;
  min-height: 0;
}

.lightbox-media img,
.lightbox-media video {
  display: block;
  max-width: 100%;
  /* 100% of .lightbox-media's own (flex-resolved, so already definite)
     height - see the flex comment above. */
  max-height: 100%;
  /* video specifically (img doesn't need this) - without an explicit
     width/height, a <video> can report an intrinsic size based on its
     poster frame before its real metadata has loaded, and object-fit
     isn't "contain" by default the way max-width/max-height alone assume
     for a plain image - between the two, that let a reel's video still
     render taller than .lightbox-media's actual available space instead
     of shrinking to fit it. width/height: auto makes sure nothing pins an
     intrinsic dimension past what max-width/max-height already cap. */
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-media a {
  display: flex;
  cursor: pointer;
}

.lightbox-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

.lightbox-play-btn[hidden] {
  display: none;
}

.lightbox-namecard {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--fg);
  border-top: 1px solid rgba(128, 128, 128, 0.25);
}

.lightbox-namecard:hover {
  background: rgba(128, 128, 128, 0.08);
}

.lightbox-account {
  font-weight: 700;
  font-size: 0.9rem;
}

.lightbox-caption {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: pre-wrap;
}

/* Inline text, not a pill button - "See more"/"See less" reads as part of
   the caption sentence, not a separate control (see truncateCaptionSentences
   in app.js). */
.lightbox-caption-toggle {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--fg);
  text-decoration: underline;
  cursor: pointer;
}

/* Expanding switches to a bounded, scrollable box instead of growing
   freely - an unbounded caption is exactly what let a long one push
   .lightbox-content past its own max-height before this fix (see
   .lightbox-media's flex comment above for the other half of that). */
.lightbox-caption--expanded {
  display: block;
  max-height: 9rem;
  overflow-y: auto;
}

.site-footer {
  padding: 1rem 1.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--fg);
}

/* The Admin Tour link specifically - a gradient pill rather than a plain
   text link like its Github/Login siblings, so it reads as a call-to-
   action worth clicking rather than just another utility link. */
.footer-tour-link {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(to left, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff !important;
  font-weight: 600;
}

.footer-tour-link:hover {
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff !important;
}

.tile--see-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.see-more-pill {
  padding: 0.6rem 1.25rem;
  border: none;
  background: linear-gradient(to left, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

.row-list-load-more {
  align-self: center;
  margin-top: 0.4rem;
}

.see-more-pill:hover {
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* Secondary action, outlined rather than the bold gradient "See more" uses,
   so the two read as primary/secondary when they appear side by side (see
   renderRepostsByDate in app.js). */
.see-less-pill {
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.35);
  color: var(--fg);
}

.see-less-pill:hover {
  background: rgba(128, 128, 128, 0.15);
}

/* Reveals mbtininja's images (pulled out of the main Images grid, see
   MEMES_ACCOUNT in app.js) - outlined like .see-less-pill at rest, filled
   with the brand gradient once open, same active-state language as
   .filters-toggle-btn.is-active. */
.memes-toggle {
  /* Sits inside .section-see-more-row now, alongside "See more" - that
     row's own flex gap/margin handles spacing, so the block-level margin
     this used when it stood alone would just add uneven extra space here. */
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.memes-toggle:hover {
  background: rgba(128, 128, 128, 0.15);
}

.memes-toggle.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

#memes-row:not([hidden]) {
  margin-top: 1rem;
}

.repost-controls {
  display: flex;
  gap: 0.75rem;
  /* Top margin added on top of h2's own 0.75rem margin-bottom (see h2
     above) - brings the title-to-pills gap up to 0.9rem, matching
     .section-see-more-btn's own 0.9rem top margin (a tile row to its
     trailing "See more" button) so both "heading-like element to pill row
     beneath it" gaps read the same. */
  margin: 0.15rem 0 1.5rem;
}

.repost-sort-btn {
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Date/Channels/Added/Filters (.repost-controls' 4 buttons, shared by
   reposts/comments/following) wrap to as many as fit per line by default
   - at phone width that's often an awkward 3-then-1 or similar. A fixed
   2x2 grid fits all 4 on screen cleanly instead. The category filter
   pills (.category-filter-bar, a sibling of .repost-controls, shown once
   Filters is opened) get the exact same font-size as the Filters button
   itself here, not an independently-chosen smaller size - the opened
   panel should read as a continuation of the button that opened it. */
@media (max-width: 520px) {
  .repost-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .repost-controls .repost-sort-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  /* The type filter dropdown (All/Reposts/Bookmarks/Likes) is a 5th item
     in a 2-column grid - it'd otherwise fall into its own row stuck to
     column 1. Spanning both columns and centering its (auto-width)
     content puts it in the middle of that row instead of hugging the
     left edge. Padding/font-size matched to .repost-sort-btn's own mobile
     sizing above, same reasoning as the desktop .toolbar-select match -
     without it the <select> renders visibly thicker than its siblings. */
  .repost-controls .category-select.toolbar-select {
    grid-column: 1 / -1;
    justify-self: center;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  /* Smaller + tighter padding than the 0.8rem/default-padding above - that
     combo only ever fit 2 pills per row at phone width; this fits ~3.
     The --category variants below re-override padding at the same
     specificity as .category-filter-btn--category:not(.is-active)/.is-active
     further down this file (two classes each) - without matching that
     with the .category-filter-bar ancestor added here, this plain rule
     would lose that specificity tie (equal score, later source position
     wins) and every coloured pill except "All" would silently keep its
     desktop padding on mobile. */
  .category-filter-bar .category-filter-btn {
    font-size: 0.7825rem;
    padding: 0.35rem 0.5rem;
  }

  .category-filter-bar .category-filter-btn--category:not(.is-active) {
    padding: calc(0.35rem - 1px) calc(0.5rem - 1px);
  }

  .category-filter-bar .category-filter-btn--category.is-active {
    padding: 0.35rem 0.5rem;
  }

  /* Followed's filtered-down view (see .following-row--filtered above) -
     fixed 107px columns leave a chunk of unused width on the right at
     narrow frames instead of filling the row, which reads as "stuck to
     the left" (the thing being fixed here). 1fr columns stretch evenly to
     fill the full row width, which also centers each card within its own
     cell for free (.following-circle already centers its own content).
     A flat repeat(3, ...) rather than auto-fill - auto-fill's column
     count is sensitive to a few px either way (375/390px frames fit only
     2 of the fixed-width columns, 414/430px fit 3), and 3 is wanted
     across all of them. */
  .following-row--filtered {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Needs URL / Pending Check / Pending Category hitting 0 (see
   DONE_WHEN_ZERO_FILTERS in admin.js) - marked done in the site's own
   stock orange rather than the plain outline every other count uses.
   Placed before .is-active below (same specificity, source order decides)
   so actually having the tab open still takes visual priority over the
   done state. */
.repost-sort-btn--done {
  border-color: #f09433;
  background: #f09433;
  color: #fff;
}

/* The "Filters" pill (see wireFiltersToggle in app.js) - by default (not
   yet open) it's neither plain-outlined nor solid-filled like the other
   sort buttons, just a thick gradient ring around a transparent centre, so
   it reads as "always available" without looking like an active
   selection. Two background layers (padding-box + border-box) rather than
   border-image, since border-image doesn't respect border-radius
   consistently across browsers - this keeps the ring properly rounded.
   Padding is reduced by the extra border width (1px -> 3px) so the pill's
   outer size still lines up with its plain-bordered siblings in the same
   row. Once opened, .repost-sort-btn.is-active below (two classes, so
   higher specificity) takes over with the normal solid-fill "active" look,
   regardless of source order. */
.filters-toggle-btn {
  padding: calc(0.5rem - 2px) calc(1.2rem - 2px);
  border: 3px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) border-box;
}

/* Once open, .repost-sort-btn.is-active's single solid-gradient background
   takes over (see above) - but without this, the 3px transparent border
   above would still be in effect (.is-active only overrides border-color,
   not width), and that leftover 3px gap is wider than the gradient's own
   positioning area, so it tiles/repeats right at the edges instead of
   showing one continuous fill. Resetting the border back to the same 1px
   every other sort button uses (and restoring the padding taken from it
   above) removes that gap entirely. */
.filters-toggle-btn.is-active {
  border-width: 1px;
  padding: 0.5rem 1.2rem;
}

.repost-sort-btn.is-active {
  border-color: transparent;
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}

/* Category filter, reposts and comments - a pill per category actually
   present, plus "All". Category pills are always tinted with that
   category's own swatch colour (same fixed palette the admin Categories
   manager assigns from, and the same one a card's own badge uses - see
   .category-swatch-* further down), full-strength whether selected or not;
   the current selection is marked with a border ring instead of dimming
   the others, so a pill's colour always reads the same as its card badge.
   "All" instead uses the site's own brand gradient when active, like every
   other active sort/filter button on the site, since it isn't tied to one
   category. Bottom margin matches the heading's own margin+padding above
   the filter bar (0.75rem + 0.75rem), so the gap above and below the
   filter row is the same. */
.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  /* Negative top margin collapses against .repost-controls' own 1.5rem
     bottom margin (plain block siblings, same section, no flex/grid in
     between) - pulls this row up flush under the Filters button instead
     of leaving the full 1.5rem gap meant for "controls row to the content
     below it" when this bar is hidden. */
  margin: -1rem 0 1.5rem;
}

.category-filter-bar[hidden] {
  display: none;
}

/* Followed's own filter bar is the only one that's ever open by default
   (see filtersOpen in app.js) rather than only after clicking "Filters" -
   2px more breathing room than the shared -1rem above, specifically here,
   between it and "Alphabetical" above it. Interactions' filter bar gets
   the same nudge (requested separately) - Comments' is left at the
   shared -1rem, unchanged. */
#following-category-filter,
#repost-category-filter {
  margin-top: calc(-1rem + 2px);
}

.category-filter-btn {
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: "Newyear Coffee", system-ui, sans-serif;
  /* Matches .repost-sort-btn's own desktop font-size (0.9rem) - same
     "pills should read as a continuation of the Filters button that
     opened them" reasoning the mobile override already uses, just applied
     unconditionally now instead of only below 520px. Was 1.1rem, visibly
     bigger than every other control in this row. */
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Unselected: outlined only (transparent centre, thick colour ring from
   the swatch class' border-color) - solid fill only once actually picked
   (.is-active below), same "ring vs filled" language as .filters-toggle-btn.
   Border width differs between the two states (2px vs 1px), so padding is
   adjusted to compensate in each (same technique as .filters-toggle-btn's
   own active/inactive padding math) - otherwise the pill would visibly
   resize by that 1px difference when clicked. The :not(.is-active) (rather
   than a plain .category-filter-btn--category selector) is what actually
   wins over the swatch class' own `background` - both are single-class
   specificity otherwise, so without this a swatch class defined later in
   this file would silently win the cascade and fill it in regardless. */
.category-filter-btn--category:not(.is-active) {
  border-width: 2px;
  padding: calc(0.5rem - 1px) calc(1.2rem - 1px);
  background: transparent;
  color: var(--fg);
}

.category-filter-btn--category.is-active {
  border-width: 1px;
  border-color: transparent;
  padding: 0.5rem 1.2rem;
  color: #fff;
}

.category-filter-btn--all.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* A top-level category's pill + its expand arrow, plus - once expanded -
   its children, all in one row (flex-wrap lets it spill onto a second line
   at narrow widths rather than overflowing). A normal flex item alongside
   every other top-level group in .category-filter-bar (align-items:
   flex-start there stops it stretching to match a taller sibling).
   Deliberately inline/in-flow, not a popout underneath or a flyout - a
   flyout risked overflowing/getting clipped at narrow page widths (same
   reasoning admin's batch/month picker was reworked away from a popout
   earlier), and widening this row in place reads clearer than a dropdown
   block appearing under it. */
.category-filter-group-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.category-filter-btn--sub {
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
}

.category-filter-expand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

.category-filter-expand svg {
  transition: transform 0.15s ease;
}

.category-filter-expand.is-expanded svg {
  transform: rotate(180deg);
}

/* Category pill shown on a repost/comment card itself (not the filter bar)
   - always coloured, since it only renders when a category's actually
   assigned (see makeCategoryBadge in app.js). --overlay positions it over
   repost media tiles; plain, it's just an inline pill (link-style repost
   cards, comment cards). */
/* Outlined (swatch colour as a border, transparent centre) rather than a
   solid fill - same "ring, not filled" look as an unselected filter pill
   (.category-filter-btn--category). The swatch classes already set both
   background and border-color to the same colour (see further down this
   file); background is overridden back to transparent here rather than
   touched on the swatch classes themselves, since those are shared with
   places that still want the solid fill (the filter bar's own
   .is-active state). Padding is reduced by the border width added, so the
   badge's outer size doesn't change from what it was as a plain fill.
   The doubled selector (.category-badge.category-badge) bumps specificity
   above the swatch classes' own single-class background rule - same
   cascade trap as .category-filter-btn--category further up this file,
   same fix. */
.category-badge.category-badge {
  display: inline-flex;
  align-items: center;
  padding: calc(0.182rem - 2px) calc(0.667rem - 2px);
  padding-top: calc(0.182rem - 2px + 1px);
  border-width: 2px;
  border-style: solid;
  background: transparent;
  border-radius: 999px;
  font-family: "Newyear Coffee", system-ui, sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-badge--overlay {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  max-width: calc(100% - 0.8rem);
}

.repost-grid {
  display: grid;
  /* A literal fixed row of 10 on desktop - exactly 10 columns, not a
     width-dependent "however many fit" count (that was the actual bug in
     an earlier version of this rule: auto-fill recomputes the column
     count from the available width, which is a fundamentally different
     thing from "a row of ten" no matter how that count gets adjusted).
     Each column is a fixed --repost-card-width, not 1fr, so cards never
     stretch/shrink to fill the row either. The breakpoints below step
     the column count down for narrower screens (900px/520px, same cutoffs
     .comment-list already uses) rather than letting 10 fixed-width
     columns overflow a phone's screen.
     --repost-card-width is a custom property (not a bare value) so the
     handful of card-internal sizes that need to grow in step with it
     (.repost-card--link's own font-sizes/padding, .repost-type-icon) can
     reference the same number rather than several hand-tuned ones
     silently drifting apart next time this changes - each breakpoint
     below sets its own value, which every one of those rules picks up
     automatically. */
  --repost-card-width: 215px;
  grid-template-columns: repeat(10, var(--repost-card-width));
  justify-content: center;
  gap: 0.91rem;
}

@media (max-width: 900px) {
  .repost-grid {
    grid-template-columns: repeat(3, var(--repost-card-width));
  }
}

@media (max-width: 520px) {
  .repost-grid {
    /* 2 columns side by side, same as the "See more" buttons above them
       (.repost-controls) - calc(100vw - 3rem - 0.91rem) is the actual
       available width (viewport minus main's 1.5rem side padding minus
       the one gap between the two columns), halved for one column's
       share. Not a bare vw percentage - that overhangs past the padded
       content area the same way an earlier version of .tile-row--reels'
       mobile width did. min()'s 200px cap matters once this breakpoint's
       width gets close to 520px and the calc'd share would otherwise
       exceed what a 2-column card actually needs to look right. */
    --repost-card-width: min(calc((100vw - 3rem - 0.91rem) / 2), 200px);
    grid-template-columns: repeat(2, var(--repost-card-width));
  }

  /* Deliberately not overridden further here - at ~200px this card is
     close enough to the desktop 215px card that the desktop font-sizes
     above already fit it properly, unlike the old single-full-width-
     column design this replaced (which needed genuinely bigger text for
     its ~350-420px card). */

  /* At this card's ~130px text column, "View on Instagram ↗" wraps
     regardless of the nbsp keeping "on"/"Instagram" together (see
     makeRepostCard in app.js) - rather than chase padding/truncation
     around the icon's fixed corner position, the icon moves into normal
     flow alongside the text instead (see .repost-cta-row above/
     .repost-type-icon below), so wherever the text wraps to there's
     nothing for it to run underneath. */
  .repost-cta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Flex items default to a content-based min-width (effectively "don't
     shrink narrower than my longest word"), which here still left
     "Instagram ↗" wide enough to run past the icon rather than wrapping
     inside its actually-available width. min-width: 0 lets it shrink (and
     wrap) to fit the space left over after the icon's own fixed width. */
  .repost-cta {
    min-width: 0;
  }

  /* .repost-cta-row ancestor added to beat the unconditional (always-
     applies) .repost-type-icon.repost-type-icon rule further down this
     file - same specificity (two classes) otherwise, and that rule's
     later source position would win the tie regardless of this media
     query, leaving position: absolute in effect and the icon still
     pinned on top of the text instead of moving into flow beside it. */
  .repost-cta-row .repost-type-icon.repost-type-icon {
    position: static;
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.95rem;
  }
}

.repost-grid.repost-grid--channels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Extra space stacked on top of the flex gap above, only on the first row/
   group at a new post-count (see renderRepostsByChannel in app.js) - so
   the point where "4 posts" rows give way to "3 posts" ones reads as an
   actual break, not just more of the same uniform gap the whole list uses
   otherwise. */
.repost-row-group-break {
  margin-top: 1.5rem;
}

.repost-grid.repost-grid--batches {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.repost-batch-header {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--fg);
}

/* One row per batch (reposts' "Added" view) - capped at a fixed card count
   with a trailing see-more card, rather than the horizontal-scroll pattern
   .repost-channel-scroll uses. --wrap is toggled on once that see-more's
   been clicked, so an expanded row flows onto further lines instead of
   staying single-row and overflowing. */
.batch-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  /* Room for a repost card's New flag to poke above without being clipped
     by this row's own overflow:hidden (used to keep the collapsed view to
     one row - see .batch-row--wrap below). */
  padding-top: 8px;
  overflow: hidden;
}

@media (max-width: 520px) {
  /* Desktop's overflow: hidden relies on the row actually being wide
     enough to fit every card without needing to - not true on a phone
     screen, where most of the row (including the trailing see-more card,
     same one desktop has at the end of it) was just getting silently
     clipped off with no way to reach it. Swapping to overflow-x: auto
     keeps the exact same single-row/see-more-at-the-end structure, just
     reachable by scrolling right instead of assuming it already fits. */
  .batch-row {
    overflow-x: auto;
  }
}

.batch-row.batch-row--wrap {
  flex-wrap: wrap;
  overflow: visible;
}

.batch-row .repost-card {
  width: min(46.1vw, 194px);
  flex-shrink: 0;
}

.batches-see-more-row {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

.repost-channel-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.repost-channel-label {
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.repost-channel-label:hover .repost-channel-name {
  text-decoration: underline;
}

.repost-channel-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
}

.repost-channel-name {
  font-size: 0.95rem;
  font-weight: 600;
  max-width: 96px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.repost-channel-count {
  font-size: 0.75rem;
  color: var(--muted);
}

.repost-channel-scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(46.1vw, 182px);
  gap: 0.6rem;
  overflow-x: auto;
  /* overflow-x: auto implicitly computes overflow-y to auto too, which
     clips a card's New flag poking above - same fix as .tile-row--reels. */
  padding-top: 8px;
  padding-bottom: 0.3rem;
}

/* Followed - a single horizontally-scrolling row (not a wrapping grid with
   its own see-more pagination, unlike Reels/Images), same grid-auto-flow:
   column/overflow-x pattern as .repost-channel-scroll above. */
.following-row {
  /* Anchors addFollowingScrollHint's hint (position: absolute) to this
     row's own box - without it, that absolutely positioned button would
     escape to the nearest actually-positioned ancestor further up the
     page instead of sitting at this row's right edge. */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 107px;
  gap: 1.28rem;
  overflow-x: auto;
  /* overflow-x: auto with overflow-y left at its initial "visible" also
     silently clips the y-axis (browsers compute an unset overflow-y as
     auto whenever the other axis isn't visible) - the new flag icon pokes
     above the avatar via a negative top offset, so without this padding
     its top edge gets cut off by that implicit clip. */
  padding-top: 10px;
  padding-bottom: 0.3rem;
}

/* Swaps the horizontal scroller above for a wrapping grid while a category
   filter is active (see renderFollowingRow in app.js) - a filtered-down
   handful of results reads better across a few short rows than as a tiny
   scroll strip the full unfiltered list needs. */
.following-row--filtered {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, 107px);
  overflow-x: visible;
}

.following-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.following-circle:hover .following-handle {
  text-decoration: underline;
}

/* Already clicked through to their profile (see markFollowingSeen in
   app.js) - same lightweight "you've seen this one" dim as reposts. */
.following-circle--seen {
  opacity: 0.5;
}

/* Thick solid-colour ring instead of a filled circle - the per-channel
   hash colour (avatar-color-N, applied to this same element) now sets
   --avatar-color instead of just filling the background, so it can be
   read here as the border colour while the middle stays the page
   background - same "ring, not filled" language as the filters button,
   just a solid colour ring rather than that button's gradient one. The
   doubled selector bumps specificity above avatar-color-N's own
   background rule (defined later in this file, otherwise same single-
   class specificity would let it silently win the cascade) - same fix
   pattern as .category-filter-btn--category/.category-badge above. */
.following-avatar.following-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border-style: solid;
  border-width: 4.4px;
  border-color: var(--avatar-color, currentColor);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Newyear Coffee", system-ui, sans-serif;
  font-size: 1.78rem;
  font-weight: 700;
  color: var(--fg);
  background: var(--bg);
}

/* One "New" flag-on-a-pole for every section (see makeNewFlag in app.js) -
   built from two plain spans, pole on the left, rectangular "NEW" banner
   attached to its top-right. Inline by default (comment cards, link-style
   repost cards); --overlay positions it absolutely instead, for anything
   it sits on top of (repost/reel/image tiles, Followed's avatar circle -
   all already position:relative). Extra top margin/padding on the pole
   below gives the wave animation's upward skew room to clear the flag's
   own top edge without visually clipping. */
.new-flag {
  display: inline-flex;
  align-items: flex-start;
  vertical-align: top;
}

.new-flag--overlay {
  position: absolute;
  top: -7px;
  right: -8px;
}

/* Followed handles specifically sit closer to the flag than other overlay
   contexts (a much smaller circle) - nudged further up and right so it
   doesn't crowd the letter in the middle. */
.following-avatar .new-flag--overlay {
  top: -11px;
  right: -12px;
}

/* Reels' doubled-size flag (see .new-flag--large below) needs a bigger
   negative offset to keep the same "pole pokes above the tile" amount at
   2x scale - at the normal offset, the larger pole's own top-margin would
   put it below the tile's top edge instead of above it. */
/* Pulled in from the base -8px (not just top adjusted, like --medium
   below) - this flag's bigger banner was landing with its right edge
   exactly at the tile's content-area boundary (tile right edge + 8px
   overhang == the page's own right padding limit) on narrow/mobile
   layouts, reading as crowding the page edge rather than sitting neatly
   on the tile's corner. */
.new-flag--large.new-flag--overlay {
  top: -10px;
  right: 4px;
}

.new-flag-pole {
  width: 2px;
  height: 18px;
  margin-top: 3px;
  background: var(--fg);
  border-radius: 1px;
}

/* Gentle flutter, pivoting from the pole-attached edge (left) like a real
   flag would - kept small/slow so it reads as a subtle detail, not a
   distraction. */
@keyframes flag-wave {
  0%,
  100% {
    transform: skewY(0deg);
  }
  50% {
    transform: skewY(-6deg);
  }
}

.new-flag-banner {
  margin-top: 1px;
  margin-left: -1px;
  padding: 2px 4px 1px 5px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* 1, not the more typical >1, so the padding above/below the text is
     actually symmetric - a taller line-height adds invisible leading that
     font metrics don't always split evenly top/bottom, same issue fixed on
     the h2 titles elsewhere in this file. */
  line-height: 1;
  color: #fff;
  background: linear-gradient(to right, #f09433, #bc1888);
  border-radius: 0 3px 3px 0;
  white-space: nowrap;
  transform-origin: left center;
  animation: flag-wave 2.2s ease-in-out infinite;
}

/* Images only (see newFlagSizeForVariant) - a slighter bump than reels'
   --large below, same proportions otherwise. */
.new-flag--medium .new-flag-pole {
  width: 3px;
  height: 24px;
  margin-top: 4px;
}

.new-flag--medium .new-flag-banner {
  margin-top: 1px;
  margin-left: -1px;
  padding: 3px 5px 1px 6px;
  font-size: 0.65rem;
  border-radius: 0 4px 4px 0;
}

/* Same reasoning as --large above, pulled in a bit less since this
   banner's smaller. */
.new-flag--medium.new-flag--overlay {
  top: -8px;
  right: 2px;
}

/* Reels only (see newFlagSizeForVariant) - every dimension doubled, same
   proportions otherwise. */
.new-flag--large .new-flag-pole {
  width: 4px;
  height: 36px;
  margin-top: 6px;
}

.new-flag--large .new-flag-banner {
  margin-top: 2px;
  margin-left: -2px;
  padding: 4px 8px 2px 10px;
  font-size: 1rem;
  border-radius: 0 6px 6px 0;
}

.following-handle {
  font-family: "Newyear Coffee", system-ui, sans-serif;
  font-size: 1.01rem;
  font-weight: 600;
  max-width: 107px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Channels with few posts (<= COMPACT_THRESHOLD in app.js) get a compact
   block instead of a full-width row, sized to just their own posts so
   several sit side by side on one line. Capped to a single row with a
   trailing see-more card (see renderCompactCountRow in app.js), same
   single-row-then-wrap pattern as .batch-row - --wrap is toggled on once
   that see-more's been clicked. */
.repost-compact-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.1rem;
  padding-top: 8px;
  overflow: hidden;
}

.repost-compact-row.repost-compact-row--wrap {
  flex-wrap: wrap;
  overflow: visible;
}

.repost-compact-block {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.9rem;
}

/* The see-more card sits directly in .repost-compact-row (a sibling of the
   blocks, not nested inside one), so it needs its own sizing - same width
   as the cards inside each compact block. */
.repost-compact-row > .repost-card--see-more {
  width: min(46.1vw, 182px);
  flex-shrink: 0;
}

.repost-compact-cards {
  display: flex;
  gap: 0.6rem;
}

.repost-compact-cards .repost-card {
  width: min(46.1vw, 182px);
  flex-shrink: 0;
}

.repost-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--tile-bg);
  border-radius: 8px;
}

/* The plain date grid only (#repost-grid's direct children - channel/batch
   views nest their cards inside .repost-channel-scroll/batch rows instead,
   so this doesn't reach them, and they keep the square aspect-ratio
   above). aspect-ratio alone only sets a *preferred* height - a card
   whose content (caption, clamped to 4 lines) needs more room than the
   square allows still grows taller to fit it, since nothing was clipping
   the overflow, while a card with a short caption just sits at the square
   height. That's what was making short-caption cards look visibly
   smaller than full ones in the same row. Dropping the ratio here lets
   the grid's own default (align-items: stretch) take over instead, which
   stretches every card in a row to match that row's tallest one - so a
   blank/short card is forced to the same height as its full-text
   row-mates, rather than shrinking to its own smaller minimum. */
.repost-grid > .repost-card {
  aspect-ratio: unset;
}

/* Already clicked through to Instagram (see markRepostSeen in app.js) -
   dimmed as a lightweight "you've seen this one" marker, tracked per
   browser via localStorage rather than anything server-side. */
.repost-card--seen {
  opacity: 0.5;
}

/* Same dim-on-click treatment as .repost-card--seen above, applied to the
   whole comment card (see makeCommentCard in app.js) once its "On
   @owner's post" link has actually been clicked. */
.comment-card--seen {
  opacity: 0.5;
}

.repost-card--see-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.repost-channel-see-more-row {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

.repost-card--link {
  display: flex;
  flex-direction: column;
  gap: 0.46rem;
  padding: 1rem;
  text-decoration: none;
  color: var(--fg);
}

.repost-channel {
  font-weight: 700;
  /* Matches .repost-cta's own font-size below (0.85rem) - was 1.13rem,
     visibly bigger than everything else on the card. */
  font-size: 0.85rem;
}

.repost-caption {
  font-size: 1.07rem;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Wraps .repost-cta + .repost-type-icon (see makeRepostCard in app.js) -
   on desktop this is just a plain block carrying the margin-top:auto that
   used to sit on .repost-cta directly (the icon stays absolutely
   positioned over .repost-card's own corner regardless, see
   .repost-type-icon below), but the mobile breakpoint turns it into a
   real flex row so the icon sits beside the text instead of overlapping
   whichever line of wrapped text happens to end up at the bottom. */
.repost-cta-row {
  margin-top: auto;
}

.repost-cta {
  font-size: 0.85rem;
  color: #f09433;
  font-weight: 600;
}

/* Pinned to the card's bottom-right corner (same padding as the card's own
   edge, so it lines up flush with it) rather than sitting inline with the
   CTA text - stays put regardless of how long "View on Instagram" wraps.
   Doubled selector bumps specificity above the swatch class' own
   background rule, same fix as .category-badge above - border colour
   comes from the swatch class, background stays the page background. */
.repost-type-icon.repost-type-icon {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.13rem;
  height: 2.13rem;
  border-radius: 50%;
  border: 2px solid rgba(128, 128, 128, 0.35);
  background: var(--bg);
  font-size: 1.07rem;
  line-height: 1;
}

.empty-state {
  color: var(--muted);
  font-size: 0.99rem;
}

.comment-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.04rem;
}

@media (max-width: 900px) {
  .comment-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .comment-list {
    grid-template-columns: 1fr;
  }

  /* Scaled up from the desktop values below, same reasoning as
     .repost-grid's mobile breakpoint - a card that's now the full screen
     width has room for bigger text, not the same size squeezed into more
     whitespace. */
  .comment-username {
    font-size: 1.15rem;
  }

  .comment-text {
    font-size: 1.15rem;
  }
}

.comment-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--tile-bg);
  border-radius: 12px;
  padding: 0.75rem 1.04rem;
}

/* Desktop's embedded see-more card only (see makeCommentSeeMoreCard in
   app.js) - mobile uses the standalone buttons instead. */
.comment-body--see-more {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.comment-username {
  display: block;
  margin-top: 0.3rem;
  font-weight: 700;
  font-size: 1.04rem;
  color: inherit;
  text-decoration: none;
}

.comment-username:hover {
  text-decoration: underline;
}

/* Same outlined-pill look .category-badge uses, just neutral/muted rather
   than a category colour - a plain inline date read as an afterthought
   next to the category pill it used to sit beside in .comment-head. */
.comment-date {
  display: inline-flex;
  align-items: center;
  padding: calc(0.182rem - 1px) calc(0.667rem - 1px);
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
}

.comment-text {
  margin: 0.2rem 0 0;
  font-size: 1.04rem;
  color: var(--fg);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Admin page (admin.html/admin.js) - shares this stylesheet with the main
   site (brand-title, site-header, repost-sort-btn, see-more-pill, etc. are
   already defined above); everything below is admin-only. */

.admin-login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-login-view[hidden] {
  display: none;
}

.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(320px, 90vw);
  text-align: center;
}

.admin-login-form input {
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
}

.admin-login-form button {
  padding: 0.6rem 0.75rem;
  border: none;
  background: linear-gradient(to left, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}

.admin-error {
  color: #e74c3c;
  font-size: 0.85rem;
  margin: 0;
}

.admin-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

.session-modal-links {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.session-modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.admin-export-link {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.admin-export-link:hover {
  background: rgba(128, 128, 128, 0.15);
}

/* Colour-codes the header's export links into groups by what they're for -
   Comments/Reposts/Bookmarks (checking real activity against a row) share
   one colour, GitHub (troubleshooting) and Export (downloading your data)
   each get their own. Same three classes/colours the demo tour uses on
   these same links. */
.header-link--activity {
  color: #f09433;
  border-color: #f09433;
}

.header-link--github {
  color: #cc2366;
  border-color: #cc2366;
}

.header-link--export {
  color: #bc1888;
  border-color: #bc1888;
}

/* Same visual tier as .admin-export-link (header-level standalone action),
   deliberately not styled like the .repost-sort-btn pills used in the
   toolbar rows below - Import is its own separate "thing", not grouped
   with dataset-switching/Categories. */
.admin-import-btn {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.admin-import-btn:hover {
  background: rgba(128, 128, 128, 0.15);
}

.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.admin-pill-group {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* A batch's own button, plus (once active) its month row and, one level
   further, a fortnight row - see renderBatchBar in admin.js. Deliberately
   plain in-flow (no position: absolute/fixed anywhere here), so each row
   just pushes whatever's below it down rather than overlaying it - a
   flyout was tried first and dropped: it risked overflowing off-screen on
   narrow viewports, and hid the current month/fortnight pick behind having
   to reopen it, when the batch button's own label already shows that pick
   directly. */
.batch-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.batch-sub-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(128, 128, 128, 0.2);
}

.batch-sub-row--fortnight {
  padding-left: 1.5rem;
}

.admin-save-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: linear-gradient(to left, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

.admin-save-btn:disabled {
  background: var(--tile-bg);
  color: var(--muted);
  cursor: default;
}

.admin-body {
  display: flex;
  align-items: flex-start;
}

.admin-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.25rem 1.5rem;
}

/* Shared by the post-pane-close button's now-removed pane and the import/
   categories modal close buttons below - kept for those two, even though
   the pane itself (post previews are real popup windows now, see
   openPostPreview/openFollowedProfilePreview in admin.js) is gone. */
.admin-post-pane-close {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}

.admin-post-pane-close:hover {
  background: rgba(128, 128, 128, 0.2);
}

.admin-subheading {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 1.5rem 0 0.75rem;
}

.admin-row-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem 0.75rem;
  background: var(--tile-bg);
  border-radius: 10px;
}

/* Dims every other direct child (row-controls, row-id-col, row-body) so a
   locked row reads as visibly inert, alongside the disabled attribute
   makeRowEl sets on every other real control - the lock checkbox's own
   column is excluded so it stays fully visible/clickable regardless
   (opacity on .row itself would dim it too, since a child can't opt back
   out of a parent's reduced opacity). */
.row--locked > *:not(.row-lock-col) {
  opacity: 0.6;
}

.row-lock-col {
  flex: 0 0 auto;
  padding-top: 0.2rem;
}

.row-lock-checkbox {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  accent-color: #cc2366;
}

.row-controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.toggle-group {
  flex: 0 0 auto;
  display: flex;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.category-picker {
  flex: 0 0 auto;
}

.category-select,
.category-input {
  padding: 0.2rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.7rem;
}

.category-input {
  width: 6.5rem;
  max-width: 6.5rem;
}

/* Deliberately no explicit width - an unstyled <select>'s closed box sizes
   itself to the currently selected option's text natively ("Bikes" ends up
   narrower than "Philosophy"), while the open dropdown popup still renders
   as wide as its longest option regardless of the closed box's width. */
.category-select {
  width: auto;
}

/* The two action-toolbar dropdowns (category-filter-select, account-filter-
   select) specifically, not every .category-select - the per-row category
   picker also uses .category-select and needs to stay compact in a dense
   row list. Matches .repost-sort-btn's own padding/font-size (same row as
   comment-length-sort-btn) so all three read as one consistent set of
   controls rather than the dropdowns looking visibly smaller. */
.category-select.toolbar-select {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
}

/* Followed's multiselect (see makeCategoryPicker) - a scrollable listbox,
   not a single-line pill, so the fully-rounded pill radius/padding above
   don't suit it. */
.category-select[multiple] {
  width: 12rem;
  padding: 0.2rem;
  border-radius: 8px;
}

.category-select:focus,
.category-input:focus {
  outline: none;
  border-color: #f09433;
}

.category-picker {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Small colour dot next to the category select, reflecting the row's
   current category. Kept as its own element rather than colouring the
   select/option itself - the site's CSP (style-src 'self', no
   unsafe-inline) means colours have to come from real stylesheet classes,
   same reason avatar colours are fixed classes rather than inline styles
   (see avatar-color-* below) - so the palette is a fixed set of swatch
   classes, not arbitrary user-picked hex. */
.category-swatch {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.35);
}

.category-swatch-none {
  background: transparent;
}

/* Same 12-colour palette used both for the row-level swatch dot and the
   swatch picker buttons in the Categories modal - keeping it a fixed,
   finite set (rather than a free colour picker) is what lets these render
   as real background colours under the site's CSP. Evenly sampled along
   the site's own brand-title/button gradient (#f09433 -> #e6683c ->
   #dc2743 -> #cc2366 -> #bc1888, see brand-title/admin-save-btn/
   avatar-color-* above) rather than an arbitrary palette, so the swatches
   read as site-styled - orange through red into pink/magenta. */
.category-swatch-0 { background: rgb(240, 148, 51); border-color: rgb(240, 148, 51); }
.category-swatch-1 { background: rgb(236, 132, 54); border-color: rgb(236, 132, 54); }
.category-swatch-2 { background: rgb(233, 116, 58); border-color: rgb(233, 116, 58); }
.category-swatch-3 { background: rgb(229, 98, 61); border-color: rgb(229, 98, 61); }
.category-swatch-4 { background: rgb(225, 74, 63); border-color: rgb(225, 74, 63); }
.category-swatch-5 { background: rgb(222, 51, 66); border-color: rgb(222, 51, 66); }
.category-swatch-6 { background: rgb(217, 38, 73); border-color: rgb(217, 38, 73); }
.category-swatch-7 { background: rgb(211, 37, 86); border-color: rgb(211, 37, 86); }
.category-swatch-8 { background: rgb(205, 35, 99); border-color: rgb(205, 35, 99); }
.category-swatch-9 { background: rgb(200, 32, 111); border-color: rgb(200, 32, 111); }
.category-swatch-10 { background: rgb(194, 28, 124); border-color: rgb(194, 28, 124); }
.category-swatch-11 { background: rgb(188, 24, 136); border-color: rgb(188, 24, 136); }

/* Multi-category badges (see splitCategoryValue in app.js) - a row tagged
   with 2-3 categories at once gets an outlined ring with a gradient
   border blending each one's real swatch colour, matching the single-
   colour outlined-ring look every other badge above uses (not a solid
   filled pill) - just a gradient ring instead of a solid-colour one.
   The two-layer background (padding-box filled with --tile-bg, border-box
   carrying the actual gradient) is the same technique .filters-toggle-btn
   uses for its own gradient ring elsewhere in this file - border-image
   would be the more obvious way to do a gradient border, but it doesn't
   respect border-radius consistently across browsers, which this needs
   for the fully-rounded pill shape. --tile-bg (not --bg) since both real
   call sites (repost cards, comment cards) sit on a --tile-bg background,
   not the page background - this never renders as an overlay-on-image
   badge in practice despite makeCategoryBadge supporting that option.
   Pre-generated for every ascending pair/triple of the 12 swatch indices
   (not computed inline) since the site's CSP (style-src self, no
   unsafe-inline) blocks a JS-set gradient via element.style - same reason
   the single-colour swatches above are fixed classes, not arbitrary hex.
   categorySwatchClassFor in app.js picks the matching class by sorting a
   row's distinct swatch indices ascending; a 4th+ distinct colour (no
   current data has one) falls back to the first 3, sorted. */
.category-badge.category-split-0-1 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-2 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(233, 116, 58)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-3 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(229, 98, 61)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-1-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(236, 132, 54), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-3 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(229, 98, 61)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-2-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(233, 116, 58), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-3-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(229, 98, 61), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-4-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(225, 74, 63), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-4-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(225, 74, 63), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-4-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(225, 74, 63), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-4-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(225, 74, 63), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-4-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(225, 74, 63), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-4-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(225, 74, 63), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-4-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(225, 74, 63), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-5-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(222, 51, 66), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-5-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(222, 51, 66), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-5-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(222, 51, 66), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-5-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(222, 51, 66), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-5-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(222, 51, 66), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-5-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(222, 51, 66), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-6-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(217, 38, 73), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-6-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(217, 38, 73), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-6-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(217, 38, 73), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-6-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(217, 38, 73), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-6-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(217, 38, 73), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-7-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(211, 37, 86), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-7-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(211, 37, 86), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-7-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(211, 37, 86), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-7-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(211, 37, 86), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-0-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(240, 148, 51), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-3 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(229, 98, 61)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-2-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(233, 116, 58), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-3-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(229, 98, 61), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-4-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(225, 74, 63), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-4-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(225, 74, 63), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-4-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(225, 74, 63), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-4-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(225, 74, 63), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-4-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(225, 74, 63), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-4-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(225, 74, 63), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-4-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(225, 74, 63), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-5-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(222, 51, 66), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-5-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(222, 51, 66), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-5-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(222, 51, 66), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-5-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(222, 51, 66), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-5-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(222, 51, 66), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-5-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(222, 51, 66), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-6-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(217, 38, 73), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-6-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(217, 38, 73), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-6-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(217, 38, 73), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-6-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(217, 38, 73), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-6-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(217, 38, 73), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-7-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(211, 37, 86), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-7-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(211, 37, 86), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-7-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(211, 37, 86), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-7-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(211, 37, 86), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-1-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(236, 132, 54), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3-4 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61), rgb(225, 74, 63)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-3-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(229, 98, 61), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-4-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(225, 74, 63), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-4-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(225, 74, 63), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-4-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(225, 74, 63), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-4-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(225, 74, 63), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-4-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(225, 74, 63), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-4-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(225, 74, 63), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-4-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(225, 74, 63), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-5-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(222, 51, 66), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-5-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(222, 51, 66), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-5-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(222, 51, 66), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-5-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(222, 51, 66), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-5-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(222, 51, 66), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-5-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(222, 51, 66), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-6-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(217, 38, 73), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-6-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(217, 38, 73), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-6-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(217, 38, 73), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-6-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(217, 38, 73), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-6-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(217, 38, 73), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-7-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(211, 37, 86), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-7-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(211, 37, 86), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-7-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(211, 37, 86), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-7-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(211, 37, 86), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-2-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(233, 116, 58), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-4-5 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(225, 74, 63), rgb(222, 51, 66)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-4-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(225, 74, 63), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-4-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(225, 74, 63), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-4-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(225, 74, 63), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-4-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(225, 74, 63), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-4-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(225, 74, 63), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-4-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(225, 74, 63), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-5-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(222, 51, 66), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-5-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(222, 51, 66), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-5-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(222, 51, 66), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-5-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(222, 51, 66), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-5-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(222, 51, 66), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-5-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(222, 51, 66), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-6-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(217, 38, 73), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-6-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(217, 38, 73), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-6-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(217, 38, 73), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-6-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(217, 38, 73), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-6-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(217, 38, 73), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-7-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(211, 37, 86), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-7-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(211, 37, 86), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-7-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(211, 37, 86), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-7-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(211, 37, 86), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-3-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(229, 98, 61), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-5-6 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(222, 51, 66), rgb(217, 38, 73)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-5-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(222, 51, 66), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-5-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(222, 51, 66), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-5-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(222, 51, 66), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-5-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(222, 51, 66), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-5-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(222, 51, 66), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-6-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(217, 38, 73), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-6-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(217, 38, 73), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-6-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(217, 38, 73), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-6-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(217, 38, 73), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-6-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(217, 38, 73), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-7-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(211, 37, 86), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-7-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(211, 37, 86), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-7-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(211, 37, 86), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-7-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(211, 37, 86), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-4-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(225, 74, 63), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-6-7 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(217, 38, 73), rgb(211, 37, 86)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-6-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(217, 38, 73), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-6-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(217, 38, 73), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-6-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(217, 38, 73), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-6-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(217, 38, 73), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-7-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(211, 37, 86), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-7-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(211, 37, 86), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-7-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(211, 37, 86), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-7-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(211, 37, 86), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-5-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(222, 51, 66), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-7-8 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(211, 37, 86), rgb(205, 35, 99)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-7-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(211, 37, 86), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-7-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(211, 37, 86), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-7-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(211, 37, 86), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-6-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(217, 38, 73), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-8-9 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(205, 35, 99), rgb(200, 32, 111)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-8-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(205, 35, 99), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-8-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(205, 35, 99), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-7-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(211, 37, 86), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-8-9-10 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(205, 35, 99), rgb(200, 32, 111), rgb(194, 28, 124)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-8-9-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(205, 35, 99), rgb(200, 32, 111), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-8-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(205, 35, 99), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }
.category-badge.category-split-9-10-11 { background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(to right, rgb(200, 32, 111), rgb(194, 28, 124), rgb(188, 24, 136)) border-box; border-color: transparent; color: var(--fg); }

/* Fixed side panel, not a modal overlay - deliberately leaves the row list
   underneath interactive (no backdrop), same spirit as the old popup
   window it replaces (see wireInlinePostLink in admin.js) but genuinely
   inline this time, powered by a real authenticated fetch rather than a
   new browser window. */
.post-preview-pane {
  position: fixed;
  top: 5rem;
  right: 1rem;
  width: min(380px, calc(100vw - 2rem));
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  z-index: 8;
}

.post-preview-pane[hidden] {
  display: none;
}

.post-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  font-weight: 700;
}

.post-preview-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.post-preview-body img,
.post-preview-body video {
  width: 100%;
  border-radius: 6px;
  display: block;
}

.post-preview-caption {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: pre-wrap;
}

.post-preview-error {
  font-size: 0.85rem;
  color: var(--muted);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 1rem;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-panel {
  width: min(420px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Import needs more room than Categories' plain name/swatch list - a
   staged-file list plus a parse-result summary reads cramped at 420px. */
.modal-panel--wide {
  width: min(560px, 100%);
}

.admin-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.import-staged-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.import-staged-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  font-size: 0.85rem;
}

.import-staged-name {
  flex: 1 1 auto;
  overflow-wrap: break-word;
}

.import-staged-remove {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}

.import-staged-remove:hover {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.import-save-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* Same gradient treatment as .brand-title, scaled down to modal-header's
   1.1rem instead of the page h1's 3.6rem. */
.session-modal-title {
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.categories-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.categories-list-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.categories-list-name {
  flex: 1 1 auto;
  font-size: 0.85rem;
  overflow-wrap: break-word;
}

.categories-list-delete {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}

.categories-list-delete:hover {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.swatch-btn {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}

.swatch-btn.is-active {
  border-color: var(--fg);
}

.categories-add-row {
  display: flex;
  gap: 0.5rem;
}

/* Sub-categories (e.g. Bikes' Girl Bikers/Australian Bikers/Companies) -
   indented mini section directly beneath their parent's own row, with a
   scoped add-row for creating more under that same parent. */
.categories-list-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 0.6rem 1.4rem;
  padding-left: 0.6rem;
  border-left: 2px solid rgba(128, 128, 128, 0.2);
}

.categories-list-row--sub {
  border-bottom: 1px dashed rgba(128, 128, 128, 0.2);
}

.categories-add-row--sub input {
  font-size: 0.8rem;
}

.categories-add-row input,
#action-toolbar input {
  flex: 1 1 auto;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.85rem;
}

.toggle-circle {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid rgba(128, 128, 128, 0.35);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.toggle-circle--neutral.is-active {
  background: rgba(128, 128, 128, 0.35);
  border-color: rgba(128, 128, 128, 0.6);
}

.toggle-circle--green {
  border-color: #2ecc71;
}

.toggle-circle--green.is-active {
  background: #2ecc71;
}

/* Followed only (see makeToggleGroup) - sits between green and red,
   "maybe/double-check later": same hidden:true effect as red, just
   visually distinguishable from a definite one. */
.toggle-circle--amber {
  border-color: #f1a93c;
}

.toggle-circle--amber.is-active {
  background: #f1a93c;
}

.toggle-circle--red {
  border-color: #e74c3c;
}

.toggle-circle--red.is-active {
  background: #e74c3c;
}

.row-id-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 3.5rem;
}

.row-id {
  color: var(--muted);
  font-size: 0.8rem;
  padding-top: 0.2rem;
}

.row-id--link {
  color: #f09433;
  text-decoration: none;
}

/* "This comment's auto-resolved url is actually wrong" - clears it and
   reopens the url picker (see makeRowEl in admin.js). Narrow/wrapping to
   fit .row-id-col's fixed width, same muted-until-hovered treatment as
   .row-text-see-more so it doesn't compete visually with the real actions
   in .row-controls. */
.row-reset-url-btn {
  width: 100%;
  padding: 0.2rem 0.3rem;
  border: 1px solid rgba(231, 76, 60, 0.4);
  border-radius: 6px;
  background: transparent;
  color: #e74c3c;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.row-reset-url-btn:hover {
  background: rgba(231, 76, 60, 0.12);
}

/* Followed only (see makeFollowingDeleteButton in admin.js) - a soft
   `deleted` field toggle, same shape as locked, but still styled as a
   clearly destructive action since it drops the row off the public site:
   solid red once active, not just the outlined-ring look every other
   control uses. */
.row-delete-btn {
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(231, 76, 60, 0.5);
  border-radius: 6px;
  background: transparent;
  color: #e74c3c;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.row-delete-btn:hover {
  background: rgba(231, 76, 60, 0.12);
}

.row-delete-btn.is-active {
  background: #e74c3c;
  border-color: #e74c3c;
  color: #fff;
}

/* Same "every other control dims, visibly inert" treatment as
   .row--locked, but on top of the lock column too this time - a deleted
   row doesn't need locking, and this reads as more final than a lock
   (matched by .row-delete-btn's solid-red fill rather than an outline). */
.row--pending-delete > *:not(.row-controls) {
  opacity: 0.5;
}

.row-id--link:hover {
  text-decoration: underline;
}

/* Which of the site's own accounts made this comment - see ACCOUNT_LETTERS
   in admin.js. Links out to Instagram's own comment-activity page. */
.row-account-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.35);
  color: var(--fg);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}

.row-account-badge:hover {
  border-color: #f09433;
  color: #f09433;
}

.row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.row-meta {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.row-channel {
  font-weight: 700;
  font-size: 0.85rem;
  color: inherit;
  text-decoration: none;
}

.row-channel:hover {
  text-decoration: underline;
}

.row-date {
  font-size: 0.75rem;
  color: var(--muted);
}

.row-text {
  position: relative;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Once "See more" is clicked (see makeRowEl in admin.js), the row
   re-renders with this instead of the clamp above, showing the full text. */
.row-text--expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Sits inside the clamped .row-text itself (position: relative above), so
   it lands right at the bottom-right corner of the visible 3rd line rather
   than as a separate element below the text. Faded background (matching
   .row's own) rather than a solid one, so it reads as part of the last
   line fading out instead of a harsh box sitting over the text. */
.row-text-see-more {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 1.5rem;
  border: none;
  background: linear-gradient(to right, transparent, var(--tile-bg) 50%);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.row-text-see-more:hover {
  color: var(--fg);
}

.row-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f09433;
  text-decoration: none;
}

.row-link:hover {
  text-decoration: underline;
}

.row-url-picker {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Reposts/bookmarks' plain paste-a-url box (makeUrlEntryBox) - same
   top-border/spacing language as .row-url-picker above, just without a
   label or options row since there's nothing to pick between. */
.row-url-entry {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
}

.row-url-entry .row-url-custom-input {
  width: 100%;
}

.row-url-picker-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
}

.row-url-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.row-url-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.row-url-option a {
  color: #f09433;
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: break-all;
}

.row-url-option a:hover {
  text-decoration: underline;
}

.row-url-option span {
  color: var(--muted);
}

.row-url-option--custom {
  flex: 1 1 220px;
}

.row-url-custom-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.8rem;
}

.row-url-custom-input:focus {
  outline: none;
  border-color: #f09433;
}

/* Fixed set of avatar background colors, interpolated ahead of time along
   the same gradient as .see-more-pill/.is-active. Applied via a class
   (avatarColorClassForChannel in app.js), not an inline style, since the
   site's CSP (_headers) is style-src 'self' with no unsafe-inline - a
   JS-computed element.style.background is silently dropped under that
   policy, so the color has to already exist as a CSS rule to pick from. */
.avatar-color-0 { --avatar-color: rgb(240, 148, 51); background: rgb(240, 148, 51); }
.avatar-color-1 { --avatar-color: rgb(238, 139, 53); background: rgb(238, 139, 53); }
.avatar-color-2 { --avatar-color: rgb(236, 129, 55); background: rgb(236, 129, 55); }
.avatar-color-3 { --avatar-color: rgb(234, 120, 57); background: rgb(234, 120, 57); }
.avatar-color-4 { --avatar-color: rgb(232, 111, 59); background: rgb(232, 111, 59); }
.avatar-color-5 { --avatar-color: rgb(229, 101, 60); background: rgb(229, 101, 60); }
.avatar-color-6 { --avatar-color: rgb(227, 87, 62); background: rgb(227, 87, 62); }
.avatar-color-7 { --avatar-color: rgb(225, 73, 63); background: rgb(225, 73, 63); }
.avatar-color-8 { --avatar-color: rgb(223, 60, 65); background: rgb(223, 60, 65); }
.avatar-color-9 { --avatar-color: rgb(221, 46, 66); background: rgb(221, 46, 66); }
.avatar-color-10 { --avatar-color: rgb(218, 39, 71); background: rgb(218, 39, 71); }
.avatar-color-11 { --avatar-color: rgb(215, 38, 78); background: rgb(215, 38, 78); }
.avatar-color-12 { --avatar-color: rgb(212, 37, 85); background: rgb(212, 37, 85); }
.avatar-color-13 { --avatar-color: rgb(208, 36, 93); background: rgb(208, 36, 93); }
.avatar-color-14 { --avatar-color: rgb(205, 35, 100); background: rgb(205, 35, 100); }
.avatar-color-15 { --avatar-color: rgb(201, 33, 107); background: rgb(201, 33, 107); }
.avatar-color-16 { --avatar-color: rgb(198, 31, 115); background: rgb(198, 31, 115); }
.avatar-color-17 { --avatar-color: rgb(195, 29, 122); background: rgb(195, 29, 122); }
.avatar-color-18 { --avatar-color: rgb(191, 26, 129); background: rgb(191, 26, 129); }
.avatar-color-19 { --avatar-color: rgb(188, 24, 136); background: rgb(188, 24, 136); }

/* Extra breathing room on wider screens only - mobile keeps the tighter
   spacing above. Placed last in the file (rather than near each base rule
   it touches) so it reliably wins the cascade regardless of where those
   base rules happen to sit - .site-footer and .category-filter-bar in
   particular are defined well after where this would otherwise go. Left/
   right insets apply to header/main/footer alike so the whole page reads
   as one consistent column, not just the content. h2's added margin-bottom
   and .category-filter-bar's margin-bottom stay in lockstep (both +20px)
   to preserve the equal above/below-the-filter-row gap already established
   for the Comments/Reposts sections. */
@media (min-width: 901px) {
  .site-header {
    /* No padding-top - locked flush to the very top of the page, only the
       sides get the extra breathing room. */
    padding-left: 75px;
    padding-right: 75px;
  }

  /* Admin (admin.html) shares .site-header's markup/class but is a
     working tool, not the public page this extra breathing room was
     designed for - reset back to the original compact side padding here,
     same specificity as .site-header above so source order (this comes
     after) decides. */
  .admin-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  main {
    padding-left: 75px;
    padding-right: 75px;
  }

  .site-footer {
    /* No padding-bottom - locked flush to the very bottom, same reasoning
       as .site-header's top above. padding-top is bumped by the same
       amount as the gap between a section's end and the next section's
       title (main's flex gap + h2's own margin-top), so the space above
       the footer reads the same as the space between any two sections. */
    padding-top: calc(1rem + 50px);
    padding-left: 75px;
    padding-right: 75px;
  }

  h2 {
    margin-top: 30px;
    margin-bottom: calc(0.75rem + 30px);
  }

  /* .repost-controls sits directly under h2, and .category-filter-bar
     directly under that (when open) - both need the same +30px as h2's
     own margin-bottom above, or the buttons/filter row end up hugging the
     grid below instead of sitting centered between the title and it. */
  .repost-controls {
    margin-bottom: calc(1.5rem + 30px);
  }

  .category-filter-bar {
    margin-bottom: calc(1.5rem + 30px);
  }
}