/* ══ THE LIBRARY PAGES ON THE MODERN DESIGN SYSTEM — report 200 ══════════

   Page rules for Resources, Signatures, Connect, Messages, the Outbox and
   Notifications (list and "What reaches you"). The handoff draws none of
   these screens, so each rule below applies the Design system page's twelve
   rules and copies the drawn screens (People, Work queue, Settings):

     - the page head is `.ui-title` + `.ui-lede` (15px, ink-3);
     - a list is ONE white card, 14px radius, rows ruled by a hairline;
     - a row's title is 15/600, its meta 13 ink-4, its chevron a Material
       Symbol;
     - status is a pill with a word and no dot;
     - one copper primary per screen; every other action is secondary.

   EVERY RULE IS SCOPED TO `.lib-page`, the class on each page's root, so
   nothing here reaches a page outside this area. Loads after
   design-system.css (base.html). Shared components come from
   design-system.css; the two this file adds are `.lib-listcard` (a list card
   whose rows are cards) and `.lib-section-title`. */

/* ── Head ─────────────────────────────────────────────────────────── */
.lib-page .ui-page-head { margin-bottom: var(--space-5); align-items: flex-start; }
.lib-page .ui-page-head .ui-lede { margin-top: 4px; max-width: 72ch; }
.lib-page .ui-page-head .ui-lede + .ui-lede { margin-top: 2px; }
.lib-page .ui-page-head__actions { padding-top: 4px; }

/* A section heading: 18/600, the Settings screen's "States". */
.lib-page .lib-section-title,
.lib-page .ui-eyebrow.ev-section {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-section); font-weight: 600; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: var(--ink-1);
}

/* ── Pills: a word, no dot (rule 6) ───────────────────────────────── */
.lib-page .ui-badge { padding: var(--pill-pad-y) var(--pill-pad-x); }
.lib-page .ui-badge::before { display: none; }

/* ── Cards and buttons ────────────────────────────────────────────── */
.lib-page .ui-card { border-radius: var(--radius); }
.lib-page .ui-card__title { font-size: var(--fs-section); font-weight: 600; }
.lib-page .card-title { margin: 0 0 var(--space-2); font-size: var(--fs-section); font-weight: 600; color: var(--ink-1); }
.lib-page .field-note,
.lib-page .prof-note,
.lib-page .ui-hint { font-size: var(--fs-meta); color: var(--ink-4); }
.lib-page .card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lib-page .ui-btn .ms { font-size: 18px; }

/* ── One list card; each row inside it was a card of its own ──────── */
/* The card and its hairlines are the shared list card (design-system.css §5). */
.lib-listcard > .ui-card { border: 0; border-radius: 0; margin: 0; background: none; }

/* The one-line rows that open in place (Signatures, the Outbox). */
.lib-page .outbox-msg__line,
.lib-page .sig-row__line { padding: 14px 18px; }
.lib-page .outbox-msg__line:hover,
.lib-page .sig-row__line:hover { background: var(--rail-bg); }
.lib-page .outbox-msg__line:focus-visible,
.lib-page .sig-row__line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lib-page .outbox-msg__line .ui-card__title,
.lib-page .sig-row__line .ui-card__title { font-size: var(--fs-row); font-weight: 600; color: var(--ink-1); }
.lib-page .outbox-msg__to,
.lib-page .sig-row__who { font-size: var(--fs-meta); color: var(--ink-4); }
.lib-page .outbox-msg__line::after,
.lib-page .sig-row__line::after {
  content: "expand_more";
  font-family: 'Material Symbols Outlined';
  font-size: 22px; line-height: 1; font-weight: normal;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'wght' 350, 'opsz' 20, 'FILL' 0;
  color: var(--ink-4);
  width: 22px; overflow: hidden;
}
.lib-page details[open] > .outbox-msg__line::after,
.lib-page details[open] > .sig-row__line::after { transform: rotate(180deg); }
.lib-page .outbox-msg__fold[open],
.lib-page .sig-row__fold[open] { background: var(--rail-bg); }
.lib-page .outbox-msg__fold > :not(summary):first-of-type { margin-top: 2px; }

/* ── Resources ────────────────────────────────────────────────────── */
.lib-page .lib-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.lib-page .lib-head input[type="search"] {
  font-size: var(--fs-body);
  border-color: var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
}
/* The kind filters are the handoff's chips ("All 6", "Overdue 3"). The
   script marks the chosen one `.active`; the chip draws it navy. */
.lib-page .lib-filters .filter {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  font-size: 14px; font-weight: 500;
  background: var(--card-bg); color: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.lib-page .lib-filters .filter:hover { border-color: var(--ink-4); }
.lib-page .lib-filters .filter.active { background: var(--anchor); border-color: var(--anchor); color: var(--on-anchor); }
.lib-page .lib-filters .filter .lib-count { font-size: 14px; font-weight: 500; padding: 0; background: none; color: inherit; }
.lib-page .lib-folder + .lib-folder { margin-top: var(--space-6); }
.lib-page .lib-folder-name {
  display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-2);
  margin: 0 0 var(--space-3); padding: 0;
  font-size: var(--fs-section); font-weight: 600; color: var(--ink-1);
}
.lib-page .lib-folder-name .lib-count { font-size: var(--fs-meta); font-weight: 400; padding: 0; background: none; color: var(--ink-4); }
.lib-page .lib-note-inline { margin: 0 0 var(--space-3); font-size: var(--fs-meta); color: var(--ink-4); }
.lib-page .lib-cards { border-radius: var(--radius); }
.lib-page .lib-upload { border-radius: var(--radius); }
.lib-page .lib-item-head { width: 100%; min-height: 56px; padding: 12px 18px; align-items: center; text-align: left; }
.lib-page .lib-item-head:hover { background: var(--rail-bg); }
.lib-page .lib-item-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lib-page .lib-item-head .lib-ico { font-size: 22px; color: var(--ink-4); }
.lib-page .lib-item-name { flex: 1; min-width: 0; font-size: var(--fs-row); font-weight: 600; color: var(--ink-1); }
.lib-page .lib-item-head .chev { font-size: 22px; color: var(--ink-4); transition: transform .15s ease; }
.lib-page .lib-item.open .lib-item-head .chev { transform: rotate(180deg); }
.lib-page .lib-item.open { background: var(--rail-bg); }
.lib-page .lib-item-body { padding: 0 18px 18px 52px; }
.lib-page .lib-note { font-size: var(--fs-body); color: var(--ink-2); }
.lib-page .lib-meta { font-size: var(--fs-meta); color: var(--ink-4); }
.lib-page .lib-actions { margin-top: var(--space-3); }
.lib-page .lib-actions .disabled { color: var(--ink-4); font-size: var(--fs-meta); }
.lib-page .lib-empty { padding: var(--space-6) var(--space-5); text-align: center; color: var(--ink-4); background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 640px) {
  .lib-page .lib-item-head { padding: 12px 14px; }
  .lib-page .lib-item-head > .lib-item-name + .pill,
  .lib-page .lib-item-head > .lib-item-name + .ui-pill { margin-left: 34px; }
  .lib-page .lib-item-head { flex-wrap: wrap; row-gap: 6px; }
  .lib-page .lib-item-head > .lib-item-name { flex: 1 1 calc(100% - 70px); }
  .lib-page .lib-item-head > .chev { margin-left: auto; }
  .lib-page .lib-item-body { padding: 0 14px 16px; }
}

/* ── Connect ──────────────────────────────────────────────────────── */
.lib-page .connect-list { border-radius: var(--radius); }
.lib-page .connect-row { padding: 14px 18px; }
.lib-page .connect-row:hover { background: var(--rail-bg); }
.lib-page .connect-row__title { font-size: var(--fs-row); font-weight: 600; color: var(--ink-1); }
.lib-page .connect-row__sub,
.lib-page .connect-row__count { font-size: var(--fs-meta); color: var(--ink-4); }
.lib-page .connect-row__go { font-size: 22px; color: var(--ink-4); }
.lib-page .connect-comments { padding: 0; overflow: hidden; }

/* ── Messages ─────────────────────────────────────────────────────── */
.lib-page .msg-row__line { text-decoration: none; color: inherit; }
.lib-page .told-list { list-style: none; margin: var(--space-3) 0; padding: 0; }
/* The names a message will reach, in columns rather than one long list
   (review [95]): every name is still on the screen before Send. */
.lib-page .told-list--grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 var(--space-4);
  max-height: 336px; overflow-y: auto;
  padding: 4px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.lib-page .told-list--grid > .told-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; padding: 8px 0; border: 0; text-align: left; }
.lib-page .told-list--grid > .told-row > * { margin: 0; max-width: 100%; }
.lib-page .told-list--grid .told-row__who { font-weight: 600; font-size: 14px; }
.lib-page .told-list--grid .told-row__where { font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }
.lib-page .msg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); padding: 10px 0; border-top: 1px solid var(--line-2); }
.lib-page .msg-row:first-child { border-top: 0; }
.lib-page .msg-row .attendee-name { font-weight: 600; }
.lib-page .msg-row .prof-note { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.lib-page .msg-row > .field-note { flex-basis: 100%; margin: 0; }
.lib-page .lib-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.lib-page .lib-fields .ui-field,
.lib-page .msg-write .ui-field { display: flex; flex-direction: column; gap: 6px; }
.lib-page .msg-write { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-3) 0; }
.lib-page .ui-field select,
.lib-page .ui-field input:not([type="checkbox"]):not([type="radio"]),
.lib-page .ui-field textarea { width: 100%; min-height: 44px; border-radius: var(--radius-sm); font-size: var(--fs-body); }
.lib-page .lib-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* ── Signatures ───────────────────────────────────────────────────── */
.lib-page .sig-facts dt { font-size: var(--fs-meta); color: var(--ink-4); }
.lib-page .lib-tech { margin-top: var(--space-4); border-top: 1px solid var(--line-2); padding-top: var(--space-3); }
.lib-page .lib-tech > summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--ink-3);
}
.lib-page .lib-tech > summary::-webkit-details-marker { display: none; }
.lib-page .lib-tech > summary .ms { transition: transform .15s ease; }
.lib-page .lib-tech[open] > summary .ms { transform: rotate(180deg); }
.lib-page .lib-tech > .sig-facts { margin-top: var(--space-3); }
.lib-page .sig-tick { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body); }
.lib-page .sig-tick input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--done-ink); flex: none; }

/* ── Notifications ────────────────────────────────────────────────── */
.lib-page .note-row .ui-table__link { font-size: var(--fs-row); font-weight: 600; }
.lib-page .note-row .ui-table__sub { font-size: var(--fs-meta); color: var(--ink-4); }
.lib-page .note-row td.ui-table__right { font-size: var(--fs-meta); color: var(--ink-4); white-space: nowrap; }
.lib-page .note-unread .ui-table__link::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0;
  border-radius: 50%; background: var(--copper-cta); vertical-align: middle;
}
.lib-page .push-box { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.lib-page .push-title { margin: 0; font-size: var(--fs-row); font-weight: 600; }
.lib-page .push-detail { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--ink-4); }

/* What reaches you. On a phone a topic is one row: its name and when, then
   the channels as small labelled boxes on one line, not a line each
   (review [38]: the page took 10 screens). */
.lib-page .prefs-group .ui-hint { margin: 4px 0 var(--space-3); }
.lib-page .prefs-table th { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-4); }
.lib-page .prefs-table td input[type="checkbox"] { accent-color: var(--done-ink); }
.lib-page .prefs-save { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.lib-page .prefs-save .field-hint { margin: 0; font-size: var(--fs-meta); color: var(--ink-4); }
@media (max-width: 720px) {
  .lib-page .prefs-group { padding: var(--space-4); }
  .lib-page .prefs-group .ui-table-wrap { border: 0; background: none; overflow: visible; }
  .lib-page .prefs-table,
  .lib-page .prefs-table tbody { display: block; width: 100%; }
  .lib-page .prefs-table thead { display: none; }
  .lib-page .prefs-table tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-4);
    padding: 12px 0; border-top: 1px solid var(--line-2);
  }
  .lib-page .prefs-table tr:first-child { border-top: 0; }
  .lib-page .prefs-table td { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; }
  .lib-page .prefs-table td:first-child { flex: 1 0 100%; flex-direction: column; align-items: flex-start; gap: 2px; }
  .lib-page .prefs-table td:first-child::before { display: none; }
  .lib-page .prefs-table td.ui-table__num {
    flex-direction: row-reverse; justify-content: flex-end;
    flex: 0 0 auto; width: auto; min-height: 32px; font-size: var(--fs-meta); color: var(--ink-3);
  }
  .lib-page .prefs-table td.ui-table__num::before {
    content: attr(data-label); position: static; width: auto;
    font-size: var(--fs-meta); font-weight: 500; color: var(--ink-3);
    text-transform: none; letter-spacing: 0;
  }
}

/* A message row (Messages): the whole row opens the message, by the title
   link's stretched hit area. */
.lib-page .lib-msg { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 14px 18px; }
.lib-page .lib-msg:hover { background: var(--rail-bg); }
.lib-page .lib-msg__text { flex: 1; min-width: 0; }
.lib-page .lib-msg__title { margin: 0; font-size: var(--fs-row); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.lib-page .lib-msg__title a { color: var(--ink-1); text-decoration: none; }
.lib-page .lib-msg__title a::after { content: ""; position: absolute; inset: 0; }
.lib-page .lib-msg__title a:focus-visible { outline: none; }
.lib-page .lib-msg:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.lib-page .lib-msg__meta { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }
.lib-page .lib-msg__chev { font-size: 22px; color: var(--ink-4); }
@media (max-width: 560px) {
  .lib-page .lib-msg { flex-wrap: wrap; padding: 14px 16px; }
  .lib-page .lib-msg__text { flex: 1 0 calc(100% - 40px); }
  .lib-page .lib-msg > .ui-badge { order: 3; }
}

/* The Outbox's count and its four states, under the head. */
.lib-page .lib-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.lib-page .lib-summary__title { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--ink-1); }
.lib-page .lib-summary .outbox-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.lib-page .lib-summary > .field-note { flex-basis: 100%; margin: 0; }
.lib-page .outbox-msg__body { font-size: 14px; }

/* Forms on these pages (Connect's "Start a discussion" and "Add a
   comment"): one column, the label 14/600 above its field, the one action
   under the fields on the left, as the Settings screen draws "Save". */
.lib-page .ui-fields { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.lib-page .ui-field { display: flex; flex-direction: column; gap: 6px; }
.lib-page .ui-field > .ui-label { padding: 0; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-1); text-transform: none; letter-spacing: 0; }
.lib-page form .ui-page-head__actions { justify-content: flex-start; margin-top: var(--space-3); }
.lib-page form .ui-hint { margin: var(--space-2) 0 0; }

/* Rule 11: nothing is cut off at 390px. A row's title wraps instead of
   ending in an ellipsis, and its pill goes under it when there is no room. */
.lib-page .outbox-msg__line > .ui-card__head,
.lib-page .sig-row__line > .ui-card__head { flex-wrap: wrap; row-gap: 4px; }
.lib-page .outbox-msg__line .ui-card__title,
.lib-page .sig-row__line .ui-card__title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }
.lib-page .outbox-msg__line > .outbox-msg__to,
.lib-page .sig-row__line > .sig-row__who { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }

/* What reaches you, on a desk: the channel columns are the same width in
   every section, so the boxes line up down the page (review [59]: the
   columns moved from section to section). */
@media (min-width: 721px) {
  .lib-page .prefs-table { table-layout: fixed; width: 100%; }
  .lib-page .prefs-table th:not(:first-child),
  .lib-page .prefs-table td.ui-table__num { width: 150px; text-align: center; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .lib-page .prefs-table th:not(:first-child),
  .lib-page .prefs-table td.ui-table__num { width: 104px; }
  .lib-page .prefs-table th { white-space: normal; }
  .lib-page .prefs-table th:not(:first-child) { padding-left: 8px; padding-right: 8px; }
}
.lib-page form > .prefs-group + .prefs-group,
.lib-page form > .prefs-group + .prefs-save { margin-top: var(--space-4); }
@media (max-width: 720px) {
  .lib-page .note-row td.ui-table__right { text-align: left; }
}