/* Thoughts archive — /thoughts/.
   The most recent thought on a sheet of paper; everything earlier hanging
   off a margin rule. Kept out of css/feed.css deliberately: that file also
   owns the shorts film strip, the share dialog and the modals, and this
   page no longer shares anything with them but the container.

   Fonts are assigned per zone and are the point of the design: Space Mono
   on the lead (the face that held the weight in the receipt study),
   Manrope in the margin. */

.tpage { padding: 3.5rem 0 4rem; }

/* ---------- header ---------- */
.tpage__header {
  max-width: 820px;
  margin: 0 auto 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.75rem 1.5rem;
}
.tpage__eyebrow {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-bottom: 0.5rem;
}
.tpage__title {
  grid-column: 1;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.tpage__subtitle {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--color-text-label);
}
.tpage__view {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.tpage__view:hover {
  border-color: var(--color-red);
  color: var(--color-text);
  box-shadow: 0 0 10px var(--color-red-glow);
}

.tpage__body { max-width: 820px; margin: 0 auto; }

.tpage__empty {
  max-width: 820px;
  margin: 3rem auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Section labels. The same tapered hairline css/comments.css uses, whose
   comment rejects "a ladder of rules" — one line that fades at both ends
   rather than a hard rule. */
.tpage__label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.tpage__label span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-label);
}
.tpage__label--lead span { color: var(--color-date); }
.tpage__label i {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent 0%,
    rgba(255, 255, 255, 0.055) 12%, rgba(255, 255, 255, 0.055) 88%, transparent 100%);
}

/* ============================================================
   The lead — one sheet of paper
   ============================================================ */
.tp-lead-wrap { margin-bottom: 3.25rem; }

.tp-lead {
  --leaf: #f0ebe0;
  --leaf-ink: #221f1a;
  --leaf-soft: #8a7f70;
  max-width: 660px;
  background: var(--leaf);
  color: var(--leaf-ink);
  padding: 3rem 3rem 2.4rem;
  /* A sheet lying on something, not a card: no radius, no border, and
     the shadow is the only thing spent on it. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 48px rgba(0, 0, 0, 0.55);
  transition: box-shadow var(--transition-base);
}
.tp-lead:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 26px 60px rgba(0, 0, 0, 0.62);
}

.tp-lead__text {
  font-family: var(--font-mono);
  font-weight: 400;
  /* Mono sets much wider than the serif it replaced, so it runs smaller
     with more leading to hold the same measure. */
  font-size: clamp(0.9rem, 1.8vw, 1.02rem);
  line-height: 1.78;
  color: var(--leaf-ink);
  margin: 0 0 1.6rem;
  white-space: pre-wrap;
}
.tp-lead__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.1rem;
  background: linear-gradient(to right, transparent 0%,
    rgba(0, 0, 0, 0.13) 12%, rgba(0, 0, 0, 0.13) 88%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top;
}
.tp-lead__date {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--leaf-soft);
}

/* ============================================================
   The list — notes hanging off a margin rule
   ============================================================ */
/* One number for the rule, the date column and the hover rail, so they
   can never drift apart. */
.tp-list { position: relative; --rule-x: 148px; }

.tp-list::before {
  content: '';
  position: absolute;
  left: var(--rule-x);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%,
    rgba(255, 255, 255, 0.11) 5%, rgba(255, 255, 255, 0.11) 95%, transparent 100%);
}

.tp-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--rule-x) minmax(0, 1fr);
  gap: 0 2rem;
  padding: 1rem 1.1rem 1rem 0;
  border: 1px solid transparent;
  border-radius: 4px;
  /* .archive-row's hover, minus its padding-left nudge: that shift would
     slide the dates out of alignment with the rule, and the rule is what
     holds this layout together. */
  transition: background var(--transition-base), border-color var(--transition-base);
}
.tp-row:hover,
.tp-row:focus-within {
  background: var(--color-red-subtle);
  border-color: var(--color-border);
}

/* The rail sits on the margin rule, so the rule itself lights up beside
   whichever row you are reading. */
.tp-row__rail {
  position: absolute;
  left: calc(var(--rule-x) - 1px);
  top: 14%;
  bottom: 14%;
  width: 2px;
  background: var(--color-red-bright);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.tp-row:hover .tp-row__rail,
.tp-row:focus-within .tp-row__rail { opacity: 1; transform: scaleY(1); }

.tp-row__date {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-date);
  text-align: right;
  padding-right: 1.5rem;
  padding-top: 0.3rem;
  white-space: nowrap;
}

.tp-row__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.64;
  color: var(--color-text-secondary);
  margin: 0 0 0.6rem;
  white-space: pre-wrap;
  max-width: 52ch;
  transition: color var(--transition-fast);
}
.tp-row:hover .tp-row__text,
.tp-row:focus-within .tp-row__text { color: var(--color-body-text); }

/* ============================================================
   Reactions — present at rest, awake when the row is
   ============================================================ */
/* :not(.is-on) matters: this file loads after css/reactions.css, so a
   bare .tp-row .reaction would outrank .reaction.is-on on equal
   specificity and quietly dim the visitor's own vote. */
.tp-row .reaction:not(.is-on) { opacity: 0.62; }
.tp-row:hover .reaction:not(.is-on),
.tp-row:focus-within .reaction:not(.is-on) { opacity: 0.92; }

/* Dark ink on the paper. The pressed state keeps reactions.css's red,
   which reads correctly on cream. */
.tp-lead .reaction:not(.is-on) { color: #7d7266; opacity: 0.72; }
.tp-lead .reaction:not(.is-on):hover { color: var(--color-red); opacity: 1; }

/* ============================================================
   Plain view — the lead stands down, every thought a row
   ============================================================ */
.tpage--plain .tpage__label { display: none; }

@media (max-width: 720px) {
  .tpage__header { grid-template-columns: 1fr; }
  .tpage__view { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (max-width: 640px) {
  .tp-list { --rule-x: 0px; }
  .tp-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    padding: 0.9rem 0.75rem 0.9rem 1.25rem;
  }
  .tp-row__rail { left: 0; }
  .tp-row__date { text-align: left; padding-right: 0; padding-top: 0; }
  .tp-row__text { max-width: none; }
  .tp-lead { padding: 2.25rem 1.6rem 1.9rem; }
}

@media (max-width: 600px) {
  .tpage { padding: 2.5rem 0 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-row__rail { transition: none; }
  .tp-lead { transition: none; }
}