/* Authors index (`/:locale/authors/`) and its entrances on the Insights
   list: the writers masthead, the writers strip (also the author page's
   「other writers」 foot) and the Insights filter row. The avatar plate itself
   is shared with the author head and lives in author.css. Loads after
   author.css; tokens resolve via tokens.css. */

/* ---------- Authors index: the writers masthead ---------- */

/* A press masthead for the small fixed cast: one column per writer under
   the 2px ink press rule, hairline rules between columns. Every column is
   the same six rows — plate, name, positioning, article count, newest
   piece, page link — laid on one shared row grid (subgrid), so the ledger
   rules run level across the masthead whatever each writer's text length.
   The avatar plate is the one loud element; it is capped so every name and
   AI mark sits on the first screen. The writer link's ::after stretches
   over the column. */
.authors-head .sub { max-width: 52ch; }
.authors-index { padding-block-start: var(--space-5); }
.masthead {
  list-style: none;
  margin: 0;
  padding: var(--space-5) 0 var(--space-6);
  border-block-start: 2px solid var(--color-text);
  border-block-end: 1px solid var(--color-border-strong);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-8);
  row-gap: var(--space-3);
}
.writer-cell {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: var(--space-3);
  min-width: 0;
}
.writer-cell:nth-child(n + 4) { margin-block-start: var(--space-6); }
.writer-cell:not(:nth-child(3n + 1))::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--space-4) * -1 - var(--space-1));
  border-inline-start: 1px solid var(--color-border);
}
/* 12rem at most: the plate keeps its press presence while the name clears
   the fold at 1024x768. On narrow columns it gives up the width of the far
   crop mark, so the mark stays inside the column. */
.masthead .writer-plate {
  width: min(100% - var(--space-5), var(--space-16) + var(--space-10));
  margin-block-end: var(--space-3);
}
.masthead .writer-cell:nth-child(3n + 2) .writer-plate { animation-delay: var(--duration-fast); }
.masthead .writer-cell:nth-child(3n) .writer-plate { animation-delay: calc(var(--duration-fast) * 2); }
.writer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}
.writer-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading);
  letter-spacing: -0.025em;
}
.writer-positioning {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-label);
  line-height: var(--leading-body);
}
/* Two-row ledger: count, then the newest piece; dashed rules as in the
   linked-product facts. Values are real data, never padded: a writer with no
   article reads zero and 「none yet」 on the same two rows. */
.writer-ledger {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 0;
  border-block-start: 1px solid var(--color-border-strong);
}
.writer-ledger > div {
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: baseline;
  align-content: start;
  padding-block: var(--space-2);
  border-block-end: 1px dashed var(--color-border);
}
.writer-ledger dt {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}
.writer-ledger dd { margin: 0; font-size: var(--text-label); }
.writer-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}
.writer-none { color: var(--color-text-muted); }
.writer-ledger time {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.writer-latest {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: var(--chrome-min-target); /* contract minimumTargetPx: 44 */
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-underline-offset: 0.2em;
}
.writer-latest:hover { color: var(--color-accent-text); }
.writer-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--chrome-min-target); /* contract minimumTargetPx: 44 */
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.writer-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* The ring moves to the whole cell only where :has() works; elsewhere the
   link keeps its own focus outline. */
@supports selector(:has(a)) {
  .writer-link:focus-visible { outline: none; }
  .writer-cell:has(.writer-link:focus-visible) {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: var(--space-2);
  }
}
.writer-cell:hover .writer-link { color: var(--color-accent-text); }
/* Each sentence is its own box, so a line breaks between sentences before
   it breaks inside one (zh has no word spaces to hold 「內容」 together). */
.authors-colophon {
  max-width: 72ch;
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}
.authors-colophon span { display: inline-block; }
.authors-colophon a { color: var(--color-accent-text); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .masthead .writer-plate {
    transition: transform var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }
}
@media (hover: hover) {
  .writer-cell:hover .writer-plate {
    transform: translate(-0.125rem, -0.125rem);
    box-shadow: 0.4375rem 0.4375rem 0 var(--color-text);
  }
  [data-theme="dark"] .writer-cell:hover .writer-plate {
    box-shadow: 0.4375rem 0.4375rem 0 var(--color-border-strong);
  }
}

@media (max-width: 1024px) {
  .masthead { column-gap: var(--space-6); }
  .writer-cell:not(:nth-child(3n + 1))::before { left: calc(var(--space-3) * -1); }
}
/* Phone: one column per writer, the plate beside the name so a writer reads
   in a single glance and the three do not become a tall wall of squares. */
@media (max-width: 640px) {
  .masthead { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .writer-cell {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: end;
  }
  .writer-cell:nth-child(n + 4) { margin-block-start: 0; }
  .writer-cell:not(:nth-child(3n + 1))::before { display: none; }
  .writer-cell + .writer-cell {
    padding-top: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }
  .writer-name { font-size: var(--text-heading-md); }
  .masthead .writer-plate { width: var(--space-12); margin: var(--space-2) 0 var(--space-2); }
  .writer-positioning,
  .writer-ledger,
  .writer-link { grid-column: 1 / -1; }
  .writer-ledger { grid-row: auto; grid-template-rows: none; }
}

/* ---------- Writers strip (Insights list, author page foot) ---------- */

.writers-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
  margin-bottom: var(--space-5);
}
/* Author page foot: the same row under a rule, after the articles. */
.writers-strip--foot {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-4);
  border-block-start: 1px solid var(--color-border-strong);
}
.writers-strip-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-label);
}
.writers-strip ul {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.writers-strip-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--chrome-min-target); /* contract minimumTargetPx: 44 */
  color: var(--color-text);
  text-decoration: none;
}
.writers-strip-link:hover b { color: var(--color-accent-text); text-decoration: underline; }
.writers-strip-org { color: var(--color-text-muted); }
.writers-strip-avatar {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  object-fit: cover;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.writers-strip-avatar--ghost {
  display: grid;
  place-items: center;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.writers-strip-end { margin-inline-start: auto; }
.writers-strip-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--chrome-min-target); /* contract minimumTargetPx: 44 */
  color: var(--color-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.writers-strip-all:hover { color: var(--color-accent-text); }
/* Phone: on the Insights list the lead-in gives way (the region keeps its
   label) and the chips shrink, so the cast and the index link share one line
   while they fit. The author page foot keeps its lead-in: it is what names
   the row. */
@media (max-width: 640px) {
  .writers-strip:not(.writers-strip--foot) .writers-strip-lead { display: none; }
  .writers-strip ul { gap: 0 var(--space-4); }
  .writers-strip-link { font-size: var(--text-label); }
  .writers-strip-avatar { width: var(--space-5); height: var(--space-5); }
}

/* ---------- Insights filter row ---------- */

/* The applied-writer chip (an old ?writer= link): the coral frame marks it
   as the active condition and the × removes it; the pseudo-element grows the
   target to 44px without moving the row. */
.chip-applied {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-color: var(--color-accent);
}
.chip-applied::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-2) * -1) 0;
}
.chip-applied:hover { background: var(--color-accent-soft); }