/* ==========================================================================
   Reflex — blog (Anthropic / Claude.com posture: cream canvas, serif
   headlines, Inter body, coral accent, chart/code figures on dark navy)
   ========================================================================== */

/* serif headlines */
.blogindex-title, .post-title, .post-body h2 { font-family: var(--serif); }

/* ---------- blog index ---------- */
.blogindex { padding: 72px 0 30px; }
.blogindex-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.blogindex-head .blogindex-title { font-weight: 500; font-size: clamp(40px, 5.6vw, 64px); letter-spacing: -0.015em; line-height: 1.06; margin: 14px 0 0; color: var(--ink); }
.blogindex-head .blogindex-deck { font-size: 18px; color: var(--body); margin: 20px auto 0; max-width: 56ch; line-height: 1.6; }
.blogindex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1000px; margin: 0 auto; }
.blogindex-grid--single { grid-template-columns: 1fr; max-width: 720px; }
@media (max-width: 800px){ .blogindex-grid { grid-template-columns: 1fr; } }

/* ---------- post back ---------- */
.post-back { }
.post-back .shell { padding-top: 16px; padding-bottom: 16px; }
.post-back-link { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--mute); transition: color .15s ease; }
.post-back-link:hover { color: var(--ink); }

/* ---------- reading progress ---------- */
.read-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 90; transition: width .08s linear; }

/* ---------- post layout: one centered reading column; TOC floats in the right margin ---------- */
.post-main { padding: 0 0 40px; }
.post-layout { max-width: 776px; margin: 0 auto; padding: 0 28px; }   /* 720 article + padding, centered */
.post { max-width: 720px; margin: 0 auto; padding: 0; }
@media (max-width: 720px){ .post-layout { padding: 0 20px; } }

/* ---------- TOC: pinned in the right margin, shown only when there's room beside the column ---------- */
.post-toc { position: fixed; top: 108px; left: calc(50% + 404px); width: 200px; max-height: calc(100vh - 150px); overflow-y: auto; }
@media (max-width: 1260px){ .post-toc { display: none; } }
.post-toc-label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 16px; padding-left: 17px; }
.post-toc-nav { display: flex; flex-direction: column; border-left: 1px solid var(--hairline); }
.post-toc-nav a {
  font-size: 13px; line-height: 1.35; color: var(--mute);
  padding: 8px 0 8px 17px; margin-left: -1px; border-left: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.post-toc-nav a:hover { color: var(--ink); }
.post-toc-nav a.active { color: var(--ink); border-left-color: var(--accent); }
.post-toc-cta { display: inline-block; margin-top: 22px; margin-left: 17px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--accent); }
.post-toc-cta:hover { color: var(--accent-active); }

.post-head { padding: 56px 0 32px; border-bottom: 1px solid var(--hairline); margin-bottom: 40px; }
.post-kicker {
  display: inline-flex; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mute); background: var(--surface-soft); border-radius: 9999px; padding: 5px 12px; margin-bottom: 26px;
}
.post-kicker.run { color: var(--accent); background: rgba(204,120,92,0.1); }
.post-kicker.guide { color: var(--accent); background: rgba(99,102,241,0.1); }
.post-title { font-weight: 500; font-size: clamp(36px, 5vw, 58px); letter-spacing: -0.012em; line-height: 1.07; margin: 0; color: var(--ink); }
.post-deck { font-size: clamp(19px, 2vw, 22px); color: var(--mute); line-height: 1.5; margin: 24px 0 0; }
.post-deck em { font-style: normal; color: var(--ink); }

.post-byline { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.byline-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 17px; }
.byline-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.byline-line-2 { font-family: var(--sans); font-size: 13px; color: var(--mute); margin-top: 2px; }
.byline-sep { margin: 0 6px; color: var(--muted-soft); }

/* ---------- post body ---------- */
.post-body { font-size: 18px; line-height: 1.72; color: var(--body); }
.post-body p { margin: 0 0 26px; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { color: var(--ink); font-style: italic; }
.post-body h2 { font-weight: 500; font-size: clamp(27px, 3vw, 34px); letter-spacing: -0.01em; line-height: 1.14; margin: 52px 0 18px; color: var(--ink); scroll-margin-top: 92px; }
.post-body .mono { font-family: var(--mono); font-size: 0.84em; background: var(--surface-soft); border: 1px solid var(--hairline); padding: 1px 6px; border-radius: 5px; color: var(--accent-active); }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-soft); }
.post-body a:hover { text-decoration-color: var(--accent); }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 44px 0; }
.post-body ul:not(.discovery-rules) { margin: 0 0 26px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.post-body ul:not(.discovery-rules) li { position: relative; padding-left: 22px; line-height: 1.6; color: var(--body); }
.post-body ul:not(.discovery-rules) li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 7px; height: 1px; background: var(--accent); }
.post-body ul:not(.discovery-rules) li em { color: var(--ink); }
.post-lede { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; margin: 0 0 30px; }

.post-body blockquote {
  margin: 36px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: clamp(23px, 2.6vw, 29px); line-height: 1.34; font-weight: 500; letter-spacing: -0.005em; color: var(--ink);
}
.post-body blockquote .mono { font-size: 0.7em; }

/* ---------- figures / charts (kept on dark navy — Claude shows code/data dark) ---------- */
.post-figure { margin: 40px 0; }
.post-svg { background: var(--surface-dark); border-radius: var(--radius); padding: 24px; overflow: hidden; }
.post-svg svg { width: 100%; height: auto; display: block; }
/* product screenshots — dark-framed to match the app's own dark UI */
.post-shot { background: var(--surface-dark); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px; overflow: hidden; }
.post-shot img { width: 100%; height: auto; display: block; border-radius: 3px; }
/* terminal / code block */
.post-code { background: var(--surface-dark); color: var(--on-dark); font-family: var(--mono); font-size: 13px; line-height: 1.6; padding: 16px 18px; border-radius: var(--radius); overflow-x: auto; margin: 28px 0; }
.post-code .tok-cmd { color: var(--accent-soft); }
figcaption { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--mute); margin-top: 14px; letter-spacing: 0.02em; }
figcaption .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
figcaption .dot.accept { background: var(--signal-green); }
figcaption .dot.reject { background: var(--sunset); }
figcaption .caption-meta { color: var(--mute); opacity: 0.8; }
figcaption .caption-soft { color: var(--mute); }

/* ---------- inline diagram (architecture loop) ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; }
@media (max-width: 640px){ .flow { grid-template-columns: 1fr; } }
.flow-step { border: 1px solid var(--hairline); padding: 16px 14px; position: relative; background: var(--canvas-card); }
.flow-step + .flow-step { border-left: 0; }
@media (max-width: 640px){ .flow-step + .flow-step { border-left: 1px solid var(--hairline); border-top: 0; } }
.flow-step .n { font-family: var(--mono); font-size: 10px; color: var(--mute); letter-spacing: 0.1em; }
.flow-step .t { font-size: 13.5px; font-weight: 500; margin-top: 6px; letter-spacing: -0.01em; }
.flow-step.gate { background: rgba(204,120,92,0.1); }
.flow-step.gate .t { color: var(--accent); }

/* ---------- three-layer block ---------- */
.layers { display: flex; flex-direction: column; gap: 10px; margin: 36px 0; }
.layer { display: grid; grid-template-columns: 70px 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; background: var(--canvas-card); }
@media (max-width: 600px){ .layer { grid-template-columns: 1fr; gap: 8px; } }
.layer .lnum { font-family: var(--serif); font-size: 32px; font-weight: 500; color: var(--mute); }
.layer h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.layer p { margin: 0; font-size: 14.5px; color: var(--mute); line-height: 1.5; }
.layer .lbadge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; white-space: nowrap; border: 1px solid var(--hairline); border-radius: 9999px; }
.layer.immutable { border-color: rgba(204,120,92,0.35); } .layer.immutable .lnum { color: var(--accent); } .layer.immutable .lbadge { color: var(--accent); border-color: rgba(204,120,92,0.35); }
.layer.mutable { border-color: rgba(93,184,114,0.4); } .layer.mutable .lnum { color: var(--green-live); } .layer.mutable .lbadge { color: var(--green-live); border-color: rgba(93,184,114,0.4); }
.layer.gate { border-color: rgba(93,184,166,0.4); } .layer.gate .lnum { color: var(--teal); } .layer.gate .lbadge { color: var(--teal); border-color: rgba(93,184,166,0.4); }

/* ---------- discoveries (run report) ---------- */
.post-discoveries { display: flex; flex-direction: column; gap: 12px; margin: 32px 0; }
.discovery { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 18px; background: var(--canvas-card); }
.discovery-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.discovery-iter { font-family: var(--mono); font-size: 12px; font-weight: 500; background: var(--ink); color: var(--canvas); padding: 3px 8px; border-radius: 5px; }
.discovery-meta { font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.discovery-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.discovery-rules li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.role-badge { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 7px; flex-shrink: 0; white-space: nowrap; border: 1px solid var(--hairline); border-radius: 5px; }
.role-badge.constraint { color: var(--accent); border-color: rgba(204,120,92,0.35); background: rgba(204,120,92,0.08); }
.role-badge.guidance { color: var(--teal); border-color: rgba(93,184,166,0.35); background: rgba(93,184,166,0.08); }
.role-badge.tool_use_protocol { color: var(--green-live); border-color: rgba(93,184,114,0.35); background: rgba(93,184,114,0.08); }
.rule-text { color: var(--body); }

/* ---------- end / footer ---------- */
.post-end-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: 0.02em; margin-top: 8px; }
.post-links { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.post-links li { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
.post-links li::before { content: "→"; color: var(--accent); }
.post-links-note { font-family: var(--mono); font-size: 12px; color: var(--muted-soft); }
.post-source { font-size: 14px; color: var(--mute); margin-top: 28px; }
.post-end-sep { color: var(--muted-soft); }
.post-footer { text-align: center; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); padding: 50px 0; border-top: 1px solid var(--hairline); margin-top: 50px; }

/* shared nav reuse: the blog pages use .nav from styles.css */