/* ============================================================================
   screens/books.css - Books: the library and the pages under it (B4).

   The reading room itself (the full screen reader) lives in books-reader.css.
   This sheet draws #/books and its pages, the upload tray and the private
   Books card on Home. Every class starts with bk-l-, every colour is a token,
   every duration a motion token. The library is meant to read as a calm
   bookshelf inside the app: covers with a spine and a soft book shadow, one
   cream "Continue reading" block, and the app's own chips, cards and buttons
   around them. The papers and the spine shade come from the Books block in
   tokens.css; the spine and the page edge are the functional gradients that
   block allows.

   Layers: the upload tray sits on the screen FAB layer (44) and the drop veil
   on 46, both under the tab bar (50) and every overlay (70).
   ============================================================================ */


/* ---------------------------------------------------------------------------
   0. The page host and the shared bits
   --------------------------------------------------------------------------- */

.bk-l-host{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
  max-width: 1180px;
}

.bk-l-page-slot{
  min-width: 0;
}

/* A slot a page has not filled takes no gap in the column. */
.bk-l-hero-slot:empty,
.bk-l-lib-tools:empty,
.bk-l-lib-foot:empty{
  display: none;
}

.bk-l-muted{
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.bk-l-block{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4) var(--s-5);
}

.bk-l-block > h3,
.bk-l-block-h h3{
  color: var(--navy);
}

.bk-l-block-h{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.bk-l-back{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-1);
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-700);
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}

.bk-l-back:hover{
  color: var(--navy);
}

.bk-l-x .ic{
  transform: rotate(45deg);
}

.bk-l-dialog-text{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}


/* ---------------------------------------------------------------------------
   1. Covers

   The uploaded cover fills a 5:7 board (A5 is 1:1.41). A landscape cover is
   shown whole on the desk colour instead of being cut. A book without one gets
   a typographic cover: a toned board, a short rule, the title in the reading
   face and the author at the foot, in one of five tones picked by the title.
   --------------------------------------------------------------------------- */

.bk-l-cover{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: calc(var(--r-sm) - 8px) calc(var(--r-sm) - 5px) calc(var(--r-sm) - 5px) calc(var(--r-sm) - 8px);
  background: var(--bk-paper-cream);
  box-shadow: var(--sh-md), inset 0 0 0 1px var(--bk-edge-line);
  transition: box-shadow var(--t-base);
}

/* The spine: a soft fold of shade and light along the left edge. */
.bk-l-cover::after{
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  background: linear-gradient(90deg, var(--bk-spine-shade), var(--bk-spine-light) 55%, transparent);
  pointer-events: none;
}

.bk-l-cover-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk-l-cover.is-wide{
  background: var(--bk-desk-white);
}

.bk-l-cover.is-wide .bk-l-cover-img{
  object-fit: contain;
}

.bk-l-tc{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 16% 12% 12% 17%;
}

.bk-l-tc-rule{
  flex: none;
  width: 26%;
  height: 2px;
  background: currentColor;
  opacity: .55;
}

.bk-l-tc-t{
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--f-read);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.bk-l-tc-t.is-long{
  font-size: 13px;
  -webkit-line-clamp: 8;
}

.bk-l-tc-a{
  margin-top: auto;
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .82;
}

.bk-l-tc--0{ background: var(--navy); color: var(--gold-300); }
.bk-l-tc--0 .bk-l-tc-a{ color: var(--gray-300); }
.bk-l-tc--1{ background: var(--bk-paper-cream); color: var(--bk-ink-cream); }
.bk-l-tc--2{ background: var(--green-100); color: var(--green-700); }
.bk-l-tc--3{ background: var(--blue-100); color: var(--navy); }
.bk-l-tc--4{ background: var(--gold-100); color: var(--gold-700); }

.bk-l-cover--sm .bk-l-tc{
  padding: 14% 10% 10% 16%;
  gap: var(--s-1);
}

.bk-l-cover--sm .bk-l-tc-t{
  font-size: 11px;
  -webkit-line-clamp: 4;
}

.bk-l-cover--sm .bk-l-tc-a{
  display: none;
}

.bk-l-cover--lg .bk-l-tc-t{
  font-size: 17px;
}

.bk-l-cover--lg .bk-l-tc-t.is-long{
  font-size: 15px;
}

/* A thin progress line: the track of the gold ramp, the fill gold. */
.bk-l-line{
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gray-200);
}

.bk-l-line-fill{
  display: block;
  width: var(--bk-fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width var(--t-slow);
}


/* ---------------------------------------------------------------------------
   2. The library: Continue reading
   --------------------------------------------------------------------------- */

.bk-l-lib{
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}

.bk-l-hero{
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--bk-paper-cream);
  animation: rise-in var(--t-base) var(--ease-out) backwards;
}

.bk-l-hero-cover{
  display: block;
  width: 132px;
}

.bk-l-hero-b{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.bk-l-hero-k{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-700);
}

.bk-l-hero-t{
  font-family: var(--f-read);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--bk-ink-cream);
}

.bk-l-hero-t a{
  color: inherit;
  border-radius: var(--r-sm);
}

.bk-l-hero-t a:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bk-l-hero-a{
  font-size: 14px;
  color: var(--muted);
}

.bk-l-hero-p{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 440px;
  margin-top: var(--s-2);
}

.bk-l-hero-p .bk-l-line{
  flex: 1 1 auto;
  background: var(--gold-300);
}

.bk-l-hero-pct{
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.bk-l-hero-f{
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bk-l-hero-go{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}


/* ---------------------------------------------------------------------------
   3. The library: chips, search, sort
   --------------------------------------------------------------------------- */

.bk-l-lib-tools{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.bk-l-lib-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.bk-l-lib-find{
  display: flex;
  flex: 0 1 400px;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.bk-l-search{
  flex: 1 1 200px;
}

.bk-l-sort{
  position: relative;
  flex: none;
  gap: var(--s-1);
  cursor: pointer;
}

.bk-l-sort:hover{
  background: var(--gray-50);
}

.bk-l-sort:focus-within{
  border-color: var(--gold-600);
  box-shadow: var(--focus-ring);
}

.bk-l-sort-l{
  color: var(--muted);
}

.bk-l-sort-s{
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  appearance: none;
  cursor: pointer;
}

.bk-l-sort-s:focus{
  outline: none;
}

.bk-l-shelf-chips{
  align-items: center;
}

.bk-l-manage .ic{
  width: 15px;
  height: 15px;
}


/* ---------------------------------------------------------------------------
   4. The library: the shelf of covers
   --------------------------------------------------------------------------- */

.bk-l-shelf{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--s-7) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-shelf-i{
  min-width: 0;
  animation: rise-in var(--t-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.bk-l-book{
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  border-radius: var(--r-sm);
  color: inherit;
}

.bk-l-book:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.bk-l-book-c{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  transition: transform var(--t-base) var(--ease-spring);
}

@media (hover: hover){
  .bk-l-book:hover .bk-l-book-c{
    transform: translateY(var(--lift));
  }

  .bk-l-book:hover .bk-l-cover{
    box-shadow: var(--sh-lg), inset 0 0 0 1px var(--bk-edge-line);
  }
}

.bk-l-book-t{
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bk-l-book-a{
  overflow: hidden;
  font-size: 12px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-l-book-s{
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--gray-600);
}

.bk-l-book-s .ic{
  width: 13px;
  height: 13px;
}

.bk-l-book-s.is-reading{ color: var(--gold-700); }
.bk-l-book-s.is-done{ color: var(--green-700); }

.bk-l-lib-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--gray-200);
}

.bk-l-store{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12px;
  color: var(--muted);
}

.bk-l-store .ic{
  color: var(--gray-500);
}

.bk-l-trash-link{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  transition: background var(--t-fast);
}

.bk-l-trash-link:hover{
  background: var(--gray-100);
}

/* The mobile Upload button: the app's FAB, as on Cases, Clients, Inventory. */
.bk-l-fab{
  position: fixed;
  right: calc(var(--s-4) + var(--safe-r));
  bottom: calc(var(--bottombar-h) + var(--safe-b) + var(--s-4));
  z-index: 44;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--fab-h);
  height: var(--fab-h);
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-900);
  box-shadow: var(--sh-lg);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--t-base), background var(--t-fast);
}

.bk-l-fab .ic{
  width: 22px;
  height: 22px;
}

.bk-l-fab:hover{
  background: var(--gold-600);
}

.bk-l-fab:active{
  transform: scale(.94);
}

/* Dropping PDFs on the library (desktop). */
.bk-l-drop{
  position: fixed;
  inset: 0;
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: var(--veil);
  pointer-events: none;
  animation: fade-in var(--t-fast) var(--ease-out) both;
}

.bk-l-drop-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-8);
  border: 2px dashed var(--gold-600);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-lg);
  color: var(--navy);
  font-size: 15px;
}

.bk-l-drop-card .ic{
  color: var(--gold-600);
}


/* ---------------------------------------------------------------------------
   5. The upload tray

   Not a modal: the owner keeps browsing while a 300 MB scan goes up. It sits
   in the corner on the desktop and above the tab bar and the FAB on a phone.
   --------------------------------------------------------------------------- */

.bk-l-upq{
  position: fixed;
  right: calc(var(--s-5) + var(--safe-r));
  bottom: calc(var(--s-5) + var(--safe-b));
  z-index: 44;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - var(--s-8)));
  max-height: min(60vh, 520px);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-lg);
  animation: rise-in var(--t-base) var(--ease-out) backwards;
}

.bk-l-upq-h{
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--gray-200);
}

.bk-l-upq.is-collapsed .bk-l-upq-h{
  border-bottom-color: transparent;
}

.bk-l-upq-ht{
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}

.bk-l-upq-sum{
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bk-l-upq-tools{
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.bk-l-upq-fold .ic{
  transition: transform var(--t-base);
}

.bk-l-upq.is-collapsed .bk-l-upq-fold .ic{
  transform: rotate(180deg);
}

.bk-l-upq.is-collapsed .bk-l-upq-list{
  display: none;
}

.bk-l-upq-list{
  margin: 0;
  padding: var(--s-2) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.bk-l-upq-row{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
}

.bk-l-upq-ic{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--gray-100);
  color: var(--gray-500);
}

.bk-l-upq-row.is-done .bk-l-upq-ic{ background: var(--green-100); color: var(--green-700); }
.bk-l-upq-row.is-error .bk-l-upq-ic{ background: var(--red-100); color: var(--red-700); }

.bk-l-upq-b{
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.bk-l-upq-name{
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}

.bk-l-upq-name b{
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-l-upq-size{
  flex: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bk-l-upq-st{
  font-size: 11.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bk-l-upq-row.is-error .bk-l-upq-st{ color: var(--red-700); }
.bk-l-upq-row.is-paused .bk-l-upq-st{ color: var(--gold-700); }

.bk-l-upq-act{
  display: flex;
  align-items: center;
  gap: var(--s-1);
}


/* ---------------------------------------------------------------------------
   6. One book
   --------------------------------------------------------------------------- */

.bk-l-detail{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.bk-l-dhead{
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  animation: rise-in var(--t-base) var(--ease-out) backwards;
}

.bk-l-dcover{
  width: 200px;
}

.bk-l-dinfo{
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.bk-l-dtitle-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.bk-l-dtitles{
  min-width: 0;
}

.bk-l-dtitle{
  font-family: var(--f-read);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.bk-l-dtitle:focus{
  outline: none;
}

.bk-l-dauthor{
  margin-top: var(--s-1);
  font-size: 14px;
  color: var(--muted);
}

.bk-l-dauthor.is-empty{
  color: var(--gray-500);
}

.bk-l-status{
  flex-wrap: wrap;
  align-self: flex-start;
}

.bk-l-dprog{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 520px;
}

.bk-l-facts{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin: 0;
}

.bk-l-fact dt,
.bk-l-mini-r dt{
  font-size: 11px;
  color: var(--muted);
}

.bk-l-fact dd,
.bk-l-mini-r dd{
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.bk-l-dacts{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.bk-l-dfile{
  overflow-wrap: anywhere;
}

.bk-l-dgrid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-5);
}

.bk-l-dside{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.bk-l-purpose{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.bk-l-purpose-b{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--f-ui);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.bk-l-purpose-b b{
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.bk-l-purpose-b span{
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
}

.bk-l-purpose-b:hover{
  background: var(--gray-50);
}

.bk-l-purpose-b.is-on{
  border-color: var(--gold-600);
  background: var(--gold-100);
}

.bk-l-purpose-b.is-on span{
  color: var(--gold-700);
}

.bk-l-why-row{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
}

.bk-l-why-col{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.bk-l-stars{
  display: flex;
  gap: var(--s-1);
}

.bk-l-star{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--gray-300);
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-base) var(--ease-spring);
}

.bk-l-star:hover{
  color: var(--gold-600);
}

.bk-l-star.is-on{
  color: var(--gold);
}

.bk-l-star:active{
  transform: scale(.92);
}

.bk-l-journal-stars{
  display: inline-flex;
  gap: var(--s-1);
  color: var(--gray-300);
}

.bk-l-journal-stars .is-on{
  color: var(--gold);
}

.bk-l-mini-l{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-4);
  margin: 0;
}

.bk-l-hl-list{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-hl{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-left: var(--s-4);
  border-left: 3px solid var(--gold);
}

.bk-l-hl--green{ border-left-color: var(--green); }
.bk-l-hl--blue{ border-left-color: var(--blue); }
.bk-l-hl--red{ border-left-color: var(--red); }
.bk-l-hl--ink{ border-left-color: var(--navy); }

.bk-l-quote{
  margin: 0;
  font-family: var(--f-read);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.bk-l-hl-note{
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--gray-50);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}

.bk-l-hl-m{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.bk-l-hl-acts{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.bk-l-journal{
  border-top: 3px solid var(--gold);
  animation: rise-in var(--t-base) var(--ease-out) backwards;
}

.bk-l-dfoot{
  display: flex;
  justify-content: flex-end;
}

.bk-l-danger-plain{
  color: var(--red-700);
}

.bk-l-danger-plain .ic{
  color: var(--red-700);
}


/* ---------------------------------------------------------------------------
   7. Shelves dialog
   --------------------------------------------------------------------------- */

.bk-l-shelves{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.bk-l-shelves-list{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-shelves-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s-2);
}

.bk-l-shelves-add{
  display: flex;
  gap: var(--s-2);
}

.bk-l-shelves-add .ui-input{
  flex: 1 1 auto;
  min-width: 0;
}


/* ---------------------------------------------------------------------------
   8. Page heads (notebook, review, statistics, settings, trash)
   --------------------------------------------------------------------------- */

.bk-l-page-h{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}

.bk-l-page-ht{
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.bk-l-page-ht h2:focus{
  outline: none;
}

.bk-l-page-acts{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}


/* ---------------------------------------------------------------------------
   9. Notebook
   --------------------------------------------------------------------------- */

.bk-l-nb,
.bk-l-rv,
.bk-l-st,
.bk-l-set,
.bk-l-tr{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.bk-l-nb-tools{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.bk-l-nb-selects{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-width: 0;
}

.bk-l-nb-selects .bk-l-sort-s{
  max-width: 180px;
  text-overflow: ellipsis;
}

.bk-l-sort.is-set{
  border-color: var(--navy);
}

.bk-l-mchip .bk-l-mdot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

.bk-l-mchip--green .bk-l-mdot{ background: var(--green); }
.bk-l-mchip--blue .bk-l-mdot{ background: var(--blue); }
.bk-l-mchip--red .bk-l-mdot{ background: var(--red); }

.bk-l-nb-ul{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-nb-card{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-left: 3px solid var(--gold);
  animation: rise-in var(--t-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.bk-l-nb-card.bk-l-hl--green{ border-left-color: var(--green); }
.bk-l-nb-card.bk-l-hl--blue{ border-left-color: var(--blue); }
.bk-l-nb-card.bk-l-hl--red{ border-left-color: var(--red); }
.bk-l-nb-card.bk-l-hl--ink{ border-left-color: var(--navy); }

.bk-l-nb-src{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
}

.bk-l-nb-book{
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.bk-l-nb-book:hover{
  color: var(--gold-700);
}

.bk-l-hl-note.is-main{
  padding: 0;
  background: transparent;
  font-size: 14px;
}

.bk-l-tags{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-tag{
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  background: var(--gray-100);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
}

.bk-l-nb-acts{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px solid var(--gray-100);
}

.bk-l-nb-more{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.bk-l-nb-more:empty{
  display: none;
}

.bk-l-apply{
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--gold-a05);
}

/* The button is the target (32, 44 on touch); the box inside is the look. */
.bk-l-apply-check{
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: calc(var(--s-1) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}

.bk-l-apply-box{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--gray-400);
  border-radius: calc(var(--r-sm) - 4px);
  background: var(--white);
  color: transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.bk-l-apply-check:hover .bk-l-apply-box{
  border-color: var(--navy);
}

.bk-l-apply.is-done .bk-l-apply-box{
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
}

.bk-l-apply-b{
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.bk-l-apply-t{
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}

.bk-l-apply.is-done .bk-l-apply-t{
  color: var(--muted);
  text-decoration: line-through;
}

.bk-l-edit{
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.bk-l-edit-q{
  padding-left: var(--s-3);
  border-left: 3px solid var(--gold);
  font-size: 14px;
}


/* ---------------------------------------------------------------------------
   10. Review
   --------------------------------------------------------------------------- */

.bk-l-rv-stage{
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
  max-width: 680px;
}

.bk-l-rv-prog{
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.bk-l-rv-prog .bk-l-line{
  flex: 1 1 auto;
}

.bk-l-rv-count{
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.bk-l-rv-card{
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border-top: 3px solid var(--gold);
  background: var(--bk-paper-cream);
  animation: rise-in var(--t-base) var(--ease-out) backwards;
}

.bk-l-rv-card.bk-l-hl--green{ border-top-color: var(--green); }
.bk-l-rv-card.bk-l-hl--blue{ border-top-color: var(--blue); }
.bk-l-rv-card.bk-l-hl--red{ border-top-color: var(--red); }

.bk-l-rv-k{
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-700);
}

.bk-l-rv-q{
  font-size: 17px;
  line-height: 1.65;
  color: var(--bk-ink-cream);
}

.bk-l-rv-word{
  font-family: var(--f-read);
  font-size: 26px;
  font-weight: 600;
  color: var(--bk-ink-cream);
}

.bk-l-rv-ctx{
  font-size: 15px;
  color: var(--bk-ink-cream);
}

.bk-l-rv-src a{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
}

.bk-l-rv-src a:hover{
  color: var(--gold-700);
}

.bk-l-rv-note{
  background: var(--white);
}

.bk-l-rv-reveal{
  align-self: flex-start;
}

.bk-l-rv-grades{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}

.bk-l-grade{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--f-ui);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-base) var(--ease-spring);
}

.bk-l-grade b{
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.bk-l-grade span{
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bk-l-grade:hover{
  border-color: var(--navy);
  background: var(--gray-50);
}

.bk-l-grade:active{
  transform: scale(.97);
}

.bk-l-grade--again b{ color: var(--red-700); }
.bk-l-grade--easy b{ color: var(--green-700); }

.bk-l-rv-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}


/* ---------------------------------------------------------------------------
   11. Statistics

   Columns follow the Reports rule: the number sits on every bar, a day with
   nothing keeps a hairline, the plot scrolls inside itself on a phone and a
   table with the same values follows.
   --------------------------------------------------------------------------- */

.bk-l-st-body{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.bk-l-st-top{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

.bk-l-st-meter{
  justify-content: center;
}

.bk-l-st-two{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-5);
}

.bk-l-plot-scroll{
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--s-1);
}

.bk-l-plot{
  display: grid;
  grid-template-columns: repeat(var(--bk-cols, 30), minmax(18px, 1fr));
  align-items: end;
  gap: var(--s-1);
  min-height: 168px;
}

.bk-l-plot--weeks{
  grid-template-columns: repeat(var(--bk-cols, 12), minmax(36px, 1fr));
}

.bk-l-col{
  display: grid;
  grid-template-rows: auto 120px auto;
  justify-items: center;
  gap: var(--s-1);
  min-width: 0;
}

.bk-l-col-v{
  min-height: 14px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.bk-l-col-track{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 120px;
  border-bottom: 1px solid var(--gray-200);
}

.bk-l-bar{
  display: block;
  width: min(100%, 22px);
  height: var(--bk-h, 0%);
  border-radius: calc(var(--r-sm) - 7px) calc(var(--r-sm) - 7px) 0 0;
  background: var(--gold-300);
  transform-origin: bottom;
  animation: bk-l-grow var(--t-slow) var(--ease-out) backwards;
}

.bk-l-bar.is-today{
  background: var(--gold);
}

.bk-l-bar.is-zero{
  height: 1px;
  background: var(--gray-300);
}

@keyframes bk-l-grow{
  from{ transform: scaleY(0); }
}

.bk-l-col-x{
  min-height: 14px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--gray-600);
  white-space: nowrap;
}

.bk-l-table-d summary{
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-700);
  cursor: pointer;
}

.bk-l-table-d[open] summary{
  margin-bottom: var(--s-2);
}

.bk-l-table .is-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bk-l-st-year{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.bk-l-st-yh{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13.5px;
  color: var(--navy);
}

.bk-l-st-covers{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-st-cover{
  display: block;
  width: 64px;
  border-radius: var(--r-sm);
}

.bk-l-st-cover:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.bk-l-st-pace{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--gray-100);
}

.bk-l-st-pl{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-st-pl li{
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 13px;
}

.bk-l-st-pl a{
  overflow: hidden;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-l-st-pv{
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}


/* ---------------------------------------------------------------------------
   12. Settings
   --------------------------------------------------------------------------- */

.bk-l-set-form{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.bk-l-set-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.bk-l-set-grid > [data-span="2"],
.bk-l-set-sub{
  grid-column: 1 / -1;
}

.bk-l-set-sub{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  background: var(--gray-50);
}

.bk-l-set-sub[hidden]{
  display: none;
}

.bk-l-set-ai{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--gray-100);
}

.bk-l-set-key{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
}

.bk-l-set-key.is-on{
  color: var(--green-700);
}

.bk-l-set-foot{
  display: flex;
  justify-content: flex-end;
}


/* ---------------------------------------------------------------------------
   13. Trash
   --------------------------------------------------------------------------- */

.bk-l-tr-ul{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-tr-row{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
}

.bk-l-tr-cover{
  display: block;
  width: 56px;
  opacity: .8;
}

.bk-l-tr-b{
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.bk-l-tr-t{
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-l-tr-a{
  font-size: 12px;
  color: var(--muted);
}

.bk-l-tr-acts{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
}


/* ---------------------------------------------------------------------------
   14. The reading card on Home (books/home-card.js, owner only)
   --------------------------------------------------------------------------- */

.bk-l-hhost[hidden]{
  display: none;
}

.bk-l-hcard{
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}

.bk-l-hc-main{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-6);
}

.bk-l-hc-book{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
}

.bk-l-hc-cover{
  display: block;
  width: 64px;
}

.bk-l-hc-b{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  min-width: 0;
}

.bk-l-hc-b .bk-l-line{
  align-self: stretch;
  max-width: 320px;
  margin-top: var(--s-1);
}

.bk-l-hc-t{
  font-family: var(--f-read);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

.bk-l-hc-t:hover{
  color: var(--gold-700);
}

.bk-l-hc-a,
.bk-l-hc-f{
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bk-l-hc-go{
  margin-top: var(--s-2);
}

.bk-l-hc-none{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

.bk-l-hc-side{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.bk-l-hc-streak,
.bk-l-hc-due{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12.5px;
  color: var(--ink);
}

.bk-l-hc-streak .ic{
  color: var(--gold-600);
}

.bk-l-hc-due{
  align-self: flex-start;
  min-height: 32px;
  font-weight: 600;
  color: var(--navy);
}

.bk-l-hc-due:hover{
  color: var(--gold-700);
}

.bk-l-hc-quote{
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bk-paper-cream);
  color: inherit;
  transition: background var(--t-fast);
}

.bk-l-hc-quote:hover{
  background: var(--gold-100);
}

.bk-l-hc-q{
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-family: var(--f-read);
  font-size: 14px;
  line-height: 1.55;
  color: var(--bk-ink-cream);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}


/* ---------------------------------------------------------------------------
   15. Narrower screens
   --------------------------------------------------------------------------- */

@media (max-width: 1180px){
  .bk-l-st-top{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px){
  .bk-l-dgrid,
  .bk-l-st-two{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px){
  .bk-l-host{
    gap: var(--s-4);
  }

  .bk-l-fab{
    display: inline-flex;
  }

  .bk-l-upq{
    right: calc(var(--s-3) + var(--safe-r));
    left: calc(var(--s-3) + var(--safe-l));
    bottom: calc(var(--bottombar-h) + var(--safe-b) + var(--fab-h) + var(--s-6));
    width: auto;
    max-height: 46vh;
  }

  .bk-l-lib{
    gap: var(--s-5);
  }

  .bk-l-hero{
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--s-4);
  }

  .bk-l-hero-cover{
    width: 96px;
  }

  .bk-l-hero-t{
    font-size: 17px;
  }

  .bk-l-hero-go{
    grid-column: 1 / -1;
  }

  .bk-l-lib-find{
    flex: 1 1 100%;
  }

  .bk-l-shelf{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-4);
  }

  .bk-l-back,
  .bk-l-trash-link,
  .bk-l-hc-due,
  .bk-l-sort,
  .bk-l-nb-book,
  .bk-l-rv-src a,
  .bk-l-table-d summary{
    min-height: 44px;
  }

  .bk-l-nb-book,
  .bk-l-rv-src a{
    display: inline-flex;
    align-items: center;
  }

  /* summary keeps display: list-item, or its disclosure marker goes. */
  .bk-l-table-d summary{
    padding: var(--s-3) 0;
  }

  .bk-l-star,
  .bk-l-apply-check{
    width: 44px;
    height: 44px;
  }

  .bk-l-apply-check{
    margin: calc(var(--s-3) * -1);
  }

  .bk-l-dhead{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--s-4);
  }

  .bk-l-dcover{
    width: 150px;
    justify-self: center;
  }

  .bk-l-dtitle{
    font-size: 19px;
  }

  .bk-l-block{
    padding: var(--s-4);
  }

  .bk-l-hc-main{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

  .bk-l-hcard{
    padding: var(--s-4);
  }

  .bk-l-rv-card{
    padding: var(--s-5) var(--s-4);
  }

  .bk-l-rv-q{
    font-size: 16px;
  }

  .bk-l-rv-grades{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 719.98px){
  .bk-l-purpose,
  .bk-l-why-row,
  .bk-l-set-grid,
  .bk-l-set-sub,
  .bk-l-st-top{
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-l-tr-row{
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .bk-l-tr-cover{
    width: 48px;
  }

  .bk-l-tr-acts{
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .bk-l-shelves-row{
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .bk-l-shelves-row .note{
    display: none;
  }

  .bk-l-dacts .btn{
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .bk-l-bar{
    animation: none;
  }
}

/* == wave 2 (W2) == */
/* Search inside books (library.js) and the Words page (words.js), with the
   due words link of the Review page. Everything below belongs to W2; every
   class starts with bk-l-, every colour is a token. */

/* The ring of a focused search sits on its label (layout.css): the input
   itself must not draw a second one inside it. */
.bk-l-search input:focus-visible{
  box-shadow: none;
}

/* The "Inside books" toggle beside the title search. */
.bk-l-inside{
  flex: none;
  justify-content: center;
  min-height: 38px;
}

.bk-l-lib-row.is-inside .bk-l-lib-find{
  flex: 1 1 560px;
  max-width: 640px;
}

/* The results: pages grouped by book, then notes and highlights. */
.bk-l-sr{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.bk-l-sr-head{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.bk-l-sr-head:first-child{
  margin-top: 0;
}

.bk-l-sr-head h3{
  margin: 0;
  color: var(--navy);
  font-size: 15px;
}

.bk-l-sr-books{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.bk-l-sr-book{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-5);
  animation: rise-in var(--t-base) var(--ease-out) backwards;
}

.bk-l-sr-cover{
  display: block;
  width: 56px;
}

.bk-l-sr-b{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.bk-l-sr-t{
  margin: 0;
  font-family: var(--f-read);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.bk-l-sr-t a{
  color: var(--navy);
  text-decoration: none;
}

.bk-l-sr-t a:hover{
  text-decoration: underline;
}

.bk-l-sr-a{
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.bk-l-sr-hits{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-sr-hits > li + li{
  border-top: 1px solid var(--gray-100);
}

.bk-l-sr-hit{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s-3);
  min-height: 44px;
  padding: 10px var(--s-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--t-fast);
}

.bk-l-sr-hit:hover{
  background: var(--gray-50);
}

.bk-l-sr-hit:focus-visible,
.bk-l-sr-mk:focus-visible,
.bk-l-wd-src:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.bk-l-sr-pg{
  padding-top: 2px;
  color: var(--gold-700);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.bk-l-sr-snip{
  min-width: 0;
  font-family: var(--f-read);
  font-size: 14.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.bk-l-sr-hl,
.bk-l-wd-hl{
  padding: 0 1px;
  border-radius: 3px;
  background: var(--bk-hl-gold);
  color: inherit;
}

.bk-l-sr-marks{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
}

.bk-l-sr-mk{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 10px var(--s-3) 10px var(--s-4);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--t-fast);
}

.bk-l-sr-mk:hover{
  background: var(--gray-50);
}

.bk-l-sr-mk--green{ border-left-color: var(--green); }
.bk-l-sr-mk--blue{ border-left-color: var(--blue); }
.bk-l-sr-mk--red{ border-left-color: var(--red); }
.bk-l-sr-mk--ink{ border-left-color: var(--navy); }

.bk-l-sr-mk-src{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.bk-l-sr-mk-q{
  font-family: var(--f-read);
  font-size: 14.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.bk-l-sr-mk-n{
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* The Words page. */
.bk-l-wd{
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.bk-l-wd-tools:empty{
  display: none;
}

.bk-l-wd-search{
  flex: 0 1 420px;
}

.bk-l-wd-count{
  margin: 0 0 var(--s-2);
}

.bk-l-wd-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-l-wd-card{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4) var(--s-5) var(--s-3);
  animation: rise-in var(--t-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.bk-l-wd-card.is-due{
  border-color: var(--gold-300);
}

.bk-l-wd-top{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}

.bk-l-wd-word{
  margin: 0 auto 0 0;
  color: var(--navy);
  font-family: var(--f-read);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.bk-l-wd-due{
  background: var(--gold-100);
  color: var(--gold-700);
}

.bk-l-wd-mean{
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.bk-l-wd-mean.is-empty{
  color: var(--muted);
  font-style: italic;
}

.bk-l-wd-ctx{
  margin: 0;
  font-size: 14px;
}

.bk-l-wd-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--gray-100);
}

.bk-l-wd-src{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.bk-l-wd-src span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-l-wd-src:hover span{
  text-decoration: underline;
}

.bk-l-wd-acts{
  display: flex;
  flex: none;
  gap: 4px;
}

.bk-l-wd-edit{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.bk-l-wd-area{
  min-height: 110px;
  resize: vertical;
}

.bk-l-wd-ask-note[hidden]{
  display: none;
}

@media (max-width: 719.98px){
  .bk-l-inside{
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--s-2);
  }

  .bk-l-inside-l{
    display: none;
  }

  .bk-l-sr-book{
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
  }

  .bk-l-sr-cover{
    width: 44px;
  }

  .bk-l-sr-hit{
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--s-2);
    padding-inline: var(--s-1);
  }

  .bk-l-wd-list{
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-l-wd-src{
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce){
  .bk-l-sr-book,
  .bk-l-wd-card{
    animation: none;
  }
}