/* Writing map and imported posts. Uses the tokens from styles.css, so light/dark follow the theme. */
.wmap, .post { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 7vw, 88px); }
.wmap h1, .post h1 { font: 400 clamp(2.2rem, 5vw, 3.6rem)/1.04 var(--serif); letter-spacing: -.015em; margin: 0 0 14px; }
.wmap .sec-head p:not(.tagline) { max-width: 64ch; }

/* ---------- graph ---------- */
.wgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; margin-top: 8px; }
@media (max-width: 980px) { .wgrid { grid-template-columns: 1fr; } }
.gwrap { border: 1px solid var(--ink); border-radius: 2px; background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 40px,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 100%, var(--paper-2); overflow: hidden; }
#wgraph { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.g-edge { stroke: var(--ink); stroke-opacity: .28; stroke-width: 1.2; transition: stroke-opacity .2s; }
.g-edge[data-kind="link"] { stroke-dasharray: 5 4; stroke: var(--signal-ink); stroke-opacity: .6; }
.g-node { cursor: pointer; touch-action: none; outline: none; transition: opacity .2s; }
.g-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; transition: fill .2s; }
.g-node[data-type="topic"] .g-dot { fill: var(--paper); stroke: var(--signal-ink); stroke-width: 2; }
.g-halo { fill: none; stroke: var(--signal); stroke-width: 2.5; opacity: 0; transition: opacity .2s; }
.g-label { font: 500 11.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper-2); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.g-node[data-type="topic"] .g-label { font: 500 9px var(--mono); letter-spacing: .08em; fill: var(--signal-ink); }
.g-node:hover .g-dot, .g-node:focus-visible .g-dot { fill: var(--signal-ink); }
.g-node[data-type="topic"]:hover .g-dot, .g-node[data-type="topic"]:focus-visible .g-dot { fill: var(--paper); stroke-width: 3.5; }
.g-node:focus-visible .g-halo, .g-node.is-sel .g-halo, .g-node.is-lit .g-halo { opacity: 1; }
.g-node.is-lit .g-dot { fill: var(--signal-ink); }
#wgraph.has-focus .g-node:not(.is-near):not(.is-lit):not(.is-sel) { opacity: .28; }
#wgraph.has-focus .g-edge:not(.is-near) { stroke-opacity: .08; }
.g-edge.is-near { stroke-opacity: .9; stroke-width: 1.8; }
@media (prefers-reduced-motion: reduce) { .g-node, .g-halo, .g-edge, .g-dot { transition: none; } }
.legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.legend i { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.k-post { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.k-topic { width: 9px; height: 9px; border: 2px solid var(--signal-ink); transform: rotate(45deg); }
.k-link { width: 20px; border-top: 2px dashed var(--signal-ink); height: 0; }

/* ---------- preview card and chat ---------- */
.wside { display: grid; gap: 18px; min-width: 0; }
.wcard { border: 1px solid var(--ink); border-radius: 2px; padding: 16px 18px; min-height: 9rem; }
.wcard h2 { font: 400 1.45rem/1.15 var(--serif); margin: 0 0 8px; }
.wcard h2 a { text-decoration: none; }
.wcard .sub { color: color-mix(in srgb, var(--ink) 80%, var(--paper)); font-size: .95rem; margin: 0 0 8px; }
.wcard .facts, .wcard .hint, .wcard .fine { font: 400 .78rem/1.4 var(--mono); color: var(--mute); margin: 0 0 10px; }
.tagrow { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 12px; }
.tagrow a, .tagrow button { font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 6px 10px; border: 1px solid var(--ink); border-radius: 99px; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; }
.tagrow a:hover, .tagrow button:hover { background: var(--ink); color: var(--paper); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.acts .ghost { text-decoration: none; display: inline-block; cursor: pointer; }
.plain-links { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-align: left; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: .18em; cursor: pointer; }
.wchat h2 { font: 400 1.5rem/1.1 var(--serif); margin: 0 0 8px; }
.wchat .ask-note { font-size: .8rem; }
.wchat .scope { display: block; margin: -8px 0 12px; font: 400 .78rem/1.4 var(--mono); color: var(--panel-mute); }
.wchat .scope[hidden] { display: none; }
.wchat .status { font: 400 .74rem/1.4 var(--mono); color: var(--panel-mute); margin: 0 0 8px; min-height: 1.1em; }
.wchat .answer { font-size: 1.02rem; min-height: 0; }
.wchat .sources a { font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; justify-self: start; }
.wchat form { margin-bottom: 12px; }
.wlist { margin-top: clamp(32px, 6vw, 64px); }
.wlist h2 { font: 400 1.6rem/1.1 var(--serif); }
.wlist ol { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--ink); }
.wlist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wlist .t { font-weight: 600; }
.wlist a { text-decoration-color: transparent; }
.wlist a:hover .t { text-decoration: underline; text-decoration-color: var(--signal); }
.wlist time { font: 400 .76rem/1.6 var(--mono); color: var(--mute); }
.wlist .s { grid-column: 1 / -1; color: color-mix(in srgb, var(--ink) 75%, var(--paper)); font-size: .92rem; }

/* ---------- a post ---------- */
.post { max-width: 780px; }
.crumbs { font: 500 .76rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 22px; }
.post-sub { font-size: 1.2rem; color: color-mix(in srgb, var(--ink) 78%, var(--paper)); margin: 0 0 12px; max-width: 60ch; }
.orig { font: 400 .8rem/1.5 var(--mono); color: var(--mute); margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.prose { font-size: 1.1rem; line-height: 1.7; }
.prose p, .prose ul, .prose ol, .prose figure, .prose blockquote, .prose pre, .prose .eq { margin: 0 0 1.15em; }
.prose h2 { font: 400 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--serif); margin: 1.8em 0 .5em; }
.prose h3 { font: 600 1.25rem/1.3 var(--sans); margin: 1.6em 0 .4em; }
.prose h4, .prose h5, .prose h6 { font: 600 1.05rem/1.3 var(--sans); margin: 1.4em 0 .4em; }
.prose li { margin-bottom: .35em; }
.prose li > p { margin-bottom: .4em; }
.prose a { text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.prose img, .prose video { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 2px; background: var(--paper-2); }
.prose figure { text-align: center; }
.prose figcaption { font: 400 .82rem/1.45 var(--mono); color: var(--mute); margin-top: 8px; }
/* The diagrams and charts were made on white; keep them legible in dark mode. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose img { background: #f4f1ea; padding: 6px; } }
.prose blockquote { border-left: 3px solid var(--signal); padding: 2px 0 2px 18px; color: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose .pullquote { font: 400 1.5rem/1.35 var(--serif); padding: 12px 0 12px 18px; border-left: 3px solid var(--signal); margin: 1.4em 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose code { font: 400 .88em var(--mono); background: var(--paper-2); padding: .1em .35em; border-radius: 2px; }
.prose pre { background: var(--panel); color: var(--panel-text); padding: 14px 16px; overflow-x: auto; border-radius: 3px; font-size: .86rem; line-height: 1.55; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.prose .eq { overflow-x: auto; padding: 6px 0; text-align: center; font-size: 1.2em; }
.prose math { font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", math; }
.prose .footnote { display: flex; gap: 8px; font-size: .88rem; color: var(--mute); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2em; }
.prose .footnote-number, .prose .footnote-anchor { font: 500 .78rem/1 var(--mono); text-decoration: none; color: var(--signal-ink); }
.prose .footnote-anchor { vertical-align: super; margin-left: 2px; }
.prose .postcard { padding: 12px 16px; border: 1px solid var(--ink); border-radius: 2px; font-weight: 600; }
.prose table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; }
.post-foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink); display: grid; gap: 8px; }
.post-foot .tagrow { margin-bottom: 4px; }
@media print { .bar, .foot, .post-foot, .crumbs { display: none; } }

/* ---------- reading progress ---------- */
.rp { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 40; background: transparent; pointer-events: none; }
.rp i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; will-change: transform; }
@media print { .rp { display: none; } }