@font-face {
  font-family: Marcellus;
  src: url('fonts/Marcellus-Regular.ttf') format('truetype');
  font-display: swap;
  font-weight: 400
}

:root {
  --page: #0d1117;
  --panel: #161b22;
  --raised: #1c2129;
  --line: #303740;
  --text: #ede8de;
  --muted: #9e9585;
  --gold: #c69f56;
  --accent: #ddb673;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--page);
  color: var(--text)
}

body {
  background: var(--page);
  background-image: none;
  color: var(--text);
  line-height: 1.6
}

main {
  max-width: 1440px;
  padding: 32px
}

header {
  border-color: var(--line);
  padding-bottom: 24px
}

.admin-brand-logo {
  display: inline-block;
  width: 120px;
  height: 58px;
  object-fit: contain;
  vertical-align: middle
}

header span {
  color: var(--muted);
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: uppercase
}

h1,
h2,
h3 {
  font-family: Marcellus, Georgia, serif;
  font-weight: 400
}

h1 {
  font-size: 38px
}

h2 {
  font-size: 26px
}

p,
label {
  color: var(--muted)
}

a {
  color: var(--accent)
}

button,
.admin-button {
  background: var(--raised);
  border-color: #454c55;
  color: var(--text);
  border-radius: 8px
}

button.primary,
.admin-button.primary,
.active {
  background: var(--gold);
  color: var(--page)
}

input,
textarea,
select,
.brief-rich-editor {
  background: var(--raised);
  border-color: #454c55;
  color: var(--text)
}

fieldset,
.cards section,
.gallery-card,
.access-tree,
.backend-nav,
.brief-format-toolbar,
.backend-nav details>div,
.editor-more>div {
  background: var(--panel);
  border-color: var(--line)
}

.backend-nav a:hover,
.backend-nav summary:hover,
.access-tree summary:hover {
  background: var(--raised)
}

.backend-nav details[data-current] summary,
.access-tree summary,
.brief-list th {
  color: var(--accent)
}

.brief-list th {
  background: var(--panel)
}

th,
td,
.brief-list th,
.brief-list td,
.access-leaf {
  border-color: var(--line)
}

.brief-rich-editor th {
  background: var(--raised);
  color: var(--accent)
}

.brief-editor-tabs button[aria-selected=true] {
  background: var(--gold);
  color: var(--page)
}

.brief-list td:nth-child(2) {
  width: auto;
  min-width: 220px
}

.brief-list small {
  color: var(--muted);
  display: block;
  max-width: 200px
}

.brief-review-form label {
  white-space: nowrap;
  margin: 0 0 8px
}

.brief-review-form button {
  padding: 6px 10px;
  font-size: 12px
}

.access-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text)
}

.access-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 24px 0;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px
}

.access-bulk label {
  margin: 0
}

.access-bulk span {
  align-self: center;
  color: var(--muted);
  font-size: 13px
}

.access-tree summary input {
  vertical-align: middle
}

.access-tree ul {
  border-color: var(--line)
}

@media(max-width:600px) {
  main {
    padding: 18px
  }

  .admin-brand-logo {
    width: 100px
  }

  .access-bulk label {
    width: 100%
  }
}

.tool-tabs {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px
}

.tool-tabs a {
  font-size: 14px
}

.feedback-message {
  white-space: pre-wrap;
  min-width: 280px;
  max-width: 640px;
  overflow-wrap: anywhere
}

.link-target {
  overflow-wrap: anywhere;
  max-width: 640px
}

td small {
  display: block;
  color: var(--muted);
  font-size: 12px
}

.brief-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  margin: 16px 0
}

.brief-list th button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0
}

.brief-export {
  margin: 28px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px
}

.brief-export form {
  display: inline-block;
  margin: 0 12px
}

.brief-export p {
  font-size: 13px
}

.brief-list tr[hidden] {
  display: none
}

.hoppie-panel {
  padding: 22px;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel)
}

.hoppie-panel>summary {
  cursor: pointer;
  font-weight: 600
}

.hoppie-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 14px/1.6 monospace;
  padding: 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px
}

.hoppie-address {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px
}

.hoppie-address dt {
  color: var(--muted)
}

.hoppie-address dd {
  margin: 0
}

.hoppie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.hoppie-actions form {
  margin: 0
}

.hoppie-history {
  padding: 14px 0;
  border-bottom: 1px solid var(--line)
}

.staff-admin-editor {
  padding: 24px;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel)
}

.staff-admin-photo {
  width: 100px;
  height: 125px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line)
}

.staff-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line)
}

.staff-admin-row h3 {
  margin: 0 0 8px
}

.staff-admin-row p {
  margin: 0
}

.staff-admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px
}

.staff-admin-actions form {
  margin: 0
}