/*
 * CricketWindies "From The Archives" — showthread archive box.
 *
 * Reuses .forum-group/.category-heading for the normal forum chrome, then
 * turns the list into a small archive register: paper-toned rows, a year
 * spine, and a quiet directional cue on each related thread.
 * Keep this scoped to the archive component; do not change shared forum rows.
 */

.cw-fromarchives {
  margin-top: 11px;
}

.cw-fromarchives__list {
  display: flex;
  flex-direction: column;
  background: var(--ivory, #fff9f0);
}

.cw-fromarchives__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.cw-fromarchives__item:last-child {
  border-bottom: 0;
}

.cw-fromarchives__item:hover {
  background: var(--surface-hover);
  text-decoration: none;
}

.cw-fromarchives__item:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.cw-fromarchives__year {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  padding-right: 14px;
  border-right: 1px solid var(--gold);
  color: var(--maroon);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: left;
}

.cw-fromarchives__year::before {
  content: "ARCHIVE";
  margin-bottom: 3px;
  color: var(--soft-muted, var(--muted));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  line-height: 1;
}

.cw-fromarchives__year::after {
  content: "";
  width: 22px;
  height: 2px;
  margin-top: 4px;
  background: var(--gold);
}

.cw-fromarchives__item::after {
  content: "›";
  align-self: center;
  color: var(--maroon);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  text-align: right;
}

.cw-fromarchives__item:hover::after {
  color: var(--blue-link);
}

.cw-fromarchives__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cw-fromarchives__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cw-fromarchives__item:hover .cw-fromarchives__title {
  color: var(--blue-link);
}

.cw-fromarchives__meta {
  display: block;
  margin-top: 2px;
  color: var(--soft-muted);
  font-size: 12px;
  line-height: 16px;
}

@media (max-width: 700px) {
  .cw-fromarchives__item {
    grid-template-columns: 56px minmax(0, 1fr) 14px;
    gap: 10px;
    min-height: 64px;
    padding: 10px 13px;
  }

  .cw-fromarchives__year {
    min-width: 0;
    padding-right: 10px;
    font-size: 15px;
    line-height: 18px;
  }

  .cw-fromarchives__year::before {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .cw-fromarchives__year::after {
    width: 17px;
    height: 1px;
  }

  .cw-fromarchives__title {
    font-size: 14px;
    line-height: 18px;
  }
}

/* ---------- Dark mode ----------
   --ivory isn't redefined under [data-theme="dark"] in theme.css (it
   stays the same bright cream in both modes), so the paper-toned list
   background needs its own explicit dark counterpart here or it renders
   as a bright cream box on a dark page. Reuses that same widget's dark
   sepia tone for a consistent "archive" feel between the two history-
   mining features rather than picking an unrelated color.
   --maroon itself is constant across themes (never redefined in theme.css)
   -- fine as a solid BACKGROUND fill (the On This Day date rail: ivory
   text on it stays readable regardless of theme), but wrong as a TEXT
   color here, where it sits on this file's own theme-flipping surface --
   found live (recent-activity's own dark section documents the identical
   mistake for its caret/hover-title, which did get the gold swap; these
   two didn't). */
[data-theme="dark"] .cw-fromarchives__list { background: #241d16; }
[data-theme="dark"] .cw-fromarchives__item:hover { background: #2f2619; }
[data-theme="dark"] .cw-fromarchives__year { color: var(--gold); }
[data-theme="dark"] .cw-fromarchives__item::after { color: var(--gold); }