/* Threadline. Built on polr.css tokens; light theme only. */
html { color-scheme: light; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: var(--violet-text); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.muted { color: var(--ink-muted); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row.between { justify-content: space-between; }

.top { padding: var(--space-6) 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.top .wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.top-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.top-text { display: flex; flex-direction: column; gap: var(--space-2); }
.home { color: inherit; text-decoration: none; }
.lede { margin: 0 0 var(--space-2); color: var(--ink-muted); max-width: 65ch; }
.top .polr-btn { text-decoration: none; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; padding-bottom: 64px; }
aside { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: var(--space-4); }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } aside { position: static; } }

aside .polr-card p { font-size: 14px; line-height: 20px; }
.mcp-text { margin: 0; color: var(--ink-muted); }
.asks { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.calls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.calls li { display: flex; gap: var(--space-2); align-items: baseline; font: 500 12px/17px var(--font-sans); color: var(--ink-muted); }
.calls li .value { font-size: 11px; color: var(--violet-text); flex: none; }
.calls li:first-child { color: var(--ink); }

/* Front page */
.stories { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.story { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.story .rank { font: 500 13px/20px var(--font-mono); color: var(--ink-muted); text-align: right; }
.story .st { font: 600 16px/22px var(--font-sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.story .st:hover { text-decoration: underline; }
.story .dom { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); margin-left: var(--space-2); }
.story .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: 4px; color: var(--ink-muted); }
.story .meta a { font-weight: 600; text-decoration: none; }
.story .meta a:hover { text-decoration: underline; }

/* Thread header */
.story-head { gap: var(--space-2); margin-bottom: var(--space-4); }
.story-head h2 { margin: 0; font: 700 26px/32px var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.story-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--ink-muted); }
.story-head .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.story-head .polr-btn { height: 36px; text-decoration: none; }
.story-text { color: var(--ink); max-width: 68ch; }
.section-bar { display: flex; align-items: center; justify-content: space-between; margin: var(--space-4) 0 var(--space-3); gap: var(--space-3); }
.section-bar .polr-btn { height: 36px; }

/* Comments */
.cmt { margin-top: var(--space-3); }
.cmt .kids { margin-left: var(--space-3); padding-left: var(--space-3); border-left: 2px solid var(--line); }
#comments > .cmt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-card); }
#comments > .cmt .cmt { margin-top: var(--space-3); }
/* Past five levels the indent stops growing so long arguments stay readable */
.cmt.deep > .kids { margin-left: 0; padding-left: 0; border-left: 0; }
.cmt.deep { border-top: 1px dashed var(--line); padding-top: var(--space-2); }
@media (max-width: 600px) { .cmt .kids { margin-left: 4px; padding-left: var(--space-2); } .cmt.deep > .kids { margin-left: 0; padding-left: 0; } #comments > .cmt { padding: var(--space-3); } .story-head h2 { font-size: 22px; line-height: 28px; } }
.chead { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chead .author { font: 600 13px/18px var(--font-sans); color: var(--ink); }
.chead .caption, .chead .permalink { color: var(--ink-muted); }
.chead .permalink { text-decoration: none; font-size: 12px; }
.chead .permalink:hover { color: var(--violet-text); text-decoration: underline; }
.fold { flex: none; width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-muted); font: 600 14px/1 var(--font-mono); cursor: pointer; }
.fold:hover { background: var(--sunken); }
.fold:focus-visible, .cfoot button:focus-visible, .ref:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fold-count { display: none; color: var(--ink-muted); }
.cmt.collapsed > .chead .fold-count { display: inline; }
.cmt.collapsed > .cbody, .cmt.collapsed > .cfoot, .cmt.collapsed > .kids, .cmt.collapsed > .slot { display: none; }
.cbody { font: 400 15px/23px var(--font-sans); color: var(--ink); max-width: 72ch; overflow-wrap: anywhere; margin-top: 4px; }
.cbody p { margin: 0 0 var(--space-2); }
.cbody pre { background: var(--sunken); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); overflow-x: auto; font: 400 13px/19px var(--font-mono); }
.cbody blockquote { margin: 0 0 var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--line-strong); color: var(--ink-muted); }
.cbody ::selection { background: var(--violet-soft); }
.cfoot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: 2px; }
.cfoot button { all: unset; cursor: pointer; font: 600 12px/18px var(--font-sans); color: var(--violet-text); padding: 2px 4px; border-radius: var(--radius-sm); }
.cfoot button:hover { background: var(--violet-soft); }
.cited { font: 500 12px/18px var(--font-sans); color: var(--ink-muted); }
.cited a { font-weight: 600; text-decoration: none; }
.cmt.is-focus > .chead .author { color: var(--accent-text); }
.cmt.is-focus > .cbody { box-shadow: -10px 0 0 -8px var(--accent); }
.cmt.mine > .chead .author { color: var(--good-text); }
.flash { animation: flash 2.6s ease-out; }
@keyframes flash { 0%, 15% { background: color-mix(in srgb, var(--amber) 45%, transparent); } 100% { background: transparent; } }

/* References inside replies */
.ref { display: inline; padding: 1px 6px; margin: 0 1px; border-radius: var(--radius-sm); background: var(--violet-soft); color: var(--violet-text); font: 500 13px/20px var(--font-sans); text-decoration: none; cursor: pointer; }
.ref b { font-weight: 700; margin-right: 4px; }
.ref:hover { background: color-mix(in srgb, var(--violet) 22%, var(--violet-soft)); }
.ref-missing { background: var(--danger-soft); color: var(--danger-text); cursor: default; }

/* Composer */
.slot:empty { display: none; }
.slot { margin-top: var(--space-2); }
.composer { gap: var(--space-2); box-shadow: var(--shadow-lift); }
.composer .eyebrow { color: var(--ink-muted); }
.composer textarea { width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; padding: var(--space-3); background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); font: 400 15px/22px var(--font-sans); caret-color: var(--accent); }
.composer textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.composer.writing textarea { border-color: var(--accent); background: var(--accent-soft); }
.composer .preview { border-left: 2px solid var(--violet); padding-left: var(--space-3); }
.composer .preview p { margin: 0 0 var(--space-2); font: 400 14px/21px var(--font-sans); color: var(--ink); }
.composer .preview blockquote { margin: 0 0 var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--line-strong); color: var(--ink-muted); }
.composer .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.composer .actions .polr-btn { height: 36px; }
.composer .note { margin: 0; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.composer .note.bad { color: var(--danger-text); }

.quote-btn { position: fixed; z-index: 30; height: 32px; box-shadow: var(--shadow-lift); }
.empty { color: var(--ink-muted); }
.error { color: var(--danger-text); }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

.sample-note { color: var(--ink-muted); margin: 0 0 var(--space-3); max-width: 70ch; }

/* Reply with your agent */
.agent-panel details { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.agent-panel summary { cursor: pointer; }
.agent-panel textarea { margin-top: var(--space-2); font: 400 12px/18px var(--font-mono); min-height: 220px; }
.agent-panel [data-role=msg] { margin: 0; }
.agent-panel .row { margin: 0; flex-wrap: wrap; }
.section-bar .row { flex-wrap: wrap; justify-content: flex-end; }