/* ============================================================================
   views.css — per-screen layout: feed, post detail, auth, compose.
   Content lives in a single ~640px reading column; the page frame goes wider.
   ========================================================================== */

/* — shared column ---------------------------------------------------------------- */
.column {
  width: 100%;
  max-width: var(--col-max);
  margin-inline: auto;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  min-height: 44px;
  color: var(--text-dim);
  font-size: var(--fs-ui);
  text-decoration: none;
}
@media (hover: hover) {
  .back:hover {
    color: var(--text);
  }
}
.back:active {
  color: var(--text);
}
.back svg {
  flex: none;
}

/* — masthead ------------------------------------------------------------------
   The opening block on the feed, for people who aren't signed in. Type and a
   hairline, nothing else: no panel, no shadow, no accent — the point is that it
   reads as the top of a page rather than as a thing placed on top of one. It
   sits in normal flow, so it scrolls away and never comes back until the next
   visit.
   -------------------------------------------------------------------------- */
.masthead {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.masthead__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--s-2);
}
.masthead__line {
  color: var(--text-dim);
  font-size: var(--fs-ui);
  max-width: 46ch;
}

/* — feed ----------------------------------------------------------------------- */
.feed {
  width: 100%;
  max-width: var(--col-max);
  margin-inline: auto;
}
.feed__list {
  display: flow-root;
}
/* Cards used to fade up one after another on arrival. It looked considered and
   wasn't: it fired on pagination and on cache restore too, where nothing had
   conceptually arrived — you were just returning to a list you'd already read.
   Per-item entrance animation is decoration that plays at you. What replaced it
   is in transitions.js: motion that answers a tap. */

.feed__status {
  margin-top: var(--s-6);
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-serif);
  font-size: 1.05rem;
}
.feed__status--pad {
  margin-top: var(--s-8);
}
.feed__sentinel {
  height: 1px;
}
.feed__more {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.feed__error {
  margin-top: var(--s-6);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-ui);
}
.feed__error .btn {
  margin-top: var(--s-3);
}

/* — profile -------------------------------------------------------------------
   A feed with one author in it, so it borrows the feed's column and cards and
   adds only a heading saying whose it is.
   -------------------------------------------------------------------------- */
.profile__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.profile__name {
  font-size: var(--fs-h2);
  overflow-wrap: anywhere;
}
.profile__count {
  color: var(--text-faint);
  font-size: var(--fs-meta);
  min-height: 1em;
}

/* — post detail --------------------------------------------------------------- */
.detail {
  width: 100%;
  max-width: var(--col-max);
  margin-inline: auto;
}
.detail__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--s-4);
}
.detail__byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  color: var(--text-faint);
  font-size: var(--fs-meta);
}
.detail__byline .name {
  color: var(--text-dim);
  text-decoration: none;
}
@media (hover: hover) {
  .detail__byline .name:hover {
    color: var(--text);
    text-decoration: underline;
  }
}
.detail__byline .name:active {
  color: var(--text);
}
.detail__byline .stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.detail__content {
  font-family: var(--font-serif);
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: color-mix(in srgb, var(--text) 94%, transparent);
  max-width: var(--measure);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.detail__actions .grow {
  flex: 1;
}

/* — comments ------------------------------------------------------------------
   Below the post, inside the same reading column. Deliberately *not* cards:
   a card says "this is a thing in a list of like things", and a comment is a
   remark in the margin of something else. So: a rule across the top, a row of
   type per remark, and nothing boxed.
   -------------------------------------------------------------------------- */
.comments {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.comments__head {
  font-size: var(--fs-h2);
  margin-bottom: var(--s-5);
}
.comments__count {
  color: var(--text-faint);
  font-size: var(--fs-meta);
  font-family: var(--font-ui);
  font-weight: 400;
  margin-left: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.comments__list {
  list-style: none;
  /* base.css zeroes margin but not padding, and a bare <ol> carries a 40px
     padding-inline-start for markers this list doesn't show — which left the
     thread out of line with the composer directly above it. */
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.comments__status {
  color: var(--text-faint);
  font-family: var(--font-serif);
  font-size: 1.05rem;
}
.comments__more {
  margin-top: var(--s-5);
  display: flex;
  justify-content: center;
}

.comment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
}
.comment__body {
  min-width: 0;
}
.comment__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
  color: var(--text-faint);
  font-size: var(--fs-meta);
}
.comment__author {
  color: var(--text-dim);
  font-weight: 500;
  text-decoration: none;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .comment__author:hover {
    color: var(--text);
    text-decoration: underline;
  }
}
.comment__author:active {
  color: var(--text);
}
.comment__text {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  max-width: var(--measure);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
/* The remove control stays out of the way until you're near the comment —
   it belongs to one row, not to the page, and a row of live buttons down the
   margin reads as a toolbar. On touch there's no hover, so it's simply always
   there. */
.comment__remove {
  margin-left: auto;
  border: 0;
  padding: 0;
  background: none;
  color: var(--text-faint);
  font-size: var(--fs-meta);
  font-family: inherit;
  cursor: pointer;
}
@media (hover: hover) {
  .comment__remove {
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .comment:hover .comment__remove,
  .comment__remove:focus-visible {
    opacity: 1;
  }
  .comment__remove:hover {
    color: var(--danger);
  }
}
.comment__remove:active {
  color: var(--danger);
}
/* Thirteen-pixel type is a fine target for a mouse and a poor one for a thumb.
   Padding takes the hit box to 44px and an equal negative margin gives the
   space back, so the meta row looks identical either way. */
@media (pointer: coarse) {
  .comment__remove {
    min-height: 44px;
    min-width: 44px;
    padding: var(--s-3);
    margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) calc(var(--s-3) * -1) auto;
  }
}
/* A comment that's on screen but not yet acknowledged by the server. Dimmed
   rather than spinner'd: the optimistic append is meant to feel like it's
   already happened, and a spinner would argue the opposite. */
.comment--pending {
  opacity: 0.55;
}

/* — comment composer ----------------------------------------------------- */
.composer {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.composer__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
}
.composer .textarea {
  min-height: 5.5rem;
}
.composer__prompt {
  margin-bottom: var(--s-6);
  color: var(--text-dim);
  font-size: var(--fs-ui);
}

/* — auth (sign in / register) --------------------------------------------- */
.auth {
  display: grid;
  place-items: center;
  /* dvh, not vh: on a phone the URL bar slides in and out, and vh is frozen at
     the *largest* viewport — so a vh-sized card is taller than the screen
     whenever the chrome is showing, and the page jumps as you scroll.
     --header-h is only the desktop header's height; the narrow-screen rule
     below re-does this sum with the real one. */
  min-height: calc(100dvh - var(--header-h) - var(--s-6) - var(--s-9));
  padding-block: var(--s-6);
}
.auth__card {
  width: 100%;
  max-width: 22rem;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-card);
}
.auth__mark {
  display: flex;
  justify-content: center;
  color: var(--text-dim);
  margin-bottom: var(--s-4);
}
.auth__title {
  font-size: var(--fs-h2);
  text-align: center;
  margin-bottom: var(--s-2);
}
.auth__sub {
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-ui);
  margin-bottom: var(--s-5);
}
.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.auth__form .btn {
  margin-top: var(--s-1);
}
.form-error {
  color: var(--danger);
  font-size: var(--fs-ui);
  text-align: center;
  min-height: 1em;
}
.auth__alt {
  margin-top: var(--s-5);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-ui);
}

/* — compose / edit ----------------------------------------------------------- */
.compose {
  width: 100%;
  max-width: var(--col-max);
  margin-inline: auto;
}
.compose__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--s-5);
}
.compose__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-strong)) saturate(var(--saturate));
  box-shadow: var(--shadow-panel);
  position: relative;
}
.compose__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: var(--hairline);
}
.compose__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.counter {
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.counter--over {
  color: var(--danger);
}
.compose__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}
.title-input {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  padding: var(--s-3);
}

/* — narrow screens: header collapses to two rows ------------------------ */
@media (max-width: 640px) {
  #view {
    padding-top: var(--s-5);
  }
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand account"
      "search search";
    row-gap: var(--s-2);
  }
  .brand {
    grid-area: brand;
  }
  .account {
    grid-area: account;
  }
  .search {
    grid-area: search;
    max-width: none;
  }
  .detail__content {
    font-size: 1.0625rem;
  }
  .detail__actions {
    margin-top: var(--s-6);
  }
  .detail__actions .btn {
    flex: 1;
  }

  /* The auth card is centred against the *mobile* chrome: a ~60px single-row
     header (search is hidden off the feed), #view's narrow-screen top padding,
     its bottom padding, and whatever the notch and home indicator take. */
  .auth {
    min-height: calc(
      100dvh - var(--header-h) - var(--s-5) - var(--s-9) -
        env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
    padding-block: var(--s-5);
  }
  .auth__card {
    padding: var(--s-5) var(--s-4);
  }

  /* On a phone this stopped being a panel floating over a page and became the
     page: no blur, no 64px modal shadow, and a body box you can actually write
     in. It was reading as a desktop dialog that had been squeezed. */
  .compose__title {
    margin-bottom: var(--s-4);
  }
  .compose__panel {
    padding: var(--s-4);
    gap: var(--s-3);
    border-radius: var(--r-md);
    background: var(--panel-bg-fallback);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--shadow-card);
  }
  .compose__panel .textarea {
    /* dvh so the box tracks the visible viewport as the URL bar comes and goes */
    min-height: max(9rem, 28dvh);
  }
  .compose__actions .btn {
    flex: 1;
  }
}

@media (max-width: 380px) {
  .compose__actions {
    flex-direction: column-reverse;
  }
  .compose__actions .btn {
    width: 100%;
  }
  .detail__actions {
    flex-direction: column;
  }
}