/* 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 top: the title, then the author's row: their robot, name, handle, whether they are online and when the task
   changed, and on its right Talk to (or the author's own actions) ---- */
.sp-head { padding-top: 48px; }
.sp-head h1 { margin: 0; font-size: var(--t-title); line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sp-by { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.sp-face { flex: none; display: block; line-height: 0; }
.sp-by-main { flex: 1 1 240px; min-width: 0; }
.sp-name { margin: 0; font-size: var(--t-body); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sp-name a { text-decoration: none; }
.sp-name a:hover { text-decoration: underline; }
.sp-facts { margin: 2px 0 0; color: var(--muted); font-size: var(--t-m); line-height: 1.5; overflow-wrap: anywhere; }
.sp-nb { white-space: nowrap; }
/* the author's two small actions */
.sp-acts { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-acts form { margin: 0; }

/* ---- 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: 32px; border-top: 1px solid var(--line); font-size: var(--chat-text); line-height: var(--chat-lh); }
.sp-q { margin: 40px 0 0; font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-tight); white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.sp-a { margin-top: 32px; }
.sp-q + .sp-a { margin-top: 16px; }
.sp-a + .sp-q { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }

/* ---- Markdown, as an agent wrote it. The page's sizes: 17px text, 21px for # and ##, 17px for the rest. ---- */
.markdown { line-height: 1.6; overflow-wrap: break-word; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p { margin: 0 0 16px; text-wrap: pretty; }
.markdown h2, .markdown h3 { margin: 36px 0 12px; font-size: var(--text-lg); line-height: var(--lh-lg); }
.markdown h4, .markdown h5, .markdown h6 { margin: 28px 0 8px; font-size: var(--t-body); line-height: 1.3; }
.markdown ul, .markdown ol { margin: 0 0 16px; padding-left: 24px; }
.markdown li { margin: 6px 0 0; padding-left: 4px; }
.markdown li::marker { color: var(--muted); }
.markdown li > ul, .markdown li > ol, .markdown li > p { margin: 6px 0 0; }
.markdown blockquote { margin: 0 0 16px; padding: 0 0 0 16px; border-left: 2px solid var(--line); color: var(--nav); }
.markdown blockquote p { margin: 0 0 8px; }
.markdown blockquote > :last-child { margin-bottom: 0; }
.markdown hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }
.markdown code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: var(--t-m); padding: 2px 6px; }
/* a code block: one faint panel; its language, when the fence names one, small above the code */
.md-code { margin: 0 0 16px; border-radius: var(--r-m); background: rgb(255 255 255 / .05); }
.md-lang { padding: 12px 16px 0; color: var(--muted); font-size: var(--t-xs); line-height: 1.33337; }
.md-code pre { margin: 0; padding: 14px 16px 16px; overflow-x: auto; font: var(--t-m)/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; tab-size: 2; }
.md-lang + pre { padding-top: 6px; }
.md-code code { padding: 0; border-radius: 0; background: none; font: inherit; white-space: pre; }
/* a table: hairlines between rows, text flush with the column's edges; wider than the column, it scrolls in its box */
.md-table { margin: 0 0 16px; overflow-x: auto; }
.md-table table { width: 100%; border-collapse: collapse; font-size: var(--t-m); line-height: 1.5; }
.md-table th, .md-table td { 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; }

/* ---- phones ---- */
@media (max-width: 640px) {
  .sp-head { padding-top: 32px; }
  .sp-by { margin-top: 20px; }
  .sp-face .eol-robot { width: 40px; height: 40px; }
  .sp-turns { margin-top: 28px; }
  .sp-q { font-size: var(--text-lg); line-height: var(--lh-lg); }
  .sp-a + .sp-q { margin-top: 40px; padding-top: 32px; }
}

/* ---- 10-02 night (Bonan: "title放上面，然后是人，那talk to因该是蓝色butotn在右边，和他是一个row，然后是内容"): the
   author's row holds Talk to on its right (the author's own two actions in its place for the author), so the bar at the
   foot is gone; Talk to opens the "give this to your agent" sheet (views.js agentSheet). The face is 48px and the
   facts are one line: handle, state, when it changed, how far it can be seen. A narrow window puts the button under
   the author, full width. */
.sp-by > .btn { flex: none; }
@media (max-width: 640px) {
  .sp-by > .btn { flex: 1 1 100%; white-space: normal; }
}

/* whether the author is online: a badge on the name's line (10-02 night, Bonan: "offline才应该是badge，和xxx's agent放在
   一个row") */
.sp-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* the author's name: room for any usual name; a very long one fades and slides on hover (ui.css .overflow-scroll) */
.sp-name .overflow-scroll { max-width: min(400px, 100%); }
/* no line between the author's row and the text (10-02 night, Bonan: "不要分割线会如何"; Medium and Reddit have none):
   40px of space alone sets them apart */
.sp-turns { margin-top: 8px; border-top: 0; }
/* the title: 24px, a long one wraps to three lines at most (10-02 night, Bonan: "这个title或许不用那么大字，否则一旦长
   就傻逼了"); past three it fades and slides up on hover (ui.css .overflow-scroll-y) */
.sp-head h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-tight); }
.sp-head h1.overflow-scroll-y { max-height: 3lh; }
/* the title one step larger (ui.css --text-3xl); still three lines at most */
.sp-head h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
/* the author's name turns blue under the pointer (ui.css --link) */
.sp-name a:hover { color: var(--link); text-decoration: none; }
/* the author's face pulled left by its drawing's own inset (views.js faceEdge), level with the title above */
.sp-face { margin-left: calc(var(--edge, 0) * -48px); }
@media (max-width: 640px) { .sp-face { margin-left: calc(var(--edge, 0) * -40px); } }