/* Shared layout for the Writing index and its long-form post pages. */

/* ── Index: card list ── */
.writing-wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px 90px; }
.writing-list { display: grid; gap: 14px; max-width: 760px; }
.post-card {
  display: block; padding: 30px 32px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.post-card .post-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.post-card h2 { margin-top: 10px; font-family: var(--font-display); font-size: 26px; line-height: 1.22; font-weight: 600; letter-spacing: -.01em; }
.post-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-sub); }
.post-card .post-read { display: inline-block; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.post-card:hover .post-read { color: var(--accent); }

/* ── Post article ── */
.post-article { max-width: 720px; margin: 0 auto; padding: 52px 40px 90px; }
.post-header { padding-bottom: 36px; border-bottom: 1px solid var(--line-soft); margin-bottom: 40px; }
.post-header .post-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.post-header h1 { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 44px); font-weight: 600; line-height: 1.14; letter-spacing: -.02em; text-wrap: pretty; }
.post-header .lead { margin-top: 18px; font-size: 16.5px; line-height: 1.72; color: var(--ink-sub); }

.post-body { min-width: 0; }
.post-body h2 { margin: 46px 0 16px; font-family: var(--font-display); font-size: 26px; line-height: 1.22; font-weight: 600; letter-spacing: -.01em; }
.post-body h2:first-child { margin-top: 0; }
.post-body h3 { margin: 30px 0 10px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.post-body h4 { margin: 26px 0 8px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.post-body p, .post-body li { font-size: 15.5px; line-height: 1.78; color: var(--ink-sub); }
.post-body p + p, .post-body ul + p, .post-body ol + p, .post-body table + p { margin-top: 16px; }
.post-body ul, .post-body ol { margin: 14px 0 0 22px; }
.post-body li + li { margin-top: 8px; }
.post-body li > ul, .post-body li > ol { margin: 10px 0 0 0; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { color: var(--ink-muted); }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.post-body code { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--line-soft); border-radius: 3px; padding: 2px 5px; }
.post-body pre { margin: 22px 0; padding: 18px 20px; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--ink); }
.post-body pre code { background: none; padding: 0; }
.post-body blockquote { margin: 24px 0; padding: 4px 20px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.post-body blockquote p { font-size: 15px; color: var(--ink-sub); }
.post-body hr { border: none; border-top: 1px solid var(--line-soft); margin: 40px 0; }
.post-body table { display: block; width: 100%; margin: 22px 0; overflow-x: auto; border-collapse: collapse; font-size: 13.5px; line-height: 1.55; }
.post-body th, .post-body td { padding: 11px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.post-body th { font-weight: 600; color: var(--ink); background: var(--line-soft); }
.post-body td { color: var(--ink-sub); background: var(--panel); }

.post-figure { margin: 30px 0; }
.post-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.post-figure figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-muted); }

.post-related { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-muted); }

@media (max-width: 560px) {
  .writing-wrap { padding: 0 22px 60px; }
  .post-article { padding: 40px 22px 70px; }
}

/* ── Post: two-column compare list ── */
.post-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 22px 0 0; }
.post-cols h3 { margin: 0 0 4px; }
.post-body .post-cols ul { margin: 0 0 0 18px; }
.post-body .post-cols li { font-size: 14.5px; line-height: 1.6; }

/* ── Post: ported relate graph (from open-source.html) ── */
/* Break the diagram out past the text column when the screen has room, capped
   so it never runs edge to edge. Centered under the article via the transform. */
.post-graph { width: min(820px, 100vw - 48px); margin-left: 50%; transform: translateX(-50%); }
.post-graph .graph-scroll { overflow-x: auto; padding-bottom: 4px; }
/* Scale to the column width. It is vector, so the labels stay crisp as they
   shrink; the scroll wrapper is the fallback for a viewport too narrow for that. */
.post-graph .graph { display: block; width: 100%; height: auto; }
/* Edges are an OPAQUE grey, and the graph is decomposed into stem, bus and
   drops so no two paths share a segment: --ink-faint is 36% alpha, and
   overlapping strokes compound into what reads as a rendering fault. */
.post-graph .graph .g-link path, .post-graph .graph .g-arrow path {
  fill: none; color: #a6a6a2; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.post-graph .graph .g-arrow path { marker-end: url(#ah); }
.post-graph .graph .g-arrow.is-lineage path { color: var(--accent); stroke-dasharray: 6 5; }
.post-graph .graph .g-node rect { fill: var(--card); stroke-width: 1.2; }
.post-graph .graph .g-node.is-ext rect { stroke: var(--line); stroke-dasharray: 5 4; }
.post-graph .graph .g-node.is-ext text.n { fill: var(--ink-sub); }
.post-graph .graph .g-node.is-ours rect { stroke: var(--ink); stroke-opacity: 0.5; }
.post-graph .graph .g-node.is-flexviz rect { stroke: var(--accent); stroke-width: 2.2; fill: rgba(232,89,12,0.05); }
.post-graph .graph .g-node.is-flexviz text.n { font-size: 15px; fill: var(--accent); }
.post-graph .graph text.n { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; fill: var(--ink); }
.post-graph .graph text.d { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-muted); }
.post-graph .graph text.lg { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-faint); }

/* ── Post: ported data-flow diagram (from flexviz.tech) ── */
.post-flow .flow2 { display: flex; align-items: center; justify-content: center; gap: 6px 8px; flex-wrap: wrap; padding: 4px 0 26px; }
.post-flow .f2-node { display: flex; align-items: center; gap: 12px; }
.post-flow .f2-ico { width: 34px; height: 34px; flex-shrink: 0; }
.post-flow .f2-db { stroke: var(--ink); stroke-width: 1.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.post-flow .f2-plotly { fill: var(--ink); }
.post-flow .f2-txt b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.post-flow .f2-txt span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.post-flow .f2-arrow { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 26px; }
.post-flow .f2-alabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.post-flow .f2-arr { width: 64px; height: 12px; stroke: var(--accent); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.post-flow .f2-anote { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.post-flow .flow-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.post-flow .flow-note { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.post-flow .flow-note .fn-ico { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.post-body .post-flow .flow-note p { font-size: 13px; line-height: 1.55; color: var(--ink-sub); }
.post-flow .flow-note b { color: var(--ink); font-weight: 600; }

/* ── Post: side-by-side code pair ──
   Two real Python files do not fit the 720px reading column, so the pair
   breaks out of it and stacks below 760px. */
.post-code-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0;
  width: min(1080px, calc(100vw - 80px)); margin-left: 50%; transform: translateX(-50%);
}
.post-body .post-code-pair .code-block pre { margin: 0; border: 0; border-radius: 0; background: none; font-size: 11.5px; line-height: 1.7; }
.post-code-pair .code-bar b { font-weight: 500; color: var(--ink); }

@media (max-width: 760px) {
  .post-flow .flow-notes { grid-template-columns: 1fr; }
  .post-code-pair { grid-template-columns: 1fr; width: min(1080px, calc(100vw - 44px)); }
}
/* Phone: the flow row is 487px wide with the labels beside their icons, so
   below ~560px the two ends stack their icon over their label instead. They
   stay side by side either way: the diagram's point is that one thing flows
   into the other. */
@media (max-width: 560px) {
  .post-cols { grid-template-columns: 1fr; }
  .post-flow .flow2 { flex-wrap: nowrap; align-items: stretch; gap: 4px; padding-bottom: 22px; }
  .post-flow .f2-node { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 8px; text-align: center; }
  .post-flow .f2-ico { width: 30px; height: 30px; }
  .post-flow .f2-txt b { font-size: 13.5px; }
  .post-flow .f2-txt span { font-size: 10px; line-height: 1.35; display: block; }
  .post-flow .f2-arrow { flex: 0 0 auto; max-width: 96px; padding: 0; align-self: center; }
  .post-flow .f2-arr { width: 46px; }
  .post-flow .f2-anote { white-space: normal; text-align: center; font-size: 10px; line-height: 1.35; }
}