/* CertaRounds — Library screen styles (src/screens/library.js). Owned by its M3 screen agent.
   Semantic tokens only (docs/COMPONENTS.md §2); every rule is scoped under .lib* (sheets live
   outside <main>, so they carry their own lib- classes); components are laid out, never restyled. */

.lib { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.lib-head { margin-bottom: 0; }
.lib-panel { min-width: 0; }
.lib-panel-body { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; padding-top: var(--sp-1); }
.lib-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.lib-count { font-size: var(--fs-13); color: var(--text-2); }

/* ============ Toolbar: filter chips + one quiet action ============ */
.lib-toolbar { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.lib-toolbar__left { flex: 1 1 auto; min-width: 0; }
.lib-toolbar__right { flex: 0 0 auto; display: flex; gap: var(--sp-2); }
.lib-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* "New folder" closes the chip row: dashed, so it reads as an action, not a filter */
.lib-chip-add { border: 1px dashed var(--border-strong); color: var(--link); background: transparent; box-shadow: none; font-weight: var(--fw-semibold); }
.lib-chip-add:hover { background: var(--surface-hover); color: var(--link-hover); }
.lib-chip-add:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 767px) {
  .lib-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter);
  }
  .lib-chips::-webkit-scrollbar { display: none; }
  .lib-chips > .chip { flex: 0 0 auto; }
  .lib-toolbar__right { margin-left: calc(-1 * var(--sp-2)); }
}

/* ============ Folder heading ============ */
.lib-sub { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.lib-sub__text { min-width: 0; flex: 1 1 200px; }
.lib-sub__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); overflow-wrap: break-word; }
.lib-sub__meta { margin-top: 2px; font-size: var(--fs-13); color: var(--text-2); }
.lib-sub__actions { display: flex; align-items: center; gap: var(--sp-1); }
.lib-sub__actions .btn { margin-left: var(--sp-2); }

/* ============ Lists and rows ============ */
.lib-card { overflow: hidden; }
.lib-li + .lib-li { border-top: 1px solid var(--divider); }
.lib-row, .lib-row__main {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; column-gap: var(--sp-3);
  width: 100%; min-height: 64px; padding: 14px var(--sp-4);
  text-align: left; color: var(--text); background: transparent;
  transition: background var(--dur-1) var(--ease-out);
}
button.lib-row:hover, .lib-row__main:hover { background: var(--surface-hover); }
button.lib-row:active, .lib-row__main:active { background: var(--surface-pressed); }
button.lib-row:focus-visible, .lib-row__main:focus-visible { outline: none; background: var(--surface-hover); box-shadow: inset 0 0 0 2px var(--focus); }
.lib-row--gone { align-items: center; color: var(--text-2); }
.lib-row--split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 0 var(--sp-4) 0 0; column-gap: var(--sp-2); }
.lib-row--split .lib-row__main { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 767px) {
  /* phones: the row keeps one line of controls — main area, then a compact play button */
  .lib-row--split { padding-right: var(--sp-3); }
  .lib-row--split .lib-row__main { padding-right: var(--sp-2); column-gap: var(--sp-2); }
}
.lib-row__lead { display: grid; place-items: center; width: 32px; min-height: 24px; padding-top: 1px; color: var(--text-2); }
.lib-row__tile { width: 32px; height: 32px; border-radius: 10px; }
.lib-row__tile--own { background: var(--surface-sunken); color: var(--text-2); }
.lib-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lib-row__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--text-strong); overflow-wrap: break-word; }
.lib-row__title--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; }
.lib-row__text {
  font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lib-row__text--muted { color: var(--text-3); font-style: italic; }
/* a saved question's stem leads the row, in ink (it is the only unique part) */
.lib-row__text--lead { font-size: var(--fs-15); line-height: 1.45; color: var(--text); -webkit-line-clamp: 3; line-clamp: 3; }
/* two skeleton lines hold the stem's space while its chunk loads (no layout shift) */
.lib-row__text--skel { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 3px; }
.lib-row__text--skel .skeleton { height: 12px; }
.lib-row__meta {
  display: block; overflow: hidden; margin-top: 3px;
  font-size: var(--fs-12); line-height: 1.45; color: var(--text-3);
}
.lib-row__chev { align-self: center; color: var(--text-3); }
@media (min-width: 1024px) {
  .lib-row, .lib-row__main { padding: 16px var(--sp-5); }
  .lib-row--split { padding: 0 var(--sp-5) 0 0; }
  .lib-row__text { font-size: var(--fs-15); }
  .lib-row__text--lead { -webkit-line-clamp: 2; line-clamp: 2; }
  .lib-row__meta { font-size: var(--fs-13); }
}

.lib-dot { color: var(--text-3); }
/* separators that never dangle: each token carries its "·" in a 14px lead-in; the row is pulled
   14px left inside the clipped box, so the lead-in of a token that starts a line is cut off */
.lib-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 3px; margin-left: -14px; }
.lib-mi { position: relative; padding-left: 14px; white-space: nowrap; max-width: 100%; }
.lib-mi--long { white-space: normal; }
.lib-mi--dot::before { content: "·"; content: "·" / ""; position: absolute; left: 4px; color: var(--text-3); }
.lib-tag {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-2); font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-tag--accent { background: var(--accent-soft); color: var(--accent-soft-fg); }
.lib-q { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-medium); }
.lib-q--ok { color: var(--success); }
.lib-q--bad { color: var(--danger); }

.lib-pager { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lib-pager__meta { font-size: var(--fs-13); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* mastery on recent topics: number + word, never colour alone */
.lib-m { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.lib-m__pct { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); }
.lib-m__word { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2); }
.lib-m--strong .lib-m__word { color: var(--success); }
.lib-m--weak .lib-m__word { color: var(--warning); }
.lib-m--na { font-size: var(--fs-12); color: var(--text-3); max-width: 72px; line-height: 1.3; }

/* ============ Flashcards due ============ */
.lib-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.lib-banner__gem { display: grid; flex: 0 0 auto; }
.lib-banner__text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-15); color: var(--text); }
.lib-banner__text strong { color: var(--text-strong); }

.lib-due { display: flex; flex-direction: column; gap: var(--sp-4); }
.lib-due__head { display: flex; align-items: center; gap: var(--sp-3); }
.lib-due__gem { display: grid; flex: 0 0 auto; }
.lib-due__titles { min-width: 0; }
.lib-due__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.lib-due__sub { margin-top: 1px; font-size: var(--fs-13); color: var(--text-2); }
.lib-due__big { display: flex; align-items: baseline; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-15); }
.lib-due__n { font-size: var(--fs-36); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--text-accent); font-variant-numeric: tabular-nums; }
.lib-due__text { font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.lib-due__foot { margin-top: calc(-1 * var(--sp-2)); font-size: var(--fs-12); color: var(--text-3); text-align: center; }
.lib-due__ok { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--success); }
@media (min-width: 768px) and (max-width: 1199px) {
  /* tablet / small desktop: the review card sits inline, as a row */
  .lib-panel-body > .lib-due { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .lib-panel-body > .lib-due .lib-due__head { flex: 1 1 260px; }
  .lib-panel-body > .lib-due .btn--block { width: auto; }
  .lib-panel-body > .lib-due .lib-due__foot { margin: 0; flex-basis: 100%; text-align: left; }
}

/* ============ Rail ============ */
.lib-rail { display: flex; flex-direction: column; gap: var(--sp-4); }
.lib-rail-card .section-header { margin-bottom: var(--sp-2); }
.lib-rail-card .section-header__title { font-size: var(--fs-15); }
.lib-mini { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--sp-2)); }
.lib-mini__row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 48px; padding: 6px var(--sp-2); border-radius: var(--r-sm);
  text-align: left; color: var(--text); transition: background var(--dur-1) var(--ease-out);
}
.lib-mini__row:hover { background: var(--surface-hover); }
.lib-mini__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lib-mini__tile { width: 28px; height: 28px; border-radius: 9px; }
.lib-mini__body { display: flex; flex-direction: column; min-width: 0; }
.lib-mini__name { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.lib-mini__meta { font-size: var(--fs-12); color: var(--text-3); }
.lib-mini__n { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.lib-folder[aria-pressed="true"] { background: var(--selected-bg); box-shadow: inset 0 0 0 1.5px var(--selected-border); }
.lib-folder[aria-pressed="true"] .lib-folder__name { color: var(--link); }
.lib-folder__name { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.lib-rail-add { margin-top: var(--sp-2); }
.lib-mini .lib-m { min-width: 0; }
.lib-mini .lib-m__pct { font-size: var(--fs-13); }
.lib-mini .lib-m--na { font-size: var(--fs-12); }

/* ============ Notebook ============ */
.lib-nbs { display: flex; flex-direction: column; gap: var(--sp-3); }
.lib-nb { padding: 0; overflow: hidden; }
.lib-nb__h { font-size: inherit; font-weight: inherit; }
.lib-nb__head {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 60px; padding: var(--sp-3) var(--sp-4); text-align: left;
  transition: background var(--dur-1) var(--ease-out);
}
.lib-nb__head:hover { background: var(--surface-hover); }
.lib-nb__head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.lib-nb__mark { display: grid; place-items: center; }
.lib-nb__name { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); overflow-wrap: break-word; }
.lib-nb__count { font-size: var(--fs-13); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-nb__chev { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.lib-nb__head[aria-expanded="true"] .lib-nb__chev { transform: rotate(180deg); }
.lib-nb__body { border-top: 1px solid var(--divider); }
.lib-nb__topic { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.lib-nb__topic + .lib-nb__topic { border-top: 1px solid var(--divider); }
.lib-nb__thead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 32px; }
.lib-nb__tname { font-size: var(--fs-13); font-weight: var(--fw-semibold); letter-spacing: .01em; color: var(--text-2); overflow-wrap: break-word; }
.lib-nb__add { flex: 0 0 auto; gap: 4px; min-height: 32px; font-size: var(--fs-13); }
@media (min-width: 1024px) {
  .lib-nb__head { padding: var(--sp-3) var(--sp-5); }
  .lib-nb__topic { padding: var(--sp-3) var(--sp-5) var(--sp-2); }
}

.lib-nbs__title { margin-top: var(--sp-2); font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.lib-latest { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.lib-latest__title { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); }
.lib-latest__item { padding-top: var(--sp-3); }
.lib-latest__item + .lib-latest__item { border-top: 1px solid var(--divider); margin-top: var(--sp-1); }
.lib-latest__where { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); }
.lib-latest__where > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) { .lib-latest { padding: var(--sp-4) var(--sp-5) var(--sp-2); } }
.lib-notes { display: flex; flex-direction: column; }
.lib-note { padding: var(--sp-2) 0; }
.lib-note + .lib-note { border-top: 1px solid var(--divider); }
.lib-note--focus { margin: 0 calc(-1 * var(--sp-2)); padding: var(--sp-2); border-radius: var(--r-sm); background: var(--selected-bg); box-shadow: inset 0 0 0 1.5px var(--selected-border); }
.lib-note__text { font-size: var(--fs-15); line-height: 1.55; color: var(--text); }
.lib-note__text--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.lib-note__more { margin-top: 2px; min-height: 32px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--link); }
.lib-note__more:hover { color: var(--link-hover); text-decoration: underline; }
.lib-note__more:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.lib-note__all { margin: 0 0 var(--sp-2); }
.lib-note__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: 2px; min-height: 36px; }
.lib-note__meta { font-size: var(--fs-12); color: var(--text-3); }
.lib-note__q {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-soft-fg); font-size: var(--fs-12); font-weight: var(--fw-semibold);
  transition: background var(--dur-1) var(--ease-out);
}
.lib-note__q:hover { background: var(--selected-bg); box-shadow: inset 0 0 0 1px var(--selected-border); }
.lib-note__q:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============ Sheets (rendered outside <main>) ============ */
.lib-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.lib-form__hint { font-size: var(--fs-13); line-height: 1.5; color: var(--text-3); }
.lib-form__pair { display: grid; gap: var(--sp-3); }
.lib-form__ctx { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-13); color: var(--text-2); }
.lib-form__ctx strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.lib-textarea { min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; font-size: var(--fs-17); }
@media (min-width: 768px) { .lib-textarea { font-size: var(--fs-15); } }
.lib-select-wrap { position: relative; display: flex; align-items: center; }
.lib-select { -webkit-appearance: none; appearance: none; padding-right: 40px; font-size: var(--fs-15); text-overflow: ellipsis; }
.lib-select-wrap__chev { position: absolute; right: 12px; pointer-events: none; color: var(--text-2); }
.lib-sheet-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; width: 100%; }
.lib-sheet-foot__note { font-size: var(--fs-12); color: var(--text-3); }
@media (max-width: 767px) {
  .lib-sheet-foot--open { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .lib-sheet-foot--open .grow { display: none; }
}
.lib-danger-ghost { color: var(--danger); }

.lib-move { display: flex; flex-direction: column; gap: var(--sp-2); }
.lib-move__list { display: flex; flex-direction: column; gap: 2px; }
.lib-move__opt {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: 8px var(--sp-3); border-radius: var(--r-md); text-align: left; color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
.lib-move__opt:hover { background: var(--surface-hover); }
.lib-move__opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lib-move__opt[aria-checked="true"] { background: var(--selected-bg); box-shadow: inset 0 0 0 1.5px var(--selected-border); font-weight: var(--fw-semibold); color: var(--text-strong); }
.lib-move__tile { width: 32px; height: 32px; border-radius: 10px; }
.lib-move__name { overflow-wrap: break-word; }
.lib-move__check { color: var(--link); }

.lib-act { display: flex; flex-direction: column; gap: var(--sp-5); }
.lib-act__q { display: flex; flex-direction: column; gap: var(--sp-3); }
.lib-act__topic { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-2); }
.lib-act__stem { font-size: var(--fs-17); line-height: 1.55; color: var(--text-strong); overflow-wrap: break-word; }
.lib-act__back { font-size: var(--fs-15); line-height: 1.55; color: var(--text); }
.lib-act__answer { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 10px var(--sp-3); border-radius: var(--r-sm); background: var(--success-bg); color: var(--success-strong); font-size: var(--fs-15); font-weight: var(--fw-semibold); }
.lib-act__answer .icon { flex: 0 0 auto; margin-top: 1px; }
.lib-act__label { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-3); }
.lib-act__meta { display: block; overflow: hidden; font-size: var(--fs-13); color: var(--text-3); }
.lib-act__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* read-only question sheet: actions first, then Teach Me's question view */
.lib-qs { display: flex; flex-direction: column; gap: var(--sp-5); }
.lib-qs__pills { padding-top: var(--sp-4); border-top: 1px solid var(--divider); align-items: center; }
.lib-qs__remove { margin-left: auto; }
.lib-qs__folder { max-width: 100%; }
.lib-qs__folder .btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-qs-sheet .lib-sheet-foot__note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 0; }

/* D7: small inline actions keep a 44 px hit area on phones (the visible pill stays compact) */
@media (max-width: 767px) {
  .lib-note__more, .lib-nb__add, .lib-note__q { position: relative; }
  .lib-note__more::after, .lib-nb__add::after, .lib-note__q::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* ============ F2 (R2) ============ */
/* D16: the phone meta is one line — topic takes the room and ellipsizes; short tokens never break */
.lib-one { display: flex; align-items: center; gap: 0; min-width: 0; overflow: hidden; white-space: nowrap; }
.lib-one__main { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lib-one__tok { flex: 0 0 auto; }
.lib-one__tok--dot::before { content: "·"; content: "·" / ""; margin: 0 6px; color: var(--text-3); }
.lib-one__tok--accent { color: var(--accent-soft-fg); font-weight: var(--fw-semibold); }
.lib-one__icon { flex: 0 0 auto; display: inline-flex; margin-left: 8px; }
/* written cards: a bare pencil the size of a gem, so the icon column keeps one rhythm */
.lib-row__own { display: grid; place-items: center; width: 26px; height: 26px; color: var(--text-2); }
@media (max-width: 767px) {
  .lib-row__text--lead { -webkit-line-clamp: 2; line-clamp: 2; }
  .lib-row, .lib-row__main { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  .lib-head { padding-top: var(--sp-2); }
}
/* 1024–1199: no rail yet — keep the list and banner to a readable measure instead of 1,100 px lines */
@media (min-width: 1024px) and (max-width: 1199px) {
  .lib { max-width: 880px; }
}
.lib-m__unit { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2); }
.lib-m__right { color: var(--text-2); font-weight: var(--fw-regular); white-space: nowrap; }
.lib-m--na { white-space: nowrap; }
.lib-mini__row--static { cursor: default; }
.lib-mini__row--static:hover { background: transparent; }
.lib-qs:focus { outline: none; }
/* the dashed add-chip is a button.chip.chip--sm with a real 1px border (the DS chips draw theirs with a
   shadow), so its ::after — measured from inside the border — reaches 1px further to make 44px */
@media (max-width: 767px) {
  .lib-chips button.lib-chip-add::after { inset: -8px -4px; }
}
/* the scroller's last chip keeps the page gutter after it (flex overflow ignores end padding) */
.lib-chips::after { content: ""; flex: 0 0 1px; }
@media (max-width: 767px) { .lib-chips::after { flex-basis: calc(var(--gutter) - 2px); } .lib-chips { padding-right: 0; } }
/* the question sheet's footer shows there is more above it when the content scrolls under it */
.lib-qs-sheet .sheet__foot { box-shadow: var(--shadow-bar); position: relative; z-index: 1; }
/* Recent (phones): verdict line under the name — the word carries its status colour, evidence in text-2 */
.lib-verdict { display: block; }
.lib-verdict__word { font-weight: var(--fw-semibold); color: var(--text-2); }
.lib-verdict__word.lib-m--weak { color: var(--warning); }
.lib-verdict__word.lib-m--strong { color: var(--success); }
.lib-verdict__word--na { color: var(--text-3); font-weight: var(--fw-medium); }
.lib-verdict__ev { color: var(--text-2); }
.lib-m__na { display: block; }

/* ============ F4 (R4) ============ */
/* D7: the phone chip scroller clipped the chips' 44px ::after hit areas to 32–34px (overflow-x:auto clips
   both axes). 7px of padding above and below holds a 30px chip's 44px hit area; the same negative
   margin keeps the row's place in the page rhythm. */
@media (max-width: 767px) {
  .lib-chips { padding-top: 7px; padding-bottom: 7px; margin-top: -5px; margin-bottom: -5px; }
  /* while more chips are off-screen, the edge fades (a chip cut at the edge read as a word) */
  .lib-chips.is-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .lib-chips.is-more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
  .lib-chips.is-more-start.is-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
}
/* one meta line at every width: a leading tag (folder, due) and spaced element tokens (last result, tags) */
.lib-one__lead { flex: 0 1 auto; min-width: 0; max-width: 45%; display: inline-flex; margin-right: 10px; }
.lib-one__tok--el { display: inline-flex; margin-left: 12px; }
.lib-one .lib-tag { max-width: 100%; }
.lib-one__tok[hidden] { display: none; }
/* notes: the linked question is named by its first words (not six identical "Linked question" pills) */
.lib-note__link {
  display: flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; margin-top: 4px;
  font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--link); text-align: left;
}
.lib-note__link > .icon { flex: 0 0 auto; }
.lib-note__link-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lib-note__link:hover .lib-note__link-text { color: var(--link-hover); text-decoration: underline; }
.lib-note__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
@media (max-width: 767px) {
  .lib-note__link { position: relative; }
  .lib-note__link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  /* note Edit / Delete: 44px boxes on phones */
  .lib-note__foot .btn--icon-only { width: 44px; height: 44px; min-height: 44px; }
  /* two-button sheet footers (Cancel + Add/Save): equal halves on phones */
  .lib-sheet-foot--pair > .grow { display: none; }
  .lib-sheet-foot--pair > .btn { flex: 1 1 0; min-width: 0; }
}
/* a card you just wrote leads the list once, highlighted, so the toast's card is where the eye goes */
.lib-row--fresh { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-border); }