/* =============================================================================
   thesis.html — page-specific layout
   Tokens are supplied by colors_and_type.css + components.css (loaded before
   this file). Do NOT redefine tokens here; consume them only.
   ============================================================================= */

/* ---- Page structure -------------------------------------------------------- */

.thesis-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.thesis-main {
  flex: 1;
  padding: var(--sp-12) 0 var(--sp-20);
}

/* ---- Reading layout: content column + sticky TOC aside -------------------- */

.thesis-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--sp-16);
  align-items: start;
}

@media (max-width: 960px) {
  .thesis-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
}

@media (max-width: 640px) {
  .thesis-layout { padding: 0 var(--sp-6); }
}

/* ---- Reading column ------------------------------------------------------- */

.thesis-content {
  max-width: 760px;
  min-width: 0;
}

/* Hero block */
.thesis-hero {
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-12);
}

.thesis-hero .eyebrow {
  margin-bottom: var(--sp-4);
}

.thesis-hero h1 {
  font: 600 clamp(2rem, 4vw, 3rem) / 1.06 var(--font-sans);
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-5);
  color: var(--fg);
  max-width: 22ch;
}

.thesis-dek {
  font: var(--text-body-lg);
  color: var(--fg-secondary);
  max-width: 64ch;
  margin: 0;
  text-wrap: pretty;
  line-height: 1.65;
}

/* TOC at top — narrow screens only */
.thesis-toc-inline {
  display: none;
  margin-bottom: var(--sp-10);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

@media (max-width: 960px) {
  .thesis-toc-inline { display: block; }
}

.thesis-toc-inline h2 {
  font: var(--text-eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-4);
}

/* Shared TOC list styles (inline + sidebar) */
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list li {
  margin: 0;
}

.toc-list a {
  display: block;
  font: 400 0.8125rem / 1.4 var(--font-sans);
  color: var(--fg-muted);
  padding: 4px 0;
  transition: color 0.14s ease;
  text-decoration: none;
}
.toc-list a:hover { color: var(--fg); }

/* Top-level section links */
.toc-list > li > a {
  font-weight: 500;
  color: var(--fg-secondary);
  padding-top: 7px;
}
.toc-list > li > a:hover { color: var(--fg); }

/* Subsection links — indented */
.toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-4);
}
.toc-sublist a {
  font: 400 0.75rem / 1.4 var(--font-sans);
  color: var(--fg-faint);
  padding: 3px 0;
}
.toc-sublist a:hover { color: var(--fg-secondary); }

/* ---- Sticky TOC sidebar — wide screens ------------------------------------ */

.thesis-toc-sidebar {
  position: sticky;
  top: 80px;
  order: 2;
}

@media (max-width: 960px) {
  .thesis-toc-sidebar { display: none; }
}

.thesis-toc-sidebar nav {
  padding: var(--sp-5) var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}

.thesis-toc-sidebar h2 {
  font: var(--text-eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-4);
}

/* ---- Section typography inside the reading column ------------------------- */

.thesis-section {
  margin-bottom: var(--sp-16);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--hairline);
}
.thesis-section:last-child {
  border-bottom: none;
}

.thesis-section > h2 {
  font: 600 1.625rem / 1.18 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--sp-8);
  padding-top: var(--sp-4);
}

.thesis-section > h2 .section-num {
  font: 400 0.875rem / 1 var(--font-mono);
  color: var(--fg-faint);
  margin-right: var(--sp-3);
  letter-spacing: 0.02em;
}

.thesis-section h3 {
  font: 600 1.125rem / 1.3 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: var(--sp-10) 0 var(--sp-4);
}

.thesis-section p {
  font: var(--text-body);
  color: var(--fg-secondary);
  line-height: 1.72;
  margin: 0 0 var(--sp-5);
  text-wrap: pretty;
  max-width: 68ch;
}

.thesis-section p:last-child {
  margin-bottom: 0;
}

.thesis-section strong {
  color: var(--fg);
  font-weight: 600;
}

.thesis-section em {
  font-style: italic;
  color: var(--fg);
}

.thesis-section code {
  font: var(--text-code-sm);
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--brand-400);
}

/* Tool subsection block — meerkat / mongoose / zegit */
.thesis-tool-block {
  margin: var(--sp-10) 0;
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.thesis-tool-block + .thesis-tool-block {
  margin-top: var(--sp-5);
}

.tool-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font: 600 1rem / 1 var(--font-mono);
  color: var(--fg);
}

.tool-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tool-verb {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--fg-secondary);
}

.thesis-tool-block p {
  margin: 0;
}

/* Trust continuum diagram */
.trust-continuum {
  margin: var(--sp-8) 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.trust-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.trust-step .envelope-chip {
  font: 600 0.6875rem / 1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.trust-step .envelope-chip--unsigned  { color: var(--info-fg);  background: var(--info-bg); }
.trust-step .envelope-chip--validated { color: var(--warn-fg);  background: var(--warn-bg); }
.trust-step .envelope-chip--signed    { color: var(--ok-fg);    background: var(--ok-bg);   }

.trust-step .trust-desc {
  font: 400 0.75rem / 1.3 var(--font-mono);
  color: var(--fg-muted);
}

.trust-arrow {
  color: var(--fg-faint);
  font-size: 0.9rem;
}

/* Closing pull-quote */
.thesis-closing {
  margin: var(--sp-10) 0 0;
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--brand-400);
}

.thesis-closing p {
  font: 500 1.0625rem / 1.6 var(--font-sans);
  color: var(--fg);
  margin: 0;
  font-style: italic;
  max-width: 58ch;
}

/* ---- Back link in nav ----------------------------------------------------- */
.thesis-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 0.875rem / 1 var(--font-sans);
  color: var(--fg-secondary);
  transition: color 0.14s ease;
}
.thesis-back:hover { color: var(--fg); }
.thesis-back i { width: 15px; height: 15px; }

/* ---- Slim footer ---------------------------------------------------------- */
.thesis-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-8) 0;
}

.thesis-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .thesis-footer-inner { padding: 0 var(--sp-6); flex-direction: column; align-items: flex-start; }
}

.thesis-footer-links {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.thesis-footer-links a {
  font: 400 0.8125rem / 1 var(--font-sans);
  color: var(--fg-muted);
  transition: color 0.14s ease;
}
.thesis-footer-links a:hover { color: var(--fg); }

.thesis-footer-copy {
  font: 400 0.8125rem / 1 var(--font-sans);
  color: var(--fg-faint);
}