@font-face {
  font-family: 'Monaspace Xenon';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/monaspace-xenon/files/monaspace-xenon-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Monaspace Xenon';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/monaspace-xenon/files/monaspace-xenon-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Monaspace Xenon';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/monaspace-xenon/files/monaspace-xenon-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/monaspace-neon/files/monaspace-neon-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/monaspace-neon/files/monaspace-neon-latin-700-normal.woff2') format('woff2');
}

html {
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 120ms;
}

:root {
  --page-background: #d8bfb8;
  --text: #262223;
  --text-muted: #524947;
  --text-faint: #6b5d59;
  --rule: #262223;
  --rule-light: #c0a39b;
  --link: #74402d;
  --link-visited: #5b3526;
  --highlight: #262223;
  --highlight-text: #d8bfb8;
  --text-font: 'Monaspace Xenon', 'Courier New', monospace;
  --mono: 'Monaspace Xenon', 'Courier New', monospace;
  --theme-toggle-label: '[dark]';
  --magnifying-glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10.3 10.3 15 15' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --page-background: #262223;
    --text: #d8bfb8;
    --text-muted: #ab9993;
    --text-faint: #8a7a75;
    --rule: #d8bfb8;
    --rule-light: #4d4341;
    --link: #e0a58c;
    --link-visited: #c98f78;
    --highlight: #d8bfb8;
    --highlight-text: #262223;
    --theme-toggle-label: '[light]';
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --page-background: #262223;
  --text: #d8bfb8;
  --text-muted: #ab9993;
  --text-faint: #8a7a75;
  --rule: #d8bfb8;
  --rule-light: #4d4341;
  --link: #e0a58c;
  --link-visited: #c98f78;
  --highlight: #d8bfb8;
  --highlight-text: #262223;
  --theme-toggle-label: '[light]';
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* Anything marked hidden stays hidden, whatever display its class gives it, as .person's flex: pages
   hide the rows a filter leaves out (filter-in-place.js). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--page-background);
  color: var(--text);
  font-family: var(--text-font);
  font-size: 18px;
  line-height: 1.55;
}

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

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

.container {
  max-width: clamp(46rem, 75vw, 72rem);
  padding: 0 16px;
  margin: 0 auto;
}

.mono {
  font-family: var(--mono);
  font-size: 15px;
}

.site-header {
  border-bottom: 3px solid var(--rule);
}

.site-header-inner {
  display: flow-root;
  padding-top: 18px;
  padding-bottom: 10px;
}

.wordmark {
  float: left;
  margin-right: 16px;
  line-height: 32px;
  font-family: var(--text-font);
  font-size: 23px;
  font-weight: 700;
  color: var(--text) !important;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  line-height: 32px;
  text-align: right;
  font-family: var(--mono);
  font-size: 16px;
}

.site-nav > * {
  display: inline-block;
  margin-left: 16px;
}

.mobile-menu {
  display: none;
}

.site-nav > .nav-account,
.nav-account {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  white-space: nowrap;
}

.mobile-nav .nav-account {
  display: contents;
}

.theme-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.theme-toggle:hover {
  text-decoration: underline;
}

.js .theme-toggle {
  display: inline;
}

.theme-toggle::before {
  content: var(--theme-toggle-label);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--rule);
  outline-offset: 2px;
}

.entry-reader,
.profile-header p,
.person p {
  overflow-wrap: anywhere;
}

.page-search input[type='search'],
.search-form input[type='search'] {
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
}

.page-search input[type='search'] {
  width: 11rem;
}

.page-search input[type='search']::placeholder,
.search-form input[type='search']::placeholder {
  color: var(--text-muted);
}

.page-search input[type='search']:focus,
.search-form input[type='search']:focus {
  outline: 2px solid var(--rule);
  outline-offset: 1px;
}

.people-list {
  list-style: none;
  margin: 20px 0 32px;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.person {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-light);
}

.person .profile-photo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 3px;
}

/* The name and status wrap together; [follow] keeps its place at the top right. */
.person .name-line {
  flex-wrap: nowrap;
}

.person-heading {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.person-details {
  flex: 1;
  min-width: 0;
}

.person-actions {
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 15px;
}

.person-you {
  color: var(--text-muted);
}

.person-name {
  font-weight: 700;
}

.name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

.name-line h1,
.name-line .person-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.member-status {
  min-width: 0;
  color: var(--text-faint);
  font-size: 14px;
  font-style: italic;
  overflow-wrap: anywhere;
}

.status-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  max-width: 100%;
}

input[type='text'].status-input {
  width: auto;
  min-width: 0;
  max-width: 100%;
  field-sizing: content;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-style: inherit;
  line-height: 1;
  text-decoration: underline dashed var(--text-faint) 1px;
  text-underline-offset: 1px;
}

input[type='text'].status-input::placeholder {
  text-decoration: underline dashed var(--text-faint) 1px;
  text-underline-offset: 1px;
}

input[type='text'].status-input:focus {
  outline: none;
  text-decoration-style: solid;
  text-decoration-color: var(--rule);
}

.person p {
  margin: 2px 0 0;
}

.person .person-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

/* The bar under the site header on the feed, people and lists pages: a heading on the left, and
   search, choices and a tool link on the right. It stays at the top as the page scrolls, so they're
   always at hand, and its rule takes the place of the list's. The heading keeps its one line; when
   it and the tools don't fit side by side, the tools move below it. */
.page-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--page-background);
}

.page-bar-tools {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

/* The same size as search and the tool link beside them. */
.page-choices {
  font-size: 15px;
}

.page-bar-heading {
  flex-shrink: 0;
  margin: 0;
  color: var(--text-muted);
}

/* Set by page-bar.js when the heading would push the tools onto a second line. */
.page-bar.without-heading .page-bar-heading {
  display: none;
}

/* The bar's rule takes the place of the list's own. */
.page-bar + * :is(.entry-list, .people-list, .list-rows) {
  margin-top: 0;
  border-top: 0;
}

.period-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 4px 0 8px;
  font-family: var(--mono);
  font-size: 15px;
}

.profile-header h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
}

.entry-list {
  list-style: none;
  margin: 20px 0 32px;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.entry {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--rule-light);
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text-muted);
}

.entry-reader {
  font-weight: 700;
}

.entry-via {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
}

.entry-date {
  margin-left: auto;
}

.entry-status-toRead {
  background: var(--highlight);
  color: var(--highlight-text);
  padding: 0 3px;
}

.citation {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.citation-title {
  font-weight: 700;
}

.citation-venue {
  font-style: italic;
}

/* An author's name links to their page: underlined so it reads as a link, in the citation's colour. */
.author-link,
.author-link:visited {
  color: inherit;
}

.author-link:hover {
  color: var(--link);
}

.entry-note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.entry-note-label {
  font-weight: 700;
}

.profile-header {
  padding: 28px 0 12px;
  border-bottom: 1px solid var(--rule);
}

.profile-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.profile-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 15px;
}

.profile-header p {
  margin: 2px 0 0;
}

.profile-handle .tool-link {
  margin-left: 12px;
}

/* At the right while it shares a line with export, and at the left on a line of its own, like the tab row. */
.profile-own-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}

.edit-actions {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mono);
  font-size: 20px;
}

.edit-actions .action {
  font-size: inherit;
}

/* Delete sits on the left and save on the right, but save stays first in the form, so that Enter in a
   field saves rather than deletes. */
.edit-actions .delete-button {
  order: -1;
  margin-right: auto;
}

.profile-photo {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

.default-photo {
  background: color-mix(in srgb, var(--text-faint) 50%, var(--rule-light));
}

.default-photo circle,
.default-photo ellipse {
  fill: var(--page-background);
}

.tabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 12px 0 0;
}

/* The orders sit beside search on the tab row, and search takes whatever room is left after them. */
.tabs-row .order-choices {
  margin: 0;
  column-gap: 8px;
}

/* Search and export on a profile's tab row: export downloads what the search and tabs show. */
/* Sized to hold the orders and the search box, so when the row gets narrow it moves down whole. It sits at
   the right while it shares a line with the tabs, and starts at the left on a line of its own. */
.tabs-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-family: var(--mono);
  font-size: 15px;
}

/* The lists tab has nothing to order, search or export. Keyed to the tabs, which live search swaps in, so it holds after switching tabs in place too. */
main:has(.tabs[data-show='lists']) :is(.order-choices, .tabs-tools, .export-link) {
  visibility: hidden;
}

.search-form {
  display: flex;
  width: 14rem;
}

/* Small enough that the tabs, orders and search share one line on a laptop, whichever order is in use. */
.profile-controls .search-form {
  width: 6rem;
}

.tabs {
  font-family: var(--mono);
  font-size: 16px;
}

.search-form input[type='search'] {
  width: 100%;
}

.tab-separator {
  margin: 0 6px;
  color: var(--text-muted);
}

.tab-active {
  font-weight: 700;
}

.select-box {
  position: relative;
  padding: 0 3px;
  color: var(--link);
  font-weight: 400;
  cursor: pointer;
}

.select-box::before {
  content: '[ ]';
  white-space: pre;
}

.select-box:has(input:checked) {
  background: var(--link);
  color: var(--page-background);
}

.select-box:has(input:checked)::before {
  content: '[x]';
}

.select-box:has(input:focus-visible) {
  outline: 2px solid var(--rule);
  outline-offset: 2px;
}

.bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 32px;
  padding: 10px 0 12px;
  border-top: 3px solid var(--rule);
  background: var(--page-background);
  font-family: var(--mono);
  font-size: 15px;
}

.js .bulk-bar:not(.has-selection) {
  display: none;
}

#bulk-form .action {
  align-self: baseline;
}

.bulk-count {
  color: var(--text-muted);
}

.bulk-result {
  margin: 14px 0 -6px;
  color: var(--text-muted);
}

.bulk-actions {
  display: contents;
}

.bulk-bar input[type='text'].bulk-tag {
  width: 8rem;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 15px;
}

.tab-filter {
  display: inline-block;
  margin-left: 16px;
  color: var(--text-muted);
  white-space: nowrap;
}

.empty {
  padding: 32px 0;
  font-style: italic;
  color: var(--text-muted);
}

.pagers {
  display: flex;
  gap: 16px;
  margin: 0 0 48px;
}

.pager {
  display: inline-block;
  font-family: var(--mono);
  font-size: 16px;
}

.pager-older {
  margin-left: auto;
}

.inline-form {
  display: inline;
  margin: 0;
}

.form-page {
  padding: 1px 0 48px;
}

.form-page h1 {
  margin: 1em 0;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

/* The login page: a line for making an account, a button for each place accounts live, and a
   handle box for anywhere else. */
.login-page {
  max-width: 30rem;
}

.login-signup {
  margin: 1.5em 0;
}

.login-buttons {
  display: grid;
  gap: 10px;
}

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--rule);
  border-radius: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
}

.login-button:hover,
.login-button:focus-visible {
  background: var(--text);
  color: var(--page-background);
}

.login-logo {
  width: 18px;
  height: 16px;
}

.login-handle {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-muted);
}

.login-handle label {
  font-weight: 400;
}

.login-handle-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.login-handle-row input {
  flex: 1;
  min-width: 0;
}

.privacy-page h1 {
  margin: 28px 0 6px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.form-page > p {
  margin: 0 0 16px;
}

.form-page > .import-hint {
  margin: 0 0 10px;
}

.privacy-page {
  max-width: 680px;
}

.privacy-page h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 8px;
}

.privacy-page > .privacy-updated {
  color: var(--text-muted);
}

.privacy-page ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.privacy-page li {
  margin: 0 0 6px;
}

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

.import-list li {
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}

.import-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  cursor: pointer;
}

.import-item .citation {
  margin: 0;
}

.import-note {
  display: block;
}

.import-skipped {
  margin-top: 20px;
}

.import-skipped summary {
  font-family: var(--mono);
  font-size: 15px;
  cursor: pointer;
}

.form-error {
  padding: 8px 12px;
  border: 1px solid var(--rule);
  background: var(--highlight);
  color: var(--highlight-text);
  font-family: var(--mono);
  font-size: 16px;
}

.stacked-form,
.entry-form {
  display: flex;
  flex-direction: column;
}

.stacked-form {
  gap: 8px;
  margin-bottom: 16px;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.visually-hidden:focus-visible + .file-button {
  outline: 2px solid var(--rule);
  outline-offset: 2px;
}

.entry-form {
  gap: 14px;
}

.link-row {
  display: flex;
  gap: 8px;
}

.link-row input {
  flex: 1;
  font-size: 18px;
}

.link-row .action {
  align-self: center;
  font-size: 24px;
  line-height: 1;
}

.lookup-status {
  min-height: 1.4em;
  margin: -6px 0 0;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text-muted);
}

.lookup-status:empty {
  min-height: 0;
  margin: 0 0 -14px;
}

.form-section-heading {
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule-light);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.field-row .field {
  min-width: 7rem;
}

label,
legend,
.field-label {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}

.photo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.photo-field .field-label {
  margin: 0;
}

.photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.photo-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.photo-actions .lookup-status:empty {
  display: none;
}

.tag-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-height: 1.4em;
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--link);
  text-decoration: underline;
}

.tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.tag-suggestion {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font-family: var(--mono);
  font-size: 15px;
  cursor: pointer;
}

.tag-suggestion:hover,
.tag-suggestion:focus-visible {
  text-decoration: underline;
}

.field-hint {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-muted);
}

input[type='text'],
textarea,
select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--page-background);
  color: var(--text);
  font-family: var(--text-font);
  font-size: 17px;
  line-height: 1.4;
}

textarea {
  resize: vertical;
}

input[type='text']:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--rule);
  outline-offset: 1px;
}

button[type='submit']:disabled {
  opacity: 0.6;
  cursor: progress;
}

.status-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.status-choice label {
  position: relative;
}

/* Your own paper's status in a feed: [read] or [to read], which flips when clicked. */
.action.status-toggle {
  color: var(--text-muted);
}

.action.status-toggle.entry-status-toRead {
  background: var(--highlight);
  color: var(--highlight-text);
}

.entry-actions {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 15px;
}

.entry-footer {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 15px;
}

.entry-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px 12px;
  margin-left: auto;
}

.entry-footer .entry-actions {
  margin: 0;
}

.save-actions {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.save-confirm {
  color: var(--text-muted);
  white-space: nowrap;
}

.entry-footer a,
.entry-footer button {
  white-space: nowrap;
}

.paper-save {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 15px;
}

/* Actions and links. Anything that changes the page you're on (saves, filters, toggles, shows
   more) is an action in square brackets; anything that takes you to another page is a plain
   link. The brackets come from here, never from the markup. */
.action {
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.action::before {
  content: '[';
}

.action::after {
  content: ']';
}

.action:visited {
  color: var(--link);
}

.action:hover {
  text-decoration: underline;
}

.action:focus-visible,
.action:has(input:focus-visible) {
  outline: 2px solid var(--rule);
  outline-offset: 2px;
}

/* On: a saved paper, a followed person, a starred paper, the filter in use, the chosen option. */
.action[aria-pressed='true'],
.action[aria-current='true'],
.action[aria-current='true']:visited,
.action:has(input:checked) {
  background: var(--link);
  color: var(--page-background);
}

/* An action that's on can say what clicking it does while hovered: [following] becomes [unfollow]. */
.action .label-hover,
.action:hover .label-current:has(+ .label-hover) {
  display: none;
}

.action:hover .label-hover {
  display: inline;
}

.action:disabled {
  cursor: default;
}

/* A form button that goes to another page, like log out, looks like the link it acts as. */
.button-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

button[type='submit'].action,
.file-button {
  align-self: flex-start;
}

.file-button {
  display: inline-block;
}

/* A link to another page among a page's tools, like add paper or edit profile. */
.tool-link {
  font-family: var(--mono);
  font-size: 15px;
  white-space: nowrap;
}

.source-link,
.source-link:visited {
  color: var(--link);
}

.paper-readers {
  color: var(--text-muted);
}

.paper-header {
  padding: 28px 0 12px;
  border-bottom: 1px solid var(--rule);
}

.paper-header h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 4px 0 6px;
  overflow-wrap: anywhere;
}

.paper-header p {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.paper-links,
.paper-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}

.group-summary {
  color: var(--text);
}

/* Who has a paper wraps within its own column, so the date keeps the top right; on a phone the
   date drops below instead. */
.group-meta {
  flex-wrap: nowrap;
  align-items: baseline;
}

.group-meta .group-summary {
  flex: 1 1 auto;
  min-width: 0;
}

.group-meta .entry-date {
  flex-shrink: 0;
  white-space: nowrap;
}

.group-summary a {
  color: var(--link);
}

.more-readers-toggle {
  font-family: inherit;
  font-size: inherit;
}

.group-tags {
  margin: 4px 0 0;
}

.list-picker {
  flex-basis: 100%;
  max-width: 32rem;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 15px;
}

.list-picker p {
  margin: 0;
}

.list-picker-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-picker-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.list-picker-row form {
  flex: none;
}

.list-picker-note {
  color: var(--text-muted);
}

.list-picker .list-picker-new {
  margin-top: 8px;
}

/* Each list name moves to the next line whole, so the row folds by line, and a name too long for
   the row wraps inside its own box rather than widening the page. */
.paper-lists a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Its own box, so the link's underline stops at the name. */
.paper-lists a + a::before {
  content: ', ';
  display: inline-block;
  white-space: pre;
  color: var(--text);
}

.paper-readers-heading {
  margin: 20px 0 0;
  color: var(--text-muted);
}

.action-error {
  color: var(--text-muted);
  font-size: 0.85em;
}

@media (max-width: 700px) {
  /* On phones a status gets the full width under the name, beside nothing. */
  .person .name-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 12px;
  }

  .person-heading {
    display: contents;
  }

  .person-heading .member-status {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .person .person-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .entry-footer,
  .entry-footer .entry-actions {
    font-size: 14px;
  }

  .entry-footer {
    column-gap: 6px;
  }

  .entry-controls,
  .entry-footer .entry-actions,
  .entry-footer .save-actions {
    column-gap: 6px;
  }

  /* The page bar on a phone: search and the tool link on one line, the choices on the next. The
     heading shows only to say what a tag filter picked, since the choices already say what's shown. */
  .page-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 0;
  }

  .page-bar-tools {
    display: contents;
  }

  .page-bar-heading {
    flex-basis: 100%;
    font-size: 15px;
  }

  .page-bar-heading:not(:has(a)) {
    display: none;
  }

  .page-search {
    position: relative;
    flex: 1 1 0;
  }

  .page-search::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--text);
    -webkit-mask: var(--magnifying-glass) center / contain no-repeat;
    mask: var(--magnifying-glass) center / contain no-repeat;
    pointer-events: none;
  }

  /* 16px, or phones zoom in on the page when it's tapped. */
  .page-search input[type='search'] {
    width: 100%;
    height: 32px;
    padding: 0 8px 0 32px;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
  }

  .page-bar .tool-link {
    font-size: 14px;
  }

  .login-signup {
    font-size: 14px;
  }

  /* The choices have a line of their own, sized to fit it. */
  .page-choices {
    order: 1;
    display: flex;
    flex-basis: 100%;
    column-gap: 6px;
    font-size: 14px;
  }

  /* On a phone the citation leads: who has it, its tags, why it's recommended and what you can do
     with it all step down a size and go quieter around it. */
  .entry {
    padding: 12px 0 14px;
  }

  .entry-meta,
  .group-tags,
  .recommendation-hint {
    font-size: 13px;
  }

  .entry-meta {
    gap: 0 8px;
    margin-bottom: 6px;
  }

  .group-meta {
    flex-wrap: wrap;
  }

  .group-meta .group-summary {
    flex: initial;
  }

  .entry-date {
    color: var(--text-faint);
  }

  .citation {
    font-size: 15px;
    line-height: 1.4;
  }

  .group-tags {
    margin-top: 6px;
  }

  .period-choices {
    column-gap: 10px;
    font-size: 14px;
  }

  /* Tighter spacing, so the four orders fit one line on a phone: the brackets already separate them. */
  .tabs-row .order-choices {
    column-gap: 4px;
  }

  .tabs-row .order-choices .action {
    padding: 0;
  }

  body {
    font-size: 16px;
  }

  .entry-date {
    margin-left: 0;
  }

  .profile-photo {
    width: 72px;
    height: 72px;
  }

  .profile-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 12px;
  }

  .profile-summary > div {
    display: contents;
  }

  .profile-summary > div > * {
    grid-column: 1;
  }

  .profile-summary > .profile-photo {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .profile-summary .profile-groups,
  .profile-summary .profile-tags {
    grid-column: 1 / -1;
  }

  .tabs-tools,
  .tabs-row .search-form,
  .search-form input[type='search'] {
    width: 100%;
  }

  .site-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .wordmark {
    float: none;
    margin-right: 0;
    line-height: inherit;
    font-size: clamp(14px, 4.3vw, 17px);
  }

  .site-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: 1px solid var(--rule);
    color: var(--text);
    list-style: none;
    cursor: pointer;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu[open] summary {
    background: var(--highlight);
    color: var(--highlight-text);
  }

  .mobile-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px 18px;
    text-align: right;
    border-bottom: 3px solid var(--rule);
    background: var(--page-background);
    font-family: var(--mono);
    font-size: 17px;
  }

  .mobile-nav .button-link,
  .mobile-nav .theme-toggle {
    text-align: right;
  }
}

.paste-form {
  margin-top: 28px;
}

/* Lists: the lists index, a profile's lists tab, list pages, and the list editor. */
.list-rows {
  list-style: none;
  margin: 16px 0 32px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.list-row {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--rule-light);
}
.list-row p {
  margin: 2px 0 0;
}
.list-name {
  font-size: 20px;
  font-weight: 700;
}
.list-description {
  margin: 8px 0 0;
}
.list-rules {
  margin: 10px 0 0;
  color: var(--text-muted);
}
.list-tags {
  margin: 8px 0 0;
  color: var(--text-muted);
}
.list-rules ul {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.list-rules.is-folded ul {
  max-height: 2lh;
  overflow: hidden;
}
.list-rules .rules-toggle {
  font: inherit;
}
.list-rules li::before {
  content: '- ';
}
.list-reason {
  color: var(--text);
}
.list-reason + .list-reason::before {
  content: '\00b7  ';
  color: var(--text-muted);
}
.list-entries {
  margin-top: 0;
  border-top: 0;
}
.list-choices-divider {
  color: var(--text-faint);
}
.list-row .name-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.list-row .list-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A list page. */
.list-section {
  margin-top: 20px;
}
.list-section summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.list-section summary::-webkit-details-marker {
  display: none;
}
.list-section summary::before {
  content: '[-] ';
  color: var(--link);
  font-weight: 400;
}
.list-section:not([open]) summary::before {
  content: '[+] ';
}
.list-section-count {
  color: var(--text-muted);
  font-weight: 400;
}
.list-section .list-entries {
  margin-top: 0;
}
.citation-marker {
  font-family: var(--mono);
  font-weight: 700;
}
.list-notes {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.list-notes li {
  margin: 2px 0 0;
}
.list-more {
  margin: 10px 0 0;
}
.list-entries .entry-meta {
  display: block;
}
.list-entries .list-reason + .list-reason::before {
  content: ' \00b7  ';
}
.list-paper-source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.list-cap-note {
  margin: 16px 0 0;
  color: var(--text-muted);
}

/* The list editor. */
.list-editor {
  padding-bottom: 48px;
}
.list-editor select {
  width: auto;
  max-width: 100%;
}
.list-editor textarea {
  field-sizing: content;
}
.editor-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 20px 0 0;
}
.editor-top > .editor-title,
.editor-top > h1 {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
}
.editor-save-note {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 14px;
}
.list-editor input.editor-title {
  width: 100%;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.list-editor textarea.editor-description {
  width: 100%;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.list-editor .editor-title:hover,
.list-editor .editor-title:focus,
.list-editor .editor-description:hover,
.list-editor .editor-description:focus {
  border-bottom-color: var(--rule);
  outline: none;
}
.editor-meta {
  margin: 8px 0 0;
  color: var(--text-muted);
}
.editor-settings:not([open]) {
  display: inline;
}
.editor-settings summary {
  display: inline;
  cursor: pointer;
  color: var(--link);
  list-style: none;
}
.editor-settings summary::-webkit-details-marker {
  display: none;
}
.editor-settings[open] {
  display: block;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--rule-light);
}
.editor-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 6px 0 0;
}
.editor-settings input[type='text'] {
  width: 16rem;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 14px;
}
.editor-order {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 15px;
}
.editor-order .status-choice {
  display: contents;
}

.add-bar {
  position: relative;
  margin: 20px 0 8px;
  padding: 8px 10px;
  border: 2px solid var(--rule);
}
.add-bar.is-drop-target {
  border-style: dashed;
  border-color: var(--link);
}
.add-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-family: var(--mono);
  font-size: 14px;
}
.add-bar input#add-input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
}
.add-bar input#add-input:focus {
  outline: none;
}
.add-bar select {
  padding: 1px 4px;
  font-family: var(--mono);
  font-size: 14px;
}
.add-results {
  margin: 6px -10px -8px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-light);
}
.add-results:empty {
  display: none;
}
.add-result {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  font-size: 15px;
  cursor: pointer;
}
.add-result:hover,
.add-result.is-top {
  background: var(--rule-light);
}
.add-result[aria-disabled='true'] {
  cursor: default;
  color: var(--text-muted);
  background: none;
}
.add-result-hint {
  flex: none;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 13px;
}
.add-status {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 14px;
}
.add-status:empty {
  display: none;
}

.category-block {
  margin-top: 26px;
  border-radius: 2px;
}
.category-block.is-drop-target {
  outline: 2px dashed var(--link);
  outline-offset: 4px;
}
.category-block.drop-before {
  box-shadow: 0 -4px 0 var(--link);
}
.category-block.drop-after {
  box-shadow: 0 4px 0 var(--link);
}
.category-header[draggable='true'] {
  cursor: grab;
}
.category-block.is-dragging {
  opacity: 0.4;
}
.drag-grip {
  color: var(--text-muted);
  letter-spacing: -2px;
  user-select: none;
}
.editor-paper.drop-before {
  box-shadow: 0 -3px 0 var(--link);
}
.editor-paper.drop-after {
  box-shadow: 0 3px 0 var(--link);
}
.category-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
}
.category-header input.category-name {
  field-sizing: content;
  width: auto;
  min-width: 4ch;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
}
.category-header input.category-name:hover,
.category-header input.category-name:focus {
  border-bottom-color: var(--rule);
  outline: none;
}
.category-header .category-none {
  font-weight: 700;
}
.category-count {
  color: var(--text-muted);
  font-size: 14px;
}
.category-tools {
  margin-left: auto;
  display: flex;
  gap: 8px;
  font-size: 14px;
}
.category-rules {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-muted);
}
.category-rules li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.rule-builder {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 14px;
}
.rule-builder summary {
  display: inline;
  cursor: pointer;
  color: var(--link);
  list-style: none;
}
.rule-builder summary::-webkit-details-marker {
  display: none;
}
.rule-builder-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 6px 0 4px;
}
.rule-builder-form select,
.rule-builder-form input[type='text'] {
  width: auto;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 14px;
}
.rule-builder-form input[name='ruleWhoValue'] {
  width: 10rem;
}
.rule-builder-form input[name='ruleTags'] {
  width: 11rem;
}

.editor-papers {
  margin: 0;
  padding: 0;
  list-style: none;
}
.editor-paper {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-light);
}
.editor-paper[draggable='true'] {
  cursor: grab;
}
.editor-paper.is-dragging {
  opacity: 0.4;
}
.editor-paper .select-box,
.editor-paper .star-button {
  align-self: start;
  font-family: var(--mono);
  font-size: 15px;
}
.editor-paper-body {
  min-width: 0;
}
.editor-paper-body .citation {
  margin: 0;
  cursor: auto;
}
.editor-paper-source {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 13px;
}
.editor-paper-source .list-reason + .list-reason::before {
  content: '\00b7  ';
}
.editor-notes {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.editor-paper textarea.editor-note {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px dashed var(--rule-light);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}
.editor-paper textarea.editor-note:focus {
  border-bottom-color: var(--rule);
  outline: none;
}
.editor-paper-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 14px;
}
.editor-paper-tools select {
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 13px;
}
.editor-empty {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 14px;
}

.new-category {
  margin: 0 0 18px;
  font-family: var(--mono);
}
.new-category input {
  width: 18rem;
  max-width: 100%;
  padding: 4px 6px;
  font-family: var(--mono);
  font-size: 15px;
}
.editor-removed {
  margin: 26px 0 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-muted);
}
.editor-removed summary {
  cursor: pointer;
}
.editor-removed ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.editor-removed li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.who-results {
  margin: 0;
  padding: 2px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  flex-basis: 100%;
}
.who-result {
  cursor: pointer;
  padding: 2px 6px;
}
.who-result:hover,
.who-result.is-top {
  background: var(--rule-light);
}
.who-result-detail {
  color: var(--text-muted);
}

#editor-bulk button,
#editor-bulk select {
  align-self: baseline;
  padding: 0 3px;
  font: inherit;
}

/* Why a paper is in the feed's [for you] order. */
.recommendation-hint {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.recommendation-hint [title] {
  text-decoration: underline dotted;
  cursor: help;
}