/* KAHN.run — Man-page Style Site
 *
 * Design stance (§3.2):
 * - No images (except logo at 16px inline SVG)
 * - No marketing prose (if it could appear on kahn.tools, it doesn't belong here)
 * - Monospace dominant (~85% of rendered page)
 * - Serif only in one-paragraph intro and footer colophon
 * 
 * Layout: single long document, in-page TOC (sticky on desktop)
 * Max-width: 720px (narrower than kahn.tools)
 * Typography: man-page aesthetic, command reference density
 */

/* ========== RESET & BASE ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-margin-top: 100px; /* Fixed masthead + TOC */
}

body {
  background-color: var(--k-ink-00);
  color: var(--k-ink-80);
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  line-height: var(--k-lh-mono);
  letter-spacing: var(--k-track-mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== SKIP LINK ========== */
.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 999;
  padding: var(--k-s-3);
  background-color: var(--k-amber);
  color: var(--k-amber-ink);
  text-decoration: none;
  border-radius: var(--k-r);
}

.skip-link:focus {
  top: 0;
  left: 0;
}

/* ========== MASTHEAD (§3.4, 48px tall) ========== */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 48px;
  background-color: var(--k-ink-00);
  border-bottom: var(--k-border);
}

.masthead-inner {
  max-width: 100%;
  height: 100%;
  padding: 0 var(--k-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-s-6);
}

.masthead-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  outline: none;
}

.masthead-logo img {
  display: block;
}

.masthead-logo:focus-visible {
  outline: 2px solid var(--k-amber, #f59e0b);
  outline-offset: 2px;
  border-radius: 2px;
}

.masthead-title {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  font-weight: 600;
  color: var(--k-ink-95);
  white-space: nowrap;
}

.masthead-meta {
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  color: var(--k-ink-60);
  white-space: nowrap;
}

.masthead-links {
  display: flex;
  gap: var(--k-s-6);
  margin-left: auto;
}

.masthead-links a {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-80);
  text-decoration: underline;
  text-decoration-color: var(--k-ink-20);
  text-underline-offset: 3px;
  transition: all var(--k-dur-1) linear;
}

.masthead-links a:hover {
  color: var(--k-amber);
  text-decoration-color: var(--k-amber);
}

.masthead-links a:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

/* ========== TABLE OF CONTENTS (sticky, desktop only) ========== */
.toc {
  position: fixed;
  top: 48px;
  right: 0;
  width: 200px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: var(--k-s-6);
  font-family: var(--k-mono);
  font-size: 11px;
  color: var(--k-ink-60);
  border-left: var(--k-border);
  background-color: var(--k-ink-00);
  z-index: 50;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc > ul {
  margin-top: 0;
}

.toc li {
  margin-bottom: var(--k-s-3);
}

.toc li ul {
  margin-left: var(--k-s-4);
  margin-top: var(--k-s-2);
  padding-left: 0;
}

.toc li ul li {
  margin-bottom: var(--k-s-2);
}

.toc a {
  color: var(--k-ink-60);
  text-decoration: none;
  display: block;
  padding: 2px 4px;
  border-radius: 1px;
  transition: all var(--k-dur-1) linear;
  position: relative;
}

.toc a::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--k-ink-20);
  opacity: 0;
  transition: opacity var(--k-dur-1) linear;
}

.toc a:hover {
  color: var(--k-ink-80);
  background-color: var(--k-ink-05);
}

.toc a.active {
  color: var(--k-amber);
  font-weight: 600;
}

.toc a.active::before {
  background-color: var(--k-amber);
  opacity: 1;
}

.toc a:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
}

/* ========== MAIN CONTENT ========== */
main {
  margin-top: 48px;
  margin-right: 200px; /* TOC width on desktop */
  padding-bottom: var(--k-s-16);
}

.main-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--k-gutter);
}

/* ========== MAN-PAGE SECTION STRUCTURE ========== */
.man-section {
  margin-top: var(--k-s-12);
  margin-bottom: var(--k-s-8);
}

.man-section:first-of-type {
  margin-top: var(--k-s-6);
}

.man-section h2 {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  font-weight: 600;
  color: var(--k-ink-95);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--k-s-4);
  line-height: var(--k-lh-mono);
}

.man-section h3 {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  font-weight: 600;
  color: var(--k-ink-95);
  margin-top: var(--k-s-6);
  margin-bottom: var(--k-s-3);
  line-height: var(--k-lh-mono);
}

.man-section h4 {
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  font-weight: 600;
  color: var(--k-ink-80);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--k-s-4);
  margin-bottom: var(--k-s-2);
  line-height: var(--k-lh-mono);
}

.man-indent {
  margin-left: 2em;
  padding-left: 0;
}

.man-command {
  margin-bottom: var(--k-s-8);
}

.man-command h3 {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-95);
  font-weight: 600;
  margin-top: var(--k-s-8);
  margin-bottom: var(--k-s-2);
}

.man-command p {
  margin-bottom: var(--k-s-4);
}

/* ========== MAN-PAGE DEFINITION LISTS ========== */
.man-options,
.man-exit {
  margin-left: 2em;
  margin-bottom: var(--k-s-4);
}

.man-options dt,
.man-exit dt {
  font-family: var(--k-mono);
  font-weight: 600;
  color: var(--k-ink-95);
  margin-top: var(--k-s-2);
  margin-bottom: 0;
}

.man-options dd,
.man-exit dd {
  margin-left: 2em;
  margin-bottom: var(--k-s-1);
  color: var(--k-ink-80);
}

/* ========== SYNOPSIS ========== */
.synopsis {
  background-color: var(--k-ink-05);
  border: var(--k-border);
  border-radius: var(--k-r);
  padding: var(--k-s-4);
  margin-bottom: var(--k-s-6);
  overflow-x: auto;
  white-space: pre;
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  color: var(--k-ink-80);
  line-height: var(--k-lh-mono);
}

.synopsis code {
  all: inherit;
}

/* ========== CODE BLOCKS ========== */
.code-block {
  position: relative;
  background-color: var(--k-ink-05);
  border: var(--k-border);
  border-radius: var(--k-r);
  padding: var(--k-s-4);
  margin: var(--k-s-4) 0;
  box-shadow: var(--k-shadow-2);
  overflow-x: auto;
}

.code-block pre {
  margin: 0;
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  color: var(--k-ink-80);
  line-height: var(--k-lh-mono);
  white-space: pre;
}

.code-block code {
  display: block;
}

.clipboard-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: var(--k-t-sm);
  color: var(--k-ink-60);
  cursor: pointer;
  padding: 4px;
  transition: color var(--k-dur-1) linear;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--k-r);
}

.clipboard-btn:hover {
  color: var(--k-amber);
  background-color: var(--k-ink-10);
}

.clipboard-btn:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
}

/* ========== DETAILS/DISCLOSURE (INSTALL) ========== */
.install-details {
  margin: var(--k-s-4) 0;
}

.install-details summary {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-80);
  cursor: pointer;
  padding: var(--k-s-2) 0;
  transition: color var(--k-dur-1) linear;
  user-select: none;
}

.install-details summary:hover {
  color: var(--k-amber);
}

.install-details summary:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

.disclosure-content {
  margin-left: 1em;
  margin-top: var(--k-s-3);
  padding: var(--k-s-3);
  background-color: var(--k-ink-05);
  border-left: 2px solid var(--k-ink-20);
}

.disclosure-content p {
  margin-bottom: var(--k-s-2);
  font-size: var(--k-t-xs);
  color: var(--k-ink-80);
}

.disclosure-content pre {
  margin: var(--k-s-2) 0;
  overflow-x: auto;
}

/* ========== QUICKSTART ========== */
.quickstart-list {
  list-style: decimal;
  margin-left: 2em;
  margin-bottom: var(--k-s-4);
}

.quickstart-list li {
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  color: var(--k-ink-80);
  margin-bottom: var(--k-s-2);
  line-height: var(--k-lh-mono);
}

.quickstart-list li.optional {
  list-style: none;
  margin-left: -2em;
  color: var(--k-ink-60);
  font-size: var(--k-t-xs);
}

.quickstart-list .annotation {
  display: inline;
  margin-left: var(--k-s-2);
  color: var(--k-ink-60);
  font-style: normal;
}

/* ========== TABLES (EXIT CODES, VERSIONS) ========== */
.exit-codes,
.versions {
  width: 100%;
  border-collapse: collapse;
  margin: var(--k-s-4) 0;
  background-color: var(--k-ink-05);
  border: var(--k-border);
  border-radius: var(--k-r);
  overflow: hidden;
}

.exit-codes tr,
.versions tr {
  border-bottom: var(--k-border);
}

.exit-codes tr:last-child,
.versions tr:last-child {
  border-bottom: none;
}

.exit-codes td,
.versions td,
.exit-codes th,
.versions th {
  padding: var(--k-s-3) var(--k-s-4);
  text-align: left;
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  color: var(--k-ink-80);
  line-height: var(--k-lh-mono);
}

.exit-codes th,
.versions th {
  background-color: var(--k-ink-10);
  font-weight: 600;
  color: var(--k-ink-95);
  border-bottom: var(--k-border);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.exit-codes td:first-child,
.versions td:first-child {
  width: 60px;
  font-weight: 600;
  color: var(--k-ink-95);
}

/* ========== COLOPHON ========== */
.man-colophon p {
  font-family: var(--k-body);
  font-size: var(--k-t-sm);
  color: var(--k-ink-60);
  line-height: var(--k-lh-body);
  margin-left: 0;
}

.man-colophon em {
  font-style: italic;
}

.man-colophon a {
  color: var(--k-ink-60);
  text-decoration: underline;
  text-decoration-color: var(--k-ink-20);
  text-underline-offset: 2px;
  transition: all var(--k-dur-1) linear;
}

.man-colophon a:hover {
  color: var(--k-amber);
  text-decoration-color: var(--k-amber);
}

.man-colophon a:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

/* ========== INLINE CODE IN PROSE ========== */
code {
  font-family: var(--k-mono);
  font-size: 0.9em;
  color: var(--k-ink-95);
  background-color: var(--k-ink-05);
  padding: 2px 4px;
  border-radius: var(--k-r);
  letter-spacing: var(--k-track-mono);
}

p code {
  margin: 0 2px;
}

/* ========== LINKS ========== */
a {
  color: var(--k-ink-80);
  text-decoration: underline;
  text-decoration-color: var(--k-ink-20);
  text-underline-offset: 3px;
  transition: all var(--k-dur-1) linear;
}

a:hover {
  color: var(--k-amber);
  text-decoration-color: var(--k-amber);
}

a:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

/* ========== RESPONSIVE: TABLET (720–1119px) ========== */
@media (max-width: 1119px) {
  .toc {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    border-left: none;
    border-bottom: var(--k-border);
    padding: var(--k-s-4);
    margin: 48px 0 var(--k-s-6) 0;
    margin-top: 48px;
  }

  .toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-s-6);
  }

  .toc > ul li {
    flex: 0 0 auto;
  }

  .toc li ul {
    display: none;
  }

  main {
    margin-right: 0;
    margin-top: 0;
  }
}

/* ========== RESPONSIVE: MOBILE (<720px) ========== */
@media (max-width: 719px) {
  body {
    font-size: 13px;
  }

  main {
    margin-top: 0;
    margin-right: 0;
  }

  .main-inner {
    max-width: 100%;
  }

  .toc {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    border-left: none;
    border-bottom: var(--k-border);
    padding: var(--k-s-3);
    margin: 48px 0 0 0;
  }

  .toc ul {
    display: block;
  }

  .toc li {
    margin-bottom: 4px;
  }

  .toc a {
    padding: 2px 0;
    font-size: 10px;
  }

  .toc li ul {
    display: none;
  }

  .man-section {
    margin-top: var(--k-s-8);
    margin-bottom: var(--k-s-6);
  }

  .code-block pre {
    font-size: 11px;
  }

  .synopsis {
    font-size: 11px;
    padding: var(--k-s-3);
  }

  .man-indent,
  .man-options,
  .man-exit {
    margin-left: 1em;
  }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0 !important;
  }

  .toc a,
  .masthead-links a,
  a {
    transition: none;
  }
}

/* ========== PRINT STYLES ========== */
@media print {
  .masthead,
  .toc,
  .skip-link,
  .clipboard-btn {
    display: none;
  }

  main {
    margin-top: 0;
    margin-right: 0;
  }

  body {
    background-color: white;
    color: black;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  .code-block {
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    page-break-inside: avoid;
  }
}