/* Archive theme. All colour defaults remain editable through the UI settings. */
:root {
  --paper: #f4f0e6;
  --white: #fffbf3;
  --ink: #28211f;
  --muted: #75695c;
  --line: #d8ccb7;
  --red: #651d2c;
  --red-dark: #3b101c;
  --red-pale: #f1e3df;
  --gold: #887043;
  --gold-pale: #eee6d5;
  --sage: #57604b;
  --sage-pale: #e7ebdf;
  --shadow: 0 16px 48px #28211f22;
}

:root body {
  font-size: var(--ui-font-size, 16px);
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 80% 0, #88704308, transparent 55%);
}

/* A wine-coloured binding surrounds the light paper reading surface. */
.sidebar {
  background-color: var(--red-dark);
  background-image: linear-gradient(165deg, #ffffff08, transparent 55%);
  border-right-color: var(--gold);
  color: var(--white);
  box-shadow: inset -5px 0 0 #00000014;
}
.sidebar .brand strong { font-weight: 400; letter-spacing: 3px; }
.sidebar .brand small { font-size: 10px; letter-spacing: 1px; color: var(--line); }
.brand-mark {
  border: 1px solid var(--gold);
  border-radius: 2px;
  box-shadow: 3px 3px 0 #88704333;
  font-weight: 400;
}
.sidebar-rule { background: #ffffff26; margin: 28px 0 22px; }
.sidebar .nav-caption { color: var(--line); font-size: 12px; letter-spacing: 2px; }
.sidebar .nav-item { color: var(--white); font-size: 16px; border-radius: 3px; gap: 12px; }
.sidebar .nav-item:not(.active):hover { background: #ffffff10; }
.sidebar .nav-item.active {
  background: var(--red);
  box-shadow: inset 2px 0 var(--gold);
}
.sidebar .nav-count { color: var(--white); background: #ffffff18; font-size: 12px; }
.sidebar .sidebar-note { border-top-color: #ffffff26; padding-top: 23px; }
.sidebar .note-seal { color: var(--white); border-color: var(--gold); }
.sidebar .sidebar-note strong { font-size: 17px; font-weight: 400; letter-spacing: 1px; }
.sidebar .sidebar-note p { color: var(--line); font-size: 13px; }
.sidebar .sidebar-note p:first-child { margin-top: 0; }
.sidebar .text-button { color: var(--white); font-size: 13px; text-underline-offset: 4px; }
.sidebar-bottom { color: var(--line); border-top-color: #ffffff26; font-size: 11px; }
.connection-dot { background: #b8c09e; }

.topbar {
  background: var(--white);
  border-top: 3px solid var(--red);
  border-bottom-color: var(--line);
}
.breadcrumb, .author-button { font-size: 14px; color: var(--muted); }
.author-avatar { background: var(--gold-pale); color: var(--red); border: 1px solid var(--line); }
.topbar-actions { gap: 17px; }
.mobile-brand { font-weight: 400; color: var(--red); }
.page-heading { border-bottom: 1px solid var(--line); padding-bottom: 23px; }
.page-heading h1 { margin-bottom: 0; }
.page-heading .page-subtitle { margin-top: 8px; }
h1 { font-family: var(--ui-heading-font, var(--serif)); font-weight: 400; letter-spacing: 1px; }
h2, h3, .proof-column-heading h3 { font-family: var(--ui-heading-font, var(--serif)); font-weight: 400; }
.eyebrow { color: var(--gold); font-size: 11px; letter-spacing: 2px; }
.page-subtitle, .project-detail-description { font-size: 14px; color: var(--muted); }
.heading-actions { flex-wrap: wrap; justify-content: flex-end; }

.button { font-size: 14px; border-radius: 3px; min-height: 42px; }
.button-small { font-size: 13px; min-height: 36px; }
.button-quiet { font-size: 13px; }
.button-secondary:hover, .button-quiet:hover { background: var(--gold-pale); }
.button-primary { box-shadow: 0 1px 0 #ffffff12 inset; }
.icon-button:hover { background: var(--red-pale); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select, textarea { font-size: 16px; border-radius: 3px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .86; }
:focus-visible { outline-color: var(--gold); }

.stat-card, .project-card, .file-list, .activity-panel, .project-term-card,
.table-container, .dialog, .reader-dialog { border-radius: 4px; }
.stat-card { border-top: 2px solid var(--gold); min-height: 125px; }
.stat-card > span { font-size: 13px; }
.stat-card > small { font-size: 12px; color: var(--muted); }
.stat-card > strong { font-family: var(--serif); }
.stat-accent { border-color: var(--line); border-top-color: var(--red); }
.stat-accent::after { content: none; }
.section-toolbar h2 { font-size: 21px; }
.muted-count { font-size: 14px; }
.search-field { border-radius: 3px; min-height: 44px; }
.search-field input { font-size: 15px; }
.search-field:focus-within { outline-color: var(--gold); }
.toolbar-controls select, .term-filters select { font-size: 14px; }
#project-files-panel .toolbar-controls { flex-wrap: wrap; }
#show-hidden-files-control { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; }
.project-card { box-shadow: 0 2px 0 #8870430a; }
.project-card:hover { box-shadow: 0 8px 20px #28211f14; }
.project-cover { height: 145px; }
.project-cover::before { inset: 12px; border: 1px solid #ffffff40; }
.project-cover::after {
  width: auto;
  height: auto;
  inset: 16px;
  border-radius: 0;
  border: 1px solid #ffffff20;
  box-shadow: none;
}
.project-cover.tone-red { background: var(--red); color: var(--white); }
.project-cover.tone-olive { background: #4d5546; color: var(--white); }
.project-cover.tone-sand { background: #74634f; color: var(--white); }
.cover-glyph { font-weight: 400; letter-spacing: 5px; }
.cover-number { font-family: var(--serif); font-size: 12px; opacity: .85; bottom: 19px; }
.project-title-button { font-weight: 400; font-size: 22px; }
.project-description { font-size: 13px; height: 48px; }
.project-meta { font-size: 12px; }
.status-pill { border-radius: 3px; font-size: 12px; padding: 3px 7px; }
.file-title { font-size: 16px; font-weight: 400; }
.file-meta, .file-project-link { font-size: 12px; }
.file-icon { border-radius: 2px; font-size: 12px; }
.category-tag { font-size: 11px; color: var(--muted); background: var(--gold-pale); }
.info-banner { background: var(--gold-pale); border-color: var(--line); color: var(--muted); font-size: 14px; }
.empty-state { border-color: var(--line); border-radius: 4px; }
.empty-state p { font-size: 14px; }
.terms-summary { font-size: 13px; }
.terms-table th { font-size: 13px; background: var(--gold-pale); color: var(--muted); }
.terms-table td { font-size: 14px; }
.term-english { font-family: var(--sans); font-size: 17px; }
.term-chinese { font-size: 16px; }
.term-origin, .term-note, .term-book, .term-author, .term-word-forms { font-size: 13px; }
.term-untranslated, .term-date { font-size: 12px; color: var(--muted); }
.activity-row p { font-size: 15px; }
.activity-meta { font-size: 12px; }
.activity-symbol { border-radius: 3px; color: var(--red); background: var(--gold-pale); }
.back-button { font-size: 14px; }
.project-detail-meta { font-size: 13px; }
.project-tab { font-size: 15px; }
.project-term-card .term-note { font-size: 13px; }
.page-footer { font-size: 11px; color: var(--muted); }
.page-footer > span:first-child { font-size: 14px; }
.page-footer > span:last-child { line-height: 1.8; }

/* Book paragraphs keep their existing font size, spacing and source contents. */
.reader-header, .dialog-heading { border-bottom-color: var(--line); }
.dialog-heading h2 { font-weight: 400; }
.dialog::backdrop, .reader-dialog::backdrop { background: #22151be0; }
.field { font-size: 14px; font-weight: 400; }
.field input, .field textarea, .field select { font-size: 16px; }
.field-hint, .form-help, .form-error, .project-check { font-size: 13px; }
.project-checks { background: var(--paper); }
.upload-zone { border-color: var(--gold); background: var(--paper); }
.upload-zone > small, .upload-file-list > div { font-size: 13px; }
.history-header, .history-diff { font-size: 13px; }
.history-header time { font-size: 12px; }
.reader-header p:not(.eyebrow) { font-size: 12px; }
.proof-column { border-radius: 4px; }
.proof-column-heading { background: var(--paper); }
.proof-column-heading h3 { font-weight: 400; }
.proof-column-heading > span, .proof-row-meta, .proof-row-select,
.proof-source-note, .proof-help, .proof-status, .proof-legend-note,
.proof-readonly-note, .proof-edit-hint, .proof-source-label,
.proof-sequence-hint, .proof-table-label { font-size: 12px; }
.proof-badge { font-size: 12px; }
.proof-row:hover { background: var(--paper); }
.proof-row.is-selected { background: var(--paper); border-color: var(--gold); }
.proof-row.is-corresponding { background: var(--gold-pale); border-color: var(--gold); border-left-color: var(--gold); }
.proof-row.is-active { background: var(--red-pale); border-color: var(--red); border-left-color: var(--red); }
.proof-term-panel, .proof-operation-preview { background: var(--paper); border-color: var(--line); font-size: 14px; }
.proof-term-choice:hover, .proof-term-choice.is-current { background: var(--gold-pale); border-color: var(--gold); }
.proof-term-heading > span { font-size: 13px; }
.proof-term-options select { font-size: 14px; }
.access-note { background: var(--paper); color: var(--muted); font-size: 14px; }
.account-management-row p { font-size: 14px; }
.invite-result strong { font-size: 15px; font-weight: 400; }
.toast { font-size: 14px; border-color: var(--line); background: var(--white); color: var(--ink); }

/* The same paper and ink continue into the editing panel and credits. */
#ui-editor-panel {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--white);
  border-color: var(--gold);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
#ui-editor-panel .ui-editor-heading { background: var(--paper); border-bottom-color: var(--line); border-top: 3px solid var(--red); }
#ui-editor-panel .ui-editor-heading h2 { font-size: 20px; color: var(--ink); }
#ui-editor-panel .ui-editor-heading p, #ui-editor-panel .ui-editor-minimize { font-size: 13px; color: var(--muted); }
#ui-editor-panel .ui-editor-notice { font-size: 14px; color: var(--muted); background: var(--gold-pale); }
#ui-editor-panel .ui-editor-section { border-color: var(--line); }
#ui-editor-panel .ui-editor-section h3 { font-size: 17px; color: var(--ink); }
#ui-editor-panel .ui-editor-section > strong { font-size: 15px; font-weight: 400; color: var(--ink); }
#ui-editor-panel .ui-editor-section textarea { font-size: 16px; background: var(--white); border-color: var(--line); }
#ui-editor-panel .button { font-size: 14px; min-height: 40px; }
#ui-editor-panel .ui-editor-hint { font-size: 13px; color: var(--muted); }
#ui-editor-panel .ui-editor-search input, #ui-editor-panel .ui-editor-search select { font-size: 14px; }
#ui-editor-panel .ui-editor-label-list { background: var(--white); border-color: var(--line); }
#ui-editor-panel .ui-editor-label { font-size: 15px; color: var(--ink); border-color: var(--line); }
#ui-editor-panel .ui-editor-label small { font-size: 12px; color: var(--muted); }
#ui-editor-panel .ui-editor-label.is-active { background: var(--red-pale); border-left-color: var(--red); }
#ui-editor-panel .ui-editor-control { font-size: 14px; }
#ui-editor-panel .ui-editor-control input[type=range] { accent-color: var(--red); }
#ui-editor-panel .ui-editor-control output { font-size: 13px; color: var(--muted); }
#ui-editor-panel .ui-editor-control select { font-size: 15px; }
#ui-editor-panel .ui-editor-footer { background: var(--white); border-color: var(--line); }
#ui-editor-panel .ui-editor-footer small { font-size: 12px; color: var(--muted); }
#ui-editor-panel .ui-editor-pick { font-size: 14px; color: var(--ink); }
.ui-text-picking [data-ui-text], .ui-text-picking [data-ui-placeholder] { outline-color: var(--gold); }
.ui-text-picking .ui-text-selected { outline-color: var(--red); background: var(--red-pale); }
.about-header { border-top: 3px solid var(--red); }
.about-page .about-document { padding-top: 32px; }
.about-document article { background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: 30px 36px; }
.about-document h1 { font-weight: 400; }
.about-document h2 { color: var(--red); border-top: 1px solid var(--line); padding-top: 22px; }
.about-document h3 { color: var(--red); }
.about-document p:not(.eyebrow) { color: var(--ink); }
.about-footer { font-size: 13px; }

@media (max-width: 850px) {
  .topbar-actions { gap: 10px; }
  .sidebar .nav-item { font-size: 15px; padding-left: 10px; padding-right: 10px; }
  .sidebar .brand strong { letter-spacing: 1px; }
}
@media (max-width: 640px) {
  .sidebar { border-right: 0; border-bottom: 1px solid var(--gold); }
  .sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 8px; gap: 0; overflow: visible; }
  .sidebar .nav-item { width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 10px; gap: 8px; justify-content: flex-start; font-size: 15px; border-bottom: 1px solid #ffffff18; }
  .sidebar .nav-item > span:first-child { width: 18px; flex: 0 0 18px; }
  .sidebar .nav-item > span:nth-child(2) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar .nav-count { flex: none; margin-left: auto; min-width: 21px; font-size: 12px; }
  .sidebar .nav-caption { font-size: 12px; }
  .topbar { border-top: 2px solid var(--red); height: auto; min-height: 70px; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .breadcrumb, .author-button { font-size: 13px; }
  .mobile-brand { flex-shrink: 0; }
  .topbar-actions { gap: 7px; flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
  .topbar-actions .button { padding: 7px 10px; font-size: 13px; min-height: 44px; }
  .page-heading { padding-bottom: 20px; margin-bottom: 24px; gap: 12px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .page-subtitle, .project-detail-description { font-size: 14px; }
  .heading-actions .button { font-size: 13px; min-height: 37px; }
  .stats-grid { gap: 8px; }
  .stat-card { min-height: 112px; padding: 12px 10px; }
  .stat-card > span { font-size: 12px; }
  .stat-card > small { font-size: 11px; }
  .stat-card > strong { font-size: 30px; }
  .section-toolbar h2 { font-size: 20px; }
  .search-field input { font-size: 16px; }
  .toolbar-controls select, .term-filters select { font-size: 14px; max-width: 125px; }
  .project-cover { height: 142px; }
  .cover-glyph { font-size: 43px; }
  .project-description { font-size: 14px; height: auto; }
  .project-meta { font-size: 12px; }
  .file-title { font-size: 16px; }
  .file-meta { font-size: 12px; }
  .file-actions { flex-wrap: wrap; }
  .file-actions .button { font-size: 13px; min-height: 36px; padding: 7px 10px; }
  .info-banner { font-size: 14px; }
  .terms-summary { font-size: 13px; }
  .terms-table .term-english { font-size: 18px; }
  .terms-table .term-chinese { font-size: 16px; }
  .terms-table .term-note { font-size: 13px; }
  .terms-table td:nth-child(2)::before, .terms-table td:nth-child(3) { font-size: 13px; }
  .activity-row p { font-size: 15px; }
  .activity-meta { font-size: 12px; }
  .dialog-heading h2 { font-size: 25px; }
  .field { font-size: 14px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .reader-header h2, .proofreading-dialog .reader-header h2 { font-size: 18px; }
  .reader-header p:not(.eyebrow) { font-size: 12px; }
  .reader-actions .button, .reader-modes .button, .proofreading-dialog #reader-download { font-size: 13px; min-height: 36px; }
  .proof-help, .proof-column-heading > span, .proof-row-meta, .proof-row-select { font-size: 12px; }
  .project-term-card .term-note { font-size: 13px; }
  .page-footer { flex-wrap: wrap; gap: 8px; font-size: 11px; }
  .page-footer > span:last-child { font-size: 11px; max-width: 100%; text-align: left; }
  .about-header .brand strong { font-size: 20px; }
  .about-header .brand small { font-size: 9px; }
  .about-header .button { font-size: 13px; }
  .about-document article { padding: 22px 19px; }
  .about-page .about-document { width: calc(100% - 28px); padding-top: 20px; }
  .about-document h1 { font-size: 27px; }
  .about-footer { font-size: 13px; }
}

@media (max-width: 380px) {
  .page-heading { flex-direction: column; align-items: flex-start; gap: 14px; }
  .page-heading > div:first-child { width: 100%; min-width: 0; }
  .page-heading .heading-actions { width: 100%; justify-content: flex-start; margin-top: 0; }
  .page-heading > .button { width: auto; margin-top: 0; align-self: flex-start; flex-shrink: 0; }
  .page-heading .button, .page-heading .button [data-ui-text] { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card:hover { transform: none; }
}