/* TELOS publication stylesheet for the five-document library.
   Rebuilt 2026-08-12 by the WEBSITE lane on the canonical Glass tokens.

   LOADS AFTER glass.css AND DEPENDS ON IT. Every colour, face, radius and
   easing here is a var() reference. No literal brand colour is declared in
   this file, because the tokens are locked brand DNA (JB Class-4 boundary)
   and a second copy of a locked value is how the copy drifts.

   Replaces the 1.0/1.1 author stylesheet, which was a light Pandoc theme
   (#ffffff paper, navy/teal, Bitstream Charter and DejaVu). Those faces are
   Linux defaults, absent from macOS, iOS and Windows, and nothing was
   self-hosted, so every visitor silently fell back to Georgia and Arial. */

/* ---------------------------------------------------------------- layout */

.pub {
  display: block;
  padding: 0 0 72px;
}

.pub-head {
  padding: 40px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  margin-bottom: 28px;
}

.pub-head h1 {
  font-family: var(--display);
  font-size: clamp(30px, 2.2rem + 1.6vw, 54px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.015em;
  max-width: 20ch;
  margin: 12px 0 0;
}

.pub-head .pub-sub {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.pub-head .pub-meta {
  margin: 20px 0 24px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Two-column on wide viewports: contents rail, then the document.
   Single column below, with the contents collapsed into a drawer. */
.pub-body {
  display: block;
}

@media (min-width: 1080px) {
  .pub-body {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

/* minmax(0, 1fr) above is load-bearing: a bare 1fr resolves to min-content
   width, so one wide table or equation would stretch the whole grid column
   and reintroduce page-level horizontal scroll. */

.pub-content {
  min-width: 0;
}

/* ------------------------------------------------------- contents drawer */

.pub-toc {
  margin: 0 0 32px;
  border: var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(126%);
  backdrop-filter: blur(var(--glass-blur)) saturate(126%);
}

.pub-toc > summary {
  padding: 14px 18px;
  cursor: pointer;
  color: var(--emerald-lt);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  list-style: none;
}

.pub-toc > summary::-webkit-details-marker { display: none; }

.pub-toc > summary::after {
  content: "+";
  float: right;
  color: var(--muted);
  font-size: 14px;
}

.pub-toc[open] > summary::after { content: "\2212"; }

.pub-toc > summary:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: -2px;
}

.pub-toc nav {
  padding: 2px 18px 16px;
}

.pub-toc a {
  display: block;
  padding: 5px 0;
  color: var(--ink-2);
  font-size: var(--fs-body-s);
  line-height: 1.4;
  text-decoration: none;
  border-left: 2px solid transparent;
}

.pub-toc a:hover,
.pub-toc a:focus-visible {
  color: var(--emerald);
}

.pub-toc a.lvl3 {
  padding-left: 14px;
  color: var(--muted);
  font-size: var(--fs-micro);
}

@media (min-width: 1080px) {
  .pub-toc {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: 0;
  }
}

/* ----------------------------------------------------------- typography */

.pub-content h2,
.pub-content h3,
.pub-content h4 {
  color: var(--ink);
  scroll-margin-top: 24px;
}

.pub-content h2 {
  margin: 52px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: clamp(20px, 1.1rem + .7vw, 26px);
  letter-spacing: -.015em;
}

.pub-content h3 {
  margin: 34px 0 10px;
  font-size: clamp(16px, 0.95rem + .35vw, 19px);
}

.pub-content h4 {
  margin: 26px 0 8px;
  color: var(--emerald-lt);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pub-content p,
.pub-content li {
  max-width: 74ch;
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.72;
}

.pub-content p { margin: 0 0 18px; }

.pub-content ul,
.pub-content ol { margin: 0 0 20px; padding-left: 22px; }

.pub-content li { margin: 0 0 8px; }

.pub-content strong { color: var(--ink); font-weight: 600; }

.pub-content a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .06em; }

.pub-content blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--emerald);
  color: var(--ink);
}

.pub-content blockquote p { color: var(--ink); }

.pub-content hr {
  margin: 44px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

/* ----------------------------------------------------------------- code */

/* Long identifiers such as GovernanceSessionContext.sign_result() are 338px
   wide and broke the page at 320px in 1.0 and 1.1. Inline code had no break
   rule at all; overflow-wrap: anywhere is what stops it. */
.pub-content code {
  padding: .1em .34em;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .34);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .88em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pub-content pre {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .34);
  overflow-x: auto;
}

.pub-content pre code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-wrap: normal;
  word-break: normal;
}

/* ----------------------------------------------------------------- math */

/* THE FIX for the dead guard. The author stylesheet carried
   .math.display { overflow-x: auto }, which matched nothing: Pandoc's MathML
   emits <math display="block"> and never a .math class, so 29 equations were
   unprotected and doc 02 broke the page at 320 and 360px. The build wraps
   every block equation in .mathblock and the guard is applied there, to a
   container that actually exists in the markup. */
.pub-content .mathblock {
  margin: 26px 0;
  padding: 16px 18px;
  border-left: 2px solid var(--emerald);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255, 255, 255, .03);
  overflow-x: auto;
  overflow-y: hidden;
}

.pub-content .mathblock:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}

.pub-content math { color: var(--ink); }

.pub-content .mathblock math { font-size: 1.05em; }

/* Inline math must not stretch a line box on a narrow screen. */
.pub-content math[display="inline"] { max-width: 100%; }

/* --------------------------------------------------------------- tables */

/* The table itself keeps table display so assistive technology still reads
   it as a table. 1.0 and 1.1 set display:block on <table>, which scrolls but
   strips the table semantics. The scroll lives on the wrapper instead, and
   the wrapper is focusable so it can be scrolled from the keyboard. */
.pub-content .tablewrap {
  margin: 24px 0 28px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-md);
  overflow-x: auto;
}

.pub-content .tablewrap:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}

.pub-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
}

.pub-content th,
.pub-content td {
  min-width: 9rem;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  border-right: 1px solid rgba(255, 255, 255, .07);
  color: var(--ink-2);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.pub-content th {
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
  font-weight: 600;
}

.pub-content tr:last-child td { border-bottom: 0; }
.pub-content th:last-child,
.pub-content td:last-child { border-right: 0; }

.pub-content caption {
  padding: 0 0 10px;
  color: var(--muted);
  font-size: var(--fs-micro);
  text-align: left;
}

/* ------------------------------------------------------- library index */

.pub-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 28px 0 40px;
}

.pub-card {
  display: block;
  padding: 22px 24px;
  border: var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-tint);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(126%);
  backdrop-filter: blur(var(--glass-blur)) saturate(126%);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.pub-card:hover,
.pub-card:focus-visible {
  border-color: rgba(6, 229, 139, .38);
  transform: translateY(-2px);
}

.pub-card .n {
  color: var(--emerald-lt);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
}

.pub-card h2 {
  margin: 10px 0 8px;
  font-size: 18px;
  letter-spacing: -.015em;
}

.pub-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-body-s);
  line-height: 1.6;
}

.pub-formats {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
}

.pub-formats a { color: var(--emerald); }

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .pub-card { transition: none; }
  .pub-card:hover,
  .pub-card:focus-visible { transform: none; }
}

/* -------------------------------------------------------------- print */

@media print {
  .pub-toc,
  .nav,
  .site-footer,
  .bg { display: none; }

  .pub-body { display: block; }

  .pub-content p,
  .pub-content li,
  .pub-content th,
  .pub-content td { color: #000; }

  .pub-content h1,
  .pub-content h2,
  .pub-content h3 { color: #000; }
}