/* Mockopedia: plain CSS in the style of a raw German criminal file from 1930s Breslau, read at night.
   One typewriter, one size for the text and one for the notes, no bold: a typewriter cannot do it.
   Headings are letter-spaced capitals with a typed underline. The form fields are dotted lines.
   Two inks: the ribbon and the faint carbon copy. Red is the pencil and the stamp only.
   No boxes with a fill, no textures, no shadows, no rounded corners. */

:root {
  color-scheme: dark;
  --paper: #11100d;
  --ink: #d9cfb8;
  --faint: #8a806b;
  --rule: #3a352b;
  --red: #b8322a;
  --type: "Courier Prime", "Courier New", Courier, monospace;
  --small: 0.8rem;
  --width: 74rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--type);
}

a { color: var(--ink); text-decoration-color: var(--faint); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--ink); }

/* The typewriter has one weight. Emphasis is letter spacing and a typed underline. */
h1, h2, h3, h4, b, strong, th { font-weight: 400; }
h1, h2, h3, h4 { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.4; text-transform: uppercase; }
b, strong { letter-spacing: 0.08em; }

h2 { letter-spacing: 0.3em; text-decoration: underline 1px; text-underline-offset: 0.35em; }
h3 { font-size: var(--small); letter-spacing: 0.25em; text-decoration: underline 1px; text-underline-offset: 0.35em; }
h4 { margin-top: 1rem; font-size: var(--small); letter-spacing: 0.15em; }

code, pre { font: inherit; font-size: var(--small); }
code { color: var(--faint); }

/* A red pencil line under the words that the search found. */
mark {
  background: none;
  color: inherit;
  text-decoration: underline 2px var(--red);
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

[hidden] { display: none !important; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

::selection { background: rgba(184, 50, 42, 0.4); }

/* Letterhead: the office and the file name on the left, the register of views on the right */

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.25rem 2rem;
  max-width: var(--width);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.brand { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.7rem; text-decoration: none; }
.brand-name { letter-spacing: 0.4em; text-transform: uppercase; text-decoration: underline 1px; text-underline-offset: 0.35em; }
.brand-office { color: var(--faint); font-size: var(--small); letter-spacing: 0.1em; text-transform: uppercase; }

.tabs { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.tabs a {
  flex: none;
  padding: 0.5rem 0 0.7rem;
  color: var(--faint);
  font-size: var(--small);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); text-decoration: underline 1px; text-underline-offset: 0.35em; }

/* The sheet is the page itself: no frame and no second color. */
.sheet { display: block; max-width: var(--width); margin: 0 auto; padding: 1.75rem 1.5rem 2.5rem; }

.foot {
  max-width: var(--width);
  margin: 0 auto;
  padding: 1rem 1.5rem 2.5rem;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: var(--small);
}

/* Common parts */

.view > * + * { margin-top: 1.25rem; }
/* The views put the fill() results in a div without a class. Its children keep the same rhythm.
   :where() keeps the first rule weak, so an element with its own margin keeps it. */
:where(.view > div:not([class])) > * + * { margin-top: 1.25rem; }
.view > div:not([class]) > div:not([class]) > * + * { margin-top: 1.25rem; }

/* A short line under the heading: the main numbers of the page. */
.lede { margin: 0; }
h2 + .lede, :where(.view > div:not([class])) > h2 + .lede { margin-top: 0.4rem; }

/* A row of text links: "Kronika · Akapity · Analityka". */
.actions { display: flex; flex-wrap: wrap; align-items: baseline; font-size: var(--small); }
.actions a + a::before { content: "·"; display: inline-block; margin: 0 0.65rem; color: var(--faint); }

/* A section starts with a rule, like a block on a typed form. */
.card { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.card:first-child { margin-top: 0; }
h2 + .card, h2 + div:not([class]) > .card:first-child { padding-top: 0; border-top: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0 2.5rem; }
.grid > .card { margin-top: 0; }

.muted { color: var(--faint); }
.loading { color: var(--faint); }
.summary { margin: 0; letter-spacing: 0.08em; }
.hint { color: var(--faint); font-size: var(--small); }
.count { color: var(--faint); font-size: var(--small); font-variant-numeric: tabular-nums; }

/* A dotted leader between a label and its value, like on a typed form. */
.leader { flex: 1 1 1.5rem; min-width: 1rem; border-bottom: 1px dotted var(--rule); }

/* "Osoby: Eberhard Mock, Kurt Smolorz". */
.meta { margin: 0.3rem 0 0; font-size: var(--small); }
.meta-label { color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; }

/* A red rubber stamp. */
.stamp {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: var(--small);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  white-space: nowrap;
}

/* Forms: the fields are dotted lines to type on. */

input, select, textarea, button { font: inherit; color: inherit; }

input[type="search"], input[type="text"], input[type="number"], input[type="password"], select {
  max-width: 100%;
  padding: 0.3rem 0.1rem;
  border: 0;
  border-bottom: 1px dotted var(--faint);
  border-radius: 0;
  background: transparent;
}

input:focus, select:focus { border-bottom: 1px solid var(--ink); outline: none; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }

select {
  appearance: none;
  padding-right: 1.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a806b'/%3E%3C/svg%3E") no-repeat right 0.2rem center;
  cursor: pointer;
}

select option { background: var(--paper); color: var(--ink); }

textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  resize: vertical;
}

textarea:focus { border-color: var(--faint); outline: none; }

.narrow { width: 5rem; }

.button {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--faint);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--small);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.button.small { padding: 0.1rem 0.55rem; letter-spacing: 0.08em; }
.button.primary { border-color: var(--ink); }
.button:disabled { opacity: 0.5; cursor: wait; }

/* A small text action under a hit: "Czytaj w kontekście", "Podobne sceny". */
.action, .link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--small);
  text-decoration: underline dotted var(--faint);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.link-button { color: var(--faint); }
.action:hover, .link-button:hover { color: var(--ink); text-decoration-color: var(--ink); }

.controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-end; margin-top: 0.75rem; }

.field { display: inline-flex; flex-direction: column; gap: 0.1rem; max-width: 100%; min-width: 0; }
.field-label { color: var(--faint); font-size: var(--small); letter-spacing: 0.1em; text-transform: uppercase; }
.check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--small); cursor: pointer; }

/* A typed box on a form. The checked box is filled with ink. */
.check input, .facet input {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0;
  border: 1px solid var(--faint);
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.facet input { position: relative; top: 0.1em; }
.check input:checked, .facet input:checked { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }
.range { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Folded options: a small label that opens the controls. */
.search-options > summary, .forms > summary, .accounts > summary, .trace-box > summary {
  width: fit-content;
  color: var(--faint);
  font-size: var(--small);
  cursor: pointer;
}

.search-options > summary:hover, .forms > summary:hover, .accounts > summary:hover, .trace-box > summary:hover { color: var(--ink); }

/* Search */

.search-form { margin-top: 0.75rem; }
.search-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; }
.search-row .button { margin-bottom: 0.1rem; }
.suggest-box { position: relative; flex: 1 1 340px; min-width: 0; }
.suggest-box .field { display: flex; }
.suggest-box input { width: 100%; }
.mode-help { margin: 0.5rem 0 0; font-size: var(--small); }
.search-options { margin-top: 0.6rem; }
.search-options .controls { margin-top: 0.5rem; }

.suggest {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--faint);
}

.suggest li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.3rem 0.6rem; cursor: pointer; }
.suggest li + li { border-top: 1px solid var(--rule); }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.suggest li:hover .kind, .suggest li[aria-selected="true"] .kind { color: inherit; }

.kind { flex: none; min-width: 5rem; color: var(--faint); font-size: var(--small); letter-spacing: 0.1em; text-transform: uppercase; }

.intro { margin-top: 2rem; max-width: 46rem; }

.examples { counter-reset: example; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.examples li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.examples li::before { counter-increment: example; content: counter(example) "."; min-width: 1.75rem; color: var(--faint); }
.examples .muted { font-size: var(--small); }

.search-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2rem; align-items: start; }

.facets {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding-right: 1.25rem;
  border-right: 1px solid var(--rule);
  scrollbar-color: var(--rule) transparent;
}

h2.facets-title { font-size: var(--small); }
.facet-group { margin-bottom: 1.1rem; }
.facet-group h3 { margin-bottom: 0.3rem; text-decoration: none; }
.facet-note { margin: -0.2rem 0 0.3rem; color: var(--faint); font-size: var(--small); }
.facet-list { list-style: none; margin: 0; padding: 0; }
.facet-list li.extra { display: none; }
.facet-list.expanded li.extra { display: block; }

.facet { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.05rem 0; font-size: var(--small); cursor: pointer; }
.facet-label { display: flex; flex: 1; align-items: baseline; gap: 0.3rem; min-width: 0; overflow-wrap: anywhere; }
.facet-label::after { content: ""; flex: 1 1 0.75rem; min-width: 0.75rem; border-bottom: 1px dotted var(--rule); }

.did-you-mean { margin: 0.25rem 0; }
.did-you-mean a { text-decoration-color: var(--ink); }

/* The active filters: typed entries with a cross. */
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; margin: 0.4rem 0 0; }

.chip {
  display: inline-block;
  padding: 0 0.45rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--small);
  text-decoration: none;
}

.chip:hover { border-color: var(--ink); }

/* A hit is a numbered entry of a register. */
.hits { border-bottom: 1px solid var(--rule); }

.hit { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.25rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.hits > .hit + .hit { margin-top: 0; }
.hit-no { color: var(--faint); font-variant-numeric: tabular-nums; }

.hit-head { font-size: var(--small); }
.hit-head a { text-decoration: none; }
.hit-head a:hover .chapter-title { text-decoration: underline; }
.book-title { letter-spacing: 0.15em; text-transform: uppercase; }
.chapter-title { color: var(--faint); }
.scene-line { margin: 0.1rem 0 0; color: var(--faint); font-size: var(--small); }

.snippet { margin: 0.45rem 0 0; }
.footnote-hit { margin: 0.35rem 0 0; font-size: var(--small); }
.footnote-hit .label { color: var(--faint); }

.chapter-group { margin-top: 0.6rem; padding-left: 0.75rem; border-left: 1px solid var(--rule); }
.chapter-count { margin: 0; font-size: var(--small); }
.chapter-group ul { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: var(--small); }

.hit-actions { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin-top: 0.6rem; }

.panel { margin-top: 0.75rem; padding: 0.5rem 0 0.25rem 1rem; border-left: 1px solid var(--faint); }
.panel h4 { margin-top: 0; }

.mini-hits { margin: 0.5rem 0; padding-left: 1.4rem; }
.mini-hit + .mini-hit { margin-top: 0.6rem; }

.pagination { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-top: 1.25rem; font-size: var(--small); }
.pagination .page { padding: 0.1rem 0.5rem; text-decoration: none; }
.pagination a.page { color: var(--faint); }
.pagination a.page:hover { color: var(--ink); }
.pagination .current { text-decoration: underline 1px; text-underline-offset: 0.3em; }
.pagination .gap { color: var(--faint); }

/* Errors: a red pencil line on the margin. */

.error-box { padding: 0.5rem 0 0.5rem 1rem; border-left: 2px solid var(--red); }
.error-box > strong { color: var(--red); }
.error-box p { margin: 0.35rem 0 0; }
.error-box .details { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: var(--small); }
pre.reason { margin: 0.35rem 0 0; white-space: pre-wrap; }
.error-key { color: var(--faint); font-size: var(--small); }

/* Books and the reader */

.breadcrumb { color: var(--faint); font-size: var(--small); }
.breadcrumb a { color: var(--faint); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb + h2 { margin-top: 0.4rem; }

.book-description { max-width: 46rem; margin: 0; }

.title-link { text-decoration: none; }
.title-link:hover { text-decoration: underline 1px; }

/* The table of contents: number, title, dotted leader, size. */
.chapter-list { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 52rem; }
.chapter-list li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.15rem 0; }
.chapter-list li.part { display: block; padding-top: 1.25rem; font-size: var(--small); letter-spacing: 0.25em; text-transform: uppercase; }
.chapter-list li.part:first-child { padding-top: 0; }
.chapter-list .number { flex: none; min-width: 2.25rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.chapter-list a { text-decoration: none; }
.chapter-list a:hover { text-decoration: underline; }
.chapter-list .count { flex: none; white-space: nowrap; }

.chapter-heading { letter-spacing: 0.15em; }
.chapter-heading .muted { display: block; font-size: var(--small); }

.chapter-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--small); }

.chapter-text { max-width: 42rem; margin-left: auto; margin-right: auto; }

.scene-head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 2.25rem 0 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: var(--small);
}

.scene-number { color: var(--faint); letter-spacing: 0.25em; text-transform: uppercase; }

.para { position: relative; padding: 0.1rem 0.5rem; }
.para > p { margin: 0 0 0.9rem; white-space: pre-line; text-indent: 1.5em; }
.para.dialogue > p { text-indent: 0; }
/* The target paragraph has a red pencil line on the margin. */
.para.target { box-shadow: inset 2px 0 0 var(--red); }

/* The characters of a paragraph show on hover, so they do not break the reading. */
.para > .meta { margin: -0.6rem 0 0.9rem; opacity: 0; transition: opacity 0.15s; }
.para:hover > .meta, .para:focus-within > .meta, .para.target > .meta { opacity: 1; }

@media (hover: none) {
  .para > .meta { opacity: 0.7; }
}

.para-link { position: absolute; left: -1.2rem; top: 0.1rem; color: var(--faint); text-decoration: none; opacity: 0; }
.para:hover .para-link, .para-link:focus { opacity: 1; }

.footnotes { margin: -0.4rem 0 0.9rem; padding: 0.3rem 0 0.3rem 0.75rem; border-left: 1px solid var(--rule); color: var(--faint); font-size: var(--small); }
.footnotes p { margin: 0; }

/* Charts: thin bars of faint ink. */

.bars { list-style: none; margin: 0.5rem 0; padding: 0; }

.bars li {
  display: grid;
  grid-template-columns: minmax(6rem, 13rem) minmax(0, 1fr) 4.5rem;
  gap: 0.6rem;
  align-items: center;
  padding: 0.1rem 0;
  font-size: var(--small);
}

.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: flex; height: 0.5rem; }
.bar { display: block; width: var(--w); background: var(--faint); }
.bar-value { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }

/* The timeline names the books of each row in a fourth column. A gap separates the books in a bar. */
.bars.timeline li { grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem minmax(0, 20rem); }
.bars.timeline.month li { padding: 0; }
.bars.timeline.month .bar-track { height: 0.4rem; }
.bar-track.stacked { gap: 2px; }
.segment { display: block; width: var(--w); height: 100%; background: var(--faint); }
.bar-books { overflow: hidden; color: var(--faint); text-overflow: ellipsis; white-space: nowrap; }

.inline-bar {
  display: inline-block;
  width: calc(var(--w) * 0.6);
  max-width: 6rem;
  min-width: 1px;
  height: 0.5rem;
  margin-right: 0.45rem;
  background: var(--faint);
  vertical-align: middle;
}

.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; font-size: var(--small); }

.table-wrap { overflow-x: auto; margin-top: 0.5rem; }

/* A typed table: one rule under the head, no lines between the rows. */
table.data { width: 100%; border-collapse: collapse; font-size: var(--small); }
table.data th, table.data td { padding: 0.25rem 0.6rem; text-align: left; vertical-align: baseline; }
table.data th { border-bottom: 1px solid var(--faint); color: var(--faint); letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
table.data tbody tr:first-child td { padding-top: 0.5rem; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr:hover td { text-decoration: underline dotted var(--faint); text-underline-offset: 0.25em; }

.hours {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 10rem;
  margin: 0.75rem 0;
  border-bottom: 1px solid var(--faint);
}

.hour { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.hour .column { display: block; height: var(--h); min-height: 1px; background: var(--faint); }
.hour:hover .column { background: var(--ink); }
.hour-label { padding-top: 0.15rem; text-align: center; color: var(--faint); font-size: var(--small); }

.scope-form .controls { margin-top: 0; }

/* Map: the 1930 Pharus plan, dimmed for the night, with a street register beside it. */

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: 1.5rem; align-items: start; }

.map { position: relative; overflow: hidden; border: 1px solid var(--rule); background: var(--paper); }

.map.city.plan { height: 72vh; min-height: 32rem; cursor: grab; touch-action: none; }
.map.city.plan:active { cursor: grabbing; }

.plan-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
.plan-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* The scan is a light paper map in colour. The filter turns it into a dark photostat copy,
   so the red pins are the only colour on the plan. */
.plan-sheet {
  position: absolute;
  left: 0;
  top: 0;
  filter: grayscale(1) invert(0.9) sepia(0.25) brightness(0.85) contrast(0.95);
  pointer-events: none;
  user-select: none;
}

.plan-tools { position: absolute; z-index: 4; top: 0.6rem; right: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.plan-tools .button { min-width: 2.1rem; background: var(--paper); text-align: center; }
.plan-tools .button:hover { background: var(--ink); }
.plan-tools .plan-in, .plan-tools .plan-out { font-size: 1rem; line-height: 1.2; }

.plan-note {
  display: none;
  position: absolute;
  z-index: 4;
  left: 0.6rem;
  bottom: 0.6rem;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: var(--small);
}

.map.plan-failed:not(.plan-ready) .plan-note { display: block; }

.plan-credit { margin: 0.35rem 0 0; color: var(--faint); font-size: var(--small); }
.plan-credit a { color: inherit; }

/* Red pins on the plan. */
.dot {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: var(--r);
  height: var(--r);
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(20, 4, 3, 0.9);
  border-radius: 50%;
  background: rgba(184, 50, 42, 0.62);
  color: inherit;
  font: inherit;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
}

.dot:hover { background: rgba(184, 50, 42, 0.9); }
.dot.active { z-index: 3; background: var(--red); outline: 1px solid var(--ink); outline-offset: 2px; }

.dot-label {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  transform: translateY(-50%);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--small);
  white-space: nowrap;
}

.dot.east .dot-label { left: auto; right: 100%; margin: 0 0.4rem 0 0; }

.street-side { display: flex; flex-direction: column; max-height: max(72vh, 32rem); min-width: 0; }
.street-side > * + * { margin-top: 0.5rem; }
.street-side input[type="search"] { width: 100%; }
.street-side .legend { display: block; color: var(--faint); }
.back { color: var(--faint); font-size: var(--small); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.back:hover { color: var(--ink); }

.street-list, .street-events {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  border-top: 1px solid var(--rule);
  font-size: var(--small);
  scrollbar-color: var(--rule) transparent;
}

.street-list { list-style: none; padding: 0 0.4rem 0 0; }
.street-list li { display: flex; gap: 0.4rem; align-items: baseline; padding: 0.1rem 0; }
.street-list a { text-decoration: none; }
.street-list a:hover { text-decoration: underline; }
.street-list li.off-plan a { color: var(--faint); }
.street-list li.off-plan a::after { content: "\00a0○"; }
.off-mark { color: var(--faint); }

.street-events { padding: 0.5rem 0.4rem 0 2.2rem; }
.street-events li { margin-bottom: 0.55rem; }
.street-events li::marker { color: var(--faint); }
.event-meta { color: var(--faint); }

/* Character file: the text on the left, the personal data form on the right. */

.akta { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 0 2.5rem; align-items: start; }
.akta-main { grid-column: 1; grid-row: 1; min-width: 0; }
.akta-main > h4 { margin-top: 1.25rem; }

.infobox {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 1rem;
  padding: 0.8rem 1rem 0.9rem;
  border: 1px solid var(--rule);
  font-size: var(--small);
}

.infobox dl { margin: 0; }
.infobox dt { margin-top: 0.6rem; color: var(--faint); letter-spacing: 0.15em; text-transform: uppercase; }
.infobox dt:first-child { margin-top: 0; }
.infobox dd { margin: 0.1rem 0 0; }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.05rem 0; }

.forms { margin-top: 0.8rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); }
.forms p { margin: 0.35rem 0 0; line-height: 1.5; }

.dossier { position: relative; }
.dossier > .stamp { position: absolute; top: 0; right: 0.25rem; transform: rotate(3deg); }
.dossier > h3 { padding-right: 9rem; }
.dossier-summary { max-width: 48rem; margin: 0.5rem 0; }
.dossier-meta { margin: 1.25rem 0 0; color: var(--faint); font-size: var(--small); }

/* Red pencil for the files that need a new run. */
.stale-mark { color: var(--red); }
.stale-note { padding: 0.4rem 0.6rem; border-left: 2px solid var(--red); font-size: var(--small); }

.changes { margin: 0.4rem 0 0; padding-left: 1.6rem; }
.changes li::marker { color: var(--faint); }
.change { padding-bottom: 0.6rem; }
.change p { margin: 0.1rem 0 0; }
.change p.change-books { color: var(--faint); font-size: var(--small); }

.akta-book { margin-top: 1.75rem; padding-top: 0.85rem; border-top: 1px solid var(--rule); }
.akta-book h4 { margin: 0; font-size: 1rem; letter-spacing: 0.15em; }
.akta-book h4 a { text-decoration: none; }
.akta-book h4 a:hover { text-decoration: underline; }
.akta-book-meta { margin: 0.15rem 0 0.4rem; color: var(--faint); font-size: var(--small); }
.akta-book-summary { max-width: 48rem; margin: 0.25rem 0; }
.akta-book .events { margin-top: 1rem; }

/* Events: typed entries, one under the other. */

.events { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.event { max-width: 48rem; padding: 0 0 1.25rem; }
.event-when { display: block; color: var(--faint); font-size: var(--small); letter-spacing: 0.1em; text-transform: uppercase; }
.event-when a { color: var(--faint); }
.event-when a:hover { color: var(--ink); }
/* Letter-spaced, not underlined: a typed underline looks like a link on a screen. */
.event-title { display: block; letter-spacing: 0.1em; }
.event-text { margin: 0.2rem 0 0; }

.accounts { margin: 0.35rem 0 0; font-size: var(--small); }
.account { margin: 0.25rem 0 0 0.9rem; }

.event-period { margin: 1.4rem 0 0.3rem; }
.event-period:first-child, h3 + .event-period { margin-top: 0.4rem; }

.relations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 0.35rem 1.5rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.relations li { padding: 0.3rem 0; border-bottom: 1px dotted var(--rule); font-size: var(--small); }
.relations .relation { display: block; color: var(--faint); }

/* The network: thin lines between the names. */
.network-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 2fr); gap: 1rem 2rem; align-items: center; }
.network { width: 100%; height: auto; overflow: visible; }
.network text { font: 12px var(--type); fill: var(--ink); }
.net-edge { stroke: var(--faint); stroke-opacity: 0.4; }
.net-spoke { stroke: var(--faint); stroke-opacity: 0.7; }
.net-node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.net-node:hover rect, .net-node:focus rect { fill: var(--ink); }
.net-node:hover text { text-decoration: underline; }
.net-node:hover .net-spoke { stroke: var(--ink); stroke-opacity: 1; }
.net-center { fill: var(--red); }
.network text.net-center-label { font: 13px var(--type); letter-spacing: 0.15em; text-transform: uppercase; }

/* Chronicle */

.chronicle-form { display: flex; gap: 0.75rem; align-items: baseline; max-width: 36rem; }
.chronicle-form input { flex: 1; }
.chronicle > * + * { margin-top: 0.75rem; }
/* The month headings keep their own space in the chronicle column. */
.chronicle > .event-period { margin-top: 1.4rem; }
.chronicle > .event-period + .events { margin-top: 0.5rem; }

/* Twelve months of one year. */
.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; list-style: none; margin: 0; padding: 0; }
.months li { display: flex; flex-direction: column; align-items: stretch; text-align: center; font-size: var(--small); }
.month-track { position: relative; height: 3.5rem; border-bottom: 1px solid var(--faint); }
.month-bar { position: absolute; left: 15%; right: 15%; bottom: 0; height: var(--h); background: var(--faint); }
.month-name { margin-top: 0.15rem; color: var(--faint); }

.year-group { padding: 0.4rem 0; border-top: 1px solid var(--rule); }
.year-group summary { letter-spacing: 0.1em; cursor: pointer; }
.year-group summary .muted { font-size: var(--small); letter-spacing: 0; }
.scene-list { list-style: none; margin: 0.25rem 0; padding: 0 0 0 1rem; }
.scene-list li { padding: 0.3rem 0; border-bottom: 1px dotted var(--rule); font-size: var(--small); }
.scene-list .scene-line { margin: 0; }
.scene-list a { text-decoration: none; }
.scene-list a:hover { text-decoration: underline; }

/* Śledztwo: the question agent */

.case-form { max-width: 52rem; }
.case-form .controls { align-items: center; margin-top: 0.6rem; }
.case-form .controls .muted { font-size: var(--small); }
.case-examples { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin: 0.9rem 0 0; }
.case-examples .link-button { color: var(--ink); }

.investigating { letter-spacing: 0.05em; }
.investigating::after { content: "▌"; margin-left: 0.15rem; animation: blink 1s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .investigating::after { animation: none; }
  .para > .meta { transition: none; }
}

.report { position: relative; max-width: 52rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.report > .stamp { position: absolute; top: 1rem; right: 0.25rem; transform: rotate(3deg); }
.report > h3 { padding-right: 8rem; }
.report-question { margin: 0 0 0.75rem; color: var(--faint); }
.answer { line-height: 1.7; white-space: pre-line; }

/* The evidence numbers are red pencil. */
sup.cite { margin-left: 0.1em; font-size: 0.7em; line-height: 0; }
sup.cite a { color: var(--red); text-decoration: none; }
sup.cite a:hover { text-decoration: underline; }

.sources { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.source { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.25rem; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.source-number { color: var(--red); }
.quote { margin: 0.35rem 0 0; padding-left: 0.75rem; border-left: 1px solid var(--rule); }

.trace-box { margin-top: 1.25rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); font-size: var(--small); }
.trace { margin: 0.5rem 0 0; padding-left: 1.8rem; }
.trace li { padding: 0.2rem 0; }
.trace li::marker { color: var(--faint); }
.step-tool { text-decoration: underline 1px; text-underline-offset: 0.2em; }
.step-input { margin-left: 0.5rem; }
.step-result { display: block; color: var(--faint); }
.trace .error .step-tool, .trace .error .step-result { color: var(--red); }

/* The login page: one field on a typed form, under a red stamp. */
.login { max-width: 30rem; margin: 2rem auto 0; }
.login > .stamp { margin-bottom: 1.25rem; transform: rotate(3deg); }
.login-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; margin-top: 1.25rem; }
.login-form .field { flex: 1 1 12rem; }
.login-form .button { margin-bottom: 0.1rem; }
.login-error { margin: 1.25rem 0 0; padding: 0.4rem 0.6rem; border-left: 2px solid var(--red); font-size: var(--small); }

/* Small screens */

@media (max-width: 860px) {
  .top { padding: 0.9rem 0.75rem 0; }
  .brand { padding-bottom: 0.25rem; }
  .brand-office { display: none; }
  .tabs { flex-wrap: wrap; gap: 0 1.1rem; width: 100%; overflow: visible; }
  .tabs a { padding: 0.4rem 0 0.45rem; }
  .sheet { padding: 1.25rem 1rem 2rem; }
  .foot { padding: 1rem 1rem 2rem; }
  .search-layout { grid-template-columns: minmax(0, 1fr); }
  .facets { position: static; order: 2; max-height: none; padding: 0.75rem 0 0; border-right: 0; border-top: 1px solid var(--rule); }
  .hit { grid-template-columns: 2rem minmax(0, 1fr); }
  .bars li { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) 3.5rem; }
  /* The book titles of a timeline row go under the bar. */
  .bars.timeline li { grid-template-columns: 4.5rem minmax(0, 1fr) 3.5rem; gap: 0 0.6rem; padding-bottom: 0.5rem; }
  .bar-books { grid-column: 2 / -1; }
  .para-link { display: none; }
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .map.city.plan { height: 60vh; min-height: 22rem; }
  .street-side { max-height: 60vh; }
  .hours { height: 8rem; gap: 1px; }
  .hour-label { font-size: 0.55rem; }
  .akta { grid-template-columns: minmax(0, 1fr); }
  /* The facts come first, as on a printed file card. The dossier text follows. */
  .infobox { order: -1; grid-column: 1; grid-row: auto; position: static; margin-bottom: 1.25rem; }
  .akta-main { grid-row: auto; }
  .network-layout { grid-template-columns: minmax(0, 1fr); }
  .dossier > .stamp, .report > .stamp { position: static; display: inline-block; margin-bottom: 0.5rem; }
  .dossier > h3, .report > h3 { padding-right: 0; }
}