main {
  margin-top: 1.5rem;
}

main ul {
  padding: 0;
  margin: 0;
}

main li {
  list-style: none;
}

/*
  Each entry is a "log line": [date] on top, title, then summary.
  Flex column + order lets us show the date first without touching the template.
*/
li.entry-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1rem 1.25rem;
  margin-inline: -1rem;
  border-left: 2px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Dashed separator between entries - like a printout from a terminal */
li.entry-detail + li.entry-detail {
  border-top: 1px dashed var(--line);
}

li.entry-detail:hover,
li.entry-detail:focus-within {
  background-color: var(--bg-2);
  border-left-color: var(--amber);
}

/* Stretch the title link over the whole entry, so the full card is clickable. */
li.entry-detail > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.entry-created {
  order: -1;
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  color: var(--dim);
}

.entry-created::before { content: "["; }
.entry-created::after { content: "]"; }

main h3 {
  margin: 0;
  font-family: var(--title);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--amber);
  text-wrap: balance;
}

main h3::before {
  content: "> ";
  color: var(--dim);
}

/* Prompt turns green and a blinking cursor appears on hover. */
li.entry-detail:hover h3,
li.entry-detail:focus-within h3 {
  text-shadow: 0 0 6px hsl(39 98% 49% / 0.45);
}

li.entry-detail:hover h3::before,
li.entry-detail:focus-within h3::before {
  color: var(--green);
}

li.entry-detail:hover h3::after,
li.entry-detail:focus-within h3::after {
  content: "_";
  color: var(--green);
  animation: blink 1s step-end infinite;
}

.entry-summary {
  max-width: 70ch;
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: var(--fg-soft);
}