/*
 * The Library's pages (Library, History, Bin, My Papers): layout, sidebar, phone chips and sheet, header extras,
 * toolbar, author picker. Loaded by head.php where page_uses("papers") (lib/asset.php), after css/style.css.
 * Owner: Claude (UI) (Task 6). Uses the tokens of css/tokens.css. Paper cards: .ms-card in api/lib/mySpires.scss.
 */

/* ---------- Layout: sidebar | main ---------- */
.ms-papers-layout {
  display: grid;
  grid-template-columns: var(--ms-sidebar-width) minmax(0, 1fr);
  gap: var(--ms-space-5);
  align-items: start;
}

.ms-papers-main { min-width: 0; }

/* ---------- Sidebar ---------- */
.ms-papers-sidebar {
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: var(--ms-surface);
  border-radius: var(--ms-radius-panel);
  box-shadow: var(--ms-shadow-card);
}

.ms-papers-sidebar:empty { min-height: 220px; }

.ms-papers-nav { display: flex; flex-direction: column; gap: 2px; }
.ms-papers-nav + .ms-section-label { margin-top: 10px; }
.ms-papers-nav:first-child { padding-bottom: 10px; border-bottom: 1px solid var(--ms-line); }

.ms-papers-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--ms-radius-btn);
  color: var(--ms-ink);
  font-size: var(--ms-fs-md);
  font-weight: 500;
  line-height: var(--ms-lh-snug);
  text-decoration: none;
}

.ms-papers-nav:first-child .ms-papers-link { font-weight: 600; }
.ms-papers-link:hover { background: var(--ms-fill); color: var(--ms-ink); text-decoration: none; }
.ms-papers-link.is-active { background: var(--ms-blue-tint); color: var(--ms-blue-ink); font-weight: 600; }
.ms-papers-link-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-papers-link-count { color: var(--ms-muted); font-size: var(--ms-fs-sm); font-variant-numeric: tabular-nums; }
.ms-papers-link.is-active .ms-papers-link-count { color: var(--ms-blue-ink); }
.ms-star-mark { color: var(--ms-gold); font-size: var(--ms-fs-sm); }

.ms-papers-more {
  margin: 4px 0 0;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--ms-link);
  font-size: var(--ms-fs-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ms-papers-more:hover { text-decoration: underline; }

/* ---------- Header extras ---------- */
.ms-breadcrumb { margin-bottom: 4px; color: var(--ms-muted); font-size: var(--ms-fs-md); }
.ms-breadcrumb a { color: var(--ms-link); }

.ms-papers-main .ms-page-header { margin-bottom: var(--ms-space-4); align-items: flex-start; }
.ms-page-heading { min-width: 0; }
.ms-page-heading h1 { display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }

.ms-star {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: transparent;
  color: var(--ms-faint);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ms-star:hover { background: var(--ms-fill); color: var(--ms-gold); }
.ms-star.is-on { color: var(--ms-gold); }

.ms-papers-main .ms-page-actions .btn { border-radius: var(--ms-radius-pill); white-space: nowrap; }

.ms-subtags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--ms-space-4); }

.ms-subtag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-button);
  color: var(--ms-ink);
  font-size: var(--ms-fs-md);
  font-weight: 600;
  text-decoration: none;
}

.ms-subtag:hover { background: var(--ms-blue-tint); color: var(--ms-blue-ink); text-decoration: none; }

.ms-subtag-more {
  border: 0;
  background: none;
  padding: 0 6px;
  color: var(--ms-link);
  font-size: var(--ms-fs-md);
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Panels: add a paper, tag editor ---------- */
.ms-papers-panel { margin-bottom: var(--ms-space-4); }
.ms-papers-panel[hidden] { display: none; }
.ms-panel-label { display: block; font-weight: 600; margin-bottom: 8px; }
.ms-panel-status { margin: 10px 0 0; color: var(--ms-muted); font-size: var(--ms-fs-md); }
.ms-inline-field { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-inline-field .form-control { flex: 1 1 260px; min-width: 0; }
.ms-inline-field .btn, .ms-form-foot .btn { border-radius: var(--ms-radius-btn); }
#library-add-results:not(:empty) { margin-top: var(--ms-space-4); }

.ms-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ms-form-grid label, #library-tag-form > label { display: block; margin-bottom: 6px; color: var(--ms-muted); font-weight: 600; }
#library-tag-form .awesomplete { display: block; }
#library-tag-form .ms-field__warn { margin: -4px 0 12px; }

.ms-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--ms-space-4); }
.ms-form-hint { color: var(--ms-muted); font-size: var(--ms-fs-xs); }

.ms-link-danger {
  margin-right: auto;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--ms-danger-ink);
  font-size: var(--ms-fs-md);
  font-weight: 600;
  cursor: pointer;
}

.ms-link-danger:hover { text-decoration: underline; }

/* ---------- Toolbar: search, authors, sort, List / Cards ---------- */
.ms-papers-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ms-search {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 8px 0 16px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-button);
  color: var(--ms-muted);
}

.ms-search:focus-within { box-shadow: var(--ms-focus-ring); }

.ms-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ms-ink);
  font-size: var(--ms-fs-base);
}

.ms-search input:focus-visible { outline: 0; }
.ms-search input::placeholder { color: var(--ms-muted); }
.ms-search input::-webkit-search-cancel-button { cursor: pointer; }

.ms-search-key {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: var(--ms-radius-xs);
  background: var(--ms-fill);
  color: var(--ms-muted);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-fs-xs);
  font-weight: 600;
}

.ms-search:focus-within .ms-search-key { visibility: hidden; }

.ms-tool-btn {
  height: 44px;
  max-width: 240px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-button);
  color: var(--ms-ink);
  font-size: var(--ms-fs-md);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.ms-tool-btn:hover, .ms-tool-btn[aria-expanded="true"] { background: var(--ms-fill); }
.ms-tool-btn.is-set { background: var(--ms-blue-tint); color: var(--ms-blue-ink); }

.ms-segmented { display: inline-flex; padding: 4px; border-radius: var(--ms-radius-pill); background: var(--ms-fill-strong); }

.ms-segmented button {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: transparent;
  color: var(--ms-muted);
  font-size: var(--ms-fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.ms-segmented button[aria-pressed="true"] { background: var(--ms-surface); color: var(--ms-ink); box-shadow: var(--ms-shadow-button); }

.ms-papers-count { margin: 14px 0 0; color: var(--ms-muted); font-size: var(--ms-fs-md); }
.ms-papers-main > .ms-cards { margin-top: var(--ms-space-4); }
.ms-papers-main > .ms-cards[hidden] { display: none; }
.ms-papers-main > .ms-empty { margin-top: var(--ms-space-4); }
.ms-papers-main > .ms-empty[hidden] { display: none; }

/* ---------- Author picker ---------- */
.ms-picker {
  position: fixed;
  z-index: 1080;
  width: 280px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  background: var(--ms-surface);
  border-radius: var(--ms-radius-menu);
  box-shadow: var(--ms-shadow-raised);
}

.ms-picker, .ms-picker * { box-sizing: border-box; }

.ms-picker__input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ms-line-strong);
  border-radius: var(--ms-radius-btn);
  color: var(--ms-ink);
  font-size: var(--ms-fs-md);
}

.ms-picker__input:focus { outline: 0; border-color: var(--ms-blue); box-shadow: var(--ms-focus-ring); }
.ms-picker__list { max-height: 320px; overflow-y: auto; margin-top: 6px; }
.ms-picker__none { margin: 8px 10px; color: var(--ms-muted); font-size: var(--ms-fs-md); }

/* ---------- Phones: chips instead of the sidebar, and the sheet ---------- */
.ms-papers-chips { display: none; }

@media (max-width: 767.98px) {
  .ms-papers-layout { display: block; }
  .ms-papers-sidebar { display: none; }

  .ms-papers-chips {
    display: flex;
    gap: 8px;
    margin: 0 calc(-1 * var(--ms-page-gutter)) var(--ms-space-4);
    padding: 2px var(--ms-page-gutter) 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ms-papers-chips::-webkit-scrollbar { display: none; }

  .ms-chip-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--ms-radius-pill);
    background: var(--ms-surface);
    box-shadow: var(--ms-shadow-button);
    color: var(--ms-ink);
    font-size: var(--ms-fs-md);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }

  .ms-chip-link:hover { text-decoration: none; color: var(--ms-ink); }
  .ms-chip-link.is-active { background: var(--ms-blue-tint); color: var(--ms-blue-ink); box-shadow: none; }

  .ms-papers-main .ms-page-header { flex-direction: column; gap: 12px; }
  .ms-papers-main .ms-page-actions .btn { min-height: 38px; padding: 6px 14px; font-size: var(--ms-fs-md); }
  .ms-form-grid { grid-template-columns: 1fr; }
  .ms-search { flex-basis: 100%; }
  .ms-search-key { display: none; }
  .ms-tool-btn { height: 40px; padding: 0 14px; }
  .ms-segmented { margin-left: auto; }
  .ms-segmented button { height: 32px; }
}

.ms-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(22, 24, 39, 0.4);
  opacity: 0;
  transition: opacity var(--ms-duration-slow) var(--ms-ease);
}

.ms-sheet-backdrop.is-open { opacity: 1; }

.ms-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1070;
  max-height: 80vh;
  overflow-y: auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--ms-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--ms-shadow-raised);
  transform: translateY(100%);
  transition: transform var(--ms-duration-slow) var(--ms-ease);
}

.ms-sheet.is-open { transform: none; }
.ms-sheet__handle { width: 40px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: var(--ms-line-strong); }
body.ms-sheet-open { overflow: hidden; }

/* ---------- History and Bin ---------- */
.ms-icon-more {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-button);
  color: var(--ms-ink);
  font-size: var(--ms-fs-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  cursor: pointer;
}

.ms-icon-more:hover, .ms-icon-more[aria-expanded="true"] { background: var(--ms-fill); }
.ms-icon-more[hidden] { display: none; }

.ms-papers-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: var(--ms-space-4);
  color: var(--ms-text-2);
  font-size: var(--ms-fs-md);
}

.ms-papers-note > div { flex: 1 1 320px; }
.ms-papers-note strong { color: var(--ms-ink); margin-right: 4px; }
.ms-papers-note .btn { border-radius: var(--ms-radius-pill); }

.ms-cards .ms-day-heading {
  grid-column: 1 / -1;
  margin: var(--ms-space-4) 0 0;
  color: var(--ms-muted);
  font-size: var(--ms-fs-sm);
  font-weight: 700;
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
}

.ms-cards .ms-day-heading:first-child { margin-top: 0; }
.ms-feed-status { margin: var(--ms-space-5) 0 0; color: var(--ms-muted); font-size: var(--ms-fs-md); text-align: center; }
.ms-feed-status:empty { display: none; }

/* ---------- Feed (index.php, signed in) ---------- */
.ms-feed { max-width: none; margin: 0; }
.ms-feed .ms-page-header { align-items: flex-start; }

.ms-feed-categories { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 60%; }

.ms-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 0 6px 0 14px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-blue-tint);
  color: var(--ms-blue-ink);
  font-size: var(--ms-fs-md);
  font-weight: 600;
}

.ms-cat-chip:not(:has(button)) { padding-right: 14px; }
.ms-cat-chip .ms-chip__x { color: var(--ms-blue-ink); }
.ms-cat-chip .ms-chip__x:hover { background: rgba(10, 79, 180, 0.12); color: var(--ms-blue-ink); }

.ms-cat-add {
  height: 34px;
  padding: 0 14px;
  border: 1.5px dashed var(--ms-line-strong);
  border-radius: var(--ms-radius-pill);
  background: transparent;
  color: var(--ms-muted);
  font-size: var(--ms-fs-md);
  font-weight: 600;
  cursor: pointer;
}

.ms-cat-add:hover { border-color: var(--ms-blue); color: var(--ms-blue-ink); }
.ms-cat-add[hidden] { display: none; }

.ms-cat-input {
  width: 160px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ms-blue);
  border-radius: var(--ms-radius-pill);
  box-shadow: var(--ms-focus-ring);
  color: var(--ms-ink);
  font-size: var(--ms-fs-md);
  outline: 0;
}

.ms-cat-input.is-invalid { border-color: var(--ms-danger); }

.ms-foryou { margin-bottom: var(--ms-space-5); }
.ms-foryou[hidden] { display: none; }

.ms-foryou-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--ms-gold-ink);
  font-size: var(--ms-fs-sm);
  font-weight: 700;
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
}

.ms-foryou-title span { color: var(--ms-gold); font-size: var(--ms-fs-md); }
.ms-cards.ms-foryou-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

.ms-card.ms-card--foryou,
.ms-card.ms-card--foryou.is-unsaved {
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-card);
  outline: 1.5px solid rgba(var(--ms-gold-rgb), 0.55);
  outline-offset: -1.5px;
}

.ms-card.ms-card--foryou.is-saved { outline: 0; }
.ms-card--foryou .ms-card__body { padding: 14px 16px 16px; }
.ms-card--foryou .ms-card__title { font-size: var(--ms-fs-base); }
.ms-card--foryou .ms-card__tags { padding-top: 12px; }

.ms-feed .ms-cards--list .ms-day-heading:first-child { margin-top: 0; }
.ms-feed-more { margin-top: var(--ms-space-4); text-align: center; }
.ms-feed-more .btn { border-radius: var(--ms-radius-pill); min-width: 160px; }

@media (max-width: 767.98px) {
  .ms-feed .ms-page-header { flex-direction: column; gap: 12px; }
  .ms-feed-categories { justify-content: flex-start; max-width: none; }
  /* For you: a row to swipe through */
  .ms-cards.ms-foryou-cards {
    display: flex;
    gap: 10px;
    margin: 0 calc(-1 * var(--ms-page-gutter));
    padding: 2px var(--ms-page-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ms-cards.ms-foryou-cards::-webkit-scrollbar { display: none; }
  .ms-foryou-cards .ms-card { flex: 0 0 82%; scroll-snap-align: start; }
}
.ms-feed .ms-card__abstract { -webkit-line-clamp: 2; }

/* Wide Feed: use the Library's full content width, with recommendations down the right.
 * DOM order stays For you → papers for the single-column tablet/phone layout above. */
@media (min-width: 992px) {
  .ms-feed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--ms-space-5);
    align-items: start;
  }
  .ms-feed:has(> .ms-foryou:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 328px;
  }
  .ms-feed > .ms-page-header { grid-column: 1 / -1; }
  .ms-feed > #feed-cards { grid-column: 1; grid-row: 2; min-width: 0; }
  .ms-feed > #feed-status { grid-column: 1; grid-row: 3; }
  .ms-feed > .ms-feed-more { grid-column: 1; grid-row: 4; }
  .ms-feed > .ms-foryou { grid-column: 2; grid-row: 2 / span 3; min-width: 0; margin-bottom: 0; }
  .ms-feed .ms-foryou-cards { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- My Papers (cite.php) ---------- */
.ms-cite-help { margin: 8px 0 0; color: var(--ms-muted); font-size: var(--ms-fs-sm); }
.ms-cite-results { margin-top: var(--ms-space-4); }
.ms-cite-group { margin-bottom: var(--ms-space-5); }
.ms-cite-group > .ms-card { position: relative; z-index: 1; }

.ms-cites-wrap {
  margin: 0 16px;
  padding: 10px 16px 12px;
  background: var(--ms-surface);
  border-radius: 0 0 var(--ms-radius-btn) var(--ms-radius-btn);
  box-shadow: var(--ms-shadow-card);
}

.ms-cites { list-style: none; margin: 0; padding: 0; }

.ms-cite {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  font-size: var(--ms-fs-md);
  line-height: var(--ms-lh-snug);
}

.ms-cite + .ms-cite { border-top: 1px solid var(--ms-line); }
.ms-cite[hidden] { display: none; }
.ms-cite__date { color: var(--ms-muted); font-size: var(--ms-fs-sm); padding-top: 1px; white-space: nowrap; }
.ms-cite__title { color: var(--ms-ink); font-weight: 500; }
.ms-cite__title:hover { color: var(--ms-link); }
.ms-cite__authors { color: var(--ms-muted); font-size: var(--ms-fs-sm); }

.ms-cite-more {
  margin-top: 4px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ms-link);
  font-size: var(--ms-fs-sm);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .ms-cites-wrap { margin: 0 8px; padding: 8px 12px 10px; }
  .ms-cite { grid-template-columns: 1fr; gap: 2px; }
}

/* Native fields use the same surface as the picker or category panel in either theme. */
.ms-picker__input, .ms-cat-input { background: var(--ms-surface); }