/* One narrow reading column on warm black; controls live in a bottom sheet. Dark only, by design.
   Values come from tokens.css; add a token there rather than a raw value here. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--bg); margin: 0; }
body {
  color: var(--ink);
  font-family: var(--serif);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
::selection { background: var(--faint); color: var(--ink); }

/* ---------- feed ---------- */
#feed {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: calc(env(safe-area-inset-top, 0px) + var(--lead-in)) 0;
  font-size: var(--size);
  line-height: var(--leading);
  font-weight: var(--weight-body);
  font-optical-sizing: auto;
  opacity: var(--glow);
}
#sentinel { height: 1px; }

.passage { padding-block: 0 var(--passage-gap); }
.passage + .passage::before {
  content: "· · ·";
  display: block;
  text-align: center;
  color: var(--faint);
  letter-spacing: 0.6em;
  margin-bottom: var(--passage-gap);
}
.shelf {
  font-family: var(--ui);
  font-size: 0.56em;
  letter-spacing: var(--tracking-shelf);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9em;
}
.passage h1 {
  font-size: 1.32em;
  line-height: 1.25;
  font-weight: var(--weight-title);
  margin: 0 0 1.1em;
  text-wrap: balance;
}
.source {
  font-style: italic;
  font-size: 0.8em;
  color: var(--muted);
  margin: -0.7em 0 1.6em;
}
.passage h2 {
  font-size: 1em;
  font-weight: var(--weight-subhead);
  font-style: italic;
  margin: 1.8em 0 0.5em;
  text-wrap: balance;
}
.passage p { margin: 0 0 1em; hyphens: auto; -webkit-hyphens: auto; }
.passage ul, .passage ol { margin: 0 0 1em; padding-left: 1.4em; }
.passage li { margin-bottom: 0.35em; }
.passage li::marker { color: var(--muted); }
.passage code {
  font-family: var(--mono);
  font-size: 0.82em;
}
.passage pre {
  font-family: var(--mono);
  font-size: 0.7em;
  line-height: 1.6;
  background: var(--wash);
  border-left: var(--line) solid var(--faint);
  padding: 0.9em 1.1em;
  margin: 0 0 1.3em;
  overflow-x: auto;
  white-space: pre;
}
.passage pre code { font-size: 1em; }
.note {
  border: var(--line) solid var(--faint);
  padding: 0.8em 1em 0.1em;
  margin: 0.4em 0 1.4em;
  font-size: 0.9em;
}
.note-label {
  display: block;
  font-family: var(--ui);
  font-size: 0.6em;
  letter-spacing: var(--tracking-note);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35em;
}
.empty {
  font-style: italic;
  color: var(--muted);
  text-align: center;
}

/* ---------- dimmer ---------- */
#dim {
  position: fixed;
  inset: 0;
  background: var(--night);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade-step) var(--ease-none);
  z-index: 30;
}
#dim.asleep { pointer-events: auto; }

/* ---------- controls ---------- */
button, input, textarea { font: inherit; color: inherit; }
button {
  font-family: var(--ui);
  font-size: var(--ui-size);
  background: transparent;
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  min-height: var(--touch);
  cursor: pointer;
  color: var(--ink);
}
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: var(--line) solid var(--muted);
  outline-offset: 2px;
}
button[aria-pressed="true"], button[aria-checked="true"] {
  background: var(--faint);
  border-color: var(--muted);
}
button.quiet { border-color: transparent; color: var(--muted); }
/* Offered at the end of a series part; quiet, so it never pulls the eye. */
.passage .deeper { display: block; margin: 0.5em 0 0 -1em; }
a.deeper { color: var(--muted); width: fit-content; padding: 0.5em 1em; min-height: var(--touch); box-sizing: border-box; text-decoration: none; font-family: var(--ui); font-size: var(--ui-size); display: flex; align-items: center; }
.passage .math.display { margin: 0 0 1em; overflow-x: auto; overflow-y: hidden; }
.passage .katex { font-size: 1em; }
/* Papers: three quiet choices under the abstract, and the full text over the feed. */
.paper-actions { display: flex; flex-wrap: wrap; margin: 0.5em 0 0 -1em; font-family: var(--ui); font-size: var(--ui-size); }
.passage.set-aside .source { margin: 0; }
.reader {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.reading { overflow: hidden; }
body.reading .corner { display: none; }
.reader-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--passage-gap));
  font-size: var(--size);
  line-height: var(--leading);
  font-weight: var(--weight-body);
  opacity: var(--glow);
}
.reader-top { font-family: var(--ui); font-size: var(--ui-size); margin-left: -1em; }
.paper-text h2, .paper-text h3, .paper-text h4, .paper-text h5, .paper-text h6 { font-size: 1em; font-weight: var(--weight-subhead); font-style: italic; margin: 1.8em 0 0.5em; }
.paper-text .title { margin-top: 1.8em; }
.paper-text p, .paper-text div > span { hyphens: auto; -webkit-hyphens: auto; }
.paper-text figure { margin: 1.4em 0; }
.paper-text figure img { max-width: 100%; height: auto; opacity: 0.55; filter: grayscale(1) invert(0.88); }
.paper-text figcaption { font-size: 0.8em; color: var(--muted); }
.paper-text table { border-collapse: collapse; font-size: 0.8em; display: block; overflow-x: auto; max-width: 100%; }
.paper-text td, .paper-text th { padding: 0.15em 0.5em; vertical-align: middle; }
.paper-text math { font-size: 1.15em; }
.paper-text math[display="block"] { display: block; overflow-x: auto; overflow-y: hidden; margin: 0.6em 0; }
.row.file-row { justify-content: flex-start; padding: 0; }
.row.file-row button { margin-left: -1em; }

.corner {
  position: fixed;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  width: var(--corner-size);
  height: var(--corner-size);
  padding: 0;
  font-size: 18px;
  border: none;
  color: var(--ink);
  opacity: var(--corner-opacity);
  z-index: 10;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--panel);
  border-top: var(--line) solid var(--faint);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  max-height: 78vh;
  overflow-y: auto;
  font-family: var(--ui);
  font-size: var(--ui-size);
}
.sheet.tall { max-height: 92vh; }
.sheet-inner {
  max-width: 34rem;
  margin: 0 auto;
  padding: 18px var(--sheet-pad) 20px;
  display: grid;
  gap: var(--sheet-gap);
}
.sheet-title {
  font-family: var(--serif);
  font-weight: var(--weight-title);
  font-size: 20px;
  margin: 0;
}
.row {
  display: flex;
  align-items: center;
  gap: var(--row-gap);
  min-width: 0;
}
.row.top { align-items: flex-start; }
.row.top .label { padding-top: 10px; }
.row.actions { flex-wrap: wrap; padding-top: 4px; }
.label {
  flex: 0 0 4.6em;
  font-size: var(--ui-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.label em { text-transform: none; letter-spacing: 0; font-style: italic; }
.group { display: flex; gap: var(--chip-gap); min-width: 0; }
.group.wrap { flex-wrap: wrap; }
/* Sliders drawn in the page's own colours; the browser default track is the brightest thing on screen. */
input[type="range"] {
  flex: 1;
  min-width: 0;
  height: var(--touch);
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track { height: var(--track); background: var(--faint); border-radius: 1px; }
input[type="range"]::-moz-range-track { height: var(--track); background: var(--faint); border-radius: 1px; }
input[type="range"]::-moz-range-progress { height: var(--track); background: var(--muted); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((var(--track) - var(--thumb)) / 2);
  border: none;
  border-radius: 50%;
  background: var(--muted);
}
input[type="range"]::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: none;
  border-radius: 50%;
  background: var(--muted);
}

.field { display: grid; gap: 6px; }
.field .label { flex: none; }
.field input, .field textarea {
  width: 100%;
  background: var(--bg);
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-field);
  padding: 10px 12px;
  font-size: var(--field-size);
}
.field textarea { font-family: var(--mono); font-size: 14px; line-height: 1.5; resize: vertical; }
::placeholder { color: var(--faint); }
.hint { margin: 0; color: var(--muted); font-size: var(--ui-hint); line-height: 1.45; }

.mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mine-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: var(--line) solid var(--wash);
  padding: 6px 0;
}
.mine-list .t { min-width: 0; overflow-wrap: anywhere; }
.mine-list .s { display: block; font-size: var(--ui-label); color: var(--muted); }
#mine-export {
  width: 100%;
  background: var(--bg);
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-field);
  padding: 10px;
  font-family: var(--mono);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  #dim { transition: none; }
}

.version { margin-top: 12px; text-align: center; opacity: 0.7; }