/**
 * @file
 * Reading surfaces — poem detail, critique stream, composition forms.
 *
 * The "calm required" surfaces from DESIGN.md: where a poet is reading
 * or writing, the page must defer to the work. Charter typography,
 * generous measure, hairline dividers, italic register for quoted
 * lines and pulls, no atmospheric chrome.
 */

/* -----------------------------------------------------------------------
 * 1. Poem container — measure, scale, leading.
 *    Outer .poem-container is the layout column; .poem-content is the
 *    flowing poem body where the line breaks set by the poet are
 *    preserved. The poet sets the line; the container only decides
 *    where a long line begins to wrap.
 * --------------------------------------------------------------------- */
.poem-full .poem-container {
  max-width: var(--np-container-narrow);     /* 720px column for poem detail */
  margin: 0 auto;
  padding: var(--np-space-8) var(--np-space-5);
  background: var(--np-bg-primary);
}

.poem-full .poem-title {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);     /* serif single weight */
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: var(--np-leading-snug);
  letter-spacing: var(--np-tracking-snug);
  color: var(--np-text-primary);
  margin: 0 0 var(--np-space-6);
  font-feature-settings: "kern", "liga", "onum";
}

/* The poem body itself — 50ch measure by default, releases to the full
   720px column with .poem-wide. The poet's whitespace is preserved so
   forced line breaks render as the poet set them. */
.poem-full .poem-content {
  max-width: var(--np-measure-poem);         /* 50ch default */
  margin: 0 auto;
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-md);              /* 18px reading body */
  line-height: var(--np-leading-relaxed);    /* 1.65 */
  color: var(--np-text-primary);
  white-space: pre-wrap;                     /* preserve poet's line breaks */
  font-feature-settings: "kern", "liga", "onum";
}

.poem-full .poem-content.poem-wide,
.poem-full.poem-wide .poem-content {
  max-width: none;                           /* released to container */
}

/* Poet's meta strip (author + date + premium read count) above the poem.
   Sans, small, muted graphite — the room around the work, not the work. */
.poem-full .poem-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--np-space-4);
  padding-bottom: var(--np-space-5);
  margin-bottom: var(--np-space-6);
  border-bottom: var(--np-border-hairline) solid var(--np-border-tertiary);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-secondary);
}

.poem-full .author-info {
  display: flex;
  align-items: center;
  gap: var(--np-space-3);
}

.poem-full .author-info .username {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-sm);
  color: var(--np-text-primary);
  text-decoration: none;
}

.poem-full .author-info .username:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.poem-full .author-info .profile-picture,
.poem-full .author-info .initials-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--np-radius-circle);
  background: var(--np-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--np-font-serif);
  color: var(--np-text-primary);
}

.poem-full .publication-info {
  font-variant-numeric: oldstyle-nums;
  color: var(--np-text-tertiary);
  font-size: var(--np-text-sm);
  display: flex;
  align-items: center;
  gap: var(--np-space-3);
}

/* -----------------------------------------------------------------------
 * 2. Premium-gated read count — DESIGN.md component.premium_metric.
 *    Label + value + lock glyph, all muted. The lock glyph is the only
 *    place antique gold appears outside role badges.
 * --------------------------------------------------------------------- */
.poem-full .view-count {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-tertiary);
  font-variant-numeric: tabular-nums lining-nums;
}

.poem-full .premium-teaser {
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-2);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-tertiary);
  text-decoration: none;
}

.poem-full .premium-teaser::before {
  content: "lock";
  font-family: "Material Symbols Outlined";
  font-size: 14px;
  color: var(--np-role-premium);
}

.poem-full .premium-teaser:hover {
  color: var(--np-text-secondary);
}

/* -----------------------------------------------------------------------
 * 3. About-this-poem / About-the-author panels — quiet inset blocks.
 * --------------------------------------------------------------------- */
.poem-full .poem-details-container,
.poem-full .author-bio {
  max-width: var(--np-measure-prose);
  margin: var(--np-space-8) auto 0;
  padding-top: var(--np-space-6);
  border-top: var(--np-border-hairline) solid var(--np-border-tertiary);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-secondary);
  line-height: var(--np-leading-normal);
}

.poem-full .poem-details-container h3,
.poem-full .author-bio h3 {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-wide);
  color: var(--np-text-secondary);
  margin: 0 0 var(--np-space-4);
}

.poem-full .poem-details-container p,
.poem-full .author-bio p {
  margin: 0 0 var(--np-space-3);
}

.poem-full .poem-details-container strong,
.poem-full .author-bio strong {
  font-weight: var(--np-weight-medium);
  color: var(--np-text-primary);
}

/* -----------------------------------------------------------------------
 * 4. Critique stream — the comment thread on poem pages.
 *    The unified critique_item archetype: avatar left, body column right,
 *    sans head, serif body, sans foot. Hairline divider between items.
 * --------------------------------------------------------------------- */
.poem-full #comments {
  max-width: var(--np-measure-prose);        /* 65ch column for the stream */
  margin: var(--np-space-12) auto 0;
}

.poem-full #comments > h3 {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-wide);
  color: var(--np-text-secondary);
  border-top: var(--np-border-hairline) solid var(--np-border-tertiary);
  padding-top: var(--np-space-3);
  margin: 0 0 var(--np-space-6);
}

/* The critique_item structure — works against the existing
   .comment markup we ship from comment.html.twig. */
.comment {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: var(--np-space-4);
  padding: var(--np-space-5) 0;
  border-top: var(--np-border-hairline) solid var(--np-border-tertiary);
  background: var(--np-bg-primary);
}

.comment:first-child {
  border-top: none;                          /* the section header rule already lives above */
}

/* Avatar column */
.comment .comment__picture-wrapper {
  grid-column: 1;
}

.comment .comment__picture {
  width: 32px;
  height: 32px;
  border-radius: var(--np-radius-circle);
  background: var(--np-bg-secondary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--np-font-serif);
  color: var(--np-text-primary);
}

.comment .comment__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body column */
.comment .comment__text-wrapper {
  grid-column: 2;
  min-width: 0;
}

.comment .comment__meta {
  display: flex;
  align-items: baseline;
  gap: var(--np-space-2);
  margin-bottom: var(--np-space-2);
}

.comment .comment__author {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-sm);
  color: var(--np-text-primary);
  margin: 0;
}

.comment .comment__author a {
  color: inherit;
  text-decoration: none;
}

.comment .comment__author a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.comment .comment__time {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-xs);
  color: var(--np-text-tertiary);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}

.comment .comment__content {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
  color: var(--np-text-primary);
  font-feature-settings: "kern", "liga", "onum";
}

.comment .comment__content > h3 {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-md);
  line-height: var(--np-leading-snug);
  color: var(--np-text-primary);
  margin: 0 0 var(--np-space-2);
}

.comment .comment__content > h3 a {
  color: inherit;
  text-decoration: none;
}

.comment .comment__content p {
  margin: 0 0 var(--np-space-3);
}

.comment .comment__content p:last-child {
  margin-bottom: 0;
}

/* Foot — reply / helpful actions, sans, muted, small. */
.comment .comment__links-wrapper {
  margin-top: var(--np-space-3);
}

.comment .comment__links-wrapper ul,
.comment .comment__links-wrapper .links {
  display: flex;
  align-items: center;
  gap: var(--np-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment .comment__links-wrapper li {
  list-style: none;
}

.comment .comment__links-wrapper a {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-xs);
  color: var(--np-text-tertiary);
  text-decoration: none;
}

.comment .comment__links-wrapper a:hover {
  color: var(--np-text-secondary);
}

/* Threading — indented children with no extra rail. */
.comment .indented {
  margin-left: var(--np-space-6);
}

/* -----------------------------------------------------------------------
 * 5. Featured critique — when an editor or community signal elevates
 *    one critique above the rest. Warm inset surface, persimmon left
 *    rail, "Featured critique" eyebrow. DESIGN.md component.featured_critique.
 *    Activates when a comment carries .featured-critique class (set
 *    by an editor/admin via a future field; currently inert until that
 *    classification ships).
 * --------------------------------------------------------------------- */
.comment.featured-critique {
  background: var(--np-bg-secondary);
  border: var(--np-border-hairline) solid var(--np-border-tertiary);
  border-left: var(--np-border-width-emphasis) solid var(--np-color-accent);
  border-radius: var(--np-radius-md);
  padding: var(--np-space-5);
  margin-bottom: var(--np-space-5);
}

.comment.featured-critique::before {
  content: "Featured critique";
  display: block;
  grid-column: 1 / -1;
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-wide);
  color: var(--np-text-secondary);
  margin: 0 0 var(--np-space-3);
}

.comment.featured-critique .comment__content {
  font-style: italic;                        /* the elevated pull register */
  font-size: var(--np-text-lg);
  line-height: var(--np-leading-relaxed);
}

/* -----------------------------------------------------------------------
 * 6. Italic register — blockquote, work titles, epigraph, pull-quote.
 *    Charter Italic at 400, never synthesized. Rendered inside reading
 *    surfaces (poem detail, critique threads, marketing prose).
 * --------------------------------------------------------------------- */
.poem-full blockquote,
.comment blockquote,
.np-prose blockquote {
  font-family: var(--np-font-serif);
  font-style: italic;
  font-weight: var(--np-weight-regular);
  font-size: inherit;
  line-height: var(--np-leading-relaxed);
  color: var(--np-text-primary);
  margin: var(--np-space-4) 0;
  padding-left: var(--np-space-4);
  border-left: 1.5px solid var(--np-border-tertiary);
}

.poem-full em,
.poem-full cite,
.comment em,
.comment cite,
.np-prose em,
.np-prose cite {
  font-family: var(--np-font-serif);
  font-style: italic;
  font-weight: var(--np-weight-regular);
}

/* Epigraph — italic line above a poem; one scale step below body. */
.poem-full .poem-epigraph {
  font-family: var(--np-font-serif);
  font-style: italic;
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-snug);
  color: var(--np-text-secondary);
  max-width: var(--np-measure-aside);
  margin: 0 auto var(--np-space-6);
}

/* Pull quote — featured-critique pull (one step above body, italic). */
.np-pull-quote {
  font-family: var(--np-font-serif);
  font-style: italic;
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-lg);
  line-height: var(--np-leading-relaxed);
  color: var(--np-text-primary);
  margin: var(--np-space-6) 0;
}

/* -----------------------------------------------------------------------
 * 7. Subscribe action — DESIGN.md component.subscribe_action. Quieter
 *    than Follow; sits in the action strip. Not a primary CTA.
 * --------------------------------------------------------------------- */
.poem-full .subscribe-btn {
  margin: var(--np-space-6) 0;
}

.poem-full .subscribe-btn a {
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-2);
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-sm);
  color: var(--np-text-secondary);
  background: transparent;
  border: var(--np-border-width) solid transparent;
  border-radius: var(--np-radius-md);
  padding: var(--np-space-2) var(--np-space-4);
  text-decoration: none;
  transition: background-color var(--np-duration-base) var(--np-ease-standard),
              color var(--np-duration-base) var(--np-ease-standard);
}

.poem-full .subscribe-btn a:hover {
  background: var(--np-bg-secondary);
  color: var(--np-text-primary);
}

/* -----------------------------------------------------------------------
 * 8. Composition forms — calm-required reading-style typography.
 *    Body textareas use Charter so the writer sees the work in the
 *    register it will be read in.
 * --------------------------------------------------------------------- */
.node-poem-form textarea[name*="body"],
.node-poem-form .text-format-wrapper textarea {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-md);
  line-height: var(--np-leading-relaxed);
  color: var(--np-text-primary);
  background: var(--np-bg-primary);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-md);
  padding: var(--np-space-4);
  font-feature-settings: "kern", "liga", "onum";
}

.node-poem-form textarea[name*="body"]:focus,
.node-poem-form .text-format-wrapper textarea:focus {
  outline: none;
  border-color: var(--np-border-focus);
  box-shadow: var(--np-shadow-focus);
}

.comment-form textarea {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
  color: var(--np-text-primary);
  background: var(--np-bg-primary);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-md);
  padding: var(--np-space-3);
  font-feature-settings: "kern", "liga", "onum";
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--np-border-focus);
  box-shadow: var(--np-shadow-focus);
}

/* -----------------------------------------------------------------------
 * 9. Role badges — small text labels next to a username when the role
 *    is worth surfacing. Per DESIGN.md component.role: text-only badges,
 *    deliberately muted colors, NEVER applied to avatars as rings.
 *
 *    The badge text is set in the role's role-color via [data-role];
 *    the surrounding chrome stays minimal (no background fill, no
 *    border) so a list of role labels reads as one composition rather
 *    than as a row of colored pills.
 * --------------------------------------------------------------------- */
.role {
  display: inline-block;
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-xs);
  letter-spacing: var(--np-tracking-wide);
  text-transform: uppercase;
  padding: 2px 0;
  margin-right: var(--np-space-2);
  color: var(--np-role-member);          /* default → graphite */
}

.role[data-role="administrative"]   { color: var(--np-role-administrative); }
.role[data-role="premium"]          { color: var(--np-role-premium); }
.role[data-role="guide"]            { color: var(--np-role-guide); }
.role[data-role="workshop-leader"]  { color: var(--np-role-workshop-leader); }
.role[data-role="member"]           { color: var(--np-role-member); }
.role[data-role="new-member"]       { color: var(--np-role-new-member); }

/* Profile-page role row gets a subtle eyebrow rule above. */
.profile-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--np-space-2);
  padding-top: var(--np-space-3);
  margin-top: var(--np-space-3);
  border-top: var(--np-border-hairline) solid var(--np-border-tertiary);
}