/* ============================================================
   ToneThread — post-theme.css
   Unified post / verify / tag styling that uses the same theme
   tokens as the rest of the site. Loaded AFTER main.css so it
   overrides the legacy dark-only :root tokens defined there.
   ============================================================ */

/* Re-map main.css tokens to live theme tokens so post pages
   adapt to light + bark mode along with the rest of the site. */
:root,
[data-mode="light"],
html[data-mode="light"] {
  --bg:      var(--surface);
  --text:    var(--ink2);
  --white:   var(--ink);
  --muted:   var(--ink3);
  --faint:   var(--ink4);
  --border:  var(--rule);
  --accent:  var(--acc);
  --acc-dark:#5b21b6;
  --font-b:  var(--serif);
  --font-m:  var(--mono);
  --ease:    cubic-bezier(.2,.7,.2,1);
}
html[data-mode="bark"] {
  --acc-dark: #6d28d9;
}

/* ── Article sits flush inside the shared .tt-frame card so the post page
   matches Signal / About / Archive exactly. The frame supplies the border,
   background and rounding; the article only contributes content. ── */
.post-single {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  margin: 0;
  box-shadow: none;
}
[data-mode="bark"] .post-single { background: transparent; border: 0; }

/* ── HEADER — high-contrast, theme-tone ── */
.post-header {
  background: transparent;
  border-bottom: 1px solid var(--rule);
  padding: 2rem 2.25rem 2rem !important;
}
.post-header-inner { max-width: none; margin: 0; }
.post-header-inner > * { max-width: 760px; }
.post-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink4);
  margin: 0 0 1.1rem;
}
.post-kicker .kicker-line { display: none; }
.post-title {
  font-family: var(--serif) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
  margin: 0 0 1rem !important;
  max-width: 720px;
}
.post-subtitle {
  color: var(--ink2) !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  margin: 0 0 1.25rem !important;
  max-width: 620px;
}
.post-byline {
  font-family: var(--mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
  color: var(--ink4) !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  text-transform: uppercase;
}

/* Featured image */
.post-feature-img { max-width: 100% !important; padding: 1.5rem 2rem 0 !important; margin: 0 !important; }
.post-feature-img img { border-radius: var(--r); }

/* ── BODY — single-column with sidebar that responds to theme ── */
.post-body {
  display: grid !important;
  grid-template-columns: 1fr 220px !important;
  gap: 2.5rem !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 2rem 2.25rem 2rem !important;
  align-items: start;
}
@media (max-width: 760px) {
  .post-body { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 1.5rem 1.25rem !important; }
}

.post-content { color: var(--ink2) !important; font-size: 1rem !important; line-height: 1.78 !important; }
.post-content > * + * { margin-top: 1.25em !important; }
.post-content h2 {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 1.65rem !important;
  margin-top: 2.4rem !important;
  margin-bottom: 0.7rem !important;
  letter-spacing: -0.005em;
}
.post-content h3 {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 1.25rem !important;
  margin-top: 1.8rem !important;
  margin-bottom: 0.55rem !important;
}
.post-content h4 {
  font-family: var(--mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--acc) !important;
  margin-top: 1.6rem !important;
  margin-bottom: 0.45rem !important;
}
.post-content p { color: var(--ink2) !important; }
.post-content strong { color: var(--ink) !important; font-weight: 600 !important; }
.post-content em { color: var(--ink2) !important; }
.post-content a { color: var(--acc) !important; text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }
.post-content a:hover { text-decoration-color: var(--acc); }
.post-content blockquote {
  border-left: 3px solid var(--acc) !important;
  background: var(--surface2) !important;
  color: var(--ink) !important;
  padding: 1.2rem 1.6rem !important;
  font-style: italic;
  font-size: 1.1rem !important;
  margin: 1.8rem 0 !important;
  border-radius: 0 var(--r) var(--r) 0;
}
.post-content hr { border: none !important; border-top: 1px solid var(--rule) !important; margin: 2rem 0 !important; }
.post-content ul, .post-content ol { color: var(--ink2) !important; }
.post-content li { color: var(--ink2) !important; }
.post-content li::marker { color: var(--ink4); }
.post-content pre {
  background: var(--surface2) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  padding: 1.1rem 1.25rem !important;
  border-radius: var(--r) !important;
  font-family: var(--mono) !important;
  font-size: 0.8rem !important;
  overflow-x: auto;
}
.post-content code {
  background: var(--surface2) !important;
  color: var(--acc) !important;
  padding: 0.12em 0.35em !important;
  border-radius: 4px;
  font-family: var(--mono) !important;
  font-size: 0.85em !important;
}
.post-content pre code { background: none !important; color: var(--ink) !important; padding: 0 !important; }

/* Drop-cap kept but recolored */
.post-content > p:first-of-type::first-letter {
  color: var(--acc) !important;
  font-family: var(--serif) !important;
  font-size: 4.2rem !important;
  font-weight: 600 !important;
  line-height: 0.85 !important;
  float: left;
  margin: 0.08em 0.12em 0 0 !important;
}

/* ── SIDEBAR ── */
.post-sidebar { font-family: var(--sans); }
.sidebar-sticky { position: sticky; top: 1rem; }
.sidebar-label {
  font-family: var(--mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink4) !important;
  margin-bottom: 0.7rem !important;
  display: block;
}
.toc a {
  display: block;
  font-family: var(--mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
  color: var(--ink3) !important;
  padding: 0.35rem 0 0.35rem 0.7rem !important;
  border-left: 1px solid var(--rule) !important;
  line-height: 1.4;
  text-decoration: none;
}
.toc a:hover, .toc a.active { color: var(--acc) !important; border-left-color: var(--acc) !important; }

.sb-panel {
  margin-top: 1.4rem;
  padding: 1rem 1rem;
  background: var(--surface2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.sb-panel .sidebar-label { margin-bottom: 0.6rem !important; }
.sb-axis { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.sb-name { font-family: var(--mono) !important; font-size: 0.65rem !important; letter-spacing: 0.04em; color: var(--ink3) !important; width: 70px; flex-shrink: 0; }
.sb-bar-wrap { flex: 1; height: 4px; background: var(--rule); border-radius: 2px; }
.sb-bar { height: 100%; background: var(--acc); border-radius: 2px; }
.sb-val { font-family: var(--mono) !important; font-size: 0.65rem !important; color: var(--ink2) !important; width: auto; min-width: 36px; text-align: right; word-break: break-all; }

.tonehash-panel .sb-axis { display: block; margin-bottom: 0.5rem; }
.tonehash-panel .sb-axis .sb-name { width: auto; display: block; margin-bottom: 0.15rem; }
.tonehash-panel .sb-axis .sb-val { width: auto; min-width: 0; text-align: left; color: var(--acc) !important; font-size: 0.7rem !important; word-break: break-all; }

.share-link {
  display: block;
  font-family: var(--mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3) !important;
  padding: 0.32rem 0;
  text-decoration: none;
}
.share-link:hover { color: var(--acc) !important; }

/* ── FOOTER (in-article) ── */
.post-footer {
  border-top: 1px solid var(--rule) !important;
  background: var(--surface2);
  max-width: 100% !important;
  margin: 0 !important;
  padding: 2rem !important;
}
.post-footer .tag {
  display: inline-block;
  border: 1px solid var(--rule2) !important;
  background: var(--tag-bg) !important;
  color: var(--tag-fg) !important;
  padding: 0.22rem 0.6rem !important;
  border-radius: 999px !important;
  font-family: var(--mono) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: 0.4rem;
}

/* Subscribe block */
.subscribe-block { border-top: 1px solid var(--rule) !important; padding: 2rem 0 0 !important; margin-top: 2rem !important; }
.subscribe-inner { max-width: 600px; }
.sub-label { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.18em; color: var(--ink4); text-transform: uppercase; margin: 0 0 0.5rem; }
.sub-title { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: 1.4rem; line-height: 1.3; margin: 0 0 1rem; }
.sub-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sub-form input {
  flex: 1; min-width: 200px;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--rule2);
  border-radius: var(--r);
  font-family: var(--sans); font-size: 0.95rem;
  color: var(--ink);
}
.sub-form button {
  padding: 0.7rem 1.2rem;
  background: var(--acc); color: white;
  border: none; border-radius: var(--r);
  font-family: var(--sans); font-weight: 500; font-size: 0.9rem;
  cursor: pointer;
}
.sub-form button:hover { background: var(--acc-dark); }

/* Related */
.related { margin-top: 2.5rem; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); margin-top: 0.75rem; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.related-card { background: var(--surface); padding: 1.1rem 1.25rem; transition: background 0.2s; display: block; text-decoration: none; }
.related-card:hover { background: var(--surface2); }
.related-date { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--ink4); display: block; margin-bottom: 0.4rem; text-transform: uppercase; }
.related-title { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
@media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }

/* Progress bar — use accent token */
.progress-bar { background: var(--acc) !important; }

/* Verify-page tweaks share styles via .post-single */
.verify-page .post-content code { color: var(--acc); }

/* Verify page — two-line verdict (cryptographic + tonal source).
   The cryptographic line owns the ok/fail color; the source line is
   independently warn-coloured when source === 'stub'. */
.verify-final { padding: 1rem 1.25rem; border-radius: 8px; margin-top: 1rem;
  border: 1px solid var(--ink4); background: color-mix(in srgb, var(--surface) 85%, transparent); }
.verify-final.ok   { border-color: #10b981; }
.verify-final.fail { border-color: #ef4444; }
.verify-final-line { display: block; margin: 0; line-height: 1.5; }
.verify-final-line + .verify-final-line { margin-top: 0.4rem; padding-top: 0.4rem;
  border-top: 1px dashed var(--ink4); }
.verify-final-line.ok   strong { color: #10b981; }
.verify-final-line.warn strong { color: #f59e0b; }
.verify-final-line.fail strong { color: #ef4444; }
.verify-final-line code { background: var(--surface); padding: 0 .25rem; border-radius: 3px; }