/* ===========================================================================
   FOUNDATION ZERO - THE LIVING ENGINEERING BOOK

   It is a BOOK sitting in Zero Shell's dark room, not a dashboard.

   The shell's language is dark and warm: ground #14150f, ink #e8e6df, dim
   #8d897e, Consolas. The book keeps that as its ROOM and brings its own
   materials: a deep blue board, and paper that is warm off-white because
   engineering paper is. The contrast is the point - closing the book should
   feel like putting an object down, not like switching a tab.

   §17: the page types are real materials, chosen by what the object IS (§18),
   not decoration sprinkled at random. Ruled paper for records. Graph paper
   that actually hosts drawings. Lab paper for incidents and experiments. A
   computer sheet for live machinery, because monospace and a dark panel say
   more about a running process than ruled lines would.
   =========================================================================== */

:root {
  --ink: #e8e6df;
  --dim: #8d897e;
  --ground: #14150f;
  --edge: rgba(232, 230, 223, 0.16);
  --live: #9ad17a;
  --warm: #d8a657;
  --bad: #d1706a;
  --pin: #7aa7d1;

  /* the book's own materials */
  --board: #16386b;          /* deep engineering blue */
  --board-hi: #1d4a8c;
  --board-lo: #0e2647;
  --paper: #f3efe4;          /* warm off-white, not white */
  --paper-2: #ece7d8;
  --paper-ink: #23241f;
  --paper-dim: #6d6a5e;
  --rule: #b9c6d8;           /* the faint blue rule of ruled paper */
  --margin-red: #c98b86;
  --grid: #b9c6d8;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--ground); color: var(--ink);
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 13px; overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
.dim { color: var(--dim); }
.small { font-size: 11px; }

/* ---- THE COVER --------------------------------------------------------- */
.cover {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, #1b1d15 0%, var(--ground) 70%);
  z-index: 40;
}
.cover.closing { animation: coverOpen 380ms ease forwards; }
@keyframes coverOpen {
  to { transform: perspective(1400px) rotateY(-58deg) translateX(-14%); opacity: 0; }
}
.cover-board {
  position: relative; width: min(560px, 76vw); aspect-ratio: 3 / 4;
  border-radius: 5px 12px 12px 5px;
  background:
    /* the cloth grain: two fine crosshatches, not an image */
    repeating-linear-gradient(90deg, rgba(255,255,255,0.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 3px),
    linear-gradient(148deg, var(--board-hi) 0%, var(--board) 46%, var(--board-lo) 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset -1px 0 0 rgba(0,0,0,0.30);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cover-board:hover { transform: translateY(-3px); box-shadow: 0 36px 72px rgba(0,0,0,0.6); }
.cover-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 26px;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, rgba(0,0,0,0.42), rgba(0,0,0,0.06));
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.08);
}
.cover-rule {
  position: absolute; inset: 22px 22px 22px 40px;
  border: 1px solid rgba(255,255,255,0.20); border-radius: 3px; pointer-events: none;
}
.cover-mark { font-size: 26px; color: rgba(255,255,255,0.72); }
.cover-title {
  font-size: 21px; letter-spacing: 0.42em; text-indent: 0.42em;
  color: #f2f6fb; text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.cover-sub {
  font-size: 11px; letter-spacing: 0.30em; text-indent: 0.30em;
  color: rgba(226,238,252,0.78);
}
.cover-meta { font-size: 10.5px; color: rgba(226,238,252,0.52); letter-spacing: 0.08em; }
.cover-dot { margin: 0 6px; }
.cover-open {
  margin-top: 16px; font-size: 10.5px; letter-spacing: 0.24em;
  color: rgba(226,238,252,0.62);
  border: 1px solid rgba(255,255,255,0.26); border-radius: 2px; padding: 7px 14px;
}

/* ---- THE OPEN BOOK ----------------------------------------------------- */
.book { position: fixed; inset: 0; display: flex; flex-direction: column; }
.book.opening { animation: bookIn 260ms ease; }
@keyframes bookIn { from { opacity: 0; transform: scale(0.985); } }

.bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--edge);
  background: rgba(24, 26, 19, 0.72); flex: 0 0 auto;
}
.bar-title { font-size: 11px; letter-spacing: 0.20em; color: var(--dim); white-space: nowrap; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 11px; }
.time-label { color: var(--warm); letter-spacing: 0.14em; }
.chip {
  background: transparent; border: 1px solid var(--edge); border-radius: 2px;
  padding: 5px 11px; font-size: 11px; letter-spacing: 0.14em; color: var(--dim);
}
.chip:hover { color: var(--ink); border-color: rgba(232,230,223,0.34); }
.chip-strong { color: var(--pin); border-color: rgba(122,167,209,0.45); }
.chip-strong:hover { color: #cfe2f5; border-color: var(--pin); }
.search {
  background: rgba(0,0,0,0.26); border: 1px solid var(--edge); border-radius: 2px;
  color: var(--ink); padding: 5px 9px; font: inherit; font-size: 11.5px; width: 230px;
}
.search:focus { outline: none; border-color: rgba(122,167,209,0.55); }
.search.ask { width: 190px; }

.spread { flex: 1 1 auto; display: grid; grid-template-columns: 232px 1fr 268px; min-height: 0; }

/* ---- LEFT: the living index -------------------------------------------- */
.index {
  border-right: 1px solid var(--edge); overflow: auto;
  background: rgba(20, 22, 16, 0.5); display: flex; flex-direction: column;
}
.index-head, .rail-head {
  padding: 9px 12px; font-size: 10px; letter-spacing: 0.22em; color: var(--dim);
  border-bottom: 1px solid var(--edge); position: sticky; top: 0;
  background: rgba(20, 22, 16, 0.96); z-index: 2;
}
.lens { border-bottom: 1px solid rgba(232,230,223,0.07); }
.lens-head {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
  cursor: pointer; user-select: none;
}
.lens-head:hover { background: rgba(232,230,223,0.05); }
.lens-name { font-size: 11px; letter-spacing: 0.16em; color: var(--ink); }
.lens-count { font-size: 10px; color: var(--dim); margin-left: auto; }
.lens-items { display: none; padding: 0 0 6px 0; }
.lens.open .lens-items { display: block; }
.entry {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  padding: 4px 12px 4px 20px; font-size: 11.5px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entry:hover { color: var(--ink); background: rgba(232,230,223,0.06); }
.entry.on { color: var(--warm); }
.index-foot { margin-top: auto; padding: 9px 12px; border-top: 1px solid var(--edge); }
.coverage { font-size: 10px; color: var(--dim); line-height: 1.7; }

/* ---- CENTRE: the page holder ------------------------------------------- */
.page-hold { overflow: auto; padding: 18px 20px 40px; min-width: 0; }

/* THE PAPER. Every page type is a real material. */
.page {
  max-width: 1080px; margin: 0 auto; min-height: 80%;
  color: var(--paper-ink); border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.44), 0 0 0 1px rgba(0,0,0,0.35);
  padding: 26px 30px 40px 62px; position: relative;
}
.page-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid rgba(35,36,31,0.18); padding-bottom: 8px; margin-bottom: 14px;
}
.page-kind {
  font-size: 9.5px; letter-spacing: 0.22em; color: var(--paper-dim);
  border: 1px solid rgba(35,36,31,0.24); padding: 2px 7px; border-radius: 2px;
}
.page-title { font-size: 16px; letter-spacing: 0.02em; }
.page-sub { font-size: 11px; color: var(--paper-dim); margin-left: auto; }
.page-body { line-height: 1.85; font-size: 12.5px; }
.page-no {
  position: absolute; right: 18px; bottom: 12px;
  font-size: 10px; color: var(--paper-dim);
}

/* A. RULED PAPER - records, decisions, components, narratives */
.paper-ruled {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(180deg, transparent 0 27px, var(--rule) 27px 28px);
  background-blend-mode: multiply;
}
.paper-ruled::before {
  content: ""; position: absolute; left: 44px; top: 0; bottom: 0;
  width: 1px; background: var(--margin-red); opacity: 0.55;
}

/* B. GRAPH PAPER - drawings, graphs, topology, equations */
.paper-graph {
  background:
    repeating-linear-gradient(0deg, rgba(185,198,216,0.55) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(185,198,216,0.55) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(140,160,190,0.55) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(140,160,190,0.55) 0 1px, transparent 1px 60px),
    var(--paper);
  padding-left: 30px;
}

/* C. LAB PAPER - faults, corrections, experiments */
.paper-lab {
  background:
    linear-gradient(180deg, #f6f2e7 0%, var(--paper-2) 100%);
  padding-left: 30px;
  border-left: 4px solid var(--margin-red);
}

/* D. COMPUTER SHEET - live machinery, inserted into the book */
.paper-computer {
  background: linear-gradient(180deg, #14161a 0%, #101216 100%);
  color: #cfd6de; padding-left: 30px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(160,190,220,0.16);
}
.paper-computer .page-kind { color: #7d8894; border-color: rgba(160,190,220,0.22); }
.paper-computer .page-head { border-bottom-color: rgba(160,190,220,0.18); }
.paper-computer .page-sub, .paper-computer .page-no { color: #7d8894; }
.paper-computer a { color: #8ec3f0; }

/* E. EVIDENCE PAPER - attached artefacts */
.paper-evidence {
  background: var(--paper-2); padding-left: 30px;
  border: 1px dashed rgba(35,36,31,0.28);
}

/* F. TIMELINE PAPER */
.paper-timeline { background: var(--paper); padding-left: 30px; }

/* ---- page furniture ----------------------------------------------------- */
.lede { font-size: 13px; }
h3.sec {
  font-size: 11px; letter-spacing: 0.20em; color: var(--paper-dim);
  margin: 22px 0 8px; padding-bottom: 3px;
  border-bottom: 1px solid rgba(35,36,31,0.16); font-weight: 400;
}
.paper-computer h3.sec { color: #7d8894; border-bottom-color: rgba(160,190,220,0.16); }
.kv { display: grid; grid-template-columns: 190px 1fr; gap: 2px 14px; font-size: 12px; }
.kv dt { color: var(--paper-dim); }
.paper-computer .kv dt { color: #7d8894; }
.kv dd { margin: 0; word-break: break-word; }
.tag {
  display: inline-block; font-size: 10px; letter-spacing: 0.1em; padding: 1px 6px;
  border: 1px solid currentColor; border-radius: 2px; opacity: 0.85;
}
.t-ok { color: #2f7d3f; } .t-bad { color: #a4423c; } .t-warn { color: #97682a; }
.t-unknown { color: #6d6a5e; }
.paper-computer .t-ok { color: var(--live); } .paper-computer .t-bad { color: var(--bad); }
.paper-computer .t-unknown { color: #7d8894; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 11.5px; }
.rowlist { margin: 0; padding: 0; list-style: none; }
.rowlist li {
  padding: 3px 0; border-bottom: 1px dotted rgba(35,36,31,0.18);
  display: flex; gap: 10px; align-items: baseline;
}
.paper-computer .rowlist li { border-bottom-color: rgba(160,190,220,0.14); }
.rowlist li .k { color: var(--paper-dim); min-width: 128px; }
.paper-computer .rowlist li .k { color: #7d8894; }
.link { color: #23508f; cursor: pointer; text-decoration: underline dotted; }
.paper-computer .link { color: #8ec3f0; }

/* the causal chain drawn on graph paper */
.chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 18px; }
.chain .node {
  border: 1px solid rgba(35,36,31,0.4); background: rgba(255,255,255,0.6);
  padding: 4px 9px; font-size: 11px; border-radius: 2px;
}
.chain .arrow { color: var(--paper-dim); }

/* ---- RIGHT: evidence rail ----------------------------------------------- */
.rail {
  border-left: 1px solid var(--edge); overflow: auto;
  background: rgba(20, 22, 16, 0.5);
}
.rail-body { padding: 10px 12px; }
.ev {
  border: 1px solid var(--edge); border-radius: 2px; padding: 7px 9px;
  margin-bottom: 8px; font-size: 11px; color: var(--dim); cursor: pointer;
}
.ev:hover { border-color: rgba(122,167,209,0.5); color: var(--ink); }
.ev .h { color: var(--pin); letter-spacing: 0.1em; font-size: 10px; }
.ev pre {
  margin: 6px 0 0; white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow: auto; font-size: 10.5px; color: var(--ink);
}

/* ---- generated diagrams, discovered types, generic object pages ----------
   Added when the diagram engine was wired into the page. The rules are plain
   because the diagram carries its own colours in the SVG: styling it twice is
   how a picture and its legend start disagreeing. */
.diagram { margin: 14px 0; background: #fffdf6; border: 1px solid #ddd6c4; padding: 8px; overflow-x: auto; }
.diagram svg { display: block; }
.fz-node:hover rect { fill: #eef3fb; }
.gaps { margin-top: 14px; border-top: 1px dashed #c9c0aa; padding-top: 8px; }
.gap-head { font-size: 11px; letter-spacing: .08em; color: #7a6f57; margin-bottom: 4px; }
.gap { font-size: 11px; color: #6b6250; line-height: 1.5; }
.note { font-size: 11px; color: #7a6f57; font-style: italic; }
.meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.badge { font-size: 10px; letter-spacing: .08em; border: 1px solid #2f3b4c; padding: 1px 6px; }
.badge.alt { border-color: #7a6f57; color: #5c5340; }
.badge.warn { border-color: #a8621f; color: #a8621f; }
.times { font-size: 11px; color: #6b6250; margin: 8px 0; line-height: 1.6; }
.timeline { margin-top: 10px; }
.tl { font-size: 11px; color: #5c5340; line-height: 1.55; font-family: ui-monospace, monospace; }