/* ===========================================================================
   FOUNDATION ZERO - SEMANTIC BLOCK STYLING              (ui/book/compose.css)

   The composer decides which rows a block gets. This decides what a block
   looks like inside them - and nothing here is allowed to change how many rows
   it takes, because that would be a second system quietly adjusting vertical
   space behind the composer's back.

   So: every vertical value is 0, a var, or a calc on the rule spacing. No
   margins, no padding-block, no heights in raw pixels. Horizontal values are
   free - they cannot disturb a horizontal grid.

   The typography is deliberately unchanged. Font, size, rule spacing, writing
   width and density are all as accepted; this file only decides what a field
   looks like next to a relationship next to a note.
   =========================================================================== */

/* Blocks never introduce vertical space of their own. The composer owns it. */
.ruled-writing .blk {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* A BLOCKS LAST CHILD MUST NOT LEAK ITS MARGIN THROUGH THE BLOCK.

   A block has no padding and no border - deliberately, so it adds no space of
   its own - and that is exactly the condition under which a childs bottom
   margin COLLAPSES THROUGH its parent and lands on the container instead. The
   block measured a whole number of rows, every block did, and the page was
   still one row taller than the sum of its blocks: 2,688px of blocks inside a
   2,716px region, and one row that belonged to nothing.

   The space after a block is the composers to allocate, so nothing inside a
   block is allowed to contribute any. */
.ruled-writing .blk > *:last-child,
.ruled-writing .blk > *:last-child > *:last-child {
  margin-bottom: 0;
}
.ruled-writing .blk-gap {
  /* Height is set inline in whole rows, and the reason is on the element so a
     blank region can always explain itself. */
  margin: 0; padding: 0;
}

/* ---- TITLE ------------------------------------------------------------- */
.ruled-writing .blk-title .rl-h1 { padding-top: 0; }
.ruled-writing .blk-sub {
  font-family: var(--font-technical); font-size: 10.5px;
  line-height: var(--rule-spacing); color: var(--paper-dim);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---- SECTION ----------------------------------------------------------- */
.ruled-writing .blk-section .rl-h3 { margin: 0; }

/* ---- KEY / VALUE ------------------------------------------------------
   The block the screenshots were worst at. Two stable columns; the row takes
   the height the VALUE needs; a wrapped value continues under the value and
   never under the key. */
.ruled-writing .kv2 {
  display: grid;
  grid-template-columns: minmax(110px, 168px) 1fr;
  column-gap: 16px;
  row-gap: 0;
  margin: 0;
  align-items: start;
}
.ruled-writing .kv2 dt {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  line-height: var(--rule-spacing);
  margin: 0; padding: 0;
  /* A label never wraps into a second row - it would push its own value out of
     alignment with the field name it belongs to. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ruled-writing .kv2 dd {
  margin: 0; padding: 0;
  line-height: var(--rule-spacing);
  min-width: 0;
  overflow-wrap: break-word;
}
.ruled-writing .kv-absent { color: var(--paper-dim); }
.ruled-writing .kv-group {
  font-family: var(--font-technical); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-dim);
  line-height: var(--rule-spacing);
  grid-column: 1 / -1;
}

/* ---- RELATIONSHIPS ----------------------------------------------------
   A verb and a target on clean rows. Not prose, and not boxes floated over
   the rules. */
.ruled-writing .rel-row {
  display: grid;
  grid-template-columns: minmax(110px, 168px) 1fr;
  column-gap: 16px;
  line-height: var(--rule-spacing);
}
.ruled-writing .rel-verb {
  font-family: var(--font-technical); font-size: 10px;
  letter-spacing: 0.12em; color: var(--paper-dim);
  line-height: var(--rule-spacing);
}
.ruled-writing .rel-target { min-width: 0; line-height: var(--rule-spacing); }
.ruled-writing .rel-target code { overflow-wrap: anywhere; }

/* ---- CONDITION --------------------------------------------------------- */
.ruled-writing .cond-raw { line-height: var(--rule-spacing); }
.ruled-writing .cond-raw summary {
  font-family: var(--font-technical); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-dim); cursor: pointer;
  line-height: var(--rule-spacing);
}

/* ---- OBJECTIVE GRAPH --------------------------------------------------
   A small graph gets a small block. Three nodes do not need a quarter page. */
/* INLINE FLOW, NOT FLEX.

   As a wrapping flex container the chain laid its SECOND row out at the height
   of its tallest item rather than on the rule grid, so a graph that wrapped put
   its last two nodes 1.6px off and the rule cut through them. Flex lines do not
   know about line-height; inline lines do. Laying the nodes out as text means a
   wrapped chain lands on the next rule for the same reason every other wrapped
   sentence does. */
.ruled-writing .graph-chain {
  display: block;
  line-height: var(--rule-spacing);
}
.ruled-writing .graph-chain .graph-node,
.ruled-writing .graph-chain .gn-arrow {
  display: inline;
  line-height: var(--rule-spacing);
}
.ruled-writing .graph-chain .graph-node { margin-right: 8px; }
.ruled-writing .graph-list { display: block; }
.ruled-writing .graph-list .graph-node { display: block; line-height: var(--rule-spacing); }
.ruled-writing .graph-node { line-height: var(--rule-spacing); }
.ruled-writing .gn-state {
  font-family: var(--font-technical); font-size: 9.5px;
  letter-spacing: 0.1em; color: var(--paper-dim); margin-right: 6px;
}
.ruled-writing .gn-arrow { color: var(--paper-dim); }

/* ---- NOTE / ANNOTATION ------------------------------------------------
   Subordinate to the record, and visibly so - a rule of its own down the left
   rather than a card that turns the notebook into a dashboard. */
.ruled-writing .blk-note, .ruled-writing .blk-annot {
  padding-left: 12px;
  border-left: 2px solid rgba(35,36,31,0.18);
}
.ruled-writing .note-label, .ruled-writing .annot-head, .ruled-writing .annot-ep {
  font-family: var(--font-technical); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-dim); line-height: var(--rule-spacing);
}
.ruled-writing .annot-head { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- CALLOUT ----------------------------------------------------------- */
.ruled-writing .blk-callout { padding-left: 12px; border-left: 3px solid #b08040; }
.ruled-writing .callout-fault { border-left-color: var(--margin-red); }
.ruled-writing .callout-verified { border-left-color: #4a7c59; }
.ruled-writing .callout-unknown { border-left-color: #8a8578; }
.ruled-writing .callout-label {
  font-family: var(--font-technical); font-size: 9.5px;
  letter-spacing: 0.18em; color: #8a5a2a; line-height: var(--rule-spacing);
}

/* ---- EVIDENCE / TIMELINE ---------------------------------------------- */
.ruled-writing .ev-row, .ruled-writing .tl-row {
  display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto;
  column-gap: 14px; line-height: var(--rule-spacing);
}
.ruled-writing .ev-level, .ruled-writing .tl-when {
  font-family: var(--font-technical); font-size: 9.5px;
  letter-spacing: 0.1em; color: var(--paper-dim); line-height: var(--rule-spacing);
}
.ruled-writing .ev-what, .ruled-writing .tl-what { min-width: 0; }

/* ---- DIAGRAM ----------------------------------------------------------- */
.ruled-writing .dg-title {
  font-family: var(--font-technical); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-dim); line-height: var(--rule-spacing);
}
.ruled-writing .dg-prov {
  font-family: var(--font-technical); font-size: 9.5px;
  color: var(--paper-dim); line-height: var(--rule-spacing);
}

/* ---- TABLE ------------------------------------------------------------
   Technical typography, its own rectangle, and it scrolls inside itself so
   the page never does. */
.ruled-writing .blk-table { overflow-x: auto; max-width: 100%; }
.ruled-writing .tbl {
  border-collapse: collapse; font-family: var(--font-technical);
  font-size: var(--technical-size); line-height: var(--rule-spacing);
}
.ruled-writing .tbl th, .ruled-writing .tbl td {
  text-align: left; padding: 0 14px 0 0; line-height: var(--rule-spacing);
  white-space: nowrap;
}
.ruled-writing .tbl th {
  letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 9.5px; color: var(--paper-dim);
}

/* ---- EQUATION ---------------------------------------------------------- */
.ruled-writing .eq-assume {
  font-family: var(--font-technical); font-size: 10.5px;
  color: var(--paper-dim); line-height: var(--rule-spacing);
}

/* ---- RESPONSIVE RECOMPOSITION ----------------------------------------
   Section 47: the semantic ORDER never changes. At narrow widths a value
   moves under its key rather than being squeezed beside it, and nothing is
   scaled down to fit. */
/* THE BREAKPOINT IS ABOUT THE WRITING COLUMN, NOT THE WINDOW.

   At 900px this stacked every value under its key - but the notebook page is
   only ever a fraction of the window (the index and evidence rails take the
   rest), so a 1200px window with a 600px page was being given the layout meant
   for a phone. Two columns survive down to a genuinely narrow page. */
@media (max-width: 640px) {
  .ruled-writing .kv2,
  .ruled-writing .rel-row,
  .ruled-writing .ev-row,
  .ruled-writing .tl-row {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .ruled-writing .kv2 dt { white-space: normal; }
}

/* ---- DEBUG OVERLAY ----------------------------------------------------
   Development only, and off unless asked for. Answers "why is this area
   blank" by drawing the block boundaries and naming the owner of every gap,
   which is the difference between reading a layout and guessing at it. */
.ruled-writing.rl-debug .blk {
  outline: 1px dashed rgba(60,110,160,0.5);
  position: relative;
}
.ruled-writing.rl-debug .blk::after {
  content: attr(data-block);
  position: absolute; right: 0; top: 0;
  font-family: var(--font-technical); font-size: 8px;
  letter-spacing: 0.1em; color: rgba(60,110,160,0.9);
  background: rgba(255,255,255,0.7); padding: 0 3px;
}
.ruled-writing.rl-debug .blk-gap {
  outline: 1px dotted rgba(200,120,60,0.6);
  position: relative;
}
.ruled-writing.rl-debug .blk-gap::after {
  content: attr(data-gap);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-technical); font-size: 8px;
  color: rgba(200,120,60,0.95);
}

/* A relationship id is already inside its own column, so it does not need the
   inset rule and tint a standalone technical block carries. */
.ruled-writing .rel-id {
  border-left: 0;
  padding-left: 0;
  background: none;
}