/* Member-written posts and contributor profiles. One stylesheet for the whole
   feature; the palette comes from season.css :root so these pages age with the
   rest of the site rather than drifting into their own look. */

/* Top padding, not margin: base.html puts this block directly after the nav
   with nothing between, so without it the first element sits against the bar. */
.pw { max-width: 760px; margin: 0 auto; padding: 24px 16px 0; }
.pw-wide { max-width: 1040px; }

/* ---- article ---------------------------------------------------------- */
.post-head { border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 26px; }
.post-head h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 14px; }
.post-byline { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); flex-wrap: wrap; }
.post-byline a { color: var(--text); text-decoration: none; font-weight: 600; }
.post-byline a:hover { color: var(--accent); }
.post-byline .dot { opacity: .5; }

/* Reading measure and rhythm: a member's argument is the product here, so the
   body copy gets the same care as an editorial page. */
.post-body { font-size: 1.06rem; line-height: 1.75; }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 { font-size: 1.4rem; margin-top: 2em; }
.post-body h3 { font-size: 1.15rem; margin-top: 1.7em; }
.post-body a { color: var(--accent); }
.post-body img { max-width: 100%; height: auto; border-radius: 8px; }
.post-body blockquote {
  margin-left: 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border); color: var(--muted);
}
.post-body pre {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: .9rem;
}
.post-body code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.post-body pre code { background: none; padding: 0; }
.post-body table { width: 100%; }

.post-tickers { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); }
.post-tickers .lbl { color: var(--muted); font-size: .85rem; align-self: center; }
.tchip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.tchip:hover { border-color: var(--accent); color: var(--accent); }

/* ---- index + profile cards -------------------------------------------- */
.post-card { padding: 20px 0; border-bottom: 1px solid var(--border); }
.post-card h2 { margin: 0 0 6px; font-size: 1.25rem; }
.post-card h2 a { color: var(--text); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }
.post-card .ex { color: var(--muted); font-size: .95rem; line-height: 1.6; margin: 0 0 8px; }
.post-card .meta { font-size: .82rem; color: var(--muted); }

.prof-head { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.prof-head h1 { margin: 0 0 6px; font-size: 1.6rem; }
.prof-bio { color: var(--text); line-height: 1.65; margin: 8px 0 10px; }
.prof-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; }
.prof-links a { color: var(--accent); text-decoration: none; }
.prof-links a:hover { text-decoration: underline; }

/* ---- forms ------------------------------------------------------------- */
.pform label { display: block; font-weight: 600; margin: 18px 0 6px; font-size: .92rem; }
.pform .hint { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: 6px; }
.pform input[type=text], .pform textarea {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-size: 1rem; font-family: inherit;
}
.pform textarea { min-height: 380px; line-height: 1.6; resize: vertical; }
.pform input:focus, .pform textarea:focus { outline: none; border-color: var(--accent); }
.pform .btn {
  margin-top: 22px; background: var(--accent); color: #fff; border: 0;
  border-radius: 8px; padding: 11px 22px; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.pform .btn:hover { background: var(--accent-d); }

/* ---- review queue ------------------------------------------------------ */
.q-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--border); }
.q-row .grow { flex: 1; min-width: 0; }
.q-row h3 { margin: 0 0 4px; font-size: 1.05rem; }
.q-row h3 a { color: var(--text); text-decoration: none; }
.q-actions { display: flex; gap: 8px; flex-shrink: 0; }
.q-actions button {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 6px; padding: 6px 12px; font-size: .85rem; cursor: pointer;
}
.q-actions .ok:hover { border-color: var(--green); color: var(--green); }
.q-actions .no:hover { border-color: var(--danger); color: var(--danger); }
.q-empty { color: var(--muted); padding: 18px 0; }
.q-sec { margin-top: 34px; }
.q-sec > h2 { font-size: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: 10px; }

@media (max-width: 600px) {
  .post-head h1 { font-size: 1.5rem; }
  .post-body { font-size: 1rem; }
  .q-row { flex-direction: column; }
}

/* ---- follow ------------------------------------------------------------ */
.prof-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.prof-count { font-size: .85rem; color: var(--muted); white-space: nowrap; }
/* The writer sees their own number below the public threshold, so say why it is
   there -- otherwise it reads as a public count that happens to be tiny. */
.prof-count-note { display: block; font-size: .72rem; opacity: .7; text-align: right; }
.follow-btn { cursor: pointer; font-family: inherit; }
.follow-btn.is-on { border-color: var(--accent); color: var(--accent); }
.follow-btn.is-on:hover { border-color: var(--danger); color: var(--danger); }

/* ---- profile page ------------------------------------------------------ */
/* An author page in the site's own language -- hairline dividers, calm header,
   nothing floating. Deliberately NOT a social-network profile: no banner, no
   avatar overlapping one, no underlined tab strip. This is a research site and
   the profile should look like the rest of it. */
.pf { margin-top: 0; }

.pf-head { display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.pf-av { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  background: hsl(var(--pf-hue) 32% 30%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.pf-id { min-width: 0; flex: 1; }
.pf-name { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.2; }
.pf-at { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.pf-act { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.pf-btn { display: inline-block; padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer;
  font-family: inherit; white-space: nowrap; }
.pf-btn:hover { border-color: var(--muted); text-decoration: none; color: var(--text); }
.pf-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-btn-primary:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.pf-btn-on:hover { border-color: var(--danger); color: var(--danger); }

.pf-bio { margin: 16px 0 0; line-height: 1.65; font-size: .97rem; max-width: 62ch; }

.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0;
  font-size: .86rem; color: var(--muted); }
.pf-m { display: inline-flex; align-items: center; gap: 6px; }
.pf-m svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }
.pf-m a { color: var(--accent); text-decoration: none; }
.pf-m a:hover { text-decoration: underline; }

.pf-stats { display: flex; gap: 20px; margin: 12px 0 0; font-size: .86rem;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-stats b { color: var(--text); font-weight: 700; }

.pf-sec { margin: 28px 0 0; padding-bottom: 10px; font-size: .78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); border-bottom: 1px solid var(--border); }

.pf-post { padding: 16px 0; border-bottom: 1px solid var(--border); }
.pf-post h2 { margin: 0 0 5px; font-size: 1.08rem; font-weight: 700; }
.pf-post h2 a { color: var(--text); text-decoration: none; }
.pf-post h2 a:hover { color: var(--accent); }
.pf-ex { margin: 0 0 7px; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.pf-pmeta { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-badge { border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.pf-empty { padding: 26px 0; color: var(--muted); font-size: .93rem; }
/* :not() so this never repaints a BUTTON's label. `.pf-empty a` scores higher
   than `.pf-post-btn`, so it used to win and set the label to the same accent
   the button is filled with -- blue on blue, a button with no text on it. */
.pf-empty a:not(.pf-post-btn) { color: var(--accent); }

@media (max-width: 600px) {
  .pf-head { flex-wrap: wrap; }
  .pf-act { width: 100%; }
  .pf-name { font-size: 1.15rem; }
}

/* ---- follow ------------------------------------------------------------ */
.prof-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.prof-count { font-size: .85rem; color: var(--muted); white-space: nowrap; }
/* The writer sees their own number below the public threshold, so say why it is
   there -- otherwise it reads as a public count that happens to be tiny. */
.prof-count-note { display: block; font-size: .72rem; opacity: .7; text-align: right; }
.follow-btn { cursor: pointer; font-family: inherit; }
.follow-btn.is-on { border-color: var(--accent); color: var(--accent); }
.follow-btn.is-on:hover { border-color: var(--danger); color: var(--danger); }

/* the real destination, beside a member-chosen label */
.pf-dom { color: var(--muted); opacity: .7; font-size: .78rem; }

/* ---- link rows on the edit form ---------------------------------------- */
.lnk-row { display: flex; gap: 8px; margin-bottom: 8px; }
.lnk-row .lnk-label { flex: 0 0 34%; }
.lnk-row .lnk-url { flex: 1; min-width: 0; }
.lnk-help { margin-top: 12px; font-size: .85rem; color: var(--muted); }
.lnk-help summary { cursor: pointer; color: var(--accent); }
.lnk-groups { margin-top: 10px; display: grid; gap: 7px; }
.lnk-groups b { color: var(--text); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .05em; display: block; }
.lnk-groups span { font-size: .84rem; line-height: 1.5; }
.lnk-groups p { margin: 6px 0 0; font-size: .82rem; }
@media (max-width: 600px) { .lnk-row { flex-direction: column; } .lnk-row .lnk-label { flex: none; } }

/* ---- allowed-sites popup ----------------------------------------------- */
.lnk-row.is-bad input { border-color: var(--danger); }
.lnk-bad { margin: -2px 0 10px; font-size: .84rem; color: var(--danger); }
.lnk-open { background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer; }
.lnk-help { margin-top: 10px; font-size: .85rem; }

.lnk-modal { border: 1px solid var(--border); border-radius: 12px; padding: 0;
  background: var(--panel); color: var(--text); max-width: 560px; width: calc(100% - 32px);
  box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.lnk-modal::backdrop { background: rgba(0,0,0,.6); }
.lnk-modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); }
.lnk-x { background: none; border: 0; color: var(--muted); font-size: 1.5rem;
  line-height: 1; cursor: pointer; padding: 0 4px; }
.lnk-x:hover { color: var(--text); }
.lnk-modal-body { padding: 14px 16px 18px; max-height: 62vh; overflow-y: auto; }
.lnk-group { margin-bottom: 12px; }
.lnk-group b { display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.lnk-group span { font-size: .85rem; line-height: 1.6; word-break: break-word; }
.lnk-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: .82rem; color: var(--muted); }
.lnk-note code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }

/* ---- author byline on a post ------------------------------------------- */
.by-author { display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text); }
.by-author:hover { text-decoration: none; }
.by-author:hover .by-name { color: var(--accent); }
.by-av { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  background: hsl(var(--pf-hue) 32% 30%); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; }
.by-name { font-weight: 600; color: var(--text); }
.by-at { color: var(--muted); font-size: .85rem; }

/* ---- author block at the top of a post --------------------------------- */
/* Name, handle, date, bio and the writer's links in ONE place. There used to be
   a second copy at the foot of the post, which just read as the byline repeating
   itself. */
.by { display: flex; align-items: center; gap: 11px; }
.by-av { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  background: hsl(var(--pf-hue) 32% 30%); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700; }
.by-av:hover { text-decoration: none; color: #fff; }
.by-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: .9rem; color: var(--muted); }
.by-name { font-weight: 700; font-size: .98rem; color: var(--text); text-decoration: none; }
.by-name:hover { color: var(--accent); text-decoration: none; }
.by-at { color: var(--muted); }

/* ---- "About the author" card at the foot of a post --------------------- */
.au { margin-top: 34px; border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; background: var(--panel); }
.au-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 12px; }
.au-row { display: flex; align-items: flex-start; gap: 13px; }
.au-av { width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0;
  background: hsl(var(--pf-hue) 32% 30%); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700; }
.au-av:hover { text-decoration: none; color: #fff; }
.au-main { flex: 1; min-width: 0; }
.au-name { font-weight: 700; color: var(--text); text-decoration: none; }
.au-name:hover { color: var(--accent); text-decoration: none; }
.au-at { color: var(--muted); font-size: .85rem; margin-left: 7px; }
.au-bio { margin: 6px 0 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.au-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; font-size: .86rem; }
.au-links a { color: var(--accent); text-decoration: none; }
.au-links a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .au-row { flex-wrap: wrap; }
  .au-row > .pf-btn { width: 100%; text-align: center; }
}

/* ---- comments ----------------------------------------------------------- */
.cm { margin-top: 34px; }
.cm-h { font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding-bottom: 10px;
  border-bottom: 1px solid var(--border); margin: 0 0 4px; }
.cm-item { display: flex; gap: 11px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.cm-av { width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0;
  background: hsl(var(--pf-hue) 32% 30%); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; }
.cm-main { flex: 1; min-width: 0; }
.cm-top { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--muted); }
.cm-name { font-weight: 700; color: var(--text); text-decoration: none; font-size: .9rem; }
.cm-name:hover { color: var(--accent); text-decoration: none; }
.cm-del { margin-left: auto; }
.cm-del button { background: none; border: 0; color: var(--muted); font-size: .78rem;
  cursor: pointer; padding: 0; font-family: inherit; }
.cm-del button:hover { color: var(--danger); }
.cm-body { margin-top: 5px; font-size: .94rem; line-height: 1.6; }
.cm-body p { margin: 0 0 8px; }
.cm-body p:last-child { margin-bottom: 0; }
.cm-body a { color: var(--accent); }
.cm-empty { padding: 18px 0; color: var(--muted); font-size: .92rem; }
.cm-empty a { color: var(--accent); }
.cm-form { margin-top: 18px; }
.cm-form textarea { width: 100%; box-sizing: border-box; background: var(--panel);
  color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: .95rem; font-family: inherit; line-height: 1.55;
  resize: vertical; }
.cm-form textarea:focus { outline: none; border-color: var(--accent); }
.cm-form .btn { margin-top: 10px; background: var(--accent); color: #fff; border: 0;
  border-radius: 8px; padding: 9px 20px; font-size: .92rem; font-weight: 600; cursor: pointer; }
.cm-form .btn:hover { background: var(--accent-d); }

/* ---- member search ------------------------------------------------------ */
.ms-form { display: flex; gap: 8px; margin-bottom: 8px; }
.ms-form input { flex: 1; min-width: 0; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-size: 1rem; font-family: inherit; }
.ms-form input:focus { outline: none; border-color: var(--accent); }
.ms-form .btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 0 20px; font-size: .93rem; font-weight: 600; cursor: pointer; }
.ms-form .btn:hover { background: var(--accent-d); }
.ms-empty { padding: 22px 0; color: var(--muted); font-size: .93rem; }
.ms-list { margin-top: 10px; }
.ms-row { display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.ms-row:hover { text-decoration: none; }
.ms-row:hover .ms-name { color: var(--accent); }
.ms-av { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: hsl(var(--pf-hue) 32% 30%); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; }
.ms-main { flex: 1; min-width: 0; display: block; }
.ms-name { font-weight: 700; font-size: .96rem; }
.ms-at { color: var(--muted); font-size: .85rem; margin-left: 7px; }
.ms-bio { display: block; color: var(--muted); font-size: .86rem; line-height: 1.5;
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-count { color: var(--muted); font-size: .82rem; flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .ms-bio { white-space: normal; } }

/* ---- notifications ------------------------------------------------------ */
.nt-row { display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--border); font-size: .93rem; }
.nt-row.is-new { box-shadow: inset 3px 0 0 0 var(--accent); padding-left: 11px; }
.nt-av { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: hsl(var(--pf-hue) 32% 30%); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; }
.nt-main { flex: 1; min-width: 0; }
.nt-main a { color: var(--text); font-weight: 600; text-decoration: none; }
.nt-main a:hover { color: var(--accent); }
.nt-when { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.nav-badge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px;
  border-radius: 999px; background: var(--danger, #e0576a); color: #fff;
  font-size: .68rem; font-weight: 800; text-align: center; line-height: 17px; }
.pf-stat { color: var(--muted); text-decoration: none; }
.pf-stat:hover { color: var(--accent); text-decoration: none; }
.pf-stat:hover b { color: var(--accent); }

/* ---- people list rows (followers / following) --------------------------- */
/* .ms-row is shared with member search, where the whole row is one anchor.
   Here it holds a link plus a form, so the link is the inner element. */
.ms-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  text-decoration: none; color: var(--text); }
.ms-link:hover { text-decoration: none; }
.ms-link:hover .ms-name { color: var(--accent); }
.ms-act { flex-shrink: 0; margin-left: 14px; }
/* Unfollow reads as the "already done" state until hover, where it turns to the
   destructive colour -- the same pattern as the Following button on a profile. */
.ms-act .pf-btn-on { border-color: var(--accent); color: var(--accent); }
.ms-act .pf-btn-on:hover { border-color: var(--danger); color: var(--danger); }
@media (max-width: 600px) {
  .ms-row { flex-wrap: wrap; }
  .ms-act { margin-left: 0; margin-top: 8px; width: 100%; }
  .ms-act .pf-btn { width: 100%; }
}

/* ---- unfollow confirmation --------------------------------------------- */
.cf-modal { max-width: 420px; }
.cf-text { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; }
.cf-text b { color: var(--text); }
.cf-acts { display: flex; gap: 8px; justify-content: flex-end; }
.cf-go { border-color: var(--danger); color: var(--danger); }
.cf-go:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* empty state sits the sentence and the button on one line */
.pf-empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- the Post button ---------------------------------------------------- */
/* A large pill in the site's own accent, with a compose icon. Deliberately
   generic: a rounded button, the word "Post", and a pencil are conventions
   nobody owns. What would be a problem is borrowed identity -- another
   company's logo, wordmark, or exact brand colour -- so none of that is here.
   --accent is this site's existing blue, not one copied from anywhere. */
.pf-post-btn { display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px; border-radius: 999px; border: 0;
  background: var(--accent); color: #fff;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; font-family: inherit;
  white-space: nowrap; line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: background .12s ease; }
.pf-post-btn:hover { background: var(--accent-d); color: #fff; text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.pf-post-btn:active { transform: translateY(1px); }
.pf-post-btn svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 600px) {
  .pf-post-btn { padding: 10px 20px; font-size: .95rem; }
}

/* ---- author controls on a post ------------------------------------------ */
.pd-own { display: flex; gap: 8px; margin-top: 26px; }
.cf-danger { border-color: var(--danger); color: var(--danger); }
.cf-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.cm-del { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; }
.cm-lnk { background: none; border: 0; padding: 0; font: inherit; font-size: .78rem;
  color: var(--muted); cursor: pointer; }
.cm-lnk:hover { color: var(--text); }
.cm-danger:hover { color: var(--danger); }
.cm-ed { color: var(--muted); font-size: .76rem; font-style: italic; }
.cm-editform { margin-top: 7px; }
.cm-editform textarea { width: 100%; box-sizing: border-box; background: var(--panel);
  color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; font-size: .93rem; font-family: inherit; line-height: 1.55; }
.cm-editform textarea:focus { outline: none; border-color: var(--accent); }
.cm-editacts { display: flex; gap: 8px; margin-top: 8px; }
.cm-editacts .btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 7px 16px; font-size: .88rem; font-weight: 600; cursor: pointer; }

/* ---- the post editor ---------------------------------------------------- */
.ed-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 22px 0 10px; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel); }
.ed-bar-lbl { font-size: .85rem; font-weight: 600; color: var(--muted); }
.ed-bar input, .ed-bar select { background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px;
  font-size: .88rem; font-family: inherit; }
/* the global .pform input[type=text] rule is 100% wide and two selectors
   deep, so match it rather than relying on order */
.ed .ed-bar input[type=text] { width: 96px; text-transform: uppercase; flex: none; }
.ed-bar input:focus, .ed-bar select:focus { outline: none; border-color: var(--accent); }
.ed-count { margin-left: auto; font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.ed-count.over { color: var(--danger); font-weight: 700; }

.ed-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ed-pane { display: flex; flex-direction: column; min-width: 0; }
.ed-pane-h { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.ed .ed-split textarea { min-height: 460px; margin: 0; }
.ed-prev { min-height: 460px; max-height: 70vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  padding: 18px 20px; font-size: 1.02rem; line-height: 1.72; }
.ed-prev > *:first-child { margin-top: 0; }
.ed-prev img { max-width: 100%; height: auto; border-radius: 8px; display: block;
  margin: 16px 0; }
.ed-hint { color: var(--muted); font-style: italic; }
@media (max-width: 800px) {
  .ed-split { grid-template-columns: 1fr; }
  .ed .ed-split textarea, .ed-prev { min-height: 260px; }
}

/* ==========================================================================
   The post format: ticker, direction, entry.

   Three shapes, all built from the same .te-sym/.te-dir/.te-px parts so a call
   looks the same wherever it appears:
     .te-row   the three fields on the compose form
     .te-call  the call at the top of a post page
     .te-card  one call in a list (feed, profile)
   ========================================================================== */

:root {
  --te-long:  var(--green);
  --te-short: var(--danger);
}

/* --- compose ------------------------------------------------------------ */
.te-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 2px;
}
.te-f { display: flex; flex-direction: column; }
.te-f label { margin: 0 0 6px; }
.te-f-sym   { flex: 0 1 190px; }
.te-f-entry { flex: 0 1 190px; }
.te-f-dir   { flex: 0 0 auto; }
.te-row input[type=text] {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 11px 12px; font-size: 1.05rem; font-weight: 600;
  letter-spacing: .02em;
}
.te-f-sym input   { text-transform: uppercase; }
.te-f-entry input { font-variant-numeric: tabular-nums; }
.te-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 155, 224, .18);
}

/* Long/short as a two-button segment: a dropdown hides which one is selected,
   and this is the field a reader checks first. */
.te-seg { display: flex; }
.te-seg input { position: absolute; opacity: 0; pointer-events: none; }
.te-seg label {
  margin: 0; cursor: pointer; user-select: none;
  padding: 11px 20px; font-size: 1.05rem; font-weight: 600;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--border);
}
.te-seg label.te-long  { border-radius: 8px 0 0 8px; }
.te-seg label.te-short { border-radius: 0 8px 8px 0; border-left: 0; }
.te-seg input:checked + label.te-long {
  background: rgba(53, 194, 106, .16); color: var(--te-long);
  border-color: var(--te-long);
}
.te-seg input:checked + label.te-short {
  background: rgba(224, 87, 106, .16); color: var(--te-short);
  border-color: var(--te-short);
}
.te-seg input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(31, 155, 224, .35);
}
.te-note  { margin: 8px 0 20px; font-size: .84rem; color: var(--muted); }
.ed-final { margin: 12px 0 0; font-size: .84rem; color: var(--muted); max-width: 52ch; }

/* --- the call, on a post page ------------------------------------------- */
.te-call {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 4px; line-height: 1.1;
}
.te-call .te-sym {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--text);
}
.te-call a.te-sym:hover { color: var(--accent); }
.te-call .te-dir  { font-size: 1.15rem; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .06em; }
.te-call .te-at   { color: var(--muted); font-size: 1.15rem; }
.te-call .te-px   { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
                    color: var(--text); }
.te-long  .te-dir { color: var(--te-long); }
.te-short .te-dir { color: var(--te-short); }

/* --- one call in a list ------------------------------------------------- */
.te-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px; padding: 13px 16px; margin: 0 0 10px;
  transition: border-color .12s, background .12s;
}
.te-card:hover  { background: var(--panel-3); border-color: var(--accent);
                  text-decoration: none; }
.te-card.te-long  { border-left-color: var(--te-long); }
.te-card.te-short { border-left-color: var(--te-short); }
.te-card.te-long:hover  { border-color: var(--te-long); }
.te-card.te-short:hover { border-color: var(--te-short); }

/* The fixed head. Identical on every row, which is what makes a long list
   scannable instead of readable. */
.te-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.te-head .te-sym { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.te-head .te-dir { font-size: .78rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .06em; }
.te-head .te-at  { color: var(--muted); font-size: .9rem; }
.te-head .te-px  { font-size: 1.15rem; font-weight: 700; color: var(--text);
                   font-variant-numeric: tabular-nums; }
.te-by {
  display: block; margin-top: 3px; font-size: .82rem; color: var(--muted);
}
.te-by .te-who { color: var(--text); }
.te-by .dot    { margin: 0 5px; }
/* Whatever they wrote, secondary to the call and clamped to two lines so one
   long post cannot push the next call off the screen. */
/* ONE line, not two. Every card is then the same height, which is the whole
   point of a fixed head -- and the congress trackers carry a long, repetitive
   provenance note that pushed every one of their cards to two lines and made
   the feed a third taller for text nobody reads until they open the post. */
.te-ex {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 6px; font-size: .9rem; color: var(--muted); line-height: 1.45;
}

.pf-del b { color: var(--text); }

@media (max-width: 560px) {
  .te-f-sym, .te-f-entry { flex: 1 1 100%; }
  .te-f-dir { flex: 1 1 100%; }
  .te-seg { width: 100%; }
  .te-seg label { flex: 1; text-align: center; }
  .te-call .te-sym { font-size: 1.7rem; }
  .te-call .te-px  { font-size: 1.4rem; }
}

/* Joined, on the name line. baseline so the date sits on the name's baseline
   rather than floating at the cap height of a much larger font. */
.pf-nameline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pf-nameline .pf-name { margin: 0; }
.pf-joined { display: inline-flex; align-items: center; gap: 5px;
  font-size: .82rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
.pf-joined svg { width: 14px; height: 14px; opacity: .8; flex: none; }

/* The count that matters reads as the primary one. */
.pf-calls b { color: var(--text); }

/* The timestamp, on the call line. Quiet and last: it is the one part that is
   not the claim, but it has to be visible beside it rather than filed under a
   tooltip -- a call is a statement about a moment. */
.te-when { color: var(--muted); font-weight: 400; white-space: nowrap; }
.te-call .te-when { font-size: .8rem; margin-left: 2px; }
.te-head .te-when { font-size: .78rem; margin-left: auto; padding-left: 10px; }
@media (max-width: 560px) {
  .te-head .te-when { margin-left: 0; padding-left: 0; flex-basis: 100%; }
}

/* Review queue: the links that held a post back. Deliberately NOT anchors. */
.q-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.q-link { font-size: .78rem; padding: 3px 8px; border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); }
.q-link b { font-family: inherit; text-transform: uppercase; letter-spacing: .04em;
  font-size: .68rem; margin-right: 5px; opacity: .9; }
.q-link.q-allowed  { border-color: rgba(53,194,106,.5);  }
.q-link.q-allowed b  { color: var(--green); }
.q-link.q-unlisted { border-color: rgba(224,180,80,.55); }
.q-link.q-unlisted b { color: #e0b450; }
.q-link.q-blocked  { border-color: rgba(224,87,106,.6); }
.q-link.q-blocked b  { color: var(--danger); }

/* ---- feed control bar: tabs left, search right, one row ------------------
   One row rather than a stacked search-then-tabs, which cost ~106px of chrome
   above the first post. The rule that the tabs sit on belongs to the BAR now,
   so the search shares the same baseline instead of floating above its own. */
.fd-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin: 0 0 20px; border-bottom: 1px solid var(--border);
}

/* ---- tabs ---- */
.fd-tabs { display: flex; gap: 2px; margin: 0; border-bottom: 0; }
.fd-tab {
  display: inline-flex; align-items: center;
  padding: 13px 20px; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent; color: var(--muted);
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.fd-tab:hover { color: var(--text); background: var(--panel-2);
  border-bottom-color: var(--border); text-decoration: none; }
.fd-tab.on { color: var(--text); font-weight: 700;
  border-bottom-color: var(--accent); background: transparent; }
.fd-tab.on:hover { background: var(--panel-2); border-bottom-color: var(--accent); }


/* ---- search ----
   A utility, not a hero. 36px tall, a modest radius, and NO submit button:
   Enter submits, which is what anyone typing in a search box already does. The
   previous version -- 54px, a full-width pill, a solid accent button -- read as
   an email-capture form sitting on top of the feed. */
/* Search and Post travel together on the right of the bar. */
.fd-right { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }
.fd-post { padding: 8px 18px; font-size: .92rem; flex: none; }
.fd-post svg { width: 15px; height: 15px; }

.fd-search {
  display: flex; align-items: center;
  flex: 0 1 290px; min-width: 170px; margin: 0;
  height: 36px; padding: 0 4px 0 10px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 9px;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.fd-search:focus-within { border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 155, 224, .15); }
/* Sized in the HTML too (width="16" height="16"). An inline <svg> carrying only
   a viewBox falls back to 300x150 when no CSS reaches it -- which is what a
   stale posts.css produced: a magnifying glass the size of the page. */
.fd-s-ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.fd-search input[type=text] {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  padding: 0 8px; height: 100%; font-size: .92rem; font-family: inherit;
}
.fd-search input[type=text]:focus { outline: none; }
.fd-search input::placeholder { color: var(--muted); }
.fd-s-x { flex: none; color: var(--muted); font-size: 1.25rem; line-height: 1;
  padding: 0 7px; text-decoration: none; }
.fd-s-x:hover { color: var(--text); text-decoration: none; }
/* Present for keyboard and screen readers; Enter is how it is actually used. */
.fd-s-go { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 680px) {
  .fd-bar { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .fd-right { margin: 0; }
  .fd-search { flex: 1 1 auto; margin: 0; }
  .fd-tabs { width: 100%; }
  .fd-tab { flex: 1; justify-content: center; padding: 12px 8px; font-size: .92rem; }
}

/* Feed card with two destinations.
   The card is a div; .te-main stretches an invisible ::after over all of it so
   a click anywhere opens the post. .te-by is lifted above that overlay, so the
   name and handle reach the profile instead. Without the z-index the overlay
   would swallow them and every click would go to the post. */
/* `.pform textarea` sets min-height:380px for the full-page editor, and the
   modal's form carries .pform too -- so a plain `.cmp-body` rule lost on
   specificity and the dialog opened with a ~750px box. Qualified by element so
   it wins, and capped so the modal never outgrows the screen. */
.cmp-form textarea.cmp-body { min-height: 130px; max-height: 42vh; }

.te-card { position: relative; }
.te-main { display: block; color: inherit; text-decoration: none; }
.te-main::after { content: ''; position: absolute; inset: 0; }
.te-main:hover { text-decoration: none; }
/* ---- the author chip on a card -----------------------------------------
   inline-block on the wrapper, NOT flex: a full-width row would sit over the
   stretched post link for its whole width, so clicking the empty space beside
   the handle would do nothing instead of opening the post. */
.te-card .te-by { position: relative; z-index: 2; display: inline-block;
  margin: 0 0 10px; }

/* The chip itself: a pill that lights up on hover, so it is visibly a thing you
   can click before you touch it -- the previous version only announced itself
   once the cursor was already on the word. Padded and pulled back by the same
   amount, so it lines up with the ticker below while still having a hit area
   bigger than the text. */
.te-author { display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; margin: -5px 0 0 -5px;
  border-radius: 999px; text-decoration: none; color: inherit;
  transition: background .14s ease; }
/* An accent TINT, not a grey. --panel-3 was six shades off the card and read
   as nothing -- and the card's own hover turns the card --panel-3 too, so the
   chip disappeared at the exact moment the cursor was on it. A tint of the
   accent cannot collide with any card state and says "link" on its own. */
.te-author:hover { background: rgba(31, 155, 224, .16);
  box-shadow: inset 0 0 0 1px rgba(31, 155, 224, .30);
  text-decoration: none; }
.te-author:hover .te-at-h { color: var(--text); }
.te-author:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.te-author-off { cursor: default; }

/* Round, because it stands for a person. The rest of the site uses a rounded
   square at larger sizes; at 30px in a list a circle reads as a face. */
.te-av { width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: hsl(var(--pf-hue) 34% 32%);
  box-shadow: inset 0 0 0 1px hsl(var(--pf-hue) 40% 46% / .55);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }

.te-card .te-who { color: var(--text); font-weight: 700; font-size: .95rem;
  letter-spacing: -.01em; }
.te-at-h { color: var(--muted); font-size: .86rem; }
.te-author:hover .te-who { color: var(--accent); }

/* Profile tabs: the feed's bar, with room above it. The border lives on the
   bar, exactly as on the feed, so the tabs and the search share a baseline. */
.pf-bar { margin-top: 26px; }
.pf-tabs { margin: 0; border-bottom: 0; }

/* An uploaded-style avatar reuses the initials block's box exactly, so a
   profile with a picture and one without line up to the pixel. object-fit so a
   non-square source is cropped, never squashed. */
.te-av-img, .pf-av-img { object-fit: cover; padding: 0; }
.by-av-img { padding: 0; overflow: hidden; background: none; box-shadow: none; }
.by-av-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; }

/* ---- which kind of post -------------------------------------------------
   Two cards, not a radio pair. This is the first decision on the compose form
   and it was shipped with no styling at all -- two bare radio buttons, which
   is exactly as clear as it sounds. Each option now states what it is, and the
   selected one is unmistakable: accent border, tinted fill, full-strength
   title against the other's muted one. */
.pm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 2px 0 18px; }
/* Off-screen rather than display:none -- a hidden input cannot take focus, and
   this control has to stay reachable by keyboard. */
.pm-seg input { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; }
.pm-seg label {
  display: flex; flex-direction: column; gap: 3px; margin: 0;
  padding: 12px 15px; cursor: pointer; user-select: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
  transition: border-color .13s ease, background .13s ease;
}
.pm-seg label:hover { border-color: var(--muted); }
.pm-t { font-size: .97rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--muted); line-height: 1.25; transition: color .13s ease; }
.pm-d { font-size: .79rem; color: var(--muted); opacity: .75; line-height: 1.3; }
.pm-seg input:checked + label {
  border-color: var(--accent); background: rgba(31, 155, 224, .13);
}
.pm-seg input:checked + label .pm-t { color: var(--text); }
.pm-seg input:checked + label .pm-d { opacity: .95; }
.pm-seg input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(31, 155, 224, .32); border-color: var(--accent); }

@media (max-width: 480px) {
  .pm-seg { grid-template-columns: 1fr; gap: 8px; }
  .pm-seg label { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* The counts strip, above the identity. Quieter than the name -- it is context
   for the person, not the headline -- but the numbers themselves are full
   strength because they are the point. */
.pf-counts { display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 14px; padding: 0 0 13px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-c b { color: var(--text); font-weight: 700; margin-right: 3px; }
.pf-del { cursor: help; }

/* ---- recent searches ----------------------------------------------------
   Anchored to the search box, so .fd-search is the positioning context. */
.fd-search { position: relative; }
.sr-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 5px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.sr-panel[hidden] { display: none; }
.sr-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 6px 9px 5px; }
.sr-i { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 7px; background: none;
  color: var(--text); font: inherit; font-size: .9rem; text-align: left;
  cursor: pointer; }
.sr-i:hover { background: var(--panel-3); }
.sr-i svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.sr-clear { display: block; width: 100%; margin-top: 3px;
  padding: 8px 9px; border: 0; border-top: 1px solid var(--border);
  background: none; color: var(--muted); font: inherit; font-size: .8rem;
  text-align: left; cursor: pointer; }
.sr-clear:hover { color: var(--danger); }
/* Author-card avatar when the member has a picture. */
.au-av-img { padding: 0; overflow: hidden; background: none; }
.au-av-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; }

/* ==========================================================================
   The post page.

   Header row (avatar + stacked name/handle + the owner's control), then the
   content, then the timestamp beneath it, then a rule and the replies. The
   arrangement is the ordinary one for a page showing a single item; the
   palette, the type and the call block are this site's own.
   ========================================================================== */
.pd { padding: 0; }
.pd-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.pd-av {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: hsl(var(--pf-hue) 34% 32%);
  box-shadow: inset 0 0 0 1px hsl(var(--pf-hue) 40% 46% / .55);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: #fff; text-decoration: none;
}
.pd-av:hover { text-decoration: none; color: #fff; filter: brightness(1.12); }
.pd-av-img { padding: 0; overflow: hidden; background: none; box-shadow: none; }
.pd-av-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; }

/* Name over handle, not beside it: two short lines read faster than one long
   one, and it gives the avatar something the height of itself to sit against. */
.pd-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.pd-name { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); text-decoration: none; }
.pd-name:hover { color: var(--accent); text-decoration: none; }
.pd-at { font-size: .88rem; color: var(--muted); text-decoration: none; }
.pd-at:hover { color: var(--accent); text-decoration: none; }
.pd-act { flex: none; margin: 0; }

/* The call, as the thing the page is about. */
.pd-call { margin: 0 0 14px; }
.pd-call .te-sym { font-size: 2.3rem; }
.pd-call .te-px  { font-size: 1.9rem; }

.pd-body { font-size: 1.06rem; line-height: 1.65; margin: 0; }
.pd-body:empty { display: none; }

/* Under the content, quiet, on its own line, with a rule closing the post off
   from the replies. */
.pd-meta { margin: 18px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--border);
  font-size: .86rem; color: var(--muted); }
.pd-meta .dot { margin: 0 7px; }

@media (max-width: 560px) {
  .pd-av { width: 42px; height: 42px; font-size: .95rem; }
  .pd-call .te-sym { font-size: 1.8rem; }
  .pd-call .te-px  { font-size: 1.5rem; }
  .pd-body { font-size: 1rem; }
}
/* Any avatar rendered as a picture rather than initials keeps the box its
   initials version had -- see the avatar() macro in _bits.html. */
.av-img { object-fit: cover; padding: 0; background: none; box-shadow: none; }

/* Platform handle fields on the edit form. A fixed prefix in front of the box
   so it is obvious the site builds the address and you supply only the name. */
.soc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 4px 0 20px; }
.soc-row { display: flex; align-items: center; gap: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; transition: border-color .13s ease; }
.soc-row:focus-within { border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,155,224,.16); }
.soc-name { flex: none; padding: 10px 11px; font-size: .84rem; font-weight: 700;
  color: var(--muted); background: var(--panel-2); align-self: stretch;
  display: flex; align-items: center; min-width: 84px; }
.soc-at { flex: none; padding-left: 10px; color: var(--muted); }
/* Qualified past `.pform input[type=text]`, which scores (0,2,1) and beat a
   plain `.soc-row input` at (0,1,1) -- so the input kept its own border, fill
   and radius INSIDE this row's, and on focus drew a second blue line inside
   the row's blue ring. The row is the control; the input is just the text. */
.pform .soc-row input[type=text] {
  flex: 1; min-width: 0; padding: 10px 10px 10px 2px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--text); font: inherit; font-size: .93rem;
}
.pform .soc-row input[type=text]:focus {
  outline: none; border: 0; box-shadow: none; background: transparent;
}
@media (max-width: 560px) { .soc-grid { grid-template-columns: 1fr; } }

/* Members matching a feed search, above the posts. */
.fp { margin: 0 0 20px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); overflow: hidden; }
.fp-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 10px 14px 6px; }
.fp-row { display: flex; align-items: center; gap: 11px; padding: 9px 14px;
  text-decoration: none; color: inherit; }
.fp-row:hover { background: var(--panel-3); text-decoration: none; }
.fp-av { width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: hsl(var(--pf-hue) 34% 32%);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; color: #fff; }
.fp-who { display: flex; flex-direction: column; line-height: 1.3; flex: none; }
.fp-name { font-weight: 700; font-size: .94rem; color: var(--text); }
.fp-at { font-size: .84rem; color: var(--muted); }
.fp-bio { flex: 1; min-width: 0; font-size: .85rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Platform glyphs. The icon set lives in app/__init__.py as inline paths --
   no font, no sprite, nothing to 404 on a profile. */
.soc-ico { width: 15px; height: 15px; flex: none; opacity: .85; }
.soc-name { gap: 7px; }
.au-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.au-links a { display: inline-flex; align-items: center; }

/* Each platform in its own colour. The paths are fill="currentColor", so this
   is the one place that decides it -- and it overrides the muted grey these
   inherited from the links row, which is why they read as flat and lifeless.
   Instagram gets a single magenta rather than its gradient: a gradient through
   a currentColor path needs a mask, and at 15px nobody can tell. */
.br-twitter   { color: #e7e9ea; }          /* X on a dark ground */
.br-youtube   { color: #ff0033; }
.br-instagram { color: #e1306c; }
.br-tiktok    { color: #25f4ee; }
/* The colour is the point, so do not let the row's hover repaint them. */
.pf-m .br-twitter, .pf-m .br-youtube, .pf-m .br-instagram, .pf-m .br-tiktok,
.au-links a:hover .au-ico { opacity: 1; }
.soc-ico { opacity: 1; }

/* Remove-row bin, on the link boxes and the handle boxes. */
.row-x { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; align-self: stretch; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--muted); cursor: pointer; }
.row-x:hover { color: var(--danger); border-color: var(--danger);
  background: rgba(224, 87, 106, .10); }
.row-x[hidden] { display: none; }
.row-x svg { width: 16px; height: 16px; }
/* Inside the handle row it sits within the row's own border, so it drops its
   frame and just becomes the trailing icon. */
.row-x-soc { width: 34px; border: 0; border-radius: 0; background: transparent;
  align-self: stretch; }
.row-x-soc:hover { background: rgba(224, 87, 106, .12); }
@media (max-width: 600px) {
  /* .lnk-row goes column at this width, so a stretched bin would span it. */
  .lnk-row .row-x { width: 100%; height: 34px; align-self: auto; }
}

/* Edit profile: Save at the top of the form as well as the foot. */
.ep-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; }
.ep-h-text { min-width: 0; }
.ep-h-act { display: flex; align-items: center; gap: 10px; flex: none; }
.pform .btn.ep-save { margin-top: 0; }
@media (max-width: 560px) {
  .ep-head { flex-direction: column; align-items: stretch; }
  .ep-h-act { justify-content: flex-end; }
}

/* "This ticker cannot be posted yet", under the ticker box while typing. */
.tk-note { margin: 7px 0 0; padding: 8px 11px; border-radius: 8px;
  font-size: .82rem; line-height: 1.45;
  background: rgba(224, 180, 80, .12); color: #e0b450;
  border: 1px solid rgba(224, 180, 80, .35); }
.tk-note[hidden] { display: none; }
.te-f-sym { position: relative; }

/* Character counter under the compose box. */
.cmp-form .ed-count, .ed .ed-count { display: block; margin: 6px 2px 0;
  font-size: .78rem; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums; }
.ed-count.over { color: var(--danger); font-weight: 700; }

/* Suggestions in the search panel: members, then tickers. */
.sr-m { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 7px; text-decoration: none; color: inherit; }
.sr-m:hover { background: var(--panel-3); text-decoration: none; }
.sr-av { width: 26px; height: 26px; border-radius: 50%; flex: none;
  object-fit: cover; }
.sr-av-i { background: hsl(var(--pf-hue) 34% 32%); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .64rem; font-weight: 700; }
.sr-mn { font-size: .9rem; font-weight: 600; color: var(--text); }
.sr-mh { font-size: .8rem; color: var(--muted); }
.sr-t { justify-content: flex-start; gap: 10px; }
.sr-sym { font-weight: 700; font-size: .9rem; color: var(--text); }
.sr-n { font-size: .78rem; color: var(--muted); }

/* Company mark beside a ticker. The .sy-logo shell and its fallback tile are
   styled in base.html, so only the alignment belongs here. */
.te-head .sy-logo { flex: none; margin-right: 2px; vertical-align: -4px; }
.te-call .sy-logo { flex: none; margin-right: 4px; align-self: center; }

/* ---- expand a post without leaving the feed ---------------------------- */
/* Above the card's stretched link overlay, or the click opens the post. */
.te-x { position: relative; z-index: 2; }
.te-more { display: inline-block; margin-top: 6px; padding: 3px 0;
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 700; color: var(--accent); }
.te-more:hover { text-decoration: underline; }
.te-full { margin-top: 8px; font-size: .92rem; line-height: 1.6;
  color: var(--text); }
.te-full[hidden] { display: none; }
.te-full > :first-child { margin-top: 0; }
.te-full > :last-child { margin-bottom: 0; }

/* Back arrow at the top of a post or profile. */
.pd-back { display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 14px; padding: 6px 12px 6px 8px; border-radius: 999px;
  color: var(--muted); font-size: .88rem; font-weight: 600;
  text-decoration: none; transition: background .13s, color .13s; }
.pd-back:hover { background: var(--panel-2); color: var(--text);
  text-decoration: none; }
.pd-back svg { width: 17px; height: 17px; }

/* View count. Quiet -- it is context, not the post. */
.te-vw { display: inline-flex; align-items: center; gap: 5px;
  font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.te-card .te-vw { float: right; margin-left: 10px; }
.vw-ico { width: 14px; height: 14px; opacity: .85; }
.pd-meta .te-vw { font-size: .86rem; }

/* ---- like ---------------------------------------------------------------
   Above the card's stretched link overlay, same as the other controls. */
.te-acts { position: relative; z-index: 2; float: right; margin-left: 12px; }
.lk { display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums; transition: color .13s ease; }
.lk svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; transition: fill .13s ease, transform .13s ease; }
.lk:hover { color: var(--danger); }
.lk.on { color: var(--danger); }
.lk.on svg { fill: var(--danger); stroke: var(--danger); transform: scale(1.06); }
.lk:disabled { cursor: default; }
.pd-like .lk { font-size: .86rem; }
.pd-like { position: relative; z-index: 2; }

/* Feed pager. */
.fd-page { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 22px 0 8px; }
.fd-page-n { font-size: .84rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }