/**
 * 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-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
}

.z-spoiler-label:dir(rtl)::before { transform: rotate(135deg); }
.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; }
}