/* Brand > Channel, "Channels you follow" (js/following.js), and Home's Assistant row (js/views.js assistantCard).
   Tokens only (styles.css / css/looks.css); both looks; one surface per region: rows are separated by a hairline. */

/* ---- Channels you follow ---- */
.card.following { scroll-margin-top: var(--s6); }
.fol-add { display: grid; gap: var(--s1); margin-top: var(--gap-head); max-width: 40rem; }
.fol-add-row { display: flex; gap: var(--gap-inline, var(--s2)); min-width: 0; }
.fol-add-row .input { flex: 1 1 auto; min-width: 0; }
.fol-add-row .btn { flex: none; }
.fol-add .field-note { margin: 0; min-height: 1.2em; }
.fol-add .field-note.is-error { color: var(--dk-tx-st-fail, var(--st-fail)); }
.fol-body { margin-top: var(--s3); }
.fol-list { list-style: none; margin: 0; padding: 0; }
.fol-row { display: flex; align-items: center; gap: var(--s3); padding: var(--rhythm-rows) 0; border-top: 1px solid var(--line); min-width: 0; }
.fol-row:last-child { border-bottom: 1px solid var(--line); }
.fol-pic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; background: var(--line-2); }
.fol-pic--letter { display: grid; place-items: center; font: var(--type-body-strong); color: var(--ink-strong); }
.fol-main { flex: 1 1 auto; min-width: 0; display: grid; }
.fol-name { font: var(--type-body-strong); color: var(--ink-strong); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fol-name:hover, .fol-name:focus-visible { text-decoration: underline; }
.fol-sub { font: var(--type-meta); color: var(--muted); overflow-wrap: anywhere; }
.fol-row.is-missing .fol-sub { color: var(--dk-tx-st-fail, var(--st-fail)); }
.fol-remove { flex: none; }
.fol-own, .fol-nokey { margin-top: var(--s3); font: var(--type-meta); color: var(--muted); max-width: var(--measure); }
.fol-own strong { color: var(--ink-strong); font-weight: var(--fw-strong, 600); overflow-wrap: anywhere; }
.fol-own--missing:focus { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 4px; }
@media (max-width: 680px) {
  .fol-add-row { flex-wrap: wrap; }
  .fol-add-row .btn { flex: 1 1 100%; }
}

/* ---- Brand: a section a link points at is brought into view and outlined once ---- */
.is-pointed { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 4px; }

/* ---- Home: the Assistant row ---- */
.assistant-learned { flex: 0 1 31%; display: grid; gap: 2px; align-content: center; }
.assistant-learned .as-head, .assistant-rec .as-head { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.assistant-learned .as-count { font: var(--type-meta); color: var(--muted); white-space: nowrap; }
.as-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.as-lessons li { display: flex; gap: var(--s2); align-items: baseline; font: var(--type-meta); color: var(--ink); min-width: 0; }
.as-lessons li .bullet { margin: 0; transform: translateY(-0.15em); }
.as-lessons li span { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.assistant .as-link { font: var(--type-meta); white-space: nowrap; }
.assistant .as-note { font: var(--type-meta); color: var(--muted); margin: 0; }
.assistant-rec { align-items: flex-start; }
.assistant-rec > div { flex: 1 1 auto; display: grid; gap: 2px; }
.assistant-rec .rec-icon { margin-top: 2px; }
.as-recs { list-style: none; margin: 0; padding: 0; display: grid; }
.as-rec { display: grid; gap: 2px; padding: var(--s1) 0; border-top: 1px solid var(--line); min-width: 0; }
.as-rec:first-child { border-top: 0; padding-top: 0; }
.as-rec:last-child { padding-bottom: 0; }
.assistant-learned .as-head h3 { white-space: nowrap; }
.assistant-learned .as-head .as-link { margin-left: auto; }
.as-rec-topic { font: var(--type-body-strong); color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-decoration: none; }
a.as-rec-topic:hover { text-decoration: underline; }
a.as-rec-topic:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.as-rec-line { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 2px var(--s4); min-width: 0; }
.as-rec-why { flex: 0 1 auto; font: var(--type-meta); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.as-rec-acts { flex: none; display: flex; flex-wrap: wrap; gap: 2px var(--s4); align-items: baseline; }
.as-act { font: var(--type-meta); color: var(--muted); white-space: nowrap; padding: 0; }
.as-act--go { color: var(--ink-strong); font-weight: var(--fw-strong, 600); }
.as-act:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.assistant .estate--row, .assistant .wstate--row { padding: 0; }
@media (max-width: 1279px) {
  .assistant-learned { flex: 1 1 0; }
  .as-rec-line { flex-wrap: wrap; }
}
@media (max-width: 680px) {
  .as-rec-topic, .as-rec-why { white-space: normal; }
  .assistant-learned { flex: none; }
}
/* the state blocks and notes in the band say their whole sentence (app.css clamps a recommendation headline to two lines) */
.assistant-rec p.estate-body, .assistant-rec p.as-note, .assistant-rec p.wstate-detail { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* the add box shows the shape of a handle; nothing followed yet is one quiet row in the list's place */
.fol-example { display: flex; align-items: center; gap: var(--s2); margin: var(--s1) 0 0; font: var(--type-meta); color: var(--muted); }
.fol-chip { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 var(--s2); border-radius: 999px; background: var(--pill, transparent);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: var(--type-meta); }
.fol-row--empty .fol-name { white-space: normal; }

/* Recommended next video: one text column under the heading (title, body, then the link below), no dot graphic,
   so heading, body and link share one left edge. */
.assistant-rec .estate--row, .assistant-rec .wstate--row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: 0; }
.assistant-rec .estate-art, .assistant-rec .wstate-art { display: none; }
.assistant-rec .estate-actions { grid-column: auto; justify-content: flex-start; margin-top: var(--s1); }
.assistant-rec .estate-title { max-width: none; }
.assistant-rec .estate-note { grid-column: auto; }

/* Q2 polish. The recommendation and "what Volare learned" are two sections of one card: the same padding and a divider
   between them, with no inner frame. */
.card.assistant { align-items: stretch; gap: var(--s5); }
.card.assistant > .assistant-rec, .card.assistant > .assistant-learned { padding: 0; border: 0; background: none; box-shadow: none; }
.card.assistant > .sep { align-self: stretch; width: 1px; height: auto; margin: 0; }
.card.assistant .card-empty, .card.assistant .estate { border: 0; background: none; box-shadow: none; }
@media (max-width: 1019px) {
  .card.assistant > .sep { width: auto; height: 1px; }
}