/* The web app's stylesheet (U1.4.1). Type, space and hairlines: no cards, no
   chips, no shadows, no badges. Light by default; a person whose system asks
   for dark gets the same page in dark. The policy forbids inline style, so
   every rule is here and the views only set classes. System type until Nordr's
   typeface is a file in the repository: no font is fetched from elsewhere. */
:root {
  color-scheme: light dark;
  --ink: #1b1f24;
  --quiet: #4a5560;
  --paper: #ffffff;
  --hairline: #d8dce1;
  --link: #1a4b8c;
  --problem: #9b1c1c;
  --focus: #1a4b8c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaed;
    --quiet: #aab3bc;
    --paper: #14171a;
    --hairline: #333a41;
    --link: #8db8f0;
    --problem: #f0a0a0;
    --focus: #8db8f0;
  }
}

html {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

body {
  margin: 0;
}

.app {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

a {
  color: var(--link);
}

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

main:focus {
  outline: none;
}

.skip {
  position: absolute;
  left: -999rem;
}

.skip:focus {
  position: static;
  display: block;
  padding: 0.5rem 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header: the wordmark, then the three places, on one hairline. */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.top nav {
  display: flex;
  gap: 1.25rem;
}

.top nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.top nav a[aria-current="page"] {
  border-bottom-color: var(--ink);
  font-weight: 600;
}

h1 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

h2 {
  margin: 2rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.0625rem;
  font-weight: 600;
}

.quiet,
.hint,
.path,
.meta,
.coverage {
  color: var(--quiet);
}

.problem {
  color: var(--problem);
}

p {
  margin: 0.5rem 0;
}

.path,
.meta,
.hint,
.coverage {
  margin: 0.125rem 0;
  font-size: 0.875rem;
}

/* Forms: a label above its field, fields as wide as the text they hold. */
label {
  display: block;
  margin: 1rem 0 0.25rem;
  font-weight: 600;
}

input[type="text"],
input[type="search"],
select {
  box-sizing: border-box;
  width: 100%;
  max-width: 32rem;
  padding: 0.5rem;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--quiet);
  border-radius: 2px;
}

input[type="file"] {
  font: inherit;
}

.row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.row input {
  max-width: 32rem;
}

button {
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* A button that is only a word: in a list, and in a table. */
button.link {
  padding: 0;
  color: var(--link);
  background: none;
  border: none;
  text-decoration: underline;
}

progress {
  width: 100%;
  max-width: 32rem;
}

/* Saving many documents: a hairline above it, and the text at reading width. */
.bulk {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  max-width: 40rem;
}

/* The bulk uploader: a drop area that is a hairline box, and a queue under it at reading width. */
.dropzone {
  margin-top: 1.5rem;
  padding: 1rem;
  max-width: 40rem;
  border: 1px dashed var(--quiet);
  border-radius: 2px;
}

.queue {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  max-width: 40rem;
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rows li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
}

/* The working folder's list of what happens to the files: sentences, not a menu. */
.plain {
  max-width: 40rem;
  padding-left: 1.25rem;
}

/* Search: results beside the filters; the filters under the results on a phone. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 3rem;
}

@media (min-width: 52rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}

.results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.results li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
}

.title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.snippet {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.applied ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facets details {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
}

.facets summary {
  cursor: pointer;
  font-weight: 600;
}

.values {
  max-height: 16rem;
  margin: 0.5rem 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

button.value {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.25rem 0;
  color: var(--ink);
  text-align: left;
  background: none;
  border: none;
}

button.value[aria-pressed="true"] {
  font-weight: 600;
  text-decoration: underline;
}

.count {
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}

/* A document. */
.summary {
  max-width: 44rem;
}

.facts {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  margin: 1rem 0;
}

.facts dt {
  color: var(--quiet);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.versions {
  width: 100%;
  border-collapse: collapse;
}

.versions th,
.versions td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-weight: normal;
}

.versions thead th {
  color: var(--quiet);
  font-size: 0.875rem;
}

.versions tbody th {
  font-variant-numeric: tabular-nums;
}

/* Rooms (U1.5.6): the external app under /rum/ and the room screens of the web app. Type, space and hairlines, as the rest. */
.tabs {
  display: flex;
  gap: 1rem;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}

.tabs a[aria-current='page'] {
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

.rooms,
.members,
.events {
  padding: 0;
  list-style: none;
}

.rooms li,
.members li,
.events li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
}

.gate,
.request,
.preview-panel {
  margin: 1rem 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--hairline);
}

.actions {
  margin: 0.25rem 0 0;
}

.progress {
  margin: 0.5rem 0;
}

.preview-slot {
  margin: 0.5rem 0;
}

.preview-frame {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--hairline);
  background: var(--paper);
}

.danger {
  color: var(--problem);
}

.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}