/* ---------------------------------------------------------
   reader.css, shared theme + Kindle-style reader controls
   for the HyperTensor research site.
   Loaded AFTER each paper's inline <style> so the
   :root[data-...] selectors win on specificity.
   --------------------------------------------------------- */

/* --- Dark theme --- */
:root[data-theme="dark"] {
  --bg:        #0f1115;
  --bg-soft:   #161a21;
  --bg-code:   #1d222b;
  --border:    #2a313c;
  --text:      #e8eaee;
  --text-soft: #9aa1ad;
  --accent:    #ff7a6c;
  --accent-l:  #ff9e94;
  --blue:      #6ea8ff;
  --green:     #5ed39a;
  --yellow-bg: #2a2614;
  --blue-bg:   #14213a;
  --green-bg:  #14291f;
  --red-bg:    #2a1716;
}
:root[data-theme="dark"] body { color: var(--text); background: var(--bg); }
:root[data-theme="dark"] nav  { background: rgba(15,17,21,0.92) !important; }
:root[data-theme="dark"] img,
:root[data-theme="dark"] picture { filter: brightness(0.92) contrast(0.96); }
:root[data-theme="dark"] mjx-container { color: var(--text) !important; }
:root[data-theme="dark"] mjx-container svg { color: var(--text) !important; }

/* --- Sepia / paper theme --- */
:root[data-theme="sepia"] {
  --bg:        #f4ecd8;
  --bg-soft:   #ebe2cb;
  --bg-code:   #e6dcc4;
  --border:    #d6cba9;
  --text:      #3c2f1b;
  --text-soft: #7a674a;
  --accent:    #a13c2a;
  --accent-l:  #c75240;
  --blue:      #355e9c;
  --green:     #3d7a4b;
  --yellow-bg: #efe4bd;
  --blue-bg:   #e3e8ed;
  --green-bg:  #e2ebd9;
  --red-bg:    #ecdcd0;
}
:root[data-theme="sepia"] nav { background: rgba(244,236,216,0.92) !important; }

/* --- Font size (Kindle-style steps) --- */
:root[data-fontsize="xs"] { font-size: 14px; }
:root[data-fontsize="s"]  { font-size: 15.5px; }
:root[data-fontsize="m"]  { font-size: 17px; }      /* default */
:root[data-fontsize="l"]  { font-size: 19px; }
:root[data-fontsize="xl"] { font-size: 21px; }
:root[data-fontsize="xxl"]{ font-size: 23px; }

/* --- Line height --- */
:root[data-lineheight="tight"]  body { line-height: 1.5; }
:root[data-lineheight="normal"] body { line-height: 1.75; } /* default */
:root[data-lineheight="loose"]  body { line-height: 2.0; }

/* --- Column width --- */
:root[data-width="narrow"] { --max-w: 640px; }
:root[data-width="normal"] { --max-w: 780px; }   /* default */
:root[data-width="wide"]   { --max-w: 920px; }
:root[data-width="full"]   { --max-w: 1180px; }

/* --- Font family --- */
:root[data-font="sans"]   body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
:root[data-font="serif"]  body { font-family: 'Iowan Old Style', 'Charter', 'Georgia', 'Cambria', serif; }
:root[data-font="mono"]   body { font-family: 'IBM Plex Mono', 'Consolas', 'Menlo', monospace; }

/* --- Reader controls panel --- */
.reader-toggle {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  z-index: 200;
  transition: transform 0.15s, background 0.15s;
}
.reader-toggle:hover { transform: translateY(-2px); }
:root[data-theme="dark"] .reader-toggle { box-shadow: 0 2px 14px rgba(0,0,0,0.5); }

.reader-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 4.4rem;
  width: 280px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  z-index: 200;
  font-size: 0.85rem;
  color: var(--text);
  display: none;
}
.reader-panel[data-open="1"] { display: block; }
.reader-panel h4 {
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-soft);
  margin: 0.6rem 0 0.4rem;
}
.reader-panel h4:first-child { margin-top: 0; }
.reader-row {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.reader-btn {
  flex: 1; min-width: 0;
  padding: 0.4em 0.5em;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.reader-btn:hover { background: var(--border); }
.reader-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
:root[data-theme="dark"] .reader-btn[aria-pressed="true"] { color: #0f1115; }

/* PDF / print button, second floating circle, sits to the left of the
   reader-settings toggle. Same shape, smaller text label. */
.reader-toggle.pdf-toggle {
  right: calc(1.1rem + 56px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Print / Save-as-PDF stylesheet -------------------
   Targets the browser's built-in "Save as PDF" exporter. Goal: a
   one-column, A4-friendly document that ignores all the on-screen
   chrome (nav, reader toggles, hover panels) and never lets a table
   or figure escape the page width. */
@media print {
  /* Page geometry */
  @page { size: A4; margin: 0.75in 0.7in; }

  /* Reset theme to printable greyscale regardless of toggle state. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="sepia"] {
    --bg: #fff !important;
    --bg-soft: #f5f5f5 !important;
    --bg-code: #f0f0f0 !important;
    --border: #c8c8c8 !important;
    --text: #000 !important;
    --text-soft: #444 !important;
    --accent: #000 !important;
    --accent-l: #000 !important;
    --blue: #000 !important;
    --green: #000 !important;
    --yellow-bg: #fff !important;
    --blue-bg: #fff !important;
    --green-bg: #fafafa !important;
    --red-bg: #fafafa !important;
    --max-w: 100% !important;
  }
  html { font-size: 10.5pt; }
  body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide everything that is interactive chrome. */
  nav, footer,
  .reader-toggle, .reader-panel,
  #paper-preview, #to-top,
  .hero-actions,
  .kbd-hint,
  .nav-brand, .nav-links { display: none !important; }

  /* Layout: drop sticky/fixed positioning, single column. */
  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  main, header, section, article {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
  }
  main { padding-top: 0.2in !important; }

  /* Hero: shrink dramatically; the on-screen stats stay but inline. */
  #hero {
    padding: 0 0 0.4in 0 !important;
    text-align: left !important;
    border-bottom: 1px solid #888 !important;
    margin-bottom: 0.3in !important;
  }
  .hero-tag {
    display: inline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 9pt !important;
    color: #444 !important;
    margin: 0 0 0.1in 0 !important;
    letter-spacing: 0.06em;
  }
  .hero-title, h1 {
    font-size: 20pt !important;
    line-height: 1.2 !important;
    margin: 0.05in 0 0.15in 0 !important;
    page-break-after: avoid;
  }
  .hero-subtitle {
    font-size: 11pt !important;
    color: #222 !important;
    max-width: 100% !important;
    margin: 0 0 0.15in 0 !important;
  }
  .hero-meta {
    font-size: 9pt !important;
    color: #444 !important;
    margin: 0 0 0.15in 0 !important;
  }
  .hero-stats {
    display: flex !important;
    gap: 0.3in !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }
  .stat { min-width: 0 !important; text-align: left !important; }
  .stat-num { font-size: 12pt !important; color: #000 !important; }
  .stat-label { font-size: 8.5pt !important; color: #444 !important; }

  /* Headings */
  h2 { font-size: 15pt !important; margin: 0.25in 0 0.1in !important; page-break-after: avoid; }
  h3 { font-size: 12.5pt !important; margin: 0.18in 0 0.08in !important; page-break-after: avoid; }
  .section-num {
    color: #444 !important;
    font-size: 8.5pt !important;
    letter-spacing: 0.08em;
    margin-bottom: 0.04in !important;
  }

  p, li { font-size: 10.5pt !important; line-height: 1.5 !important; orphans: 3; widows: 3; }

  /* Abstract box -> quiet bordered block */
  .abstract-box {
    background: #fafafa !important;
    border: 1px solid #aaa !important;
    border-radius: 3pt !important;
    padding: 0.16in 0.2in !important;
    margin: 0.1in 0 0.2in 0 !important;
    page-break-inside: avoid;
  }

  /* Callouts: keep visible but neutral */
  .callout {
    background: #fafafa !important;
    border: 1px solid #aaa !important;
    border-left: 3pt solid #555 !important;
    padding: 0.12in 0.18in !important;
    margin: 0.12in 0 !important;
    page-break-inside: avoid;
    border-radius: 0 3pt 3pt 0 !important;
  }
  .callout.warning   { border-left-color: #000 !important; }
  .callout.info      { border-left-color: #555 !important; }
  .callout.finding   { border-left-color: #555 !important; }
  .callout.intuition { border-left-color: #555 !important; background: #fafafa !important; }
  .callout-title { color: #000 !important; font-size: 8.5pt !important; }

  /* Tables: this is where on-screen breaks PDF.
     The reader.css negative-margin trick + .wide translateX must be
     undone or the table runs off the page. */
  .table-wrap,
  .table-wrap.wide {
    margin: 0.1in 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    overflow: visible !important;
    border: 1px solid #aaa !important;
    border-radius: 3pt !important;
    page-break-inside: avoid;
  }
  table {
    width: 100% !important;
    font-size: 8.5pt !important;
    border-collapse: collapse !important;
    page-break-inside: auto;
  }
  table thead { display: table-header-group; }
  table tr { page-break-inside: avoid; page-break-after: auto; }
  table thead th {
    background: #eee !important;
    color: #000 !important;
    font-size: 8pt !important;
    padding: 4pt 6pt !important;
    border-bottom: 1px solid #888 !important;
  }
  table td {
    padding: 4pt 6pt !important;
    border-top: 1px solid #ddd !important;
    color: #000 !important;
  }
  table tr:hover td { background: transparent !important; }
  td.good, td.warn, .pass, .fail, .warn { color: #000 !important; font-weight: 700; }

  /* Code, pre, math */
  code, pre, pre code {
    background: #f4f4f4 !important;
    color: #000 !important;
    border: 1px solid #ddd !important;
    font-size: 9pt !important;
  }
  pre {
    padding: 0.1in !important;
    page-break-inside: avoid;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow: visible !important;
  }
  mjx-container { page-break-inside: avoid; }
  mjx-container[display="true"] { margin: 0.1in 0 !important; }

  /* Gate cards / grid */
  .gates, .grid-2 { display: block !important; }
  .gate-card, .grid-2 .card {
    background: #fafafa !important;
    border: 1px solid #aaa !important;
    margin: 0.05in 0 !important;
    page-break-inside: avoid;
  }

  /* Links: print URL of external links inline (footnote-style) so a
     printed PDF is still usable offline. Skip in-page anchors. */
  a, a:visited { color: #000 !important; text-decoration: none !important; }
  a[href^="http"]:not(.no-print-url)::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  /* Avoid noise on the hero/meta links and inline term/repo links. */
  .hero-meta a::after, .hero-actions a::after, nav a::after,
  a.term::after, a.repo-link::after, .reader-panel a::after,
  footer a::after, sup a::after { content: "" !important; }

  /* Page-break niceties */
  section { page-break-inside: auto; }
  section + section { page-break-before: auto; }
  h1, h2 { page-break-before: auto; page-break-after: avoid; }
  figure, .figure, img, svg { page-break-inside: avoid; max-width: 100% !important; height: auto !important; }

  /* Home-page paper cards: readable as a TOC */
  .paper-card {
    border: 1px solid #aaa !important;
    transform: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin: 0.08in 0 !important;
    padding: 0.12in 0.16in !important;
  }
  .paper-card.visited::before { display: none !important; }
  .paper-stats { border-top: 1px solid #ccc !important; padding-top: 0.06in !important; }

  /* Hero summary on the index page */
  .hero-summary {
    gap: 0.25in !important;
    justify-content: flex-start !important;
    margin: 0.1in 0 !important;
  }
  .hsum-num { font-size: 12pt !important; color: #000 !important; }
  .hsum-label { font-size: 8.5pt !important; color: #444 !important; }

  /* Research thread */
  .thread {
    background: #fafafa !important;
    border: 1px solid #aaa !important;
    padding: 0.14in 0.18in !important;
    page-break-inside: avoid;
  }
  .thread-tag { color: #000 !important; }
}

/* --- Dark-mode visibility patches ----------------------
   Several inline styles in older paper HTML hard-code light colours.
   These rules force them to follow the theme variables so dark mode
   actually renders content (was: black-on-dark code, light-yellow
   highlight rows that became invisible). */
:root[data-theme="dark"] code,
:root[data-theme="dark"] pre code,
:root[data-theme="dark"] p code,
:root[data-theme="dark"] li code,
:root[data-theme="dark"] td code,
:root[data-theme="dark"] th code { color: var(--text) !important; }
:root[data-theme="dark"] .highlight-row td { background: #2a2614 !important; color: var(--text) !important; }
:root[data-theme="dark"] td.num,
:root[data-theme="dark"] td.good,
:root[data-theme="dark"] td.warn { color: var(--text); }
:root[data-theme="dark"] td.good { color: var(--green); }
:root[data-theme="dark"] td.warn { color: var(--accent); }
:root[data-theme="dark"] tr:hover td { background: var(--bg-soft); color: var(--text); }
:root[data-theme="dark"] thead th { color: var(--text-soft); background: var(--bg-soft); }
:root[data-theme="dark"] .callout.intuition .callout-title { color: #f0c040; }
:root[data-theme="dark"] .callout.finding   .callout-title { color: #5ed39a; }
:root[data-theme="dark"] .callout.warning   .callout-title { color: #ff7a6c; }
:root[data-theme="dark"] .callout.info      .callout-title { color: #6ea8ff; }
/* Most papers ship inline `code { color: #1a1a1a; }` for light mode.
   In sepia, that's still readable; in dark mode it became invisible. */
:root[data-theme="dark"] hr { border-color: var(--border); }
:root[data-theme="dark"] strong { color: var(--text); }

/* --- Tables: avoid horizontal scroll bars by default ----
   On wide screens, allow the table to break out of the column to use
   the full container width before triggering scroll. On narrow screens,
   tighten font and padding so 6--7-column tables still fit. */
.table-wrap {
  margin-left: calc((var(--max-w) - 100%) / -2);
  margin-right: calc((var(--max-w) - 100%) / -2);
  max-width: none;
}
@media (max-width: 900px) {
  .table-wrap { margin-left: 0; margin-right: 0; }
  .table-wrap table { font-size: 0.78rem; }
  .table-wrap td, .table-wrap thead th { padding: 0.45rem 0.55rem; }
}
/* Hide the scrollbar chrome but keep keyboard / touch scrolling. */
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 3px;
}
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* --- Repo-path link style -----------------------------
   Anchors marked .repo-link are paths into the source tree. They
   render in mono and use a subtle underline rather than blue link
   colour, so they read as paths and not as web links. */
a.repo-link,
a.repo-link:visited {
  color: var(--text);
  font-family: 'IBM Plex Mono', 'Consolas', 'Menlo', monospace;
  font-size: 0.84em;
  text-decoration: none;
  border-bottom: 1px dashed var(--text-soft);
  padding-bottom: 0;
}
a.repo-link:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* --- Term tooltip -------------------------------------
   <a class="term" href="https://en.wikipedia.org/...">word</a>
   for external definitions; on hover, dotted underline + the title
   attribute is used as the tooltip (browser native). For in-house
   terms, use <span class="term defined" data-def="...">word</span>
   with a custom hover bubble. */
a.term, a.term:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--text-soft);
  cursor: help;
}
a.term:hover { border-bottom-color: var(--accent); color: var(--accent); }

.term.defined {
  position: relative;
  border-bottom: 1px dotted var(--accent);
  cursor: help;
}
.term.defined::after {
  content: attr(data-def);
  position: absolute;
  left: 0; top: calc(100% + 6px);
  width: max-content; max-width: 320px;
  padding: 0.55rem 0.75rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: normal;
  line-height: 1.45;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s;
  z-index: 50;
}
.term.defined:hover::after { opacity: 1; transform: translateY(0); }
@media (max-width: 700px) { .term.defined::after { display: none; } }


/* --- Universal nav layout fix -------------------------
   Older paper pages (2, 3, 4, 00) ship an inline 
av { display:flex }
   with no flex-wrap and no responsive break, so the link list overflows
   the page on narrow viewports and presses against the brand on desktop.
   This makes nav behave like Paper 1's nav everywhere. */
nav {
  flex-wrap: wrap !important;
  row-gap: 0.5rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  height: auto !important;
  min-height: 58px;
}
.nav-links {
  flex-wrap: wrap !important;
  gap: 1.2rem !important;
  row-gap: 0.4rem !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
}
.nav-links li { list-style: none !important; }
.nav-links a { white-space: nowrap; }
@media (max-width: 720px) {
  nav { padding-left: 1rem !important; padding-right: 1rem !important; }
  .nav-links { gap: 0.9rem !important; font-size: 0.8rem; }
}
@media (max-width: 520px) {
  /* Brand on its own line, links wrap below */
  nav { justify-content: flex-start !important; }
  .nav-brand { width: 100%; margin-bottom: 0.2rem; }
}