/* THE RECOMMEND TAB (Lee, 22 Oct 2026: "based on intake, PC and notes it can suggest what to recommend to clients") — what
   their symptoms and today's work point to, and the suggestions from his study library (public/recommend-panel.js). It
   draws inside the right-hand panel's list, which keeps one height and scrolls: the head lines here keep one height each
   (their chips scroll sideways, a long line is cut short with its whole in the title), so the PC being typed changes the
   words, never the space. Shared rules only: no element is built with a custom property of its own (WebKit keeps the
   memory). */

.ni-rec { font: 500 12.5px/1.45 var(--font); color: var(--text); }
/* the right-hand panel's list is a flex column that scrolls: each piece keeps its own height (a line with overflow hidden would
   otherwise shrink to nothing), and the panel's gap between its pieces is the tab's own */
.ni-rec > * { flex: none; }
.ni-prev-list.ni-rec { gap: 0; }

/* refer first: a red flag leads, and the list below it stands back (faded, still there to read and pick) */
.ni-rec-refer { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #f0b4ae; border-radius: 8px; background: #fdf0ef; color: #7a1d14; font-size: 12px; }
.ni-rec-refer p { margin: 0; }
.ni-rec-refer-h { font: 800 10px/16px var(--font); letter-spacing: .07em; text-transform: uppercase; }
.ni-rec-refer-list { margin: 3px 0 4px; padding: 0 0 0 16px; }
.ni-rec-refer-list li { margin: 0 0 2px; }
.ni-rec-refer-said { color: #8f3a31; }
.ni-rec-refer-s { color: #8f3a31; font-size: 11.5px; }
.ni-rec-list.is-held { opacity: .55; }
.ni-rec-list.is-held:hover, .ni-rec-list.is-held:focus-within { opacity: 1; }

/* their topics: one line of chips, scrolling sideways; a chip filters the list to what serves it */
.ni-rec-head { display: flex; align-items: center; gap: 6px; height: 28px; margin: 0 0 4px; }
.ni-rec-k { flex: none; font: 800 9.5px/28px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); }
.ni-rec-chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: thin; height: 28px; align-items: center; }
.ni-rec-chip { flex: none; height: 22px; box-sizing: border-box; padding: 0 9px; border: 1px solid var(--anat-pale); border-radius: 999px; background: #fff;
  color: var(--anat-dk); font: 700 11px/20px var(--font); cursor: pointer; }
.ni-rec-chip:hover { border-color: var(--anat); background: var(--anat-light); }
.ni-rec-chip.is-on { background: var(--anat); border-color: var(--anat); color: #fff; }
.ni-rec-chip.is-faint { opacity: .72; }
.ni-rec-chip-src { font-weight: 500; opacity: .8; }
.ni-rec-chip:focus-visible, .ni-rec-add:focus-visible, .ni-rec-name:focus-visible, .ni-rec-more:focus-visible, .ni-rec-act:focus-visible { outline: 2px solid var(--anat); outline-offset: 1px; }

/* what their intake raised, and the picks waiting for Generate: two lines' room each, never more */
.ni-rec-check, .ni-rec-picked { display: block; margin: 0 0 4px; height: 34px; overflow: hidden; font: 500 11.5px/17px var(--font); color: var(--text-muted); }
.ni-rec-check.is-warn { color: #8a4b08; }
.ni-rec-check.is-none { color: var(--text-light); font-style: italic; }
.ni-rec-picked.is-on { color: var(--brand-text); }
.ni-rec-check b, .ni-rec-picked b { font-weight: 800; }

/* the suggestions: two lines a row — "+", the name, its kind, a clash; what it is for and how many say so */
.ni-rec-list { list-style: none; margin: 2px 0 0; padding: 0; }
.ni-rec-row { padding: 5px 0 6px; border-top: 1px solid var(--border); }
.ni-rec-top { display: flex; align-items: center; gap: 7px; min-width: 0; height: 24px; }
.ni-rec-add { flex: none; width: 24px; height: 24px; box-sizing: border-box; padding: 0; border: 1px solid var(--brand-mid); border-radius: 7px; background: #fff;
  color: var(--brand-text); font: 800 15px/21px var(--font); cursor: pointer; }
.ni-rec-add:hover { background: var(--brand-light); border-color: var(--brand); }
.ni-rec-add.is-picked { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; font-size: 13px; }
.ni-rec-add.is-in { background: var(--brand-light); border-color: var(--brand-pale); color: var(--brand-text); font-size: 13px; cursor: default; }
.ni-rec-name { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: 800 13px/24px var(--font); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ni-rec-name:hover { color: var(--anat-dk); text-decoration: underline; text-underline-offset: 2px; }
.ni-rec-row.is-open .ni-rec-name { color: var(--anat-dk); }
.ni-rec-type { flex: none; padding: 0 6px; border-radius: 5px; background: var(--bg-alt); color: var(--text-light); font: 700 10px/17px var(--font); text-transform: uppercase; letter-spacing: .04em; }
.ni-rec-warn { flex: 0 1 auto; min-width: 0; padding: 0 6px; border-radius: 5px; background: #fff4e5; color: #8a4b08; font: 700 10.5px/18px var(--font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-rec-sub { display: flex; gap: 8px; margin: 1px 0 0 31px; min-width: 0; height: 17px; font: 500 11.5px/17px var(--font); color: var(--text-muted); white-space: nowrap; }
.ni-rec-for { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ni-rec-n { flex: none; color: var(--text-light); font-variant-numeric: tabular-nums; }
.ni-rec-none { padding: 8px 0; color: var(--text-muted); border-top: 1px solid var(--border); }

/* a suggestion opened: its clashes, then the claims behind it by their topic, each with its source */
.ni-rec-card { margin: 6px 0 2px 31px; padding: 8px 10px; border: 1px solid var(--anat-pale); border-radius: 8px; background: var(--bg-soft); }
.ni-rec-said { margin: 0 0 6px; font-size: 11.5px; color: var(--text-light); }
.ni-rec-clash { margin: 0 0 7px; padding: 6px 8px; border-radius: 6px; background: #fff4e5; color: #6b3a06; font-size: 12px; }
.ni-rec-sec { margin: 0 0 6px; }
.ni-rec-sec-h { margin: 6px 0 3px; font: 800 9.5px/14px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); }
.ni-rec-claim { margin: 0 0 6px; padding: 0 0 0 8px; border-left: 2px solid var(--border-strong); }
.ni-rec-claim.is-study { border-left-color: var(--brand); }
.ni-rec-claim p { margin: 0; }
.ni-rec-claim-h { font-size: 12.5px; }
.ni-rec-claim-d { color: var(--text); }
.ni-rec-claim-m, .ni-rec-claim-l { color: var(--text-muted); }
.ni-rec-claim-l { font-style: italic; }
.ni-rec-src { font-size: 11.5px; color: var(--text-light); }
.ni-rec-ref { color: var(--anat-dk); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ni-rec-also { margin: 0; font-size: 11.5px; color: var(--text-light); }
.ni-rec-act { margin: 4px 0 0; height: 26px; padding: 0 10px; border: 1px solid var(--brand-mid); border-radius: 7px; background: #fff; color: var(--brand-text);
  font: 700 12px/24px var(--font); cursor: pointer; }
.ni-rec-act:hover { background: var(--brand-light); }
.ni-rec-act:disabled { cursor: default; opacity: .7; }

.ni-rec-more { display: block; width: 100%; height: 28px; margin: 4px 0 0; border: 1px dashed var(--border-strong); border-radius: 7px; background: #fff;
  color: var(--text-muted); font: 700 11.5px/26px var(--font); cursor: pointer; }
.ni-rec-more:hover { border-color: var(--anat); color: var(--anat-dk); }
.ni-rec-foot { margin: 8px 0 2px; font: 500 10.5px/1.4 var(--font); color: var(--text-light); }
.ni-rec-empty { padding: 10px 2px; }
.ni-rec-empty-t { margin: 0 0 4px; font-weight: 700; color: var(--text-muted); }
.ni-rec-empty-s { margin: 0; font-size: 12px; color: var(--text-light); }

/* THE SEARCH (Lee, 23 Oct 2026: "allow me to search also so i can quickly add"): its box sits in the panel's head where Visits
   and Connections keep theirs (index.html), a clear button inside it; its "Found" line stands in the topics' place, of their
   height; the row the arrows chose is marked without moving a thing (its background reaches into the list's padding) */
.ni-prev-search--rec .ni-input--sm { padding-right: 32px; }
.ni-rec-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; box-sizing: border-box; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--text-light); font: 700 16px/24px var(--font); cursor: pointer; }
.ni-rec-clear:hover { background: var(--bg-alt); color: var(--ink); }
.ni-rec-clear:focus-visible { outline: 2px solid var(--anat); outline-offset: 1px; }
.ni-rec-clear[hidden] { display: none; }
.ni-rec-found { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 11.5px/28px var(--font); color: var(--text-muted); }
.ni-rec-row.is-hi { margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 7px; background: var(--brand-light); }
.ni-rec-name.is-typed { cursor: default; }
.ni-rec-name.is-typed:hover { color: var(--text); text-decoration: none; }
.ni-rec-row.is-typed .ni-rec-type { background: var(--brand-light); color: var(--brand-text); }