/* entry-detail — the detail page for ONE row of a live feed. Flush. The
 * entry's copy block is this sheet's, at the l register off the type scale
 * and the --sk-rhythm-* knobs, with the reading column, the cover's
 * placement axis, the prose rhythm, the facts list and the prev/next row. */

/* The reading column. Prose rides the theme's own measure so a detail page
 * never sets its own line length. */
.sk-entry-detail-entry,
.sk-entry-detail-missing,
.sk-entry-detail-facts,
.sk-entry-detail-actions {
  max-width: var(--sk-measure);
}

/* A block sized to its text, so the align axis can place it with the same
 * margin rule as the column below it. */
.sk-entry-detail-back {
  display: block;
  width: fit-content;
  margin-bottom: var(--sk-band-pad);
  font-size: var(--sk-text-detail-size);
}

/* ── The ALIGN axis: where the reading column stands in the rail, and which
 * way its copy reads. The measured blocks share ONE max-width, so a margin
 * rule places them as one column (the form band's move); the copy block, the
 * back link, the facts title and the CTA row read to the same side. PROSE
 * keeps its left rag whatever the axis says — a centred paragraph is not a
 * better paragraph — the facts keep label left and value right, and the
 * prev/next row spans the rail as it does at left. */
.sk-entry-detail[data-align="center"]
  :is(
    .sk-entry-detail-back,
    .sk-entry-detail-entry,
    .sk-entry-detail-missing,
    .sk-entry-detail-facts,
    .sk-entry-detail-actions
  ) {
  margin-inline: auto;
}
.sk-entry-detail[data-align="right"]
  :is(
    .sk-entry-detail-back,
    .sk-entry-detail-entry,
    .sk-entry-detail-missing,
    .sk-entry-detail-facts,
    .sk-entry-detail-actions
  ) {
  margin-inline-start: auto;
}
.sk-entry-detail[data-align="center"] .sk-entry-detail-copy {
  align-items: center;
  text-align: center;
}
.sk-entry-detail[data-align="right"] .sk-entry-detail-copy {
  align-items: flex-end;
  text-align: right;
}
.sk-entry-detail[data-align="center"] .sk-entry-detail-meta {
  justify-content: center;
}
.sk-entry-detail[data-align="right"] .sk-entry-detail-meta {
  justify-content: flex-end;
}
.sk-entry-detail[data-align="center"] :is(.sk-entry-detail-facts-title, .sk-entry-detail-actions) {
  text-align: center;
}
.sk-entry-detail[data-align="right"] :is(.sk-entry-detail-facts-title, .sk-entry-detail-actions) {
  text-align: right;
}

/* The meta line is the kit's DETAIL label voice; only the tag takes the
 * accent (the shared row-meta grammar blog-list established). */
.sk-entry-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kit-space-2);
}
.sk-entry-detail-tag {
  color: var(--sk-accent);
}
.sk-entry-detail-author {
  color: var(--sk-ink-muted);
}

/* The lede — one step over body, the shared knob (never a hand-rolled clamp). */
.sk-entry-detail-lede {
  font-size: var(--sk-lede-size);
}

/* ── The COVER placement axis. The cover lives in the ROW partial, so WHERE it
 * sits is decided here: the entry is a flex column and the axis reorders it. */
.sk-entry-detail-entry {
  display: flex;
  flex-direction: column;
  gap: var(--kit-space-4);
}
.sk-entry-detail-cover {
  width: 100%;
  height: auto;
  border-radius: var(--sk-media-radius);
}
.sk-entry-detail[data-cover="above"] .sk-entry-detail-cover {
  order: -1;
}
.sk-entry-detail[data-cover="none"] .sk-entry-detail-cover {
  display: none;
}

/* The prose body: the feed's own render-ready fragment, so the rhythm is set
 * on its CHILDREN rather than on authored classes we don't control. */
.sk-entry-detail-body > * + * {
  margin-top: var(--kit-space-4);
}
.sk-entry-detail-body :is(h2, h3) {
  font-family: var(--kit-font-title);
  font-weight: var(--kit-weight-title);
  line-height: var(--kit-lead-title);
  margin-top: var(--sk-band-pad);
}
.sk-entry-detail-body :is(ul, ol) {
  padding-inline-start: var(--kit-space-4);
}
.sk-entry-detail-body blockquote {
  margin: 0;
  padding-inline-start: var(--kit-space-4);
  border-inline-start: var(--sk-border-width) solid var(--sk-accent);
  color: var(--sk-ink-muted);
}
.sk-entry-detail-body img {
  max-width: 100%;
  height: auto;
}

/* The FACTS list — a product's specs, a project's credits. Hairline rows,
 * the shared ruled vocabulary. */
.sk-entry-detail-facts {
  margin-top: var(--sk-band-pad);
}
.sk-entry-detail-fact-list {
  margin: 0;
  /* Specs/credits are DATA rows — the tighter of the two air dials. */
  --sk-ruled-pad: var(--sk-data-row-pad);
}
.sk-entry-detail-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--kit-space-4);
  font-size: var(--sk-text-detail-size);
}
.sk-entry-detail-fact dt {
  color: var(--sk-ink-muted);
}
.sk-entry-detail-fact dd {
  margin: 0;
  text-align: right;
}

.sk-entry-detail-actions {
  margin-top: var(--sk-band-pad);
}

/* Prev/next — the feed's sequence, when the rows carry neighbours. */
.sk-entry-detail-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--kit-space-4);
  margin-top: var(--sk-band-pad);
  padding-top: var(--sk-ruled-pad);
  border-top: var(--sk-border-width) solid var(--sk-stroke);
}
.sk-entry-detail-nav .sk-detail {
  display: block;
}
.sk-entry-detail-next {
  text-align: right;
}

/* The l register on the entry, the m on the missing notice; every margin is a
 * factor of the one beat. */
.sk-entry-detail-entry {
  position: relative;
  --sk-entry-detail-step: var(--sk-text-h1-size);
  --sk-entry-detail-gap: calc(var(--kit-type-base) * 0.4 + var(--sk-entry-detail-step) * 0.23);
}
.sk-entry-detail-missing {
  position: relative;
  --sk-entry-detail-step: var(--sk-text-h2-size);
  --sk-entry-detail-gap: calc(var(--kit-type-base) * 0.4 + var(--sk-entry-detail-step) * 0.23);
}
.sk-entry-detail-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sk-entry-detail-gap);
  min-width: 0;
}
.sk-entry-detail-copy > * {
  margin: 0;
}
.sk-entry-detail-copy > :is(.sk-eyebrow, .sk-detail) {
  margin-bottom: calc(var(--sk-entry-detail-gap) * (var(--sk-rhythm-label, 0.5) - 1));
}
.sk-entry-detail-copy > .sk-entry-detail-title {
  margin-bottom: calc(var(--sk-entry-detail-gap) * (var(--sk-rhythm-title, 1) - 1));
}
/* Titles BALANCE, the lede and the summary wrap PRETTY; the theme's edge,
 * corner and pad dials dress them. Both paragraphs keep the reading measure. */
.sk-entry-detail-title,
.sk-entry-detail-facts-title {
  text-wrap: balance;
  border-width: var(--kit-edge-title);
  border-style: var(--kit-edge-style-title);
  border-color: currentcolor;
  border-radius: var(--kit-round-title);
  padding: var(--kit-pad-title);
}
.sk-entry-detail-lede,
.sk-entry-detail-summary {
  color: var(--sk-ink-muted);
  text-wrap: pretty;
  border-width: var(--kit-edge-body);
  border-style: var(--kit-edge-style-body);
  border-color: currentcolor;
  border-radius: var(--kit-round-body);
  padding: var(--kit-pad-body);
  max-width: var(--sk-measure, 46ch);
}