/* Čitač i ljestvica dijele boju tinte, ritam brojeva i crveni naglasak. */
.s24-publika-reader, .s24-board {
  --s24-ink: #1c1a18;
  --s24-muted: #59544f;
  --s24-line: #d9d6d0;
  --s24-accent: #b62d29;
  --s24-paper: #fff;
  --s24-soft: #f6f4ef;
  color: var(--s24-ink);
  background: var(--s24-paper);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  text-align: start;
  overflow-wrap: anywhere;
  color-scheme: light;
}
.s24-publika-reader *, .s24-board *, .s24-publika-reader, .s24-board { box-sizing: border-box; }
.s24-publika-reader [hidden], .s24-board [hidden] { display: none !important; }
.s24-publika-reader :focus-visible, .s24-board :focus-visible {
  outline: 3px solid var(--s24-accent) !important; outline-offset: 3px;
}
.s24-publika-reader {
  position: relative;
  width: min(100%, 800px);
  margin: clamp(24px, 4vw, 56px) auto;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--s24-line);
  border-top: 4px solid var(--s24-ink);
}
.s24-reader__head { margin: 0 0 1.25rem; }
.s24-publika-reader h2.s24-reader__title, .s24-board .s24-board__title {
  margin: 0;
  padding: 0;
  color: var(--s24-ink);
  font: inherit;
  font-size: clamp(1.65rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-transform: none;
}
.s24-publika-reader dl.s24-reader__stats {
  display: flex; flex-wrap: wrap; gap: .85rem clamp(1.25rem, 4vw, 3rem);
  padding: 0; margin: 0; text-indent: 0;
}
.s24-reader__metric { min-width: 4.3rem; display: flex; flex-direction: column-reverse; align-items: flex-start; }
.s24-publika-reader .s24-reader__label, .s24-publika-reader .s24-reader__value { margin: 0; padding: 0; color: var(--s24-ink); }
.s24-publika-reader .s24-reader__label { font-size: .85rem; font-weight: 500; color: var(--s24-muted); }
.s24-publika-reader .s24-reader__value {
  font-family: inherit; font-size: clamp(1.3rem, 2.6vw, 1.95rem); font-weight: 760; letter-spacing: -.045em; line-height: 1.18;
}
.s24-publika-reader .s24-reader__date { margin: .55rem 0 0; color: var(--s24-muted); font-size: .8rem; line-height: 1.4; }
.s24-reader__controls { margin-top: 1.35rem; padding-top: 1.05rem; border-top: 1px solid var(--s24-line); }
.s24-reader__stars { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.s24-publika-reader button.s24-reader__star {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  min-width: 0; min-height: 0;
  margin: 0; padding: 0 !important;
  border: 1px solid transparent; border-radius: 4px;
  appearance: none;
  color: #69625b; background: transparent;
  box-shadow: none; text-shadow: none;
  font: 34px/1 Arial, sans-serif;
  cursor: pointer;
}
.s24-publika-reader button.s24-reader__star.is-filled { color: var(--s24-accent); }
.s24-publika-reader button.s24-reader__star:not(:disabled):hover, .s24-publika-reader button.s24-reader__star:focus-visible { background: var(--s24-soft); }
.s24-publika-reader button.s24-reader__star:disabled { color: #aba7a0; cursor: default; opacity: 1; }
.s24-publika-reader .s24-reader__status { min-height: 1.4em; margin: .35rem 0 0; font-size: .91rem; color: var(--s24-muted); }
.s24-publika-reader button.s24-reader__retry, .s24-publika-reader a.s24-reader__link, .s24-board .s24-board__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem 0;
  border: 0; background: transparent; color: var(--s24-ink);
  font: inherit; font-size: .9rem; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: pointer;
}
.s24-publika-reader a.s24-reader__link:hover, .s24-publika-reader button.s24-reader__retry:hover,
.s24-board .s24-board__link:hover { color: var(--s24-accent); }
.s24-reader__links { display: flex; flex-wrap: wrap; gap: 0 1.3rem; margin-top: .65rem; }
.s24-reader__links:empty { display: none; }
.s24-reader__social {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem;
  border-top: 1px solid var(--s24-line); padding-top: .9rem; margin-top: 1.1rem; font-size: .9rem;
}
.s24-reader__social .s24-reader__date { margin: 0; }

.s24-board {
  margin: clamp(28px, 4vw, 62px) auto;
  width: min(100%, 1140px);
  padding: clamp(18px, 3vw, 38px);
  border: 1px solid var(--s24-line);
  border-top: 4px solid var(--s24-ink);
}
.s24-board__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1.5rem; }
.s24-board .s24-board__title { font-size: clamp(1.8rem, 1.45rem + 2vw, 3.3rem); }
.s24-board .s24-note { margin: .7rem 0 1rem; font-size: .9rem; line-height: 1.5; color: var(--s24-muted); }
.s24-board .s24-filters, .s24-board .s24-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: 0; }
.s24-board .s24-filters { margin: 1.2rem 0 .7rem; gap: .5rem; }
.s24-board .s24-filters label { margin: 0; color: var(--s24-ink); font-weight: 650; }
.s24-board .s24-filters select, .s24-board .s24-filters button, .s24-board .s24-filters input[type="submit"] {
  min-height: 40px; width: auto; max-width: 100%; margin: 0; padding: .45rem .8rem;
  border: 1px solid var(--s24-line); border-radius: 4px;
  color: var(--s24-ink); background: var(--s24-paper); font: inherit; font-size: .9rem;
}
.s24-board .s24-filters select { appearance: auto; }
.s24-board .s24-tabs { margin: 1rem 0; }
.s24-board .s24-tabs a, .s24-board .s24-tabs button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: .45rem .85rem;
  font: inherit; font-size: .9rem; font-weight: 650; line-height: 1.2; text-decoration: none;
  background: var(--s24-paper); color: var(--s24-ink);
  border: 1px solid var(--s24-line); border-radius: 99px; cursor: pointer;
}
.s24-board .s24-tabs :is(a,button):hover { border-color: var(--s24-ink); }
.s24-board .s24-tabs :is([aria-current]:not([aria-current="false"]),[aria-selected="true"],.is-active) {
  background: var(--s24-ink); border-color: var(--s24-ink); color: white;
}
.s24-board ol.s24-list, .s24-board .s24-list {
  display: grid; grid-template-columns: 1fr; gap: 0; margin: 1.25rem 0 0; padding: 0; list-style: none;
}
.s24-board .s24-card {
  display: grid; align-items: center; grid-template-columns: 2.4rem 4.25rem minmax(0, 1fr) auto; gap: clamp(.55rem, 2vw, 1.1rem);
  list-style: none; padding: .9rem 0; margin: 0; border-top: 1px solid var(--s24-line);
}
.s24-board .s24-card::before { content: none; }
.s24-board .s24-card__rank { font-size: clamp(1.35rem, 2.5vw, 1.9rem); font-weight: 750; letter-spacing: -.06em; line-height: 1; }
.s24-board .s24-card:first-child .s24-card__rank { color: var(--s24-accent); }
.s24-board .s24-card__cover {
  display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--s24-soft); overflow: hidden;
  border: 1px solid var(--s24-line);
}
.s24-board .s24-card__cover img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; margin: 0; }
.s24-board .s24-card__body { min-width: 0; }
.s24-board .s24-card__title {
  margin: 0; color: var(--s24-ink); font-family: inherit; font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  font-weight: 740; letter-spacing: -.032em; line-height: 1.18; text-transform: none;
}
.s24-board .s24-card__title a, .s24-board a.s24-card__title { color: inherit; text-decoration: none; }
.s24-board .s24-card__title a:hover, .s24-board a.s24-card__title:hover { color: var(--s24-accent); text-decoration: underline; }
.s24-board .s24-card__byline, .s24-board .s24-card__stats { margin: .3rem 0 0; color: var(--s24-muted); font-size: .9rem; line-height: 1.4; }
.s24-board .s24-card__stats { display: flex; flex-wrap: wrap; gap: .18rem .7rem; }
.s24-board .s24-card__score { color: var(--s24-ink); font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 720; white-space: nowrap; }
.s24-board .s24-empty { background: var(--s24-soft); border-inline-start: 3px solid var(--s24-ink); margin: 1rem 0; padding: 1.1rem 1.25rem; }
.s24-board .s24-empty > :first-child { margin-top: 0; }
.s24-board .s24-empty > :last-child { margin-bottom: 0; }
.s24-board--home .s24-list { grid-template-columns: repeat(auto-fit,minmax(min(100%, 220px), 1fr)); gap: 1.1rem; }
.s24-board--home .s24-card {
  align-content: start; grid-template-columns: min-content minmax(0,1fr); gap: .75rem;
  padding: 0; border: none; align-items: baseline;
}
.s24-board--home .s24-card__cover { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; }
.s24-board--home .s24-card__body { grid-column: 2; grid-row: 2; }
.s24-board--home .s24-card__rank { grid-column: 1; grid-row: 2; }
.s24-board--home .s24-card__score { grid-column: 2; }
@media (max-width: 580px) {
  .s24-board .s24-card, .s24-board--home .s24-card { grid-template-columns: 1.65rem 3.4rem minmax(0,1fr); gap: .55rem; align-items: center; }
  .s24-board--home .s24-list { grid-template-columns: 1fr; gap: 0; }
  .s24-board--home .s24-card { padding: .85rem 0; border-top: 1px solid var(--s24-line); }
  .s24-board .s24-card__rank { grid-row: 1; grid-column: 1; }
  .s24-board .s24-card__cover { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; }
  .s24-board .s24-card__body { grid-column: 3; grid-row: 1; }
  .s24-board .s24-card__score { grid-column: 3; grid-row: 2; }
}
@media (prefers-contrast: more) {
  .s24-publika-reader, .s24-board { --s24-muted: #262320; --s24-line: #69635e; }
  .s24-publika-reader button.s24-reader__star:disabled { color: #575451; }
}
@media (forced-colors: active) {
  .s24-publika-reader button.s24-reader__star.is-filled { outline: 1px solid Highlight; }
  .s24-board .s24-tabs [aria-current="page"] { outline: 2px solid Highlight; }
}