zeyn 0.0.8

/**
 * Content components: headings, paragraphs, meta lines, previous and next links, auto grids,
 * lists, avatars, spoilers, letter bars and week schedules. Server rendered, no script. Colors
 * come from the theme tokens and spacing uses logical properties, so both themes and right to
 * left pages work.
 */

.z-heading {
  margin: 0 0 8px;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.z-heading-2 { font-size: 1.375rem; }
.z-heading-3 { font-size: 1.125rem; }
.z-heading-4 { font-size: 1rem; }
.z-heading-5 { font-size: var(--z-font-size-sm); }
.z-heading-6 { font-size: var(--z-font-size-sm); color: var(--z-text-muted); }

.z-paragraph {
  margin: 0 0 12px;
  line-height: 1.6;
  max-width: 72ch;
  overflow-wrap: anywhere;
}

.z-paragraph.z-muted { color: var(--z-text-muted); }
.z-paragraph.z-small { font-size: var(--z-font-size-sm); }

.z-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 8px;
  font-size: var(--z-font-size-sm);
  color: var(--z-text-muted);
}

.z-meta-part { overflow-wrap: anywhere; }

.z-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.z-prevnext-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  background: var(--z-surface);
  color: var(--z-text);
  text-decoration: none;
}

.z-prevnext-next {
  grid-column: 2;
  flex-direction: row-reverse;
  text-align: end;
}

.z-prevnext-link:hover { border-color: var(--z-border-strong); }
.z-prevnext-link:hover .z-prevnext-title { color: var(--z-accent); }

.z-prevnext-link:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: 2px;
}

.z-prevnext-arrow { font-size: 1.25rem; line-height: 1; }
.z-prevnext-arrow:dir(rtl) { transform: scaleX(-1); }
[dir="rtl"] .z-prevnext-arrow { transform: scaleX(-1); }

.z-prevnext-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.z-prevnext-word {
  font-size: var(--z-font-size-sm);
  color: var(--z-text-muted);
}

.z-prevnext-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .z-prevnext { grid-template-columns: 1fr; }
  .z-prevnext-next { grid-column: 1; }
  .z-prevnext-gap { display: none; }
}

.z-autogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--z-autogrid-min, 240px), 100%), 1fr));
  gap: calc(var(--z-autogrid-gap, 4) * var(--z-space, 4px));
  min-width: 0;
}

.z-autogrid > .z-node { min-width: 0; }

.z-list-section { margin-bottom: 24px; min-width: 0; }
.z-list-section > .z-cards-title { margin-bottom: 12px; }

ul.z-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  background: var(--z-surface);
  overflow: hidden;
}

.z-list:empty { display: none; }

.z-list > .z-list-item { margin: 0; }

.z-list-item + .z-list-item { border-top: 1px solid var(--z-border); }

.z-list .z-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--z-text);
  text-decoration: none;
}

a.z-list-row:hover { background: var(--z-hover); }
a.z-list-row:hover .z-list-title { color: var(--z-accent); }

a.z-list-row:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: -2px;
}

.z-list-img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--z-radius);
  object-fit: cover;
  background: var(--z-surface-2);
}

.z-list-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.z-list-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.z-list-subtitle {
  font-size: var(--z-font-size-sm);
  color: var(--z-text-muted);
  overflow-wrap: anywhere;
}

.z-list-meta {
  flex: none;
  max-width: 40%;
  font-size: var(--z-font-size-sm);
  color: var(--z-text-muted);
  text-align: end;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .z-list-row { flex-wrap: wrap; padding: 10px 12px; }
  .z-list-meta { flex-basis: 100%; max-width: none; text-align: start; padding-inline-start: 60px; }
  .z-list-row:not(:has(.z-list-img)) .z-list-meta { padding-inline-start: 0; }
}

@media (forced-colors: active) {
  a.z-list-row:focus-visible { outline-color: Highlight; }
}

.z-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  background: var(--z-surface-2);
  color: var(--z-text);
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

.z-avatar-32 { width: 32px; height: 32px; font-size: 0.75rem; }
.z-avatar-40 { width: 40px; height: 40px; font-size: 0.875rem; }
.z-avatar-64 { width: 64px; height: 64px; font-size: 1.25rem; }

span.z-avatar-tone-0 { background: var(--z-brand-subtle); }
span.z-avatar-tone-1 { background: var(--z-info-subtle); }
span.z-avatar-tone-2 { background: var(--z-success-subtle); }
span.z-avatar-tone-3 { background: var(--z-warning-subtle); }
span.z-avatar-tone-4 { background: var(--z-danger-subtle); }

.z-spoiler {
  margin: 0 0 12px;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  background: var(--z-surface);
}

.z-spoiler-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.z-spoiler-label::-webkit-details-marker { display: none; }

.z-spoiler-label::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

[dir="rtl"] .z-spoiler-label::before { scale: -1 1; }
.z-spoiler[open] > .z-spoiler-label::before { transform: rotate(45deg); }

.z-spoiler-label:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: -2px;
  border-radius: var(--z-radius-lg);
}

.z-spoiler-body { padding: 0 16px 12px; }

@media (prefers-reduced-motion: no-preference) {
  .z-spoiler-label::before { transition: transform 0.15s ease; }
}

@media (forced-colors: active) {
  .z-avatar { border: 1px solid CanvasText; }
}

.z-alpha { margin: 0 0 16px; }

.z-alpha-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.z-alpha-list > li { margin: 0; }

.z-alpha .z-alpha-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 6px;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  background: var(--z-surface);
  color: var(--z-text);
  font-weight: 600;
  text-decoration: none;
}

.z-alpha .z-alpha-link:hover { border-color: var(--z-border-strong); color: var(--z-accent); }

.z-alpha .z-alpha-link:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: 2px;
}

.z-alpha .z-alpha-link[aria-current="page"] {
  border-color: var(--z-primary);
  background: var(--z-primary);
  color: var(--z-on-primary);
}

@media (forced-colors: active) {
  .z-alpha .z-alpha-link[aria-current="page"] { outline: 2px solid Highlight; }
}

.z-week { margin-bottom: 24px; min-width: 0; container-type: inline-size; }
.z-week > .z-cards-title { margin-bottom: 12px; }

.z-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.z-week-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  background: var(--z-surface-2);
}

.z-week-today {
  border-color: var(--z-primary);
  box-shadow: inset 0 3px 0 var(--z-primary);
}

.z-week .z-week-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--z-font-size-sm);
  font-weight: 600;
}

.z-week-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--z-primary);
  color: var(--z-on-primary);
  font-size: var(--z-font-size-xs);
  font-weight: 600;
}

.z-week-empty {
  margin: 0;
  font-size: var(--z-font-size-sm);
  color: var(--z-text-muted);
}

.z-week-items .z-list-row { padding: 8px; gap: 8px; }
.z-week-items .z-list-img { width: 32px; height: 32px; }
.z-week-items .z-list-row { flex-wrap: wrap; }
.z-week-items .z-list-meta { flex-basis: 100%; max-width: none; text-align: start; }

.z-week-items :is(.z-list-title, .z-list-subtitle, .z-list-meta) { overflow-wrap: break-word; }

@container (max-width: 840px) {
  .z-week-days { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
}

@media (forced-colors: active) {
  .z-week-today { outline: 2px solid Highlight; }
}

/* Rating ------------------------------------------------------------------------------------ */

.z-rating { margin: 0; padding: 0; border: 0; min-width: 0; }

.z-rating legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--z-text-muted);
  font-size: var(--z-font-size-sm);
  font-weight: 600;
}

.z-rating-list { display: inline-flex; gap: 2px; }

.z-rating-star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--z-radius);
  color: var(--z-border-strong);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.z-rating-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.z-rating-star:has(.z-rating-input:checked),
.z-rating-star:has(~ .z-rating-star .z-rating-input:checked) { color: var(--z-warning); }

.z-rating-list:hover .z-rating-star { color: var(--z-border-strong); }

.z-rating-list:hover .z-rating-star:hover,
.z-rating-list:hover .z-rating-star:has(~ .z-rating-star:hover) { color: var(--z-warning); }

.z-rating-star:has(.z-rating-input:focus-visible) {
  outline: 2px solid var(--z-focus);
  outline-offset: 1px;
}

.z-rating-star:has(.z-rating-input:disabled) { cursor: default; opacity: 0.6; }

@media (forced-colors: active) {
  .z-rating-star { color: GrayText; }
  .z-rating-star:has(.z-rating-input:checked),
  .z-rating-star:has(~ .z-rating-star .z-rating-input:checked) { color: Highlight; }
}

/* Relative time and share -------------------------------------------------------------------- */

.z-relative { white-space: nowrap; }

.z-share { gap: 6px; }

/* Chips ------------------------------------------------------------------------------------- */

.z-chips { margin: 0 0 16px; min-width: 0; }

.z-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.z-chips-list > li { margin: 0; }

.z-chips .z-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--z-border);
  border-radius: 999px;
  background: var(--z-surface);
  color: var(--z-text);
  font-size: var(--z-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.z-chips .z-chip:hover { border-color: var(--z-border-strong); color: var(--z-accent); }

.z-chips .z-chip:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: 2px;
}

.z-chips .z-chip[aria-pressed="true"] {
  border-color: var(--z-primary);
  background: var(--z-primary);
  color: var(--z-on-primary);
}

.z-chip-check { display: none; }

.z-chips .z-chip[aria-pressed="true"] .z-chip-check {
  display: inline-block;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-inline-start: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

@media (forced-colors: active) {
  .z-chips .z-chip[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* Hero -------------------------------------------------------------------------------------- */

.z-hero {
  position: relative;
  margin: 0 0 24px;
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  background: var(--z-surface-2);
  color: var(--z-text);
}

.z-hero-slide {
  position: relative;
  display: grid;
  min-height: clamp(240px, 42vw, 440px);
  align-items: end;
}

.z-hero-slide[hidden] { display: none; }

.z-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.z-hero-slide:has(.z-hero-img) { color: #fff; }

.z-hero-slide:has(.z-hero-img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.6) 60%);
}

.z-hero-slide:has(.z-hero-img) .z-hero-actions :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgb(0 0 0 / 0.8);
}

.z-hero-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  max-width: 720px;
  padding: clamp(20px, 4vw, 48px);
  padding-bottom: clamp(48px, 5vw, 56px);
}

.z-hero .z-hero-title {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  color: inherit;
}

.z-hero-text { margin: 0; font-size: 1.05rem; color: inherit; }

.z-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.z-hero-controls {
  position: absolute;
  z-index: 2;
  inset-inline-end: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.z-hero-controls[hidden] { display: none; }

.z-hero-pick { display: flex; gap: 2px; }

.z-hero-dot,
.z-hero-pause {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.z-hero-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
}

.z-hero-dot[aria-current="true"]::before { background: #fff; }

.z-hero-pause { background: rgb(0 0 0 / 0.55); color: #fff; }

.z-hero-pause-icon {
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}

.z-hero-pause:not([data-playing]) .z-hero-pause-icon {
  width: 0;
  height: 0;
  border-inline-start: 11px solid currentColor;
  border-inline-end: 0;
  border-block: 7px solid transparent;
}

.z-hero-dot:focus-visible,
.z-hero-pause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--z-focus);
}

@media (forced-colors: active) {
  .z-hero-dot::before { border-color: ButtonText; background: Canvas; }
  .z-hero-dot[aria-current="true"]::before { background: Highlight; }
}

/* Reactions ---------------------------------------------------------------------------------- */

.z-reactions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.z-reactions[aria-busy="true"] { cursor: progress; }

.z-reaction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--z-border);
  border-radius: 999px;
  background: var(--z-surface);
  color: var(--z-text);
  font-size: var(--z-font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.z-reaction:hover { border-color: var(--z-border-strong); }

.z-reaction:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: 2px;
}

.z-reaction[aria-pressed="true"] {
  border-color: var(--z-primary);
  background: var(--z-brand-subtle);
  color: var(--z-text);
  box-shadow: inset 0 0 0 1px var(--z-primary);
}

.z-reaction-symbol { font-size: 1.1rem; line-height: 1; }

.z-reaction-count { font-variant-numeric: tabular-nums; }

@media (forced-colors: active) {
  .z-reaction[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* Card preview ------------------------------------------------------------------------------- */

.z-preview {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(380px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  background: var(--z-surface);
  color: var(--z-text);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
}

.z-preview .z-close,
.z-preview .z-toolbar { display: none; }

.z-preview .z-poster-img,
.z-preview img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .z-preview:popover-open { animation: z-preview-in 140ms ease-out; }
}

@keyframes z-preview-in {
  from { opacity: 0; transform: scale(0.96); }
}