/* ============================================================
   home-list.css — home article list as a fuzzy-finder
   Telescope-style panes: a search prompt, the results list and a
   bat-style preview of the selected post (cover + front matter).
   Hover / focus / j k select a row; the preview follows.
   ============================================================ */

/* the home list gets the full navbar frame instead of the 52rem column */
html[data-page="home"] .main-content-body > .main-content {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}
html[data-page="home"] .home-content-container { padding: 0 !important; }

/* The hero already clears the fixed navbar, so the shell's navbar offset (64px)
   and the body's 28px bands only stacked dead space around the panes
   (146px above, 171px below). .pk keeps the one deliberate gap. */
html[data-page="home"] .page-container .main-content-container.has-home-banner { padding-top: 0; }
html[data-page="home"] .page-container .main-content-container.has-home-banner .main-content-body {
  padding-top: 0;
  padding-bottom: 0;
}

/* one page colour: the legacy --background-color (#121214 / #fff) painted
   bands around the list and the footer that didn't match --bg */
:root[data-page="home"][data-theme] { --background-color: var(--bg); }

/* The terminal banner and article panes share the same outer frame. */
.home-banner-terminal-wrap,
.pk {
  max-width: 1200px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pk {
  --pk-line: color-mix(in srgb, var(--text-mute) 34%, transparent);
  --pk-radius: 6px;
  --pk-pad: 1.1rem;
  /* text on the accent block. Same ink in both themes: 4.9:1 on #BB6688 */
  --pk-ink: #141418;
  margin: 0 auto;
  padding: clamp(1.75rem, 6vh, 3.75rem) 1.5rem clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--font-sans);
  color: var(--text);
}

.pk-panes {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.5rem 1.25rem;
  align-items: stretch;
}
.pk-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

/* ── boxes + labels cut into the top border ─────────────────── */
.pk-prompt,
.pk-results,
.pk-card {
  position: relative;
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
}
.pk-box-label {
  position: absolute;
  top: 0;
  left: calc(var(--pk-pad) - .4rem);
  transform: translateY(-52%);
  max-width: calc(100% - 2 * var(--pk-pad));
  margin: 0;
  padding: 0 .4rem;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--text-mute);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.pk-box-label-end {
  top: auto;
  bottom: 0;
  left: auto;
  right: calc(var(--pk-pad) - .4rem);
  transform: translateY(52%);
}
.pk-box-label-end:empty { display: none; }

/* ── prompt (opens the site search) ─────────────────────────── */
.pk-prompt {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  height: 3.25rem;
  padding: 0 var(--pk-pad);
  background: transparent;
  cursor: text;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-faint);
  font-feature-settings: 'liga' 0, 'calt' 0;
  transition: border-color .15s ease;
}
.pk-prompt:hover,
.pk-prompt:focus-visible {
  border-color: var(--accent-line);
  outline: none;
}
.pk-prompt:hover .pk-box-label,
.pk-prompt:focus-visible .pk-box-label { color: var(--accent); }
.pk-caret { color: var(--accent); font-weight: 700; }
.pk-placeholder {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pk-count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.pk-results .pk-box-label { color: var(--text); }
.pk-results .pk-box-label .pk-count { margin-left: .5rem; }

/* ── results ────────────────────────────────────────────────── */
.pk-results { padding: .7rem 0 .55rem; }
.pk-list { display: flex; flex-direction: column; }

.pk-year {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem var(--pk-pad) .4rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.pk-year::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.pk-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem 3.2rem minmax(0, 1fr) auto 4.2rem;
  align-items: center;
  column-gap: .9rem;
  min-height: 3.35rem;
  padding: 0 var(--pk-pad) 0 .55rem;
  color: var(--text-2);
  text-decoration: none;
  outline: none;
}
/* the selection is the block cursor: the same accent slab as the masthead
   caret and the NORMAL badge, with ink set on it */
.pk-row.is-active {
  background: var(--accent);
  color: var(--pk-ink);
}
.pk-row.is-active :is(.pk-rel, .pk-date, .pk-tag, .pk-min) {
  color: color-mix(in srgb, var(--pk-ink) 72%, var(--accent));
}
.pk-row.is-active .pk-rel { color: var(--pk-ink); font-weight: 700; }
.pk-row:focus-visible { box-shadow: inset 0 0 0 2px var(--text); }
/* a block cursor jumps, it doesn't fade (redesign.css transitions every
   colour on *) */
.pk-row,
.pk-row * { transition: none; }
/* style.css colours every span in a link (and turns them accent on hover,
   which would put accent text on the accent block): take it back */
.pk-row .pk-name { color: inherit; }

/* vim relativenumber gutter (redesign.js keeps it current) */
.pk-rel {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}
.pk-row.is-active .pk-rel { opacity: 1; }

.pk-date {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.pk-name {
  grid-column: 3;
  overflow: hidden;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pk-row.is-active .pk-name { font-weight: 600; }
.pk-tag {
  grid-column: 4;
  max-width: 9rem;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pk-tag::before { content: '#'; color: var(--text-faint); }
.pk-row.is-active .pk-tag::before { color: inherit; }
.pk-min {
  grid-column: 5;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pk-ex { display: none; }
.pk-pos { font-variant-numeric: tabular-nums; }

/* ── preview: a tall poster, the cover takes whatever height is left ── */
.pk-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 34rem;
}
.pk-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: .95rem .95rem 1.25rem;
  color: var(--text-2);
  text-decoration: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease, visibility 0s linear .12s;
}
.pk-card.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity .12s ease;
}
.pk-card .pk-box-label:first-child { color: var(--text); }
.pk-card .pk-box-label-end { color: var(--text-mute); }
.pk-card:hover .pk-box-label:first-child { color: var(--accent); }

.pk-cover {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 12rem;
  margin-bottom: 1.1rem;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bg-2);
}
.pk-cover img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* decode: the picture is drawn in by scanline blocks, a head line on the
   edge, like the hero shader resolving */
.pk-card.is-active .pk-cover img {
  animation: pk-decode .34s steps(12, end) both;
}
.pk-card.is-active .pk-cover:not(.is-empty)::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px 1px var(--accent);
  animation: pk-scan .34s steps(12, end) both;
  pointer-events: none;
}
@keyframes pk-decode {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes pk-scan {
  0%   { top: 0;    opacity: 1; }
  99%  { top: 100%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.pk-cover.is-empty {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--border) 7px 8px),
    var(--bg-2);
}
.pk-card .pk-cover-none {
  padding: .15rem .5rem;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.pk-src {
  display: block;
  counter-reset: ln;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.pk-ln {
  position: relative;
  display: block;
  padding-left: 3.4ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  counter-increment: ln;
}
.pk-ln::before {
  content: counter(ln);
  position: absolute;
  left: 0;
  width: 2ch;
  text-align: right;
  color: var(--text-faint);
  opacity: .7;
}
.pk-card .pk-ln { color: var(--text-2); }
.pk-card .pk-body {
  display: -webkit-box;
  margin-top: .15rem;
  white-space: normal;
  color: var(--text-2);
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
/* two classes: beat style.css' a:hover span */
.pk-card .t-key { color: var(--accent); }
.pk-card .t-str { color: var(--text); }
.pk-card .t-num { color: var(--text-2); }
.pk-card .t-dim { color: var(--text-faint); }

.pk-hint {
  grid-area: 2 / 1;
  margin: .95rem .15rem 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: right;
}
.pk-hint kbd {
  display: inline-block;
  min-width: 1.6em;
  margin: 0 .2em 0 .5em;
  padding: 0 .3em;
  border: 1px solid var(--pk-line);
  border-radius: 2px;
  font: inherit;
  line-height: 1.5;
  text-align: center;
  color: var(--text-mute);
}
.pk-hint kbd + kbd { margin-left: 0; }

/* ── pager ──────────────────────────────────────────────────── */
.pk-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .15rem;
  padding: 0 calc(var(--pk-pad) - .6rem);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pk-num,
.pk-step,
.pk-gap {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .35rem;
  border-radius: 3px;
  color: var(--text-mute);
  text-decoration: none;
}
.pk-step { font-size: 16px; }
a.pk-num:hover,
a.pk-step:hover,
a.pk-num:focus-visible,
a.pk-step:focus-visible {
  color: var(--text);
  background: var(--bg-2);
  outline: none;
}
.pk-num.is-current {
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}
.pk-step.is-off { opacity: .3; }
.pk-gap { color: var(--text-faint); min-width: 1.2rem; }
.pk-all {
  margin-left: auto;
  padding: .35rem .6rem;
  font-size: 12.5px;
  color: var(--text-mute);
  text-decoration: none;
}
.pk-all:hover,
.pk-all:focus-visible { color: var(--accent); outline: none; }

/* ── narrow: single column, no preview, excerpt under each title ── */
@media (max-width: 900px) {
  .pk-panes { grid-template-columns: minmax(0, 1fr); }
  .pk-preview { display: none; }
  .pk-row {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: baseline;
    row-gap: .25rem;
    padding: .8rem var(--pk-pad);
  }
  .pk-rel { display: none; }
  .pk-date { grid-column: 1; }
  .pk-name { grid-column: 2; white-space: normal; }
  .pk-tag { display: none; }
  .pk-min { grid-column: 3; }
  .pk-ex {
    display: -webkit-box;
    grid-column: 2 / -1;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-mute);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .pk-row.is-active .pk-ex { color: color-mix(in srgb, var(--pk-ink) 78%, var(--accent)); }
}
@media (max-width: 540px) {
  .home-banner-terminal-wrap,
  .pk { padding-left: 1rem; padding-right: 1rem; }
  .pk { --pk-pad: .9rem; }
  /* phone: meta on a line of its own so the title gets the full width */
  .pk-row {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: .3rem;
    padding: .85rem var(--pk-pad) .9rem;
  }
  .pk-date { grid-column: 1; grid-row: 1; font-size: 12px; }
  .pk-min  { grid-column: 2; grid-row: 1; }
  .pk-name { grid-column: 1 / -1; grid-row: 2; font-size: 16px; }
  .pk-ex   { grid-column: 1 / -1; grid-row: 3; }
  .pk-placeholder { font-size: 13px; }
  .pk-all { width: 100%; margin: .35rem 0 0; padding-left: .6rem; }
}
/* touch: no pointer-driven selection, rows read as a plain list */
@media (hover: none) {
  .pk-row.is-active { background: transparent; color: var(--text-2); }
  .pk-row.is-active .pk-name { font-weight: 500; }
  .pk-row.is-active :is(.pk-rel, .pk-date, .pk-min) { color: var(--text-faint); }
  .pk-row.is-active .pk-tag { color: var(--text-mute); }
  .pk-row.is-active .pk-ex { color: var(--text-mute); }
  .pk-row:active { background: var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-card,
  .pk-card.is-active { transition: none; }
  .pk-card.is-active .pk-cover img,
  .pk-card.is-active .pk-cover::after { animation: none; }
  .pk-card.is-active .pk-cover::after { display: none; }
}