/* memo.css — Bloomberg dark + light variants
   Used by precedent/*.html
*/

:root {
  --bg: #000;
  --bg-soft: #0a0a0a;
  --bg-panel: #111;
  --fg: #e6e6e6;
  --fg-dim: #888;
  --accent: #ff7700;
  --accent-soft: #ffaa00;
  --mono: #ffaa00;
  --border: #1a1a1a;
  --border-soft: #2a2a2a;
  --good: #00ff88;
  --warn: #ffaa00;
  --bad: #ff5555;
}

:root[data-theme="light"] {
  --bg: #fbfbf9;
  --bg-soft: #f5f5f0;
  --bg-panel: #fff;
  --fg: #0a0a0a;
  --fg-dim: #6a6a6a;
  --accent: #a04400;
  --accent-soft: #7a4400;
  --mono: #7a4400;
  --border: #e0e0e0;
  --border-soft: #d0d0d0;
  --good: #006633;
  --warn: #aa6600;
  --bad: #aa2222;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'IBM Plex Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* ─── BANNER ─── */
.banner {
  border: 1px solid var(--accent);
  background: var(--bg-panel);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 11px;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.banner-left { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.banner b { color: var(--accent); }
.banner .dim { color: var(--fg-dim); }

/* ─── CONTACT CARD ─── */
.contact {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 12px;
}
.contact-name { color: var(--accent); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; }
.contact-line { color: var(--fg-dim); }
.contact-line a { color: var(--accent-soft); text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle-glyph { font-size: 14px; }

/* ─── PDF DOWNLOAD BUTTON ─── */
.pdf-btn {
  position: fixed;
  top: 16px;
  right: 140px;
  z-index: 100;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pdf-btn:hover { border-color: var(--accent); color: var(--accent); }
.pdf-btn-glyph { font-size: 13px; }

/* ─── HEADERS ─── */
h1, h2, h3, h4, h5, h6 {
  color: var(--accent);
  margin: 24px 0 10px;
  letter-spacing: 0.01em;
}
h1 { font-size: 18px; }
h2 { font-size: 15px; color: var(--accent-soft); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
h3 { font-size: 13px; color: var(--accent-soft); }
h4 { font-size: 12px; color: var(--fg); }

/* ─── BODY TEXT ─── */
p { margin: 8px 0; }
strong, b { color: var(--accent); }
em, i { color: var(--accent-soft); }

a { color: var(--accent-soft); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--accent); }

code {
  font-family: inherit;
  background: var(--bg-soft);
  color: var(--mono);
  padding: 1px 4px;
  font-size: 12px;
  border: 1px solid var(--border);
}

pre {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 12px;
  overflow-x: auto;
  font-size: 12px;
}
pre code { background: none; border: none; padding: 0; }

blockquote {
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  margin: 12px 0;
  padding: 8px 12px;
  color: var(--fg-dim);
}
blockquote p { margin: 4px 0; }

ul, ol { padding-left: 20px; margin: 8px 0; }
li { margin: 4px 0; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

/* ─── TABLES ─── */
.md-table, table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
  font-size: 12px;
}
.md-table th, .md-table td, table th, table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.md-table th, table th {
  background: var(--bg-soft);
  color: var(--accent-soft);
  font-weight: normal;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* ─── FOOTER ─── */
.foot {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding-top: 16px;
  color: var(--fg-dim);
  font-size: 11px;
  text-align: center;
}
.foot b { color: var(--accent); }

/* ─── MEMO PAGES (memo-v1.html, memo-v5.html) ─── */
.memo-back-row {
  margin: -6px 0 18px;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.memo-back-row a {
  color: var(--accent-soft);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 4px 10px;
  display: inline-block;
}
.memo-back-row a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.memo-title {
  color: var(--accent);
  font-size: 20px;
  letter-spacing: 0.02em;
  margin: 4px 0 18px;
  line-height: 1.25;
}
.memo-body { color: var(--fg); }
.memo-body strong { color: var(--fg); }      /* strong is for emphasis, not orange */
.memo-body em { color: var(--accent-soft); }
.memo-body p { margin: 8px 0 12px; }

/* ─── TABLE OF CONTENTS ─── */
.toc {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 14px 18px 16px;
  margin: 0 0 24px;
  font-size: 12px;
}
.toc-h {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 8px;
  font-weight: 600;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li {
  margin: 3px 0;
}
.toc a {
  color: var(--accent-soft);
  text-decoration: none;
}
.toc a:hover {
  text-decoration: underline;
  color: var(--accent);
}
.toc-sub {
  padding-left: 18px !important;
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}
.toc-sub a {
  color: var(--fg-dim);
  font-size: 11.5px;
}

/* ─── TABLE WRAPPER (for horizontal scroll on narrow viewports) ─── */
.md-table-wrap {
  overflow-x: auto;
  margin: 12px 0;
}

/* ─── PRECEDENT.PHP GATE FORM ─── */
.gate-form {
  max-width: 420px;
  margin: 60px auto 80px;
}
.gate-form-card {
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  background: var(--bg-panel);
  padding: 26px 28px 30px;
}
.gate-form-card h1 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.gate-form-sub {
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.gate-form label {
  display: block;
  color: var(--accent-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.gate-form input[type="password"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  letter-spacing: 0.04em;
}
.gate-form input[type="password"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.gate-form-submit {
  margin-top: 16px;
  background: var(--accent);
  border: none;
  color: var(--bg);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 11px 16px;
  cursor: pointer;
  width: 100%;
}
.gate-form-submit:hover { background: var(--accent-soft); color: var(--bg); }
.gate-form-err {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--bad);
  background: var(--bg-soft);
  color: var(--bad);
  font-size: 12px;
}
.gate-form-foot {
  margin-top: 18px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  line-height: 1.5;
}

/* ─── LANDING TILES (index.html) ─── */
.tile {
  display: block;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 20px;
  margin: 12px 0;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.1s;
}
.tile:hover { border-color: var(--accent); text-decoration: none; }
.tile-head { color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.tile-meta { color: var(--fg-dim); font-size: 11px; margin-bottom: 12px; }
.tile-desc { color: var(--fg); font-size: 12px; }

/* ─── PRINT — always light ─── */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .theme-toggle,
  .pdf-btn,
  .memo-back-row { display: none !important; }
  .banner { border-color: #000 !important; background: #fff !important; color: #000 !important; }
  .banner b, .banner-left b { color: #000 !important; }
  .contact { border-color: #888 !important; background: #fff !important; }
  h1, h2, h3, h4 { color: #000 !important; border-color: #888 !important; }
  .memo-title { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  code, pre { background: #f5f5f0 !important; color: #000 !important; border-color: #ccc !important; }
  blockquote { border-color: #888 !important; background: #fff !important; color: #000 !important; }
  .md-table th, table th { background: #f0f0f0 !important; color: #000 !important; }
  .md-table th, .md-table td, table th, table td { border-color: #ccc !important; }
  .toc {
    border-color: #888 !important;
    background: #fff !important;
    break-after: page;
  }
  .toc-h, .toc a, .toc-sub a { color: #000 !important; }
  .foot { border-color: #888 !important; color: #444 !important; }
  .memo-body strong { color: #000 !important; }
  .memo-body em { color: #000 !important; font-style: italic; }
}

/* ─── LIBRARY-SPECIFIC ─────────────────────────────────────────────────── */

/* Breadcrumb */
.breadcrumb {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  margin: 6px 0 22px;
}
.breadcrumb a {
  color: var(--accent-soft);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; color: var(--accent); }
.bc-sep { margin: 0 6px; color: var(--fg-dim); }
.bc-current { color: var(--fg); }

/* Article meta bar (word count + read time + category) */
.meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 8px 14px;
  margin: 0 0 22px;
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}
.meta-cell b { color: var(--accent); font-weight: normal; }
.meta-cell a { color: var(--accent-soft); }
.meta-sep { color: var(--fg-dim); }

/* "More research in X" related block at the bottom of every article */
.related {
  border-top: 1px solid var(--border);
  margin: 40px 0 0;
  padding: 16px 0 0;
}
.related-h {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 8px;
}
.related-cta {
  font-size: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.related-cta a {
  color: var(--accent-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-soft);
  padding-bottom: 1px;
}
.related-cta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Landing page styling */
.landing-h1 {
  color: var(--accent);
  font-size: 22px;
  letter-spacing: 0.02em;
  margin: 12px 0 16px;
}
.landing-lede {
  color: var(--fg);
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 14px;
  max-width: 760px;
}
.landing-lede a { color: var(--accent-soft); }
.landing-lede a:hover { color: var(--accent); }

.cat-block {
  border-top: 1px solid var(--border);
  padding: 22px 0 6px;
}
.cat-h {
  font-size: 14px;
  color: var(--accent-soft);
  margin: 0 0 10px;
}
.cat-h a {
  color: var(--accent-soft);
  text-decoration: none;
}
.cat-h a:hover { color: var(--accent); text-decoration: underline; }
.cat-h .dim { color: var(--fg-dim); font-size: 11px; font-weight: normal; letter-spacing: 0.04em; }

.cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cat-list li {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  font-size: 12.5px;
}
.cat-list li:last-child { border-bottom: none; }
.cat-list a {
  color: var(--fg);
  text-decoration: none;
}
.cat-list a:hover { color: var(--accent); text-decoration: underline; }
.cat-list .dim {
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.cat-empty {
  color: var(--fg-dim);
  font-size: 12px;
  font-style: italic;
  margin: 0 0 8px;
}

/* Category index — article tiles */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.article-tile {
  display: block;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 18px 20px;
  margin: 10px 0;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.1s, background 0.1s;
}
.article-tile:hover {
  border-color: var(--accent);
  background: var(--bg-soft);
  text-decoration: none;
}
.article-tile .tile-head {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.article-tile .tile-meta {
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.article-tile .tile-desc {
  color: var(--fg);
  font-size: 12px;
  line-height: 1.55;
}