/* The rhizome's pages: one block vocabulary, several arrangements.
   Spec: ../Plans/roadmap/xp-rhizome-layouts.md. A page is
   <article class="rz" data-node data-layout> holding .rz-head, .rz-entry
   (.rz-term + blockquote.rz-quote + .rz-mine), .rz-mine, .rz-rel,
   .rz-link, .rz-class, .rz-clip and .rz-lines. Changing an entry's look is
   changing its data-layout; no block knows which surface shows it.

   Three voices stay distinguishable everywhere: key concepts are bold; the
   sources speak in the page's own serif, indented, with a small gray
   citation; the owner speaks in Verdana, the early web's other face, in the
   purple of their Zotero asides. */

.rz {
  --rz-owner: #4b2a7b;
  --rz-cite: #6a6a6a;
  --rz-class-bg: #f2f6ec;
  --rz-class-rule: #6b8e4e;
  max-width: 820px;
}

/* ---------- blocks ---------- */

.rz-head h1 { font-size: 26px; margin: 6px 0 2px; }
.rz-head h1 .rz-dates { font-size: 15px; font-weight: normal; color: var(--rz-cite); }
.rz-tag { font-style: italic; color: #555; margin: 0 0 20px; }

.rz-entry { margin: 0 0 16px; }
.rz-term { font-weight: bold; margin: 0 0 4px; }

.rz-quote { margin: 0 0 6px 32px; }
.rz-quote p { margin: 0 0 4px; }
.rz-quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--rz-cite);
}

.rz-mine {
  font: 13px/1.55 Verdana, Tahoma, sans-serif;
  color: var(--rz-owner);
  border-left: 2px solid var(--rz-owner);
  padding-left: 10px;
  margin: 6px 0 12px 32px;
}
.rz-mine p { margin: 0 0 8px; }
.rz-mine p:last-child { margin-bottom: 0; }
.rz-mine ul, .rz-mine ol { margin: 4px 0 8px; padding-left: 22px; }
/* A quotation inside the owner's own sentence keeps the sources' voice. */
.rz-mine .rz-q { font: 15px/1.4 var(--wxp-page-font, "Times New Roman", serif); color: #222; }

.rz-rel {
  font: 13px/1.5 Verdana, Tahoma, sans-serif;
  color: var(--rz-owner);
  margin: 4px 0 12px 32px;
}
.rz-rel::before { content: "\2192\00a0"; }

/* The foot of a writer's page: everything it connects to (owner, 9/27),
   drawn from the graph by Rhizome.connections, never saved in the page. */
.rz-connections {
  max-width: 820px;
  margin: 8px 0 24px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
  font: 13px/1.7 Verdana, Tahoma, sans-serif;
}
.rz-connections::before { content: "\2192\00a0"; }

/* A phrase the owner linked: a link, so it looks like one. */
.ie-view a.rz-link { color: #0000ee; text-decoration: underline; cursor: pointer; }

/* Pedagogy in place (the owner, 9/25: "scattered throughout"). No label:
   the look carries it. */
.rz-class {
  background: var(--rz-class-bg);
  border-left: 3px solid var(--rz-class-rule);
  padding: 6px 10px;
  margin: 8px 0 14px 32px;
}
.rz-class.rz-mine, .rz-class .rz-mine { border-left: 0; padding-left: 0; margin-left: 0; }

.rz-clip { margin: 0 0 16px; }
.rz-clip button { font: 11px Tahoma, sans-serif; }

.rz-lines { white-space: pre-line; line-height: 1.6; }

/* A passage the resolver scrolled to (IE marks it on arrival). */
.rz .rz-arrived { animation: rz-arrive 2.4s ease-out; }
@keyframes rz-arrive { from { background: #fff3a0; } to { background: transparent; } }

/* ---------- arrangements ---------- */

/* Glossary: an annotated edition. Concept names in the left margin, the
   source's words and the owner's beneath them in the body. */
.rz[data-layout="glossary"] .rz-entry {
  display: grid;
  grid-template-columns: 10em minmax(0, 1fr);
  column-gap: 14px;
}
.rz[data-layout="glossary"] .rz-entry > * { grid-column: 2; }
.rz[data-layout="glossary"] .rz-entry > .rz-term {
  grid-column: 1;
  grid-row: 1 / span 20;
  text-align: right;
  margin: 2px 0 0;
}
.rz[data-layout="glossary"] .rz-entry > .rz-quote,
.rz[data-layout="glossary"] .rz-entry > .rz-mine,
.rz[data-layout="glossary"] .rz-entry > .rz-rel,
.rz[data-layout="glossary"] .rz-entry > .rz-class { margin-left: 0; }

/* Dialogue: call and response. The source speaks at the margin, the owner
   answers indented, as a reply. */
.rz[data-layout="dialogue"] .rz-quote { margin-left: 0; font-size: 17px; }
.rz[data-layout="dialogue"] .rz-mine { margin-left: 48px; }

/* Essay: the owner's voice leads; the sources move to the margin. */
.rz[data-layout="essay"] .rz-mine {
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
  font-size: 14px;
}
.rz[data-layout="essay"] .rz-quote {
  float: right;
  clear: right;
  width: 34%;
  margin: 2px 0 10px 18px;
  font-size: 14px;
  color: #333;
  border-top: 1px solid #ccc;
  padding-top: 4px;
}
.rz[data-layout="essay"] .rz-head::after { content: ""; display: block; clear: both; }

/* Object: a museum label. The clip first, then the liner note, then the
   citations that illuminate it, small. */
.rz[data-layout="object"] .rz-mine { font-size: 15px; border-left: 0; padding-left: 0; margin-left: 0; }
.rz[data-layout="object"] .rz-quote { font-size: 14px; }

/* Lyric: a lyric sheet. */
.rz[data-layout="lyric"] { text-align: center; }
.rz[data-layout="lyric"] .rz-lines { font-size: 15px; margin: 0 0 18px; }

/* Note: an index card, and plain enough for a Notepad window. */
.rz[data-layout="note"] .rz-head h1 { font-size: 18px; }
.rz[data-layout="note"] .rz-quote,
.rz[data-layout="note"] .rz-mine,
.rz[data-layout="note"] .rz-rel,
.rz[data-layout="note"] .rz-class { margin-left: 16px; }

/* Narrow windows: margins fold into the body. The query is on whatever
   surface holds the page (an IE window can be narrow on a wide screen). */
:has(> .rz) { container-type: inline-size; }
@container (max-width: 760px) {
  .rz[data-layout="glossary"] .rz-entry { display: block; }
  .rz[data-layout="glossary"] .rz-entry > .rz-term { text-align: left; }
  /* folded, the entry's blocks take back the indent the margin column gave them */
  .rz[data-layout="glossary"] .rz-entry > .rz-quote,
  .rz[data-layout="glossary"] .rz-entry > .rz-mine,
  .rz[data-layout="glossary"] .rz-entry > .rz-rel,
  .rz[data-layout="glossary"] .rz-entry > .rz-class { margin-left: 32px; }
  .rz[data-layout="essay"] .rz-quote { float: none; width: auto; margin: 6px 0 10px 32px; }
}

/* ---------- the edit mode's layer (O30 turns it on) ----------
   Tags and connections are revealed only here (owner, 9/25). The edit mode
   draws them from the graph at view time, so pages never carry them. */
.rz-meta { display: none; }
body.rz-editing .rz-meta {
  display: block;
  font: 11px Tahoma, sans-serif;
  color: #444;
  border-top: 1px dashed #999;
  margin-top: 24px;
  padding-top: 6px;
}
/* Sentences Claude drafted in the owner's voice (the addendum's °). Shown
   as such only to the owner. */
body.rz-editing .rz [data-by="claude"] { outline: 1px dashed #c05; outline-offset: 2px; }

/* Haraway's page (O58, js/rz-rewrite.js): a character under the cursor. */
.rz-rewrite .rz-glitch { text-shadow: -2px 0 #a020f0, 2px 0 #00c8c8; }
.rz-rewrite .rz-quote + .rz-quote { margin-top: 3em; }