/* Thoughts index: two tabs, mirrored axes. Thoughts read left, Poetry reads right. */

.page-header { margin-bottom: 2.2rem; }

.page-title-row {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.tab-nav-left,
.tab-nav-right { display: flex; align-items: center; gap: 1rem; }

.page-title {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
  user-select: none;
  background: none;
  border: 0;
  font-family: inherit;
}
.page-title.active { color: var(--text); }
.page-title.inactive { color: var(--text-faint); }
.page-title.inactive:hover { color: var(--text-light); }

.medium-link {
  color: var(--text-faint);
  transition: color 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
}
.medium-link:hover { color: var(--text); }
.medium-link.hidden { opacity: 0; pointer-events: none; }

/* -- rule under the tabs --
   Separates the header from the list, and carries a short mark that slides to
   sit under whichever tab is live, so the pair reads as a switch and not as
   two headings. Width and position are measured in tabs.js. */
.tab-rule {
  position: relative;
  height: 1px;
  background: var(--rule);
  margin-top: 1.1rem;
}
.tab-rule-mark {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--text-light);
  opacity: 0.75;
  /* eased-out cubic over a long beat, so it drifts across and settles
     rather than snapping into place */
  transition: left 0.7s cubic-bezier(0.33, 1, 0.68, 1),
              width 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}

/* -- tab panels -- */
.tab-panel { position: relative; }
.tab-panel.exiting  { animation: tabFadeOut 0.25s ease forwards; }
.tab-panel.entering { animation: tabFadeIn 0.35s ease forwards; }

@keyframes tabFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- post list -- */
.post-list { display: flex; flex-direction: column; }

.post-item {
  padding: 0.9rem 0;
  text-decoration: none;
  color: var(--text-faint);
  transition: color 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  animation-delay: var(--d, 0s);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.post-item:hover { color: var(--text); }

.post-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  transition: transform 0.3s ease;
}

.post-date {
  font-size: 0.82rem;
  font-weight: 300;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.post-item:hover .post-title,
.post-item:hover .post-date { transform: translateX(6px); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- poetry tab: mirrored (date left, title right) -- */
#panel-poetry .post-item { grid-template-columns: auto 1fr; }
#panel-poetry .post-date  { order: 1; }
#panel-poetry .post-title { order: 2; text-align: right; }
#panel-poetry .post-item:hover .post-title,
#panel-poetry .post-item:hover .post-date { transform: translateX(-6px); }

/* a poem that has a recording gets a quiet mark in the list */
.post-audio-mark {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-left: 0.5rem;
}
#panel-poetry .post-audio-mark { margin-left: 0; margin-right: 0.5rem; }

@media (max-width: 768px) {
  .post-item { padding: 1.5rem 0; }
}