/* Manifest reader and preview-fragment composition styles.
 * Owner: design/compositions/manifest_article.jinja and reader/preview projections.
 * This carrier owns manifest-* and preview-fragment layout only; reader mechanics stay in UIKernel-backed runtimes.
 */

/* ============================================================
 * manifest-reader — U3 ArtifactManifest-driven reading surface
 * ============================================================ */

/* Reader article — long-form reading surface.
 *
 * Width discipline: 720px text column (≈ 65–75 CPL at body size),
 * inside a 1080px outer frame so the article gets generous side
 * margins on the canvas without feeling claustrophobic.  The
 * sand-paper canvas (.shell-main background) provides the visual
 * margin; the article itself is a calm white surface.
 *
 * Typography canon: Source Serif 4 body (publication aesthetic),
 * 17px / 1.7 line height — comfortable to read for thousands of
 * words.  Pre-step-30 the body was Inter at 14px on a 880px wide
 * column = ~110 CPL, which read as a form, not a document.
 */
.manifest-reader {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-8) var(--space-10);
  font-family: var(--lp-font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--lp-text);
}

.manifest-reader[data-artifact-kind="sheet"],
.manifest-reader[data-artifact-kind="peer_benchmark"],
.manifest-reader[data-artifact-kind="provenance"] {
  max-width: 960px;
}

@media (max-width: 720px) {
  .manifest-reader {
    padding: var(--space-7) var(--space-5) var(--space-9);
    font-size: 16px;
  }
}

.manifest-reader-head {
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--lp-rule);
  margin-bottom: var(--space-8);
}

.manifest-reader-title {
  font-family: var(--lp-font-serif);
  font-size: 40px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--lp-text);
  margin: var(--space-4) 0 var(--space-4);
}
@media (max-width: 720px) {
  .manifest-reader-title { font-size: 32px; }
}

.manifest-reader-meta {
  font-family: var(--lp-font-sans);
  font-size: 14.5px;
  color: var(--lp-text-mid);
  line-height: 1.55;
  margin-top: var(--space-3);
}

/* Version & integrity hashes — now collapsed into a <details>
 * disclosure below the title.  Engineer chrome belongs in a
 * drawer, not above the document title. */
.manifest-reader-version-details {
  margin-top: var(--space-5);
  font-family: var(--lp-font-sans);
}
.manifest-reader-version-details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--lp-text-soft);
}
.manifest-reader-version-details summary::-webkit-details-marker { display: none; }
.manifest-reader-version-summary-arrow {
  display: inline-block;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
  color: var(--lp-text-soft);
}
.manifest-reader-version-details[open] .manifest-reader-version-summary-arrow {
  transform: rotate(180deg);
}
.manifest-reader-version {
  margin-top: var(--space-3);
  font-family: var(--lp-font-sans);
  font-size: 12.5px;
  color: var(--lp-text-soft);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.manifest-reader-version-label {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-slate-light);
}
.manifest-reader-version-sep { color: var(--color-rule); margin: 0 var(--space-1); }

.manifest-reader-history {
  margin-top: var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.manifest-reader-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  color: var(--color-text-muted);
}
.manifest-reader-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-rule);
}
.manifest-reader-history-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}
.manifest-reader-history-row:last-child { border-bottom: 0; }
.manifest-reader-history-row-active {
  background: var(--color-paper);
}
.manifest-reader-history-status {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-family: var(--type-small-family);
  font-size: var(--type-small-size);
}
.manifest-reader-history-status-muted {
  opacity: 0.75;
}
.manifest-reader-history-meta,
.manifest-reader-history-hash {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--type-small-family);
  font-size: var(--type-small-size);
}
.manifest-reader-history-link {
  width: fit-content;
  color: var(--color-accent);
  font-family: var(--type-small-family);
  font-size: var(--type-small-size);
  text-decoration: none;
}
.manifest-reader-history-link:hover { text-decoration: underline; }

.manifest-section {
  margin-bottom: var(--space-9);
}

.manifest-section-head {
  margin-bottom: var(--space-6);
}

.manifest-section-title {
  font-family: var(--lp-font-serif);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lp-text);
  margin: var(--space-3) 0 var(--space-3);
}

.manifest-section-sub {
  font-family: var(--lp-font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--lp-text-mid);
  margin: 0;
}

/* Section body — no longer gated by a grey rule on the left.  The
 * section title already does the job of marking the boundary;
 * an extra rule + 16px indent was outline-style chrome that the
 * typography rhythm should be doing instead. */
.manifest-section-body {
  padding-left: 0;
  border-left: 0;
  max-width: 100%;
  overflow-x: auto;
}

/* Honest empty-state: a scope chip was promised but no claims
 * materialized. The section header still renders (so the audit
 * reader sees what was promised), and this block renders inside
 * the section body to show what is NOT there. Same absence-
 * diagnostic vocabulary the rest of the codebase uses. */
.manifest-section-empty {
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper);
  border: 1px dashed var(--color-rule);
  border-radius: var(--radii-md);
  color: var(--color-text-muted);
}
.manifest-section-empty-text {
  margin: var(--space-2) 0 0;
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--color-text-muted);
}

.manifest-block-heading {
  font-family: var(--lp-font-serif);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--lp-text);
  margin: var(--space-7) 0 var(--space-3);
}

.manifest-block-paragraph {
  font-family: var(--lp-font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--lp-text);
  margin: 0 0 var(--space-5);
}
@media (max-width: 720px) {
  .manifest-block-paragraph { font-size: 16px; }
  .manifest-block-heading { font-size: 20px; }
}

/* Claim block — data row inside the document, not an alert box.
 * Pre-step-30 every claim wore a 1px outline + 3px orange-left
 * border + light surface background; on a page with 30+ claims that
 * became a sea of alert-styled rows.  Now the claim is a calm
 * structured row: no outline, a small orange tick at the start
 * (via the value strong-weight color), wide padding to breathe. */
.manifest-claim {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--lp-orange-soft);
  border-radius: 0;
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.manifest-claim:hover {
  border-left-color: var(--lp-orange);
}

.manifest-claim-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.manifest-claim-label {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.manifest-claim-state {
  display: inline-block;
  font-family: var(--type-eyebrow-family);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px var(--space-3);
  border-radius: var(--radii-pill);
  background: var(--color-paper);
  color: var(--color-slate);
}
.manifest-claim-state[data-state="reviewer-accepted"],
.manifest-claim-state[data-state="accepted"] {
  background: #DCFCE7; color: var(--color-green);
}
.manifest-claim-state[data-state="overridden"] {
  background: #FEF3C7; color: #8A6D00;
}
.manifest-claim-state[data-state="rejected"] {
  background: #FEE2E2; color: var(--color-red);
}
.manifest-claim-state[data-state="source-linked"] {
  background: #E0F2FE; color: #155E75;
}
.manifest-claim-state[data-state="derived"],
.manifest-claim-state[data-state="system-reconciled"] {
  background: #EDE9FE; color: #5B21B6;
}

.manifest-claim-value {
  font-family: var(--type-mono-family);
  font-size: var(--type-lead-size);
  color: var(--color-text);
}
.manifest-claim-value strong {
  font-weight: 600;
  color: var(--color-text);
}
.manifest-claim-unit {
  margin-left: var(--space-2);
  font-size: var(--type-small-size);
  color: var(--color-text-muted);
}
.manifest-claim-period {
  font-size: var(--type-small-size);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

.manifest-claim-text {
  margin-top: var(--space-2);
  font-family: var(--type-body-family);
  font-size: var(--type-small-size);
  font-style: italic;
  line-height: var(--type-body-line);
  color: var(--color-text-muted);
}

.manifest-claim-review {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radii-md);
  background: var(--color-paper);
}
.manifest-claim-review-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.manifest-claim-review-row + .manifest-claim-review-row {
  margin-top: var(--space-2);
}
.manifest-claim-review-label {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.manifest-claim-review-value {
  font-family: var(--type-mono-family);
  font-size: var(--type-mono-size);
  color: var(--color-text);
  text-align: right;
}
.manifest-claim-review-note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  font-family: var(--type-body-family);
  font-size: var(--type-small-size);
  line-height: var(--type-body-line);
  color: var(--color-text-muted);
}

.manifest-claim-citation {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: var(--radii-md);
  cursor: pointer;
  color: var(--color-text-muted);
  font-family: var(--type-body-family);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
              color var(--motion-duration-fast) var(--motion-ease-standard);
}
.manifest-claim-citation:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.manifest-claim-citation-text {
  font-family: var(--type-mono-family);
  font-size: var(--type-mono-size);
}

.manifest-empty {
  padding: var(--space-8) var(--space-7);
  text-align: center;
  background: var(--color-paper);
  border: 1px dashed var(--color-rule);
  border-radius: var(--radii-lg);
}
.manifest-empty p {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
}

.manifest-reader-foot {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-rule);
}

.manifest-source {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper);
  border-radius: var(--radii-md);
}
.manifest-source-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.manifest-source-label {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-slate-light);
  min-width: 110px;
}
.manifest-source-row > :not(.manifest-source-label) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.manifest-source-row a {
  color: var(--color-orange);
  text-decoration: none;
  word-break: break-all;
}
@media (max-width: 720px) {
  .manifest-source {
    padding: var(--space-4);
  }
  .manifest-source-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .manifest-source-label {
    min-width: 0;
  }
}

.manifest-notes {
  margin-top: var(--space-6);
}
.manifest-notes ul {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
  font-family: var(--type-body-family);
  font-size: var(--type-small-size);
  line-height: var(--type-body-line);
  color: var(--color-text-muted);
}

/* Reader chrome: Share entry button + Shared banner */

.manifest-reader-actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* The previous `.manifest-reader-share` + `.manifest-reader-primary`
 * namespace was a bespoke button system — orange outline / orange
 * fill with hard-coded uppercase tracking. It duplicated the admitted
 * Button primitive and competed with it. Both classes are deleted;
 * the artifact-reader header now composes `data-primitive="button"`
 * (variants: primary / secondary) directly. See design/LAW.md D-III. */

.manifest-source-open {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radii-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.manifest-source-open:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

/* ============================================================
 * Manifest Reader — iframe-wrapped artifact view + collapsed
 * diagnostic panels. Promotes the beautiful per-artifact view
 * to the primary surface while keeping the manifest claim
 * projection accessible.
 * ============================================================ */

.manifest-reader-stage {
  margin: var(--space-5) 0 var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radii-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 760px;
}

.manifest-reader-frame {
  width: 100%;
  min-height: 760px;
  height: calc(100vh - 240px);
  border: 0;
  display: block;
  background: var(--color-surface);
}

/* `.manifest-reader-primary` was deleted with the bespoke button
 * substitute rollback. The "Present this version" button now uses
 * the admitted Button primitive (`data-primitive="button"`
 * data-variant="primary"`) which carries its own primary styling
 * via the registry. */

.manifest-projection-details {
  margin: var(--space-4) 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radii-md);
  background: var(--color-paper);
}
.manifest-projection-summary {
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--type-body-family);
  font-size: 13px;
  user-select: none;
  list-style: none;
}
.manifest-projection-summary::-webkit-details-marker { display: none; }
.manifest-projection-summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--color-text-muted);
  width: 12px;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.manifest-projection-details[open] .manifest-projection-summary::before {
  transform: rotate(90deg);
}
.manifest-projection-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ============================================================
 * Preview projection — chrome-free embeddable reader
 * The PreviewProjection (step-30 P0.E) renders only the
 * manifest body: claim/citation blocks + source registry.  The
 * surrounding chrome (topbar, public banner, manifest-hash
 * header, standalone actions, footer) is intentionally absent
 * so the preview can be fetched into the gallery popover or the
 * example overview's summary card without nesting a full standalone
 * page within another page.
 * ============================================================ */

body.preview {
  background: var(--color-surface);
}
body.preview .preview-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 32px 48px;
}
body.preview .manifest-reader-preview {
  background: var(--color-surface);
  border: 0;
  box-shadow: none;
}
body.preview .manifest-reader-head-preview {
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
}