/* The archive's one stylesheet. Same palette and type as labofbabel.org.
   The fonts are labofbabel.org's own (/fonts/…): behind nginx they are on the
   same origin. Locally they 404 and the fallbacks are used. */

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --bg: #0d1014;
  --text: #e9e9e9;
  --muted: #909090;
  --line: #555;
  --line-faint: #2a2f35;
  --link: #93b7d9;
  --notice: #d9b893;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; }

.top { padding: 16px; border-bottom: 1px solid var(--line-faint); color: var(--muted); font-size: 13px; }
.top a { color: var(--text); }
main { padding: 16px; max-width: 1400px; }
h1 { font-weight: 400; font-size: 28px; margin: 16px 0 4px; }
.lede { color: var(--muted); margin: 0 0 20px; }
.notice { border-left: 2px solid var(--notice); color: var(--notice); padding: 4px 12px; margin: 8px 0 16px; }

.readme { margin: 0 0 20px; }
.readme summary { cursor: pointer; color: var(--link); }
.prose { max-width: 680px; padding: 4px 0 12px; }
.prose pre, .prose code { font-family: var(--mono); font-size: 13px; }
.prose pre { background: #151a20; padding: 12px; overflow-x: auto; }
.prose td, .prose th { white-space: normal; }
.prose table { margin: 8px 0 16px; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.controls input, .controls select, .controls button {
  background: transparent; color: var(--text); border: 1px solid var(--line);
  font: inherit; font-size: 14px; padding: 4px 8px;
}
.controls input[type=search] { min-width: 240px; flex: 0 1 320px; }
.per-page { color: var(--muted); font-size: 14px; }
.controls .per-page input { width: 5em; }
.controls button { cursor: pointer; }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line-faint); vertical-align: top; white-space: nowrap; }
th { font-weight: 400; color: var(--muted); border-bottom-color: var(--line); }
.num { text-align: right; }
td:has(> a > .thumb) { padding-top: 2px; padding-bottom: 2px; }
.thumb { display: block; width: 40px; height: 40px; image-rendering: pixelated; background: #151a20; }

.pages { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0; color: var(--muted); }
.pages .off { color: var(--line); }
.pages form { margin: 0; }
.pages input { width: 6em; background: transparent; color: var(--text); border: 1px solid var(--line); font: inherit; padding: 2px 6px; }
th a { color: var(--muted); }
th a:hover { color: var(--text); }
th .mark { color: var(--text); font-size: 10px; }
/* The records table: a grid. Values centred both ways; headings left.
   A heading never sets its column's width: its label takes the column's
   width and ellipsises when longer (full name on hover). Columns are as wide
   as their data, or the filter widget, whichever is wider. */
#records th, #records td { padding: 6px 10px; border-right: 1px solid var(--line-faint); }
#records tr > :last-child { border-right: none; }
#records td { text-align: left; vertical-align: middle; }
#records td .thumb { margin: 0 auto; }
#records thead th { text-align: left; min-width: 4em; }
#records thead .label, #records thead th > a {
  display: block; width: 0; min-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag { font-size: 11px; border: 1px solid var(--line); color: var(--muted); padding: 0 6px; margin-left: 6px; vertical-align: 2px; }

/* The live table (table.js): headings that cycle sort and move, and a row
   of range filters under them. Widget design from the-librarian. */
button.link { background: none; border: none; padding: 0; color: var(--link); font: inherit; font-size: 14px; cursor: pointer; }
/* Headings: label left, always. Above it, its own small row of move arrows,
   left-aligned with the label and shown on hover (the space is kept, so
   nothing shifts). */
thead th { text-align: left; }
table.live tr.names th { vertical-align: bottom; }
th button.name { display: flex; align-items: baseline; gap: 6px; width: 0; min-width: 100%; background: none; border: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-align: left; }
th button.name .label { display: block; flex: 0 1 auto; width: auto; min-width: 0; }
th button.name:hover { color: var(--text); }
th button.name.on { color: var(--link); }
th button.name .mark { flex: none; font-size: 10px; letter-spacing: 1px; }
th .tools { display: flex; gap: 6px; height: 14px; margin: 0 0 2px; opacity: 0; transition: opacity .1s; }
th.col:hover .tools, th.col:focus-within .tools { opacity: 1; }
button.mini { background: none; border: none; color: var(--muted); padding: 0; font-size: 10px; line-height: 14px; cursor: pointer; }
button.mini:hover { color: var(--link); }
tr.filters th { padding-top: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.names th { border-bottom: none; }
table.loading tbody { opacity: .45; transition: opacity .15s; }

.rw { display: flex; flex-direction: column; gap: 2px; width: 120px; }
.rwplot { display: block; background: #0a0d10; border: 1px solid var(--line-faint); cursor: ew-resize; touch-action: none; }
.rw.active .rwplot { border-color: var(--link); }
.rwbar { fill: #5d6b78; }
.rw.active .rwbar { fill: #74838f; }
.rwsel { fill: var(--link); fill-opacity: .15; }
.rwh { fill: var(--link); }
.rwnums { display: flex; gap: 2px; }
input.rwn { width: 59px; padding: 1px 3px; font: 10px var(--mono); background: #0a0d10; color: var(--text); border: 1px solid var(--line-faint); }
input.rwn::placeholder { color: var(--line); }