/* Revise's paper-and-ink materials: shared by objects and Pagey. */
:root {
  --paper-light: #fffdf7;
  --paper-mid: #f2e7d1;
  --paper-fold: #dfcaa7;
  --paper-ink: #42372b;
  --paper-contour: #7e6750;
  --paper-contact: rgba(66, 55, 43, .12);
}
html.dark { --paper-contour: #b69b78; --paper-contact: rgba(0, 0, 0, .28); }
/* More specific than the legacy outline-only watermark rules. */
svg.subject-fingerprint.paper-icon {
  display: block; position: static; flex: 0 0 auto;
  width: 28px; height: 28px; opacity: 1; overflow: visible;
  fill: none; stroke: none; pointer-events: none;
}
svg.paper-icon.paper-icon--illustrated { width: 72px; height: 72px; }
.paper-icon .pi-object, .paper-icon .pi-details {
  stroke: var(--paper-contour); stroke-width: 1.65;
  stroke-linecap: round; stroke-linejoin: round;
}
.paper-icon .pi-paper { fill: var(--paper-light); }
.paper-icon .pi-fold { fill: var(--paper-fold); }
.paper-icon .pi-accent { fill: currentColor; }
.paper-icon .pi-fold-accent { fill: currentColor; stroke: var(--paper-ink); stroke-opacity: .42; }
/* Layer a translucent ink plane over the accent without SVG definitions/IDs. */
.paper-icon .pi-fold-accent { filter: none; fill: color-mix(in srgb, currentColor 74%, var(--paper-ink)); }
.paper-icon .pi-line { fill: none; stroke: var(--paper-ink); stroke-width: 2.3; }
.paper-icon .pi-light-line { fill: none; stroke: var(--paper-light); stroke-width: 2; }
.paper-icon .pi-seam { fill: none; stroke: var(--paper-contour); stroke-width: 1.2; opacity: .6; }
.paper-icon .pi-highlight { fill: none; stroke: var(--paper-light); stroke-width: 1.6; opacity: .82; }
.paper-icon--compact .pi-object { stroke-width: 2.2; }
html.dark .paper-icon .pi-structure { stroke: #cdb999; }
/* Paper faces retain dark ink; lines on cream objects are still legible. */
html.dark .paper-icon [data-paper-line] { stroke: var(--paper-ink); }
.paper-icon-slot {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 8px; border-radius: 18px;
  background: var(--calm-surface, #fffdfa); box-shadow: 0 2px 0 var(--paper-contact);
}
.paper-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.paper-heading > :last-child { min-width: 0; flex: 1; }
.paper-heading .calm-title, .paper-heading .calm-h2 { margin-top: 0; overflow-wrap: anywhere; }
.paper-heading .calm-eyebrow { margin-bottom: 8px; }
.paper-card-art { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.paper-card-art > :last-child { min-width: 0; flex: 1; }
.paper-card-art .calm-title, .paper-card-art .calm-h2 { margin-top: 6px; overflow-wrap: anywhere; }
.paper-empty-art { margin: 4px 0 18px; }
.paper-completion-art { display: flex; align-items: center; gap: 14px; margin: 12px 0 20px; }
.paper-completion-art .paper-icon { width: 56px; height: 56px; }
.paper-subject-preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.paper-subject-preview [hidden] { display: none; }
.paper-subject-preview-name { overflow-wrap: anywhere; color: var(--calm-text); font-weight: 600; }
.paper-preview-icons .paper-icon { width: 40px; height: 40px; }
@media (max-width: 380px) {
  .paper-heading, .paper-card-art { gap: 12px; }
  .paper-heading .paper-icon--illustrated, .paper-card-art .paper-icon--illustrated { width: 52px; height: 52px; }
  .paper-icon-slot { padding: 6px; border-radius: 14px; }
}
@media (forced-colors: active) {
  svg.subject-fingerprint.paper-icon, .paper-icon-slot, .paper-empty-art { display: none; }
}

/* Let the subject title and its action wrap instead of squeezing the art. */
.calm-head:has(.paper-heading) { flex-wrap: wrap; }
.calm-head:has(.paper-heading) .calm-head-text { flex: 1 1 180px; }
@media (max-width: 767px) {
  .calm-head .paper-heading .paper-icon { width: 48px; height: 48px; }
}
.paper-subject-preview[hidden] { display: none; }