/* Skimmaxxer library: the landing page and the shelf.

   These two pages are an application; the reader is a document. What they
   share with it - the palette, the face, the rail and the theme control - is
   declared once in style.css and not restated here. This sheet only lays the
   library pages out, and everything in it is scoped to body.library so nothing
   leaks into read.html.

   The system is quiet in shape and modern in finish. One face, DM Sans,
   setting the titles and the text both - one accent with two stops past it,
   hairline borders, two shadow steps. There is one hue, and it is blue on
   white. The page is white and so is every card, panel and field on it: a
   hairline and a shadow tell a surface from the page, never a wash across it.
   What is left of the gradient is the one button that is the way forward, the
   thin marks that point at something - a rule, a stripe, a bar - and the
   wordmark. Nothing moves on scroll.

   Colour still says one thing only. The accent means "this is the way forward"
   and appears on the primary button, on the current step, and on the column a
   reader should land on. The four depth stops (--d0..--d3) come from style.css
   untouched, because a level of the narrative means the same thing on the
   shelf as it does inside a paper. */

/* ---------- base ---------- */

body.library {
  /* White, flat, and the full width of the window. Nothing is washed over it:
     colour on these pages is always something sitting on the paper, never the
     paper itself. One prose size across the library pages, 16px: every
     paragraph on them inherits this and none sets its own. */
  font-size: 16px;
  line-height: 1.6;
}
body.library h1,
body.library h2,
body.library h3,
body.library h4 {
  font-family: var(--display);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* The rail floats over the page, so anything a link can jump to clears it. */
body.library [id] { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- page frame ---------- */

.home {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) 120px;
}

.dot { color: var(--ink-faint); margin: 0 7px; }

/* ---------- buttons ---------- */

/* Every way into a paper is a door. One shape, two weights: the filled one is
   the way forward, and there is never more than one of it in view. */
.door {
  display: inline-flex;
  align-items: center;
  gap: 8.75px;
  height: 50px;
  padding: 0 21.25px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: 500 17.5px var(--sans);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.door:hover { background: var(--surface-soft); border-color: var(--ink-faint); color: var(--ink); }
.door:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The one saturated object on a page. It runs the whole accent family, and
   carries the only cast light in the design, so that the way forward is the
   brightest thing in view without being the largest. */
.door-main {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
  padding: 0 19px;
  box-shadow: var(--shadow-sm), var(--glow);
}
/* hover moves the gradient along rather than swapping the colour under it */
.door-main:hover {
  background: linear-gradient(118deg, var(--accent) -22%, var(--accent-2) 38%, var(--accent-3) 96%);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--shadow-sm), var(--glow-lift);
}

.door-note { font: 500 12.5px var(--sans); color: var(--ink-faint); }

/* ---------- headings ---------- */

.shelf { margin: 96px 0 0; }

/* The h2 of the page, a clear step below the h1 above it. Set in capitals,
   which want the opposite tracking to the lower case they replace - a face
   tightened at heading sizes opens up again in caps. The count chip keeps its
   own case and spacing. Named through the body so it outranks the tracking
   the base heading rule cuts for lower case. */
body.library .section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 700 clamp(21px, 2.2vw, 27px)/1.15 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.012em;
  color: var(--ink);
  margin: 0 0 16px;
}
.section-head .section-n {
  font: 500 16.25px var(--sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2.5px 11.25px;
}
.section-note {
  max-width: 62rem;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
/* the part a reader can act on carries the weight */
.section-note strong { font-weight: 600; color: var(--ink); }

.tally { font: 500 16.25px var(--sans); color: var(--ink-soft); margin: 0; }

/* ---------- the request book head ---------- */

.hero { padding: 52px 0 8px; }
.hero-text { max-width: 40rem; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
}
.hero .lede { font-size: 22.5px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.55; }

/* ---------- a paper read in full ---------- */

.paper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.paper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 28px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.paper:hover {
  box-shadow: var(--shadow), var(--glow);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.paper-id {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 500 12.5px var(--sans);
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.paper-src { color: var(--ink-faint); text-decoration: none; }
.paper-src:hover { color: var(--accent-text); }

.paper-title {
  margin: 0 0 6px;
  font: 700 clamp(21px, 2.2vw, 26px)/1.15 var(--display);
  letter-spacing: -0.012em;
}
.paper-title a { color: var(--ink); text-decoration: none; }
.paper-title a:hover { color: var(--accent-text); }
.paper-authors { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.45; }

/* chapters at each level of zoom */
.depth-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
}
.depth-row li { margin: 0; }
.dr-track {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--line-soft);
  margin-bottom: 8px;
  overflow: hidden;
}
.dr-track i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--depth) 45%, transparent) 0%, var(--depth) 100%);
}
.dr-key {
  display: block;
  font: 600 10.5px var(--sans);
  letter-spacing: 0.07em;
  color: var(--depth-ink);
}
.dr-n { display: block; font: 500 16px var(--sans); color: var(--ink); margin-top: 1px; }

/* ---------- what is inside a paper, four ways ---------- */

.panels { position: relative; margin: 2px 0 20px; }
/* the list runs past the bottom of the card; say so */
.panels::after {
  content: "";
  position: absolute;
  left: 0;
  right: 10px;
  bottom: 0;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--surface-end));
  pointer-events: none;
}
.tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 14px;
}
.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 10px;
  font: 500 13.5px var(--sans);
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.tab:hover { color: var(--ink); }
/* the same 2px underline, painted into the border box so it can run the accent */
.tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-3));
  background-origin: border-box;
  background-clip: border-box;
  background-position: left bottom;
  background-size: 100% 2px;
  background-repeat: no-repeat;
}
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.tab-n { font: 500 11px var(--sans); color: var(--ink-faint); margin-left: 6px; }

.panel { height: 322px; overflow-y: auto; padding-right: 10px; }
.panel[hidden] { display: none; }
.panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 42%, var(--line)),
    color-mix(in srgb, var(--accent-3) 42%, var(--line)));
  border-radius: 3px;
}
.panel::-webkit-scrollbar-track { background: none; }
.panel { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

.panel-intro {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.entries { list-style: none; margin: 0; padding: 0; }
.entries li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.entries li:last-child { border-bottom: 0; }
.entry {
  display: block;
  padding: 11px 0;
  color: inherit;
  text-decoration: none;
}
a.entry:hover .ent-name { color: var(--accent-text); }
a.entry:hover .ent-name::after { opacity: 1; transform: none; }
a.entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.ent-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 14px var(--sans);
  color: var(--ink);
  line-height: 1.35;
  margin: 0;
}
a.entry .ent-name::after {
  content: "\2192";
  flex: 0 0 auto;
  font-weight: 500;
  color: var(--accent-text);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.ent-meta {
  flex: 0 0 auto;
  margin-left: auto;
  font: 500 11.5px var(--sans);
  color: var(--ink-faint);
}
.ent-line { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 3px 0 0; }

.panel-more {
  display: inline-block;
  margin: 14px 0 0;
  font: 500 13px var(--sans);
  color: var(--accent-text);
  text-decoration: none;
}
.panel-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.paper-doors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.paper-doors .door { height: 45px; font-size: 16.88px; }

/* ---------- papers read only where they were needed ---------- */

.narrow-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.narrow {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* the ask sits on the floor of its card, so a row of cards has one line of
   buttons rather than a ragged one */
.narrow > button.ask { margin-top: auto; align-self: flex-start; }
.narrow:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: var(--shadow-sm), var(--glow);
}
.narrow-id { font: 500 12.5px var(--sans); color: var(--ink-faint); margin: 0 0 8px; }
.narrow-title { font: 600 17.5px/1.25 var(--display); letter-spacing: -0.01em; margin: 0 0 4px; }
.narrow-title a { color: var(--ink); text-decoration: none; }
.narrow-title a:hover { color: var(--accent-text); }
.narrow-authors { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 12px; }

.narrow-concepts { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13.5px; }
.narrow-concepts li { display: inline; margin: 0; }
.narrow-concepts li::after { content: "\00b7"; color: var(--ink-faint); margin: 0 7px; }
.narrow-concepts li:last-child::after { content: none; }
.narrow-concepts a { color: var(--ink-soft); text-decoration: none; }
.narrow-concepts a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

.narrow-for { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 14px; line-height: 1.55; }
.for-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-right: 8px;
  color: var(--ink-faint);
}
.narrow-for a { color: var(--ink-faint); text-decoration: none; }
.narrow-for a:hover { color: var(--accent-text); }
.narrow-for .dot { margin: 0 5px; }

/* ---------- the one instruction on the shelf ---------- */

.shelf-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 36px;
  margin: 22px 0 4px;
  padding: 26px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.sc-lead {
  grid-column: 1;
  margin: 0;
  font: 700 clamp(20px, 2.2vw, 25px)/1.2 var(--display);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.sc-body {
  grid-column: 1;
  margin: 0;
  max-width: 46rem;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.sc-cta { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; align-self: center; }

/* ---------- how to use this ---------- */

.how-to { max-width: 48rem; }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 24px 0 0;
  padding: 0;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 25px 38px;
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font: 600 12px/22px var(--sans);
  text-align: center;
  color: var(--accent-text);
}

.step-what { margin: 0 0 6px; font: 600 16px/1.4 var(--sans); color: var(--ink); }
.step-body { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.steps .step-body + .step-body { margin-top: 8px; }

/* The two views, named. A small enclosed list rather than loose bullets: it is
   a menu of what a paper opens into, and reads better as one object. */
.ways {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.ways li { margin: 0; padding: 13px 16px; }
.ways li + li { border-top: 1px solid var(--line-soft); }
.way-name { display: block; font: 600 14.5px var(--sans); color: var(--ink); }
.way-what { display: block; margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- foot ---------- */

.site-foot {
  max-width: 46rem;
  margin: 96px 0 0;
  padding-top: 24px;
  /* the same 1px, fading in and out rather than ruling the full width */
  border-top: 1px solid transparent;
  background-image: var(--hairline);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-size: 100% 1px;
  background-position: left top;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-faint);
}
.site-foot p { margin: 0 0 10px; }
.site-foot p:last-child { margin-bottom: 0; }
.site-foot .foot-label {
  font: 600 14.38px var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
/* The footer carries two policies now. A label that is not the first one opens
   a second block, so it needs the air a heading gets rather than the 10px
   between paragraphs. */
.site-foot .foot-label:not(:first-child) { margin-top: 26px; }
.site-foot a { color: var(--ink-soft); }
.site-foot code { background: none; color: var(--ink-soft); font-size: 16.25px; padding: 0; }

/* ---------- asking for a paper ---------- */

button.ask {
  appearance: none;
  margin: 14px 0 0;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: 500 12.5px var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
button.ask::after { content: " \2192"; }
button.ask:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--ink);
  background: var(--surface-soft);
}
button.ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ask-form {
  max-width: 42rem;
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ask-target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0;
  padding: 15px 18px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
}
.ask-target[hidden] { display: none; }
.ask-label { font-size: 13px; color: var(--ink-faint); }
.ask-target strong { font: 600 15px var(--sans); color: var(--ink); }
.ask-id { font: 500 12.5px var(--sans); color: var(--ink-faint); }
.ask-clear {
  appearance: none;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: 12.5px var(--sans);
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ask-clear:hover { color: var(--accent-text); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font: 500 13.5px var(--sans); color: var(--ink); }
.field .opt { color: var(--ink-faint); font-weight: 400; }
.field input,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  font: 15px var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.field-note { font-size: 12.5px; color: var(--ink-faint); margin: -6px 0 0; }

/* the field only a bot fills in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ask-actions .door-main[disabled] { opacity: 0.5; cursor: default; }
.form-msg { font-size: 13.5px; color: var(--ink-faint); margin: 0; }
.form-msg.good { color: var(--green); }
.form-msg.bad { color: var(--red); }

/* ---------- the request book (admin) ---------- */

.req-list { display: grid; gap: 12px; margin-top: 26px; }
.req {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.req-when { font: 500 15.62px var(--sans); color: var(--ink-faint); margin: 0 0 8px; }
.req-what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  font: 600 19.38px var(--sans);
  color: var(--ink);
  margin: 0;
}
.req-kind {
  font: 600 13.12px var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--d0-ink);
  background: var(--d0-soft);
  border-radius: 999px;
  padding: 3px 9px;
}
.req-kind.new { color: var(--d3-ink); background: var(--d3-soft); }
.req-note { font-size: 18.75px; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.55; }
.req-who { font-size: 16.25px; color: var(--ink-faint); margin: 10px 0 0; }
.req-who a { color: var(--ink-faint); }
.req-who a:hover { color: var(--accent-text); }

.link-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--accent-text); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .shelf { margin-top: 72px; }
}

@media (max-width: 780px) {
  .shelf-callout { grid-template-columns: 1fr; padding: 22px 22px 24px; }
  .sc-cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
}

@media (max-width: 760px) {
  body.library { --gutter: 20px; }
  .home { padding-bottom: 88px; }
  .paper-grid { grid-template-columns: 1fr; }
  .paper { padding: 22px 20px; }
  .narrow-list { grid-template-columns: 1fr; }
  .tally { line-height: 1.9; }
}

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .depth-row { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }
}

/* ---------- the working pages read smaller ---------- */

/* The landing argues and keeps its display sizes; the shelf and the request
   book are working pages and read smaller. Only the rules both kinds of page
   share need the scope - everything the working pages alone render is sized
   at source. */
body.library:not(.landing) .section-head { font-size: clamp(18.5px, 2.1vw, 25.5px); }
body.library:not(.landing) .section-head .section-n { font-size: 13px; padding: 2px 9px; }
body.library:not(.landing) .door { height: 40px; padding: 0 17px; gap: 7px; font-size: 14px; }
body.library:not(.landing) .door-main { padding: 0 15px; }
body.library:not(.landing) .paper-doors .door { height: 36px; font-size: 13.5px; }
body.library:not(.landing) .site-foot { font-size: 14.5px; }
body.library:not(.landing) .site-foot .foot-label { font-size: 11.5px; }
body.library:not(.landing) .site-foot code { font-size: 13px; }