/*
Filename: style.css
Description: The look of library.ckg.re, by the rules of the typography folder.
Author: SCS
Copyright: Copyright (C) 2026, SCS, all rights reserved.
Created: 2026-11-08 Sun 12:55
Version: 0.1.0
Last-Updated: 2026-11-08 Sun 13:17
Update #: 2
*/

* { box-sizing: border-box; }

html { background: #ffffff; color: #000000; }

body {
  margin: 0;
  background: #ffffff;
  color: #000000;
  font: 1.05rem/1.5 Georgia, "Times New Roman", "Noto Serif Bengali", "Kohinoor Bangla", serif;
}

a { color: var(--plenitude-blue); text-decoration-color: var(--plenitude-blue); }

h1, h2 { color: var(--plenitude-blue); font-weight: normal; line-height: 1.2; }

h1 { font-size: 1.7rem; margin: 0.4rem 0 0.6rem; }

main { max-width: 46rem; margin: 0 auto; padding: 1rem; }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  padding: 0.4rem 1rem;
  background: #ffffff;
  border-bottom: 1px solid #c4c4c4;
}

.home {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--plenitude-blue);
  font-size: 1.2rem;
  text-decoration: none;
}

.home img { display: block; }

.out { margin-left: auto; }

footer {
  text-align: center;
  color: #5f5f5f;
  font-size: 0.85rem;
  padding: 2rem 1rem 3rem;
  border-top: 1px solid #e6e6e6;
}

.crumb { margin: 0 0 0.2rem; font-size: 0.95rem; }

.shelf, .parts { list-style: none; margin: 1rem 0; padding: 0; }

.shelf li { padding: 0.8rem 0; border-bottom: 1px solid #e6e6e6; }

.shelf a { font-size: 1.2rem; }

.shelf p { margin: 0.2rem 0 0; }

.parts li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.8rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid #e6e6e6;
}

.parts .count { color: #5f5f5f; font-size: 0.9rem; margin-right: auto; }

.lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 0.5rem; }

.lookup label { width: 100%; }

input {
  background: #ffffff;
  color: #000000;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  font: inherit;
  padding: 0.35rem 0.5rem;
}

.lookup input { flex: 1 1 12rem; min-width: 0; }

.button {
  background: var(--leaf-green);
  color: #ffffff;
  border: 0;
  border-radius: 3px;
  font: inherit;
  padding: 0.4rem 1.2rem;
  cursor: pointer;
}

.found { margin: 0.5rem 0 1.5rem; padding-left: 1.6rem; }

.found li { margin: 0.25rem 0; }

.turn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }

main > .turn { margin: 0.8rem 0; justify-content: space-between; }

.turn .off { color: #5f5f5f; }

.turn button {
  background: #ffffff;
  color: #000000;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

.turn button:disabled { color: #5f5f5f; cursor: default; }

.turn input { width: 4.6rem; font-size: 0.95rem; padding: 0.2rem 0.3rem; }

.entry { margin: 0 0 0.9rem; scroll-margin-top: 1rem; }

.entry:target { border-left: 3px solid var(--kali-red); padding-left: 0.6rem; }

.hw { color: var(--plenitude-blue); }

.reader .bar { position: sticky; top: 0; z-index: 2; }

.reader .home img { width: 39px; height: 28px; }

.reader #part { color: #5f5f5f; font-size: 0.95rem; }

.reader #heading { margin: 0; width: 100%; font-size: 0.9rem; color: #5f5f5f; }

.reader #heading:empty { display: none; }

.reader main { max-width: 60rem; padding: 0.5rem 0; overflow-x: auto; }

@media (max-width: 40rem) {
  .reader .bar { position: static; gap: 0.3rem 0.5rem; padding: 0.3rem 0.5rem; }
  .reader #back { font-size: 0.95rem; }
  .reader #part, .reader #heading { font-size: 0.85rem; }
  .turn button { font-size: 0.85rem; padding: 0.15rem 0.45rem; }
  .turn input { width: 3.8rem; font-size: 0.85rem; padding: 0.1rem 0.2rem; }
  .turn label { font-size: 0.85rem; }
}

/* The page holder. The text layer lies over the drawn page, so the holder is
   the box that it is placed in. */
#page { position: relative; margin: 0 auto; background: #ffffff; }

#page canvas { display: block; }

#trouble { color: var(--kali-red); }

.entrance { display: flex; flex-direction: column; min-height: 100vh; }

.entrance .emblem { display: block; margin: 24px auto 12px; }

.entrance main { flex: 1 0 auto; width: 100%; }

.login { max-width: 22rem; margin: 0 auto; text-align: left; }

.login h1 { text-align: center; }

.login form { display: grid; gap: 0.3rem; margin-top: 1rem; }

.login label { color: #5f5f5f; font-size: 0.92rem; margin-top: 0.6rem; }

.login .button { justify-self: start; margin-top: 1.2rem; }

.said { color: var(--kali-red); margin: 0.6rem 0 0; }

.help { margin-top: 1.2rem; font-size: 0.95rem; }

/* The rules of the text layer are copied from web/pdf_viewer.css of
   pdfjs-dist, with their CSS nesting flattened, so that browsers without
   nesting read them too. PDF.js lays transparent text over the drawn page,
   which lets a member select and copy it. read.js sets --total-scale-factor
   on the page holder, and --text-scale-factor below takes it from there. */
.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  letter-spacing: normal;
  word-spacing: normal;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 0;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}

.textLayer span, .textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  user-select: text;
  -webkit-user-select: text;
}

.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.textLayer .markedContent { display: contents; }

.textLayer ::selection { background: rgba(0, 106, 165, 0.3); color: transparent; }

.textLayer br::selection { background: transparent; }

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.textLayer.selecting .endOfContent { top: 0; }