/* ============================================================
   piece.css — individual essay page: header, prose, marginalia, music
   ============================================================ */


/* --- piece header --- */

.piece-title {
  font-size:   1.28rem;
  font-weight: normal;
  font-style:  italic;
  line-height: 1.25;
  margin-bottom: 0.28rem;
}

.piece-meta {
  font-size:     0.68rem;
  color:         var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-l);
}

.piece-edited {
  font-size:      0.62rem;
  color:          var(--faint);
  font-style:     italic;
  letter-spacing: 0.04em;
  margin-left:    0.6rem;
  opacity:        0.7;
}

/* --- prose body --- */

.piece-body p {
  margin-bottom: 1.6em;
}

.piece-body em { font-style: italic; }

.piece-body a {
  color:           var(--ink);
  border-bottom:   1px solid var(--border);
  text-decoration: none;
  transition:      border-color 0.2s;
}

.piece-body a:hover { border-color: var(--ink); }

.piece-body img {
  max-width:     100%;
  height:        auto;
  display:       block;
  margin:        var(--space-m) 0;
  border-radius: 1px;
}

/* headings inside essays 

.piece-body h2 {
  font-size:     1rem;
  font-weight:   normal;
  font-style:    italic;
  margin-top:    var(--space-l);
  margin-bottom: var(--space-s);
  color:         var(--muted);
}*/

/* code — Otokini writes technical content too */
.piece-body pre {
  background:    rgba(244, 207, 169, 0.03);
  border:        none; /*1px solid var(--border);*/
  border-radius: 1px;
  padding:       var(--space-xs) var(--space-xs);
  overflow-x:    auto;
  font-size:     0.82rem;
  line-height:   1.6;
  margin-bottom: var(--space-m);
  -webkit-overflow-scrolling: touch;
}

.piece-body code {
  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size:   1.1em;
}

/* Override hljs background style*/
.piece-body pre code.hljs {
  background: rgb(244 204 169 / 0.03);
}

/* inline code only */
.piece-body p code,
.piece-body li code {
  background:    rgba(39, 26, 13, 0.05);
  padding:       1px 1px;
  border-radius: 1px;
  font-size: 0.9em;
  border: none; 
}

/* blockquotes annotations */
.piece-body blockquote {
  border-left:  2px solid var(--border);
  margin:       0 0 1.6em 0;
  padding-left: 1.2rem;
  color:        var(--muted);
  font-style:   italic;
}

.piece-body blockquote p { margin-bottom: 0; }

/* Handle table overflow */
.table-wrap {
  overflow-x:    auto;
  margin-bottom: 1.6em;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table { margin-bottom: 0; }

.piece-body table {
  width:        100%;
  border-collapse: collapse;
  font-size:    0.85rem;
  margin-bottom: 1.6em;
}

.piece-body th,
.piece-body td {
  border:   1px solid var(--border);
  padding:  0.4rem 0.7rem;
  text-align: left;
}

.piece-body th {
  color:       var(--muted);
  font-weight: normal;
  font-style:  italic;
}

/* --- marginalia highlight ---
     .m-highlight spans are injected by marginalia.js around guest-annotated passages.
     the background and border color are set inline from the guest's assigned color. */

.m-highlight {
  border-radius:  2px;
  cursor:         pointer;
  padding:        1px 3px;
  border-bottom:  1px solid; /* color set inline by marginalia.js */
  transition:     opacity 0.25s;
}

.m-highlight:hover { opacity: 0.7; }

/* subtle prompt beneath the first highlight in a piece */
.m-hint {
  display:       block;
  font-size:     0.66rem;
  color:         var(--faint);
  font-style:    italic;
  margin-top:    -0.6rem;
  margin-bottom: var(--space-m);
  opacity:       0.75;
}


/* --- marginalia reveal ---
     expands below the annotated paragraph when the highlight is clicked.
     uses CSS grid row animation for a smooth unfold rather than max-height hacks. */

.m-reveal-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.48s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.42s ease;
}

.m-reveal-wrapper.open {
  grid-template-rows: 1fr;
  margin: 0.2rem 0 var(--space-m);
}

/* inner div is required for the grid row animation to clip correctly */
.m-reveal-inner { overflow: hidden; }

.m-reveal {
  border-left:  1.5px solid; /* color set inline from guest color */
  padding:      0.68rem 0 0.82rem 1.2rem;
}

/* guest name — hoverable to reveal tooltip */
.m-guest-name {
  font-size:      0.65rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  margin-bottom:  0.26rem;
  cursor:         default;
  position:       relative;
  display:        inline-block;
}

.m-guest-name:hover .m-guest-tooltip { opacity: 1; }

/* tooltip, short description set from guest profile */
.m-guest-tooltip {
  position:       absolute;
  left:           0;
  top:            calc(100% + 5px);
  background:     var(--ink);
  color:          var(--cream);
  font-size:      0.72rem;   /* was 0.59rem */
  letter-spacing: 0.03em;
  padding:        0.38rem 0.65rem;
  border-radius:  2px;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.2s;
  font-style:     italic;
  z-index:        20;
  line-height:    1.5;
  /* size to content, wrap only when viewport forces it */
  width:         max-content;
  max-width:     min(280px, calc(100vw - 4rem));
  white-space:   normal;
}

.m-text {
  font-size:   0.87rem;
  font-style:  italic;
  line-height: 1.85;
  opacity:     0.9;
}

/* guest action buttons. edit and delete, shown only to token owner */
.m-entry-actions {
  display:     flex;
  gap:         0.5rem;
  align-items: center;
  margin-bottom: 0.3rem;
}

.m-action-btn {
  font-family:    inherit;
  font-size:      0.62rem;
  letter-spacing: 0.08em;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        0;
  font-style:     italic;
  opacity:        0.75;
  transition:     opacity 0.2s;
}

.m-action-btn:hover { opacity: 1; }

/* --- footnotes ---
     rendered by marked-footnote as <section class="footnotes"><ol>…</ol></section>
     sits between the prose body and the music credit — side quests before the music ends */

.piece-body .footnotes {
  margin-top:    var(--space-l);
  padding-top:   var(--space-s);
  border-top:    1px solid var(--border);
}

/* the footnote list — smaller, quieter, still the same serif */
.piece-body .footnotes ol {
  padding-left: 1.2rem;
  list-style:   decimal;
}

.piece-body .footnotes li {
  font-size:     0.82rem;
  line-height:   1.85;
  color:         var(--muted);
  margin-bottom: 0.5em;
}

.piece-body .footnotes li p {
  display:       inline; /* keeps the backref arrow on the same line as the text */
  margin-bottom: 0;
}

/* inline footnote reference — the [1] superscript in the prose */
.piece-body .footnote-ref {
  font-size:      0.72em;
  vertical-align: super;
  line-height:    0;
  color:          var(--faint);
  text-decoration: none;
  margin-left:    1px;
  transition:     color 0.2s;
}

.piece-body .footnote-ref:hover { color: var(--ink); }

/* back-reference arrow — ↩ at the end of each footnote, returns to the inline ref */
.piece-body [data-footnote-backref] {
  font-size:       0.78em;
  color:           var(--faint);
  text-decoration: none;
  margin-left:     0.3em;
  transition:      color 0.2s;
}

.piece-body [data-footnote-backref]:hover { color: var(--ink); }

.piece-music {
  margin-top:  var(--space-l);
  padding-top: var(--space-s);
  border-top:  1px solid var(--border);
}

.piece-music a {
  color:           var(--muted);
  border-bottom:   1px solid var(--border);
  text-decoration: none;
  transition:      color 0.2s;
}

.piece-music a:hover { color: var(--ink); }

.piece-music-label {
  font-size:      0.62rem;
  color:          var(--faint);
  letter-spacing: 0.08em;
  margin-bottom:  0.35rem;
}

.piece-music-track {
  font-size:   0.69rem;
  color:       var(--faint);
  font-style:  italic;
  line-height: 1.8;
}

.piece-music-track a {
  color:           var(--muted);
  border-bottom:   1px solid var(--border);
  text-decoration: none;
  transition:      color 0.2s;
}

.piece-music-track a:hover { color: var(--ink); }