/* EarthOnline Chat, second version: the share page /s/<id> (design/03-v2.md §4.3, src/views/share.js) and the
   Markdown it renders (src/views/markdown.js). Every page loads this file after style.css, so every rule here is
   scoped to this page's own classes (sp-*, markdown, md-*) and changes nothing anywhere else.
   Sizes, colours and radii are style.css's tokens. Colour comes from the robots only; a code block has a faint ground.
   Nothing moves but an online robot's blink: what opens over the page is simply there, hover changes one step of
   ground (buttons) or only the text (links). */

/* ---- the post (round 4, 10-09; Bonan: "title 在上面，头像什么的可以从简，从小"; Medium's, Substack's, Dropbox Paper's
   article header): the title first, at the title level; under it one small byline row at the meta level: the face
   (24), the name at the item weight, "@handle · 4d" grey, and at the row's right end the small Chat (someone else's
   post) and the ⋯; then the post's turns. The feed's author line is the same row (home.css .home-item-by). ---- */
.sp { padding-top: 24px; }
.sp-by { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 12px; }
.sp-face { flex: none; display: block; line-height: 0; margin-left: calc(var(--edge, 0) * -24px); }
.sp-byline { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0; font: var(--level-meta); }
.sp-name { flex: 0 0 auto; min-width: 0; color: var(--fg); text-decoration: none; }
.sp-name:hover { text-decoration: underline; }
.sp-name.overflow-scroll { max-width: min(320px, 60%); }
/* a narrow row gives way at the handle first (its end fades, ui.css .overflow-scroll), the name keeps its room */
.sp-facts { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--subtle); white-space: nowrap; }
.sp-nb { white-space: nowrap; }
.sp .sp-more { flex: none; width: 36px; height: 36px; margin: 0 -8px 0 0; color: var(--muted); }
.sp .sp-more:hover, .sp .sp-more:has(+ .menu:popover-open) { color: var(--fg); background: var(--bg2); }
.sp-more { anchor-name: --post-more; }
#post-more { position-anchor: --post-more; }
.sp-menu { width: 220px; }
.sp-menu .sp-menu-delete { color: var(--danger); }
.sp-title { margin: 0; font: 600 var(--text-2xl)/var(--lh-2xl) var(--font); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; text-wrap: pretty; }
.sp-time { margin: 16px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.sp-actions { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; }
.sp-actions .btn svg { flex: none; }

/* ---- the turns, as one document (after Perplexity's shared pages): what the person said is a question heading, the
   agent's answer is the text under it. No bubbles and no signatures: the author is named once, at the top. ---- */
.sp-turns { margin-top: 12px; font-size: var(--chat-text); line-height: var(--chat-lh); }
.sp-q { margin: 32px 0 0; font-size: var(--text-lg); line-height: var(--lh-lg); letter-spacing: var(--tracking-tight); white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.sp-turns > :first-child { margin-top: 0; }
.sp-a { margin-top: 16px; }
.sp-q + .sp-a { margin-top: 12px; }
.sp-a + .sp-q { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--bg3); }


/* ---- Markdown, as an agent wrote it (post-longform, 10-08; src/views/markdown.js; eol_research/post-longform-2026-10-08/
   NOTES.md). The type is the site's levels (ui.css): the text at body (16/24), a section's heading at 18/28 and the one
   under it at 16/24, both semibold, so the post's own title (22/28) stays the largest thing; code and tables at meta
   (14). The rhythm is GitHub's and Notion's in our steps: 16 between blocks, 4 between a list's items, 32 above a
   section, 8 under its heading. Links are the site's (the text's colour, underlined). Nothing animates: a fold, a
   toggle, the contents' mark change at once. ---- */
.markdown { font: var(--level-body); overflow-wrap: break-word; }
.markdown :is(.md-sec-body, .md-details-body, .md-alert, blockquote, li) > :first-child, .markdown > :first-child { margin-top: 0; }
.markdown :is(.md-sec-body, .md-details-body, .md-alert, blockquote, li) > :last-child, .markdown > :last-child { margin-bottom: 0; }
.markdown p { margin: 0 0 16px; text-wrap: pretty; }
.markdown strong { font-weight: 600; }
/* headings: the site's levels, by how deep (the shallowest in the text is h2; under a question heading, h3) */
.markdown :is(h2, h3, h4, h5, h6) { margin: 24px 0 4px; font: 600 var(--fs-body)/var(--lh-body) var(--font); letter-spacing: normal; text-wrap: pretty; scroll-margin-top: 72px; }
.markdown h2 { margin: 32px 0 8px; font-size: var(--text-lg); line-height: var(--lh-lg); }
.markdown :is(h5, h6) { color: var(--muted); }
.markdown > .md-sec:first-child > .md-h, .md-sec-body > .md-sec:first-child > .md-h { margin-top: 0; }
.sp-q { scroll-margin-top: 72px; }
/* a heading's caret, which folds its section (Dropbox's: 10-09, Bonan: "应该在 header title 的后面……自然一些，和 Dropbox
   学学"; it replaced the gutter caret of 10-08): right after the last word, 6px from it, one 16px chevron for every
   level, its middle on the middle of the heading's x-height (vertical-align: middle); the last word and the caret never
   part, so a heading that wraps has it after its last word on its last line (markdown.js .md-h-last). Down while open,
   right while folded; shown under the pointer, always while folded and always on a touch screen; the whole heading row
   folds and unfolds (public/app.js), the caret is its keyboard's button. The heading's own link (GitHub's) follows the
   caret under the pointer; a touch screen has the contents for that. Under the pointer only colours change; nothing
   moves. */
.markdown .md-sec > .md-h { cursor: pointer; }
.md-h-last { white-space: nowrap; }
.md-fold, .md-anchor { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--subtle); vertical-align: middle; cursor: pointer; opacity: 0; }
.md-fold { margin-left: 6px; }
.md-anchor { margin-left: 4px; }
.md-fold::after, .md-anchor::after { content: ""; position: absolute; inset: -8px; }
.md-h:hover :is(.md-fold, .md-anchor), :is(.md-fold, .md-anchor):focus-visible, .md-sec.is-folded > .md-h .md-fold { opacity: 1; }
.md-sec > .md-h:hover .md-fold, :is(.md-fold, .md-anchor):hover { color: var(--fg); }
:is(.md-fold, .md-anchor):focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.md-sec.is-folded > .md-h .md-caret, .md-details:not([open]) > summary .md-caret, .sp-contents:not([open]) > summary .md-caret { transform: rotate(-90deg); }
@media (hover: none) { .md-fold { opacity: 1; } .md-anchor { display: none; } }
/* lists: the site's markers, 4 between items; a task list has its boxes instead (GitHub's), done ones struck and grey (Notion's, Cube's) */
.markdown :is(ul, ol) { margin: 0 0 16px; padding-left: 24px; }
.markdown li { margin: 4px 0 0; padding-left: 4px; }
.markdown li::marker { color: var(--muted); }
.markdown li > :is(ul, ol) { margin: 4px 0 0; }
.markdown li > p { margin: 0 0 8px; }
.markdown ul.md-tasks { padding-left: 0; list-style: none; }
.markdown li.md-task { position: relative; padding-left: 28px; }
.md-check { position: absolute; top: 4px; left: 0; display: grid; place-items: center; box-sizing: border-box; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 4px; }
.md-check.is-done { border-color: var(--fg); background: var(--fg); color: var(--on-fg); }
.md-task.is-done { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
/* a quote: GitHub's, a 2px line and grey words; GitHub's alerts the same shape in their colour, their kind named over the words */
.markdown blockquote { margin: 0 0 16px; padding: 0 0 0 16px; border-left: 2px solid var(--line); color: var(--muted); }
.md-alert { margin: 0 0 16px; padding: 0 0 0 16px; border-left: 2px solid var(--alert); }
.markdown .md-alert-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--alert); font-weight: 600; }
.md-alert-title > svg { flex: none; }
.md-alert[data-kind="note"] { --alert: light-dark(#0969da, #4493f8); }
.md-alert[data-kind="tip"] { --alert: light-dark(#1a7f37, #3fb950); }
.md-alert[data-kind="important"] { --alert: light-dark(#8250df, #ab7df8); }
.md-alert[data-kind="warning"] { --alert: light-dark(#9a6700, #d29922); }
.md-alert[data-kind="caution"] { --alert: light-dark(#d1242f, #f85149); }
.markdown hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }
/* a mention (round 4): someone here, in the link colour, underlined under the pointer (X's); their hover card opens */
.markdown a.md-mention { color: var(--link); text-decoration: none; }
.markdown a.md-mention:hover { text-decoration: underline; }
/* a link in a post (10-09, Bonan; X's): the mention's blue, no underline until pointed at; a bare address shows short
   (views/markdown.js linkLabel); no hover card (only a mention has one). Posts only: a chat bubble keeps its own. */
.markdown a.md-link { color: var(--link); text-decoration: none; overflow-wrap: anywhere; }
.markdown a.md-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.markdown code { padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 6%, transparent); font: 400 var(--fs-meta)/1 var(--mono); }
/* a code block (Cube's chat, ChatGPT's): one faint panel; a quiet head, the language on the left and Copy on the right;
   the code at meta size, scrolling sideways in the panel */
.md-code { margin: 0 0 16px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.md-code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 0 16px; }
.md-lang { min-width: 0; overflow: hidden; color: var(--muted); font: var(--level-meta); text-overflow: ellipsis; white-space: nowrap; }
.md-copy { flex: none; gap: 6px; color: var(--muted); }
.md-code pre { margin: 0; padding: 4px 16px 16px; overflow-x: auto; font: 400 var(--fs-meta)/22px var(--mono); tab-size: 2; }
.md-code code { padding: 0; border-radius: 0; background: none; font: inherit; white-space: pre; }
/* a table: hairlines between rows, the head semibold; wider than the column, it scrolls in its own box (a phone) */
.md-table { margin: 0 0 16px; overflow-x: auto; }
.md-table table { width: 100%; border-collapse: collapse; font: var(--level-meta); }
.md-table th, .md-table td { min-width: 96px; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.md-table th:last-child, .md-table td:last-child { padding-right: 0; }
.md-table th { font-weight: 600; }
.md-table tr:last-child td { border-bottom: 0; }
/* a toggle (<details>): Mintlify's accordion in the site's shell (1px line, 12px corners); its summary's words, then the
   caret (taste); under the pointer only the words' colour changes */
.md-details { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; }
.md-details > summary { display: flex; align-items: center; gap: 6px; padding: 10px 16px; list-style: none; cursor: pointer; font-weight: 600; }
.md-details > summary::-webkit-details-marker { display: none; }
.md-details > summary .md-caret { flex: none; color: var(--subtle); }
.md-details > summary:hover, .md-details > summary:hover .md-caret { color: var(--nav); }
.md-details-body { padding: 0 16px 14px; }
/* a picture of the post placed in the text: the column's full width, 12px corners, the grid's 1px line; its caption
   under it at meta, grey; a press opens it large (the post's lightbox) */
.md-fig { margin: 24px 0; }
.md-img { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); cursor: zoom-in; }
.md-img > img { display: block; width: 100%; height: auto; }
/* a picture whose size the post does not know (one stored before 10-09) keeps a 16:9 room until it loads */
.md-img > img:not([width]) { aspect-ratio: auto 16 / 9; }
p > .md-img { margin: 8px 0; }
.md-img:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.md-fig > figcaption { margin-top: 8px; color: var(--muted); font: var(--level-meta); text-align: center; text-wrap: pretty; }
/* footnotes: GitHub's, the number raised, the notes at the end at meta size under a hairline */
.md-fnref { font-size: 12px; line-height: 0; }
.md-fnref > a { padding: 0 2px; text-decoration: none; color: var(--link); }
.md-footnotes { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font: var(--level-meta); }
.md-footnotes ol { margin: 0; padding-left: 20px; }
.md-footnotes li { margin: 4px 0 0; padding-left: 4px; }
.md-footnotes li > p { margin: 0; }
.md-footnotes li:target, .md-fnref > a:target { background: none; }
.md-fnback { text-decoration: none; }
.md-footnotes [id], .md-fnref [id] { scroll-margin-top: 72px; }

/* ---- the contents (views/share.js), Docusaurus's and Mintlify's "On this page" (their CSS, measured in NOTES.md): no
   box, a quiet list. Its head at meta size, medium, grey; the rows at meta size (14/20) with 4 above and below (28
   high, Mintlify's 4px and Docusaurus's 8px between), 12 in from a 1px track down the list's left (--line), a deeper
   heading 12 further in; one line each (a long one fades and slides, ui.css .overflow-scroll); grey, the text's colour
   under the pointer; the section in view in the text's colour with a 2px piece of the track beside it in the text's
   colour too (Mintlify's, Docusaurus's; taste: what is chosen changes colour, not weight). Where the right column is,
   it heads it (rail.css .rcol-stick), its track on the column's edge; a long one scrolls in its own height. Narrower:
   a Contents toggle under the title, in the site's 1px shell, the same list inside. Nothing moves. ---- */
.rcol-toc { padding-top: var(--sp-1); }
.toc-head { margin: 0 0 var(--sp-2); color: var(--muted); font: 500 var(--fs-meta)/var(--lh-meta) var(--font); }
.toc { list-style: none; margin: 0; padding: 0; background: linear-gradient(var(--line), var(--line)) left top / 1px 100% no-repeat; }
.toc-row { position: relative; display: block; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); color: var(--muted); font: var(--level-meta); text-decoration: none; }
.toc-row.toc-sub { padding-left: calc(2 * var(--sp-3)); }
.toc-row:hover, .toc-row[aria-current] { color: var(--fg); }
.toc-row[aria-current]::before { content: ""; position: absolute; top: var(--sp-1); bottom: var(--sp-1); left: 0; width: 2px; background: var(--fg); }
.toc-row:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
/* a long contents (10-09, Bonan: "假如这个很长，他怎么滚动？"; Docusaurus's and Mintlify's): the list scrolls in its own
   height, at most 50% of the window in the right column (My agents stays in view under it) and 60% in a phone's
   Contents; the site's scrollbar (ui.css: thin, shown while scrolling) with its place kept; the side that has more fades
   over 24px (public/app.js .fade-start/-end); the section in view is kept in the list's view as you read (app.js, at
   once). A short one fits: no scrolling, no fade. */
.toc-scroll { position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.rcol-toc .toc-scroll { max-height: 50vh; }
.sp-contents .toc-scroll { max-height: 60vh; margin-bottom: var(--sp-3); }
.toc-scroll.fade-start { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px); mask-image: linear-gradient(to bottom, transparent, #000 24px); }
.toc-scroll.fade-end { -webkit-mask-image: linear-gradient(to top, transparent, #000 24px); mask-image: linear-gradient(to top, transparent, #000 24px); }
.toc-scroll.fade-start.fade-end { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.sp-contents { margin: var(--sp-4) 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: clip; }
.sp-contents > summary { display: flex; align-items: center; gap: 6px; padding: 10px var(--sp-4); list-style: none; cursor: pointer; font: var(--level-item); }
.sp-contents > summary::-webkit-details-marker { display: none; }
.sp-contents > summary .md-caret { color: var(--subtle); }
.sp-contents > summary:hover, .sp-contents > summary:hover .md-caret { color: var(--nav); }
.sp-contents .toc { margin: 0 var(--sp-4); }
.sp-contents .toc-row { padding-top: 6px; padding-bottom: 6px; } /* a finger's row: 32 */
.sp-contents .toc-row[aria-current]::before { top: 6px; bottom: 6px; }
@media (min-width: 1000px) { body[data-rail] main:has(> .rcol) .sp-contents { display: none; } }

/* ---- phones: the column's own 16px edges; the action row's line to the screen's edges ---- */
@media (max-width: 640px) {
  .sp { padding-top: 16px; }
  .sp-title { font-size: var(--text-lg); line-height: var(--lh-lg); }
}
/* an opening's state (10-07), the quiet line over the time: the two read as one block */
.sp-opening + .sp-time { margin-top: 4px; }

/* ---- Chat (10-07, Bonan: not at the end of the post): small at the byline's right end, on a phone too; once it has
   scrolled away, the Chat dock at the window's foot (ui.css .chat-dock; round 4). ---- */
.sp-by-act { flex: none; display: flex; align-items: center; margin-left: auto; }
.sp-by-act .btn { white-space: nowrap; }
.sp-opening-pill { margin: 12px 0 0; }
.pill-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-full); background: var(--bg2); color: var(--muted); font: 500 var(--text-sm)/var(--lh-sm) var(--font); }
.sp-turns { margin-top: 16px; }
.sp-time { margin-top: 24px; }
.sp-chat[disabled] { opacity: .5; cursor: default; }
/* (F24, 10-09: a phone's post had its own top, the header scrolling away and the title row turned into one full-width glass
   bar, "← Post"; Bonan, of the floating row: "post 在中间，然后 return 独立的圆在左边". Now it is every page's: the header stays,
   the "Post" pill floats 8 under it, centred, back a glass circle of its own at the left; rail.css .panel-pill-at.) */
@media (max-width: 760px) {
  body:has(main > .sp) { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}