/* Library additions on top of the catalog's index.css (same tokens). Light theme only, like the catalog.
   Layout of the library: division tabs (sticky) above an index table. */

:root {
  --card: #fff;
  --grape-wash: #f4ecf8;
  --grape-deep: #5e3473;
  --leaf-ink: #1f2d08;
  --hairline: #eee9f2;
  --row-hover: #fcfbfd;
}

html { background: #fff; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }


.library-facts {
  font-size: .82rem;
  color: var(--muted);
  margin: -.6rem auto 1.75rem;
  font-variant-numeric: tabular-nums;
}

/* ---- division tabs: stay at the top while the list scrolls ---- */

.lay-index { text-align: left; }

.tabs-wrap {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 6;
  background: var(--tint);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.tabs-wrap::-webkit-scrollbar { display: none; }
.tabs-row { display: flex; align-items: stretch; gap: .1rem; min-width: max-content; }
.tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .8rem .85rem .7rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--ink); border-bottom-color: var(--grape-light); }
.tab:focus-visible { outline: 3px solid var(--grape); outline-offset: -4px; border-radius: 6px; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--grape); }
.tab.is-bg { font-weight: 500; }
.tab-count {
  min-width: 1.6rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  padding: .06rem .4rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] .tab-count { background: var(--grape); border-color: var(--grape); color: #fff; }
.tab-count.is-zero { opacity: .45; }
.tabs-gap { flex: 1 0 1.5rem; position: relative; }

/* ---- division header ---- */

.div-head { margin: 1.4rem 0 0; scroll-margin-top: 4.5rem; text-align: center; }
.div-title { font-size: 1.4rem; font-weight: 700; color: var(--ink); line-height: 1.25; text-wrap: balance; }
.div-desc { color: var(--muted); max-width: 48rem; margin: .2rem auto 0; }

/* ---- toolbar ---- */

.lib-toolbar { margin: 1.1rem 0 .9rem; }
.lib-fields {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  gap: .5rem .6rem;
  align-items: end;
}
.lib-fields .label { font-size: .72rem; font-weight: 700; color: var(--muted); margin-bottom: .2rem; letter-spacing: .02em; }
.lib-fields .tool { min-width: 0; }
.lib-fields .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--link); }
.lib-fields .select.is-set select { border-color: var(--grape); box-shadow: inset 0 0 0 1px var(--grape); font-weight: 600; color: var(--grape-deep); }
.lib-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .4rem 1rem;
  margin-top: .7rem;
}
.lib-count { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.lib-actions { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; }

.notes-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  margin-right: .35rem;
}
.notes-toggle:hover { color: var(--ink); }
.notes-toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.9rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #d9d2df;
  position: relative;
  cursor: pointer;
  transition: background .15s;
  flex: none;
  margin: 0;
}
.notes-toggle input::after {
  content: "";
  position: absolute;
  top: .15rem;
  left: .15rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(42, 34, 48, .25);
  transition: transform .15s;
}
.notes-toggle input:checked { background: var(--grape); }
.notes-toggle input:checked::after { transform: translateX(.8rem); }
.notes-toggle input:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }

.copy-fallback {
  width: 100%;
  min-height: 9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6rem .75rem;
  margin-top: 1rem;
}

/* ---- the index ---- */

.ix {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.ix-row {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) 3.6rem 7.4rem 8.2rem 9.4rem;
  gap: 0 1rem;
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.ix-row:not(.ix-hrow):hover { background: var(--row-hover); }
.ix-row.is-open { background: var(--row-hover); }
.ix-hrow {
  border-top: 0;
  background: #fbfafc;
  padding-top: .55rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.ix-hrow + .ix-row { border-top: 0; }
.ix-h { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.ix-sort { all: unset; cursor: pointer; display: inline-flex; gap: .3rem; align-items: center; }
.ix-sort:hover, .ix-sort.is-on { color: var(--ink); }
.ix-sort:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; border-radius: 3px; }
.ix-sort .arrow { font-size: .95em; color: #b3a6bd; letter-spacing: 0; }
.ix-sort.is-on .arrow { color: var(--grape); }

.ix-ref { font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .12rem; }
.ix-paper { min-width: 0; }
.ix-title { font-weight: 600; font-size: .95rem; line-height: 1.38; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
a.ix-title:hover { color: var(--link); text-decoration: underline; text-decoration-color: var(--grape-light); text-underline-offset: 2px; }
.ext { font-size: .75em; color: var(--muted); }
.ix-meta { font-size: .8rem; color: var(--muted); margin-top: .12rem; }
.ix-note { font-size: .86rem; line-height: 1.5; margin-top: .35rem; max-width: 64ch; color: var(--ink); }
.ix-year { font-size: .86rem; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.ix-tag { font-size: .8rem; color: var(--muted); padding-top: .14rem; line-height: 1.35; }
.chips.ix-compact { display: none; }

.ix-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin-top: .4rem; }
.ix-line .chips { margin: 0; }

.ix-more {
  all: unset;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 600;
  color: var(--link);
  display: inline-flex;
  gap: .3rem;
  align-items: baseline;
}
.ix-more:hover { text-decoration: underline; }
.ix-more:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; border-radius: 3px; }
/* chevron drawn with two borders, so it rotates cleanly in every font */
.ix-more { align-items: center; }
.ix-more .chev { display: inline-block; width: .42em; height: .42em; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); margin-right: .1rem; transition: transform .15s; }
.ix-more[aria-expanded="true"] .chev { transform: rotate(45deg) translate(-1px, -1px); }

.ix-details {
  margin-top: .6rem;
  padding: .8rem .95rem .85rem;
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: .84rem;
  max-width: 52rem;
}
.ix-details > .ix-note { margin: 0 0 .6rem; }
.ix-details dl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .3rem .75rem; margin: 0; }
.ix-details dt { color: var(--muted); }
.ix-details dd { margin: 0; overflow-wrap: anywhere; }
.ix-details-actions { margin-top: .65rem; }

.ix-group {
  padding: .55rem 1.1rem;
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--hairline);
  font-size: .82rem;
  color: var(--ink);
}
.ix-group > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ix-group + .ix-row { border-top: 0; }
.gh-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--grape-deep);
  background: var(--grape-wash);
  border-radius: 999px;
  padding: .04rem .5rem;
  font-variant-numeric: tabular-nums;
}
.gh-sub { color: var(--muted); font-size: .78rem; }
.ix-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* ---- chips ---- */

.chips { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  line-height: 1.5;
  padding: .02rem .5rem .04rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  white-space: nowrap;
}
button.chip {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  line-height: 1.5;
  padding: .02rem .5rem .04rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
button.chip:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.chip.is-division { background: var(--grape); color: #fff; border: 1px solid var(--grape); font-weight: 600; }
.chip.is-also { background: var(--card); color: var(--link); border: 1px solid var(--grape-light); }
button.chip.is-division:hover { background: #7a4a92; }
button.chip.is-also:hover { background: var(--grape-wash); }
.chip.is-catalog { background: var(--leaf); color: var(--leaf-ink); border-color: var(--leaf); font-weight: 600; text-decoration: none; }
a.chip.is-catalog:hover { text-decoration: underline; color: var(--leaf-ink); }

/* ---- below the library ---- */

.downloads { margin-top: 1.25rem; font-size: .88rem; color: var(--muted); text-align: center; }

/* ---- narrower screens ---- */

@media screen and (max-width: 1023px) {
  .lib-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lib-fields .tool-search { grid-column: 1 / -1; }
}

/* below the widescreen width the tabs no longer fit, so they scroll and fade at the edge */
@media screen and (max-width: 1215px) {
  .tabs-wrap { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent); }
  .tabs-gap { flex: 0 0 1.2rem; }
  .tabs-gap::after { content: ""; position: absolute; left: 50%; top: 32%; bottom: 32%; border-left: 1px solid var(--line); }
}

/* below 900px the tag columns fold into chips under each title */
@media screen and (max-width: 900px) {
  .ix-row { grid-template-columns: 2.4rem minmax(0, 1fr); padding: .8rem .9rem; }
  .ix-row > .ix-year, .ix-row > .ix-tag { display: none; }
  .ix-hrow { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .ix-hrow > :nth-child(n+4) { display: none; }
  .ix-hrow > .ix-h:nth-child(3) { display: block; }
  .chips.ix-compact { display: flex; margin-top: .4rem; }
}

@media screen and (max-width: 560px) {
  .lib-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-fields .tool:last-child { grid-column: 1 / -1; }
  .lib-bar { align-items: flex-start; }
  .div-title { font-size: 1.2rem; }
  .ix-row { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 .6rem; padding: .75rem .75rem; }
  .ix-hrow { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .ix-details dl { grid-template-columns: minmax(0, 1fr); }
  .ix-details dd { margin-bottom: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tab, .ix-more .chev, .notes-toggle input, .notes-toggle input::after { transition: none; }
}