/* ==========================================================================
   litepaper.css — document styles.
   Loaded ON TOP of styles.css so the litepaper inherits the same tokens,
   type stack and colour discipline as the site. Only document-specific
   layout lives here: measure, section numbering, dense tables, print rules.
   ========================================================================== */

body.lp {
  background: var(--sumi-0);
  color: var(--washi-2);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------- chrome -- */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 32px;
  background: rgba(16, 14, 11, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lp-back { color: var(--washi-2); text-decoration: none; }
.lp-back:hover { color: var(--shu-lit); }
.lp-tag { color: var(--washi-4); }

/* ---------------------------------------------------------------- doc --- */
.lp-doc {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 32px 120px;
}

.lp-head { border-bottom: 1px solid var(--rule-2); padding-bottom: 44px; }
.lp-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--washi-3);
}
.lp-eyebrow .ja { font-family: var(--disp); letter-spacing: 0.1em; }
.lp-title {
  font-family: var(--disp);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1.12;
  color: var(--washi);
  margin: 14px 0 0;
  letter-spacing: 0.01em;
}
.lp-title .ja { color: var(--shu-lit); margin-right: 16px; letter-spacing: 0.08em; }
.lp-sub {
  margin: 18px 0 0;
  font-size: var(--t-m);
  line-height: 1.62;
  color: var(--washi-2);
  max-width: 68ch;
}

/* the not-deployed disclosure sits above the fold, deliberately */
.lp-status {
  margin-top: 30px;
  border: 1px solid var(--rule-2);
  border-left: 2px solid var(--shu);
  background: var(--sumi-2);
  padding: 20px 24px;
  font-size: var(--t-xs);
  line-height: 1.72;
  color: var(--washi-2);
}
.lp-status b { color: var(--shu-lit); font-weight: 500; }

/* ---------------------------------------------------------------- toc --- */
.lp-toc {
  margin: 44px 0 0;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.lp-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 44px;
}
.lp-toc li { break-inside: avoid; margin-bottom: 7px; }
.lp-toc a {
  font-family: var(--mono);
  font-size: var(--t-3xs);
  color: var(--washi-3);
  text-decoration: none;
  letter-spacing: 0.03em;
}
.lp-toc a:hover { color: var(--shu-lit); }

/* ------------------------------------------------------------ sections -- */
.lp-doc section { padding: 52px 0; border-bottom: 1px solid var(--rule); }
.lp-doc section:last-of-type { border-bottom: none; }

.lp-doc h2 {
  font-family: var(--disp);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--washi);
  margin: 0 0 22px;
  letter-spacing: 0.01em;
  scroll-margin-top: 72px;
}
.lp-doc section { scroll-margin-top: 72px; }

.lp-doc p {
  font-size: var(--t-s);
  line-height: 1.78;
  color: var(--washi-2);
  max-width: 72ch;
  margin: 0 0 18px;
}
.lp-doc p b { color: var(--washi); font-weight: 500; }
.lp-doc p i { color: var(--washi-3); font-style: italic; }
.lp-doc .ja { font-family: var(--disp); color: var(--washi); }

.lp-note {
  font-size: var(--t-xs) !important;
  color: var(--washi-3) !important;
  padding-left: 18px;
  border-left: 1px solid var(--rule-2);
}
/* These notes carry unbroken tokens — a 66-char init-code hash, a 42-char
   address, a keccak expression. Without an explicit break rule they set the
   page's minimum width on a phone. */
.lp-note, .lp-doc p .m { overflow-wrap: anywhere; }
.lp-doc p .m.sm { word-break: break-all; }

/* lists */
.lp-units, .lp-risk { margin: 0 0 18px; padding: 0; list-style: none; }
.lp-units li, .lp-risk li {
  font-size: var(--t-xs);
  line-height: 1.74;
  color: var(--washi-2);
  max-width: 74ch;
  padding: 13px 0 13px 20px;
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule-2);
}
.lp-units li b, .lp-risk li b { color: var(--washi); font-weight: 500; }
.lp-units li b .ja { color: var(--shu-lit); margin-right: 8px; }

/* --------------------------------------------------------------- tables -- */
.lp-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: var(--t-3xs);
}
.lp-tbl th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-3xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--washi-3);
  text-align: left;
  padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}
.lp-tbl td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  line-height: 1.6;
  color: var(--washi-2);
}
.lp-tbl .r { text-align: right; font-family: var(--mono); }
.lp-tbl .c { text-align: center; }
.lp-tbl th.r { text-align: right; }
.lp-tbl .m { font-family: var(--mono); color: var(--washi); letter-spacing: 0.01em; }
.lp-tbl .sm { font-size: 0.92em; word-break: break-all; }
.lp-tbl tr.anchor td { background: var(--shu-wash); }
.lp-tbl tr.anchor td:first-child { box-shadow: inset 2px 0 0 var(--shu); }

.lp-tbl.kv td:first-child {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--washi-3);
  width: 240px;
}
.lp-tbl.lineage .lj .ja {
  font-family: var(--disp);
  font-size: var(--t-m);
  font-weight: 700;
  color: var(--washi);
}
.lp-tbl.lineage .hi { color: var(--washi); }
.lp-tbl.lineage .rl {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--washi-4);
  white-space: nowrap;
}
.lp-tbl.fin .lat {
  display: block;
  font-family: var(--mono);
  color: var(--washi-4);
  margin-top: 3px;
  letter-spacing: 0.08em;
}
.lp-tbl.fin .wh { color: var(--washi-3); }
.lp-tbl.fin .c .ja {
  font-family: var(--disp);
  font-size: var(--t-m);
  font-weight: 700;
  color: var(--shu-lit);
}
.lp-tbl.abi { table-layout: fixed; }
.lp-tbl.abi th:nth-child(1), .lp-tbl.abi td:nth-child(1) { width: 92px; }
.lp-tbl.abi th:nth-child(2), .lp-tbl.abi td:nth-child(2) { width: 34%; }

/* --------------------------------------------------------------- footer -- */
.lp-foot {
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-2);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--washi-4);
}
.lp-foot a { color: var(--washi-3); text-decoration: none; }
.lp-foot a:hover { color: var(--shu-lit); }
.lp-foot .ja { font-family: var(--disp); color: var(--washi-3); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 760px) {
  /* Tables are the only wide content in the document. Rather than wrap every
     one in markup, make the table itself the scroll container: display:block
     turns it into a normal box that can clip, and the row group keeps the
     column layout intact inside it. */
  .lp-tbl {
    display: block;
    overflow-x: auto;
    /* width must be pinned, not just capped: a display:block table whose
       content is wider will still grow its own box unless the width is
       fixed to the container, and then the overflow can actually scroll. */
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
  }
  /* No min-width here: it would become the page's floor. Let the row groups
     size to their content and let the .lp-tbl box scroll. */
  .lp-tbl thead, .lp-tbl tbody { display: table; width: max-content; min-width: 100%; }
  .lp-tbl .m, .lp-tbl .sm { word-break: break-all; }
  .lp-tbl th, .lp-tbl.lineage .rl, .lp-tbl.fin .lat { white-space: normal; }

  .lp-doc { padding: 48px 20px 90px; }
  .lp-title { font-size: var(--t-2xl); }
  .lp-toc ol { columns: 1; }
  .lp-tbl { font-size: 0.66rem; }
  .lp-tbl.kv td:first-child { width: auto; }
  .lp-tbl.abi { table-layout: auto; }
  .lp-nav { padding: 12px 20px; }
}

/* ---------------------------------------------------------------- print -- */
@media print {
  body.lp { background: #fff; color: #111; }
  .lp-nav { display: none; }
  .lp-doc { max-width: none; padding: 0; }
  .lp-doc section { page-break-inside: avoid; border-bottom: 1px solid #ccc; }
  .lp-title, .lp-doc h2, .lp-doc p b { color: #000; }
  .lp-doc p, .lp-tbl td { color: #222; }
  .lp-status { background: #f6f4ef; border-left-color: #c1352a; }
  .lp-tbl th { color: #444; border-bottom-color: #999; }
  .lp-tbl td { border-bottom-color: #ddd; }
  .lp-tbl tr.anchor td { background: #faf1f0; }
  a { color: #000; text-decoration: underline; }
}