/* ==========================================
   Charis SIL - self-hosted (SIL OFL 1.1)
   Carries every string that can contain Pali. Google Fonts is not used for
   this face: its subsets omit U+0306 combining breve, so the macron-breve
   vowels (a/i/u with both marks) would fall back to a system font and the
   two marks would collide. See assets/fonts/README.txt.
   ========================================== */
@font-face {
  font-family: 'Charis SIL';
  src: url('assets/fonts/CharisSIL-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charis SIL';
  src: url('assets/fonts/CharisSIL-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charis SIL';
  src: url('assets/fonts/CharisSIL-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================
   DTP Notes - Design System & Custom Styles
   Theme Inspired by dhammachaitipitaka.org
   ========================================== */

/* Variables */
:root {
  /* #site-header is sticky, so anything an anchor jumps to must be pushed
     down by at least this much or the header lands on top of it. */
  --header-height: 70px;
  --color-primary: #0b2341;
  --color-primary-light: #164682;
  --color-accent: #ed502e;
  --color-accent-hover: #ff581e;
  --color-text-dark: #333333;
  --color-text-light: #666666;
  --color-bg-light: #f6f9fd;
  --color-bg-sidebar: #f8fcff;
  --color-border: #e3e8ee;
  --color-table-header: #f0f4f8;
  
  /* Typography.
     --font-text is every string that can contain Pali: note titles, excerpts,
     note bodies, quotations, translations, keywords, author names.
     --font-ui is chrome only (nav, buttons, sidebar labels), kept on the main
     site's faces. Do not use --font-ui for note content: Open Sans and Raleway
     both lack U+0306, and Open Sans also lacks the dotted consonants. */
  --font-text: 'Charis SIL', 'Gentium Plus', Georgia, serif;
  --font-ui: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-pali: 'Charis SIL', Georgia, serif;
  /* Note numerals only. Georgia's old-style figures match the approved design;
     Charis SIL is the fallback because it also has old-style figures and,
     unlike the generic serif, equal-width digits. */
  --font-numeral: Georgia, 'Charis SIL', serif;

  /* Note number colours. The page is #f6f9fd (same as .section-bg on the main
     site), so the ghost zeros are cool grey, not the warm grey of the mock. */
  --color-num-ghost-card: #dee6f1;
  --color-num-ghost-page: #dbe4f0;
  --color-num-sig: #0b2341;
  --color-num-label: #8a94a3;
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 35, 65, 0.08);
  --shadow-lg: 0 10px 30px rgba(11, 35, 65, 0.12);
  
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* Reset and General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background-color: var(--color-bg-light);
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

ul {
  list-style: none;
}

/* Global Main Website Header */
.global-header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

/* Global Dropdown styling */
.global-dropdown {
  position: relative;
}

.global-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 6px 6px;
  min-width: 230px;
  padding: 10px 0;
  display: none;
  z-index: 1200;
  margin-top: 10px;
}

.global-dropdown a i {
  font-size: 10px;
  margin-left: 4px;
  transition: transform var(--transition-fast);
}

.global-dropdown:hover a i {
  transform: rotate(180deg);
}

.global-dropdown:hover .global-dropdown-menu {
  display: block;
  animation: globalFadeIn 0.2s ease;
}

.global-dropdown-menu li {
  width: 100%;
}

.global-dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  text-transform: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-dark);
}

.global-dropdown-menu li a::after {
  display: none !important;
}

.global-dropdown-menu li a:hover {
  background-color: #f6f9fd;
  color: var(--color-accent);
  padding-left: 24px;
}

/* Mobile Toggle for Global Nav */
@keyframes globalFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* DTP Notes Header */
#site-header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Bootstrap's .shadow, which is what the main site's header carries. The
     border and the lighter shadow that used to be here read as a different
     bar, and crossing from a main-site page to a note made the whole strip
     appear to twitch. See "Main-site navigation" below for the rest. */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  height: var(--header-height);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo a {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.dtp-brand {
  color: var(--color-primary);
}

.notes-brand {
  color: #d32f2f;
  font-weight: 400;
}

.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-primary);
  cursor: pointer;
}

/* Main Layout Grid */
/* 1140px and a 260px sidebar, both measured rather than picked.
   1140 is the main site's own container, so this section's body lines up with
   the bar above it instead of running 260px wider than everything else on the
   domain. 260 is what the sidebar actually needs: its longest label,
   "Abbreviations", sets 92px and the brand 104px, against 48px of padding -
   the Latest Notes titles below them wrap either way, and the search box and
   the keyword chips are not in here at all, they are in the content column.
   The 60px that comes off the sidebar goes to the evidence: a variant table
   gets 708px instead of 648. */
.main-layout {
  max-width: 1140px;
  margin: 30px auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  min-height: calc(100vh - 200px);
}

/* Sidebar Styling */
.sidebar {
  background-color: var(--color-bg-sidebar);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  align-self: start;
  box-shadow: var(--shadow-sm);
}

.sidebar-block {
  margin-bottom: 28px;
}

.sidebar-block:last-child {
  margin-bottom: 0;
}

.sidebar-block h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 8px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Search Box */
/* The vocabulary sits under the Keywords field, full width, because that is
   the field it writes into. It was tried in a column beside the field: once
   Keywords had a row to itself the column was narrow enough that almost every
   chip took a row of its own, which read as a long thin list rather than a
   set of words to pick from. Wrapping across the full width is denser and
   scans faster; the cap on how many are shown is what keeps it in bounds. */
.keyword-vocab {
  margin: -6px 0 18px;
  /* Two rows of chips. Twelve are shown at most and about eight fit a row at
     the form's width, so the cap and the box agree: a full vocabulary is two
     rows, and anything past that scrolls rather than growing the form. */
  max-height: 70px;
  overflow-y: auto;
}

.keyword-vocab:empty {
  display: none;
}

/* Sits on the chip row as its caption, aligned with the chips beside it. */
.keyword-vocab .keyword-helper-label {
  margin: 0;
  align-self: center;
  padding-right: 2px;
  white-space: nowrap;
}

.keyword-vocab .tags-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.keyword-vocab .tag-badge {
  cursor: pointer;
  font-size: 12px;
}

/* Reads as one more chip, so the row stays a single object, but plainly a
   control rather than a keyword. */
.tag-more {
  border: 1px dashed var(--color-border);
  border-radius: 999px;
  padding: 5px 14px;
  background: none;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text-light);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tag-more:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Which notes cite an entry. Quiet: the citation is the content, this is the
   thread back to where it is used. */
.ref-cited {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.abbrev-list .ref-cited {
  margin-top: 0;
  margin-left: 8px;
}

/* The shared keyword vocabulary, shown under the field that writes to it. */
.keyword-helper {
  margin-top: 8px;
}

.keyword-helper-label {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 6px;
}

.keyword-helper .tags-container {
  gap: 6px;
}

.keyword-helper .tag-badge {
  cursor: pointer;
  font-size: 12px;
}

/* A variant spelling splits the archive in two without saying so, which is
   the whole reason this warning exists. It advises; it never rewrites. */
.keyword-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-accent);
  background-color: #fdf3e7;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.45;
}

.keyword-warn .icon {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.keyword-warn button {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  background: #ffffff;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.keyword-warn button:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}

/* The one control on the Notes page. It is wide and plainly a search box
   because it is the only way in: the engine behind it already reads title,
   subtitle, excerpt, the whole note body, the author and the keywords, folds
   Pali diacritics both ways so "anduya" finds "anduya" with its macron, and
   takes "note 3" or a bare "3" as a citation lookup. */
.notes-search {
  margin-bottom: 28px;
}

.notes-search .search-input-wrapper input {
  padding: 16px 44px 16px 46px;
  font-size: 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.notes-search .search-icon {
  position: absolute;
  left: 18px;
  width: 16px;
  height: 16px;
  color: var(--color-text-light);
  pointer-events: none;
}

.notes-search #search-clear {
  right: 18px;
}

/* The chips read as suggestions under the box, not as a second control.
   Twelve of them come to two rows at this width, which is the resting state.
   "Show all" lifts that cap, and without a ceiling a hundred keywords would be
   fifteen rows - six hundred pixels of filter pushing the notes off the screen,
   which is the very thing the cap of twelve exists to prevent. So the expanded
   list gets its own scrollbar instead.

   Three rows: 33px a row and 8px between them. It was five, which is 190px,
   and on a 412px phone the nine keywords the archive has today already filled
   all five and scrolled - a fifth of the screen spent on a filter before the
   first note. Three is 115px on every screen. Past roughly 25 notes the
   keywords want a page of their own, the way References got one; this buys
   time, it does not solve that. */
.notes-search .tags-container {
  margin-top: 14px;
  gap: 8px;
  max-height: 115px;
  overflow-y: auto;
}

.notes-search .tags-container:empty {
  display: none;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper input {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: var(--transition-fast);
}

.search-input-wrapper input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 35, 69, 0.1);
}

#search-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-text-light);
  cursor: pointer;
  font-size: 16px;
}

#search-clear:hover {
  color: var(--color-accent);
}

/* Tags Cloud Filter */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-badge {
  font-family: var(--font-text);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
}

.tag-badge:hover {
  background-color: var(--color-bg-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.tag-badge.active {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

/* Sidebar Notes List */


.sidebar-notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-note-item {
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-normal);
}

.sidebar-note-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.sidebar-note-item.active {
  border-left: 4px solid var(--color-accent);
  background-color: #f6f8fb;
}

.sidebar-note-item h4 {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.sidebar-note-item .date {
  font-size: 11px;
  color: var(--color-text-light);
  display: block;
}

/* Content Area Styling */
.content-area {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 40px;
  box-shadow: var(--shadow-sm);
}

.container-box {
  width: 100%;
}

/* No cap on the paragraphs. Narrowing the layout took the line from about 97
   characters to 84 on its own; a 650px cap would have reached 77, but it left
   the prose ending short of the tables and plates beside it, and a ragged
   right edge running down the page cost more than the seven characters bought.
   The owner chose the flush edge with both measurements in front of him. */

.content-view {
  display: none;
}

.content-view.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Academic Header styling */
.academic-header {
  margin-bottom: 28px;
}

.view-title {
  font-family: var(--font-text);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.article-meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 8px;
}

.article-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.accent-line {
  width: 80px;
  height: 3px;
  background-color: var(--color-accent);
  margin-top: 14px;
}

/* Academic Text Body */
.view-body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text-dark);
}

.view-body p {
  margin-bottom: 20px;
  text-align: justify;
}

/* Academic Quote / Passage Highlight.

   The Pali line is roman, not italic. The importer carries the author's own
   <em> through from the .docx (docx_render_passage in api/_lib_docx.php), and
   italicising the whole line renders that emphasis identical to its
   surroundings - the note on the omission of `na` needs to be able to mark a
   word and be seen doing it. Italic here is the author's to spend, not the
   stylesheet's.

   The left rule is the only marker of quoted matter. The background tint and
   the blanket italic were two more saying the same thing.

   The Pali is the largest text on the page because it is the evidence the
   note is about, and because the stacked macron-breve vowels - a-macron plus
   U+0306 - need the vertical room. The translation stays a step smaller and
   greyer: with the italic gone, that contrast is what separates the two
   lines. Both are ragged-right; .view-body justifies its prose, but a short
   quotation justified at this measure opens rivers. */
.academic-passage {
  border-left: 3px solid var(--color-accent);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
}

/* Ragged right, against the justified prose around it. This has to match the
   specificity of `.view-body p` above and sit after it; setting text-align on
   .pali-quote alone loses to that selector and silently does nothing. */
.academic-passage p {
  text-align: left;
}

.pali-quote {
  font-family: var(--font-pali);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-primary);
  margin-bottom: 10px !important;
}

.translation {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.7;
  color: #5a6270;
  margin-bottom: 0 !important;
}

/* Contributor Sign Section */
.academic-footer {
  margin-top: 40px;
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}

.contributor-sign {
  display: inline-flex;
  flex-direction: column;
  border-left: 2px solid var(--color-border);
  padding-left: 14px;
}

.contributor-sign .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
}

.contributor-sign .name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2px 0;
}

.contributor-sign .role {
  font-size: 12px;
  color: var(--color-text-light);
}

/* Tables styling (Variants and script comparisons) */
.table-container {
  margin: 30px 0;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.table-container h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  background-color: var(--color-bg-light);
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
}

.variants-table, .scripts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.variants-table th, .variants-table td,
.scripts-table th, .scripts-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.variants-table th, .scripts-table th {
  background-color: var(--color-table-header);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.variants-table tbody tr:hover,
.scripts-table tbody tr:hover {
  background-color: #fafbfc;
}

.cell-highlight {
  background-color: var(--color-bg-light);
  font-weight: 600;
}

/* Image styling in cells */
.script-img {
  max-height: 28px;
  display: block;
  transition: transform var(--transition-fast);
}

.script-img:hover {
  transform: scale(2.2);
  cursor: zoom-in;
}

/* Figures and labelled tables.

   Numbered per note, and numbered even when a note has only one image: a
   label with no number cannot be pointed at, and these notes are built to be
   cited - they carry their own URLs and Scholar metadata. Adding the number
   later would renumber nothing but would break any citation already made.

   The caption is centred under the image, and small and grey against the
   17px body: the size and colour are what stop it reading as another
   paragraph of the argument, and the bold label is what the eye catches as
   the boundary between the two.

   A table's label sits above its rows rather than below, which is where a
   table's label belongs, and it is a real <caption> so it belongs to the
   table for a screen reader too. Unlabelled tables stay unlabelled: the
   variant tables are the note's baseline apparatus, not exhibits. */
figure {
  margin: 30px auto;
  max-width: 550px;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

figcaption,
.note-table > caption {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-light);
  text-align: center;
}

figcaption {
  margin-top: 11px;
}

.note-table > caption {
  caption-side: top;
  margin-bottom: 10px;
}

.fig-label {
  font-weight: 700;
  color: var(--color-primary);
}

/* General Article Image */
.article-image-container {
  margin: 30px auto;
  text-align: center;
  max-width: 550px;
  border: 1px solid var(--color-border);
  padding: 12px;
  border-radius: 8px;
  background-color: var(--color-bg-sidebar);
}

.article-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.image-caption {
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 10px;
  font-style: italic;
  margin-bottom: 0 !important;
}

/* Details Section References */
.references-section {
  margin-top: 36px;
  background-color: var(--color-bg-light);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.references-section h4 {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-primary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.references-section ul {
  padding-left: 20px;
  list-style-type: square;
  font-size: 13px;
  color: var(--color-text-light);
}

.references-section li {
  margin-bottom: 6px;
}

/* Article Tags Footer */
/* Keywords sit under the header's rule, not at the foot of the note.
   A note page carries no abstract - the prose starts straight after the
   header - so these are the only thing that tells a reader arriving from a
   citation what the note is about before the Pali begins. They are also the
   way back into the archive, which is why each one is a link.
   No "Keywords:" label: the chips are the same shape as the ones on the notes
   list, which carries none either, and the label cost a whole row on a phone
   to say what the shape already says. */
.article-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* All Notes Cards Grid */
.notes-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 20px;
}

.note-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 24px;
  background-color: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  cursor: pointer;
}

.note-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.note-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.note-card h2 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.note-card-meta {
  font-size: 12px;
  color: var(--color-text-light);
  margin-bottom: 14px;
  display: flex;
  gap: 16px;
}

.note-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.note-card-excerpt {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--color-text-dark);
  margin-bottom: 0;
  line-height: 1.7;
  /* Three lines for every card, so the grid keeps an even rhythm however long
     the note's opening runs. The full text stays in the DOM for search. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid #eef2f7;
}

/* How many keywords the card is not showing. Quiet, and deliberately not a
   chip: it is a count, not something to filter by. */
.tag-more {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-text-light);
  align-self: center;
  font-variant-numeric: tabular-nums;
}

.btn-readmore {
  /* Deliberately quiet: a filled accent button here competes with the note
     numeral and the title, which are what the reader should land on first. */
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: #5a657a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-readmore i {
  color: #a3aebd;
}

.btn-readmore:hover {
  color: var(--color-accent);
}

.btn-readmore:hover i {
  color: var(--color-accent);
}

/* Back navigation */
.back-nav {
  margin-bottom: 20px;
}

.btn-back {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-back:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-primary);
}

/* Filter Status Banner */
.filter-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-bg-sidebar);
  border: 1px dashed var(--color-primary-light);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 20px;
  font-size: 14px;
}

.btn-clear-filter {
  background: none;
  border: none;
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}

.btn-clear-filter:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* References Section in Refer Tab */
.references-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.reference-item {
  display: flex;
  gap: 14px;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
}

.reference-item i {
  color: var(--color-primary);
  font-size: 18px;
  margin-top: 3px;
}

.ref-text {
  font-size: 14px;
  color: var(--color-text-dark);
  margin-bottom: 0 !important;
}

/* A citation that carries a link has to look like one. The site's anchors are
   navy with no underline, which against #333 body text at 14px is no signal at
   all - a linked reference and a plain one were indistinguishable. */
.ref-text a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-decoration-color: rgba(22, 70, 130, 0.35);
  text-underline-offset: 2px;
}

.ref-text a:hover,
.ref-text a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* Contributor Card */
.contributor-card {
  background-color: var(--color-bg-sidebar);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 24px;
  margin-top: 10px;
}

.contributor-info h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-primary);
}

.contributor-info .designation {
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 12px;
}

.contributor-info .bio {
  font-size: 14px;
  margin-bottom: 16px;
}

.publications-list h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-primary);
}

.publications-list ul {
  padding-left: 20px;
  list-style-type: square;
  font-size: 13px;
}

/* Footer Section */
#footer {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 30px 0;
  margin-top: 60px;
  font-family: var(--font-heading);
}

.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom .copyright {
  font-size: 14px;
}

.footer-bottom .credits {
  font-size: 12px;
  color: #a2cce3;
}

/* Navigation Divider & Buttons */
.nav-divider {
  width: 1px;
  background-color: var(--color-border);
  margin: 10px 0;
}

.nav-link-external {
  color: var(--color-primary-light) !important;
  font-weight: 700 !important;
}

.nav-link-external:hover {
  color: var(--color-accent) !important;
}

/* Below Latest Notes, at the foot of the sidebar. One person signs in here;
   for everyone else this was the most prominent control on the page, sitting
   in the menu behind a divider as though it were a section of the archive. */
.sidebar-signin {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  text-align: right;
}

body.is-signed-in .sidebar-signin { display: none; }

.nav-btn-login {
  background: none;
  color: #9aa3ad;
  border: none;
  padding: 2px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--transition-fast);
  border-radius: 0;
}

.nav-btn-login:hover,
.nav-btn-login:focus-visible {
  color: var(--color-primary);
  background: none;
  text-decoration: underline;
}

.clickable-author {
  cursor: pointer;
  transition: var(--transition-fast);
}

.clickable-author:hover {
  color: var(--color-accent) !important;
  text-decoration: underline;
}

.nav-btn-admin {
  background-color: var(--color-primary);
  color: #ffffff;
  border: 1px solid var(--color-primary-light);
  padding: 8px 16px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-btn-admin:hover {
  background-color: var(--color-primary-light);
}

#menu-auth-container {
  position: relative;
}

/* Admin Dropdown styling */
.nav-admin-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  min-width: 180px;
  z-index: 1001;
  margin-top: 8px;
}

.nav-admin-dropdown-list.show {
  display: block;
}

.nav-admin-dropdown-list li {
  width: 100%;
}

.nav-admin-dropdown-list button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-admin-dropdown-list button:hover {
  background-color: var(--color-bg-light);
  color: var(--color-accent);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: 6px 0;
}

/* Modal Styling */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 35, 65, 0.5);
  backdrop-filter: blur(4px);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.show {
  display: flex;
  opacity: 1;
}

.modal-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
  border: 1px solid var(--color-border);
}

.modal-overlay.show .modal-card {
  transform: translateY(0);
}

.modal-large {
  max-width: 800px;
}

.modal-header {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.8;
  transition: var(--transition-fast);
}

.modal-close:hover {
  opacity: 1;
  color: var(--color-accent);
}

.modal-body {
  padding: 24px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.modal-footer {
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  padding: 16px 24px;
  text-align: center;
  font-size: 13px;
}

.modal-footer a {
  font-weight: 600;
  color: var(--color-accent);
}

/* Forms & Inputs */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-dark);
  transition: var(--transition-fast);
}

/* Anything an editor types Pali into is set in --font-text, for the same
   reason the published page is. Measured in this browser: Open Sans has no
   glyph for m t d n l with the dot below, nor for the macron-breve vowels a i,
   so each one fell through to a fallback face mid-word - in the very fields
   where an editor is checking the spelling. The number and the date are not
   Pali and keep the UI face; so do labels and buttons, which are chrome. */
.form-group input[type="text"],
.form-group textarea {
  font-family: var(--font-text);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-primary-light);
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 70, 130, 0.15);
}

.form-row {
  display: flex;
  gap: 16px;
}

.col-6 {
  flex: 1;
}

/* Widths for the note form, as proportions of the row. The percentages are
   flex-basis with no grow, so the 16px gaps come out of whatever is left
   rather than pushing the row past 100%. min-width:0 lets an input shrink
   inside its column instead of forcing the row wider than the modal. */
.col-10   { flex: 0 0 10%; min-width: 0; }
.col-30   { flex: 0 0 30%; min-width: 0; }
.col-40   { flex: 0 0 40%; min-width: 0; }
.col-fill { flex: 1 1 auto; min-width: 0; }
.col-auto { flex: 0 0 auto; }          /* date keeps its natural width */

@media (max-width: 900px) {
  /* Stack, rather than squeeze a date field and a keyword list side by side. */
  .form-row {
    flex-wrap: wrap;
  }
  .form-row > .form-group {
    flex: 1 1 100%;
  }
}

/* Button UI */
.btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
}

.btn-secondary {
  background-color: #e3e8ee;
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: #ccd4dc;
}

.btn-success {
  background-color: #2e7d32;
  color: #ffffff;
}

.btn-success:hover {
  background-color: #1b5e20;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Alerts */
.alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-danger {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
}

.alert-success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

/* Callouts & Special Blocks */
.academic-callout {
  padding: 16px;
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-bg-light);
  border-radius: 0 8px 8px 0;
  margin-bottom: 20px;
  font-size: 14px;
}

.academic-callout.warning {
  border-left-color: var(--color-accent);
  background-color: #fffbf9;
}

.instruction-text {
  font-size: 14px;
  color: var(--color-text-light);
  margin-bottom: 16px;
  line-height: 1.5;
}

.email-box {
  background-color: var(--color-bg-light);
  border: 1px dashed var(--color-border);
  padding: 14px;
  text-align: center;
  border-radius: 8px;
  color: var(--color-primary);
  font-size: 16px;
  margin: 20px 0;
}

.btn-email-link {
  text-decoration: none;
}

.code-output-container {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 12px;
}

.code-output-container textarea {
  width: 100%;
  height: 250px;
  font-family: var(--font-pali);
  font-size: 12px;
  background-color: #fafbfd;
  padding: 12px;
  border: none;
  resize: none;
  outline: none;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .main-layout {
    grid-template-columns: 1fr;
    margin: 20px auto;
  }

  /* Notes come before the filters on a narrow screen. Stacked in source
     order the reader would scroll past the search box, every keyword and the
     whole latest-notes list before reaching the first note. */
  .content-area {
    order: 1;
  }

  .sidebar {
    order: 2;
    position: static;
  }

  /* Global Nav Responsive Collapse */
  .global-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-accent);
    padding: 5px 0 5px 15px;
    margin-top: 5px;
    display: block; /* Expand dropdowns on mobile for easy navigation */
  }
  
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 20px;
  }
  
  .main-layout {
    padding: 0 20px;
  }
  
  .content-area {
    padding: 24px;
  }
  
  /* Mobile Menu Toggle */
  .mobile-nav-toggle {
    display: block;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* ==========================================
   Rich Text Editor (RTE) Styles
   ========================================== */

.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--color-table-header);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-size: 13px;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
  line-height: 1;
}

.rte-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.rte-btn:active {
  transform: scale(0.93);
}

.rte-btn-image {
  background: #e8f4fd;
  border-color: #b3d4ec;
  color: #1565c0;
  gap: 4px;
}

.rte-btn-image:hover {
  background: #1565c0;
  color: #fff;
  border-color: #1565c0;
}

.rte-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--color-border);
  margin: 0 4px;
  flex-shrink: 0;
}

.rte-select {
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-size: 12px;
  color: var(--color-text-dark);
  background: #fff;
  cursor: pointer;
  outline: none;
  font-family: var(--font-body);
}

.rte-select:hover {
  border-color: var(--color-primary);
}

/* The editable content area */
.rte-body {
  min-height: 280px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 0 0 8px 8px;
  background: #fff;
  font-family: var(--font-text);  /* the note body is Pali; see the form-field note above */
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-dark);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rte-body:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(22, 70, 130, 0.12);
}

/* Placeholder support via CSS */
.rte-body:empty:before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
  display: block;
}

/* Rich content styling inside the editor */
.rte-body h1,
.rte-body h2,
.rte-body h3,
.rte-body h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 12px 0 6px;
}

.rte-body p {
  margin: 0 0 10px;
}

.rte-body blockquote {
  border-left: 4px solid var(--color-accent);
  margin: 12px 0;
  padding: 8px 16px;
  background: #fff8f6;
  color: var(--color-text-light);
  border-radius: 0 6px 6px 0;
}

.rte-body pre {
  background: #f1f3f5;
  padding: 12px;
  border-radius: 6px;
  font-family: var(--font-pali);
  font-size: 12px;
  overflow-x: auto;
}

.rte-body a {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* Images inserted via the toolbar */
.rte-body img,
.rte-inserted-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  /* Allow browser native resize handle in Firefox */
  resize: both;
  overflow: auto;
}

.rte-body img:hover,
.rte-inserted-img:hover {
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ==========================================
   Edit / Delete Article Buttons
   ========================================== */

.back-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

#detail-admin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-edit-article {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.25);
}

.btn-edit-article:hover {
  background: linear-gradient(135deg, #0d47a1, #1565c0);
  box-shadow: 0 4px 14px rgba(21, 101, 192, 0.4);
  transform: translateY(-1px);
}

.btn-edit-article:active {
  transform: translateY(0);
}

.btn-delete-article {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: transparent;
  color: #c62828;
  border: 1.5px solid #c62828;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-delete-article:hover {
  background: #c62828;
  color: #fff;
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3);
  transform: translateY(-1px);
}

.btn-delete-article:active {
  transform: translateY(0);
}

/* ==========================================
   Upload Preview Button & Panel
   ========================================== */

.btn-preview {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #00897b, #00acc1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 137, 123, 0.3);
}

.btn-preview:hover {
  background: linear-gradient(135deg, #00796b, #0097a7);
  box-shadow: 0 4px 14px rgba(0, 137, 123, 0.45);
  transform: translateY(-1px);
}

.btn-preview:active {
  transform: translateY(0);
}

.preview-panel {
  margin-top: 20px;
  border: 2px dashed #00acc1;
  border-radius: 10px;
  overflow: hidden;
  animation: previewSlideIn 0.3s ease;
}

@keyframes previewSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.preview-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #00897b, #00acc1);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.preview-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 20px;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 800;
}

.preview-panel-body {
  padding: 24px 28px;
  background: #fafffe;
  border-top: none;
}

.preview-excerpt {
  padding: 10px 16px;
  background: #f0fafb;
  border-left: 4px solid #00acc1;
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--color-text-light);
  font-size: 14px;
  margin-bottom: 8px;
}

/* ==========================================
   Full-Screen Article Preview Overlay
   ========================================== */

.fullscreen-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-light);
  overflow: hidden;
  animation: fpFadeIn 0.2s ease;
}

@keyframes fpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Top bar */
.fp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #00695c, #00897b, #00acc1);
  box-shadow: 0 2px 12px rgba(0, 105, 92, 0.35);
  z-index: 1;
}

.fp-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.fp-hint {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-family: var(--font-body);
  padding: 3px 10px;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
}

.fp-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fp-close-btn:hover {
  background: rgba(255,255,255,0.3);
  border-color: #fff;
}

/* Scrollable body below topbar */
.fp-site-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar — mirrors real .sidebar */
.fp-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: 24px 20px;
}

/* Content area — mirrors real .content-area */
.fp-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
  background: #fff;
}

/* On smaller viewports collapse sidebar */
@media (max-width: 900px) {
  .fp-sidebar { display: none; }
}

/* ==========================================
   Fullscreen Editor Overlay (Edit Article)
   ========================================== */

.fullscreen-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;           /* below preview (99999) but above everything else */
  display: flex;
  flex-direction: column;
  background: var(--color-bg-light);
  animation: fpFadeIn 0.2s ease;
}

/* Top bar — navy brand colour */
.fe-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  box-shadow: 0 2px 12px rgba(11, 35, 65, 0.4);
}

.fe-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fe-title {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.fe-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fe-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fe-close-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: #fff;
}

/* Scrollable form body */
.fe-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 40px 32px;
}

/* Inner form wrapper — max readable width */
.fe-form-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Fullscreen RTE body — expands to fill available height */
.rte-body-fullscreen {
  min-height: 50vh;
  max-height: none;
  flex: 1;
  resize: none;
}

/* Ensure Preview overlay sits above editor overlay */
.fullscreen-preview-overlay {
  z-index: 99999 !important;
}

/* ==========================================
   Note number
   Padded to four figures, leading zeros ghosted. Georgia's old-style figures
   (0,3,4,5,6,7,8,9 drop below the baseline) are what make the numeral read as
   book typography rather than dashboard UI.

   Every digit is wrapped in .nn-d with a fixed width because Georgia's digits
   are NOT equal width (880 to 1257 units) and Georgia ships no `tnum`
   feature, so font-variant-numeric has no effect on it. Without this the
   0001 and 8888 blocks come out different widths, the right edge frays, and
   the DTP NOTE label underneath shifts from card to card.
   ========================================== */
.note-number {
  font-family: var(--font-numeral);
  line-height: 0.95;
  letter-spacing: 0.01em;
  display: block;
  /* Four fixed-width digits must stay on one line; if the column is ever a
     little too narrow the block would otherwise break as "000" / "1". */
  white-space: nowrap;
}

.note-number .nn-d {
  display: inline-block;
  width: 0.60em;
  text-align: center;
}

.note-number .nn-pad {
  color: var(--color-num-ghost-card);
}

.note-number .nn-sig {
  color: var(--color-num-sig);
}

.note-number-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-num-label);
  margin-top: 8px;
  display: block;
}

/* On the page background rather than a white card, the ghost needs to sit a
   shade darker to stay visible. */
.on-page-bg .note-number .nn-pad {
  color: var(--color-num-ghost-page);
}

/* Card variant */
.note-card .note-number-block {
  text-align: center;
}

.note-card .note-number {
  font-size: 52px;
}

/* Detail-view variant */
.note-detail-number-block {
  text-align: center;
}

.note-detail-number-block .note-number {
  font-size: 64px;
}

.note-detail-number-block .note-number-label {
  font-size: 11px;
}

/* Sidebar variant: label only, no numeral */
.sidebar-note-item .note-number-label {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 9px;
}

/* Detail header lays the numeral beside the title */
.article-detail-head {
  display: grid;
  /* 64px numeral x 4 digits x 0.60em = 154px, so the column must clear that. */
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 768px) {
  /* Numeral moves above the title and shrinks, rather than eating a column
     of a 375px screen. */
  .note-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .note-card .note-number-block,
  .note-detail-number-block {
    text-align: left;
  }

  .note-card .note-number {
    font-size: 38px;
  }

  .note-detail-number-block .note-number {
    font-size: 44px;
  }

  .note-number-label {
    margin-top: 4px;
  }

  .article-detail-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Hint text under a form field */
.field-hint {
  display: block;
  margin-top: 5px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-light);
}

/* ==========================================
   Main-site navigation
   A copy of the main site's nav, and it has to measure like one. Bootstrap is
   deliberately not loaded, so the responsive behaviour is here.

   Every number below is taken from the main site's own stylesheet rather than
   chosen: .container is 1140px with 15px padding, #header .logo img is 60px,
   .nav-menu > ul > li is padding 10px 0 10px 28px, and .nav-menu a is Open
   Sans 14px/500 uppercase. It was a restyled copy before - Raleway 13px/600
   in a 1400px container - which put the first menu item at x=371 on a main
   page and x=714 here. The bar looked the same and sat in a different place,
   so moving between the two sites made it jump.
   ========================================== */
.site-header-inner {
  max-width: 1140px;
  height: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
}

/* The main site's header is logo / nav / language link, with an auto margin
   either side of the nav, so the free space splits in two and the nav lands
   between them. Reproduced here, with an empty box standing in for the
   language link this section does not offer: without something holding that
   width the nav slides ~170px right and the alignment is lost again. The 51px
   is the rendered width of that link, fixed rather than derived so a font
   swap on the other site cannot move this one. */
.site-header-inner::after {
  content: '';
  flex: 0 0 auto;
  width: 51px;
  margin-left: auto;
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}

.site-logo img {
  height: 60px;
  width: auto;
  display: block;
}

.site-nav > ul {
  display: flex;
  align-items: center;
}

/* The spacing is the li's, exactly as on the main site - not the link's. */
.site-nav > ul > li {
  padding: 10px 0 10px 28px;
  white-space: nowrap;
}

.site-nav li {
  position: relative;
}

.site-nav > ul > li > a {
  display: block;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}

.site-nav > ul > li > a:hover,
.site-nav > ul > li.active > a {
  color: var(--color-accent);
}

/* Publication is marked on every DTP Notes page the way the main site marks
   its current section: by colour alone, in the rule above. There used to be a
   2px rule under it as well, which nothing on a main-site page has. */

/* The main site puts a chevron after every label that opens a submenu, and it
   is 18px of the bar - a 13px IcoFont glyph plus 5px of padding-left. Five
   labels carry one, so leaving it out held this menu 45px left of the main
   site's even once the type and the container matched.

   Drawn from a character in a box of a fixed width rather than borrowed:
   pulling in IcoFont would be a whole webfont for one arrow, and the width has
   to be exact whichever font ends up rendering the triangle. currentColor
   means it turns with the link, the way the main site's does. */
.site-nav .drop-down > a::after {
  content: '\25BE';
  display: inline-block;
  width: 13px;
  margin-left: 5px;
  text-align: center;
  font-size: 0.8em;
  line-height: 1;
}

/* Dropdowns */
.site-nav .drop-down > ul {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: var(--transition-fast);
  z-index: 1001;
}

.site-nav .drop-down:hover > ul,
.site-nav .drop-down:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav .drop-down > ul a {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}

.site-nav .drop-down > ul a:hover,
.site-nav .drop-down > ul li.active > a {
  background-color: var(--color-bg-light);
  color: var(--color-accent);
}

.site-nav .drop-down > ul li.active > a {
  font-weight: 600;
}

.site-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--color-primary);
  cursor: pointer;
  padding: 6px 10px;
}

/* ==========================================
   DTP Notes section menu, in the sidebar
   ========================================== */
.section-nav-block {
  padding-bottom: 18px;
}

.sidebar-brand {
  display: block;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.sidebar-brand .dtp-brand { color: var(--color-primary); }
.sidebar-brand .notes-brand { color: var(--color-accent); }

.section-nav li a {
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
}

.section-nav li a:hover {
  color: var(--color-accent);
  background-color: #ffffff;
}

.section-nav li.active > a {
  border-left-color: var(--color-accent);
  background-color: #ffffff;
  color: var(--color-accent);
}

.section-nav li.nav-disabled > a {
  color: #b9c0cb;
  cursor: not-allowed;
  pointer-events: none;
}

/* Only the admin group lives here now, and only when signed in - so the rule
   above it belongs to that group rather than to this container, which would
   otherwise draw a divider under an empty space for every reader. */
.sidebar-auth {
  position: relative;
}

#nav-admin-group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 992px) {
  .site-nav-toggle {
    display: block;
  }

  /* The empty box that reserves the main site's language-link width belongs to
     the desktop bar only. Below this breakpoint the nav is hidden and the two
     auto margins had nothing between them, so they split the row evenly and
     parked the menu button in the middle of the screen. */
  .site-header-inner::after {
    display: none;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: 12px 20px 18px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }

  .site-nav.open {
    display: block;
  }

  .site-nav > ul {
    display: block;
  }

  /* The 28px that spaces the items along the desktop bar would indent every
     row of the drawer. */
  .site-nav > ul > li {
    padding: 0;
  }

  .site-nav > ul > li > a {
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
  }

  /* Submenus are always open on a phone: hover has no meaning on touch and a
     second tap-to-expand step buries the links. */
  .site-nav .drop-down > ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 0 8px 14px;
    min-width: 0;
  }

  .site-nav .drop-down > ul a {
    padding: 8px 0;
  }
}

/* ==========================================
   Imported note structures: footnotes and tables
   ========================================== */
.note-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-text);
  font-size: 14px;
  margin: 4px 0;
}

.note-table th,
.note-table td {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.note-table th {
  background-color: var(--color-table-header);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

/* A cell merged down the table labels the whole run beneath it, so it sits in
   the middle of what it labels rather than at the top of the first row. */
.note-table td[rowspan],
.note-table th[rowspan] {
  vertical-align: middle;
  text-align: center;
}

.note-table td:empty::after {
  /* An empty apparatus cell means "not attested here"; a dash reads as
     deliberate where blank space reads as an oversight. */
  content: '\2014';
  color: #c3c9d2;
}

/* A wide comparison table scrolls inside its own box rather than pushing the
   whole page sideways on a phone. */
.table-scroll {
  overflow-x: auto;
  margin: 24px 0;
  border-radius: 6px;
}

.view-body p.ta-center { text-align: center; }
.view-body p.ta-right  { text-align: right; }

.view-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 4px;
}

/* Footnote reference in the running text */
sup.fn-ref {
  font-size: 0.72em;
  line-height: 0;
  margin-left: 1px;
}

sup.fn-ref a {
  color: var(--color-accent);
  text-decoration: none;
  padding: 0 1px;
}

sup.fn-ref a:hover,
sup.fn-ref a:focus {
  text-decoration: underline;
}

/* Jumping to a footnote and back again lands the anchor at the very top of
   the viewport, which is exactly where the sticky #site-header sits - so the
   line the reader was sent to arrived hidden underneath it. Hold it clear of
   the header, with a little room above so the line reads as part of its
   paragraph rather than pinned to an edge. */
sup.fn-ref {
  /* Generous, because a marker sits at the END of its sentence: land it a few
     lines down so the sentence the reader came back for is on screen too. */
  scroll-margin-top: calc(var(--header-height) + 120px);
}

.footnotes li {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* Highlight the target so a reader who jumps to a note can see which one */
.footnotes li:target,
sup.fn-ref:target {
  background-color: #fdf3e7;
}

.footnotes {
  margin-top: 40px;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.7;
  color: #4a5563;
}

.footnotes hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-bottom: 18px;
  width: 220px;
  margin-left: 0;
}

.footnotes ol {
  list-style: decimal;
  padding-left: 24px;
}

.footnotes li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.footnotes li::marker {
  color: var(--color-text-light);
}

.fn-back {
  margin-left: 6px;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 15px;
}

@media print {
  /* A printed note keeps its number and full URL so it stays citable off the
     screen; the chrome goes. */
  #site-header, .sidebar, .back-nav, .note-card-footer .btn-readmore,
  #detail-admin-bar, .site-nav-toggle { display: none !important; }

  .main-layout { display: block; max-width: none; padding: 0; margin: 0; }
  .content-area { box-shadow: none; border: none; padding: 0; }
  body { background: #fff; font-size: 11pt; }

  .table-scroll { overflow: visible; }
  .view-body img { max-width: 60%; }

  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  sup.fn-ref a::after, .fn-back::after { content: none; }

  .footnotes { page-break-inside: avoid; }
}

/* ==========================================
   Standalone note page (note.php)
   Same styling as the in-app detail view. The sidebar here carries only the
   section list, so the grid keeps the app's 320px column but caps the reading
   column at the 900px this page used when it stood alone - a note is long
   scholarly prose, and widening the measure to fill 1400px makes it harder to
   read, not easier.

   The grid needs no override of its own for that any more: .main-layout is
   1140 wide with a 260px sidebar, which leaves 790 here, and the measure is
   capped on the running text rather than on the column - see .view-body > p
   below. Capping the column would have taken the variant tables and the
   manuscript plates down with the sentences, and in a critical edition those
   are the evidence, not decoration.
   ========================================== */

@media (max-width: 1024px) {
  /* One column, nav first: on a narrow screen the note is what was asked for,
     but a list of six links above it is cheaper to scroll past than to hunt
     for at the bottom. */
  .main-layout.standalone-note {
    display: block;
    max-width: 900px;
  }
  .main-layout.standalone-note .sidebar {
    margin-bottom: 24px;
  }
}

.cite-block {
  margin-top: 40px;
  padding: 18px 22px;
  background-color: var(--color-bg-light);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
}

/* The label and the button share a line, so the button sits with what it
   copies rather than floating over the citation. */
.cite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.cite-block h4 {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0;
}

.cite-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Reserved so "Copy" -> "Copied" -> "Press Ctrl+C" does not move the button
     out from under the cursor mid-click. */
  min-width: 104px;
  justify-content: center;
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background-color var(--transition-fast);
}

.cite-copy .icon { width: 13px; height: 13px; }

.cite-copy:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cite-copy:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Confirmation, held for two seconds. Green rather than the accent: this
   reports that something finished, it is not another thing to press. */
.cite-copy[data-copied] {
  border-color: #b5d6b8;
  background: #f2f9f3;
  color: #2f6b39;
}

@media print {
  .cite-copy { display: none; }
}

.cite-block p {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-dark);
  margin: 0;
  /* A citation is copied by hand, so let it wrap rather than scroll. */
  overflow-wrap: anywhere;
}

.standalone-note .btn-back {
  display: inline-block;
  text-decoration: none;
}

/* Card title and Read more are real links so crawlers can follow them; the
   card's click handler drives in-page navigation for everyone else. */
.note-card h2 a,
a.btn-readmore {
  color: inherit;
  text-decoration: none;
}

.note-card h2 a:hover {
  color: var(--color-accent);
}

/* ==========================================
   People (owner only)
   ========================================== */
.people-block { margin-bottom: 34px; }

.people-block h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.person-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}

.person-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.person-initials {
  background-color: var(--color-bg-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
}

.person-name {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
}

.person-meta {
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 2px;
}

.person-said {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-dark);
  background-color: var(--color-bg-light);
  border-radius: 6px;
  padding: 8px 11px;
  margin-top: 7px;
}

.person-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.person-role {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: #fff;
}

.btn-sm {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
}

.btn-sm:hover { border-color: var(--color-primary); }

.btn-danger-text {
  color: #a32d2d;
  border-color: transparent;
}

.btn-danger-text:hover { border-color: #e0b4b4; background: #fdf6f6; }

.role-badge {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 11px;
  text-transform: lowercase;
}

.role-owner       { background: #e6f1fb; color: #185fa5; }
.role-contributor { background: var(--color-bg-light); color: var(--color-text-light); }

.verified-badge {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  color: #0f6e56;
  border: 1px solid #9fe1cb;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.pending-pill {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  background: #faeeda;
  color: #854f0b;
  border-radius: 10px;
  padding: 2px 9px;
}

.muted-note {
  font-size: 13px;
  color: var(--color-text-light);
}

/* Sign-in modal */
.modal-lede {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-light);
  margin-bottom: 18px;
}

.google-signin-slot {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-bottom: 6px;
}

.pending-badge {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #faeeda;
  color: #854f0b;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}

@media (max-width: 620px) {
  .person-row { grid-template-columns: 32px minmax(0, 1fr); }
  .person-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
}

/* ==========================================
   .docx import step
   ========================================== */
.docx-import {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 26px;
  background-color: var(--color-bg-light);
}

.docx-import-head h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-primary);
  margin-bottom: 5px;
}

.docx-drop {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-top: 14px;
  background-color: #fff;
  transition: var(--transition-fast);
}

.docx-drop.dragging {
  border-color: var(--color-accent);
  background-color: #fffaf8;
}

.import-report {
  margin-top: 14px;
  padding: 14px 16px;
  background-color: #fff;
  border-left: 3px solid #1d7a5a;
  border-radius: 0 6px 6px 0;
}

.import-tally {
  font-size: 14px;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}

.import-tally strong {
  font-family: var(--font-numeral);
  font-size: 17px;
  color: var(--color-primary);
}

.import-warnings {
  list-style: disc;
  padding-left: 20px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #854f0b;
}

.import-warnings li { margin-bottom: 5px; }

/* ==========================================
   Icons
   SVG symbols from assets/icons.svg, replacing the Font Awesome webfont.

   A font glyph inherits size and colour from its surroundings for free; an
   <svg> has to be told. 1em and currentColor reproduce that, so an icon still
   follows whatever text it sits beside.
   ========================================== */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  /* Sit on the text baseline rather than the bottom of the line box, which is
     where an inline SVG lands by default. */
  vertical-align: -0.125em;
  flex-shrink: 0;
  pointer-events: none;
}

/* Buttons that are nothing but an icon need a hit area regardless of glyph. */
.modal-close .icon,
.site-nav-toggle .icon {
  width: 1.1em;
  height: 1.1em;
}

.site-nav-toggle .icon {
  vertical-align: -0.2em;
}

/* The editor toolbar sets its own sizing */
.rte-toolbar .icon {
  width: 15px;
  height: 15px;
  vertical-align: -0.15em;
}

/* ==========================================
   Reference lists: abbreviations and contributors
   ========================================== */
/* Navy, not grey. Everything structural on these pages is already navy - the
   view title, the note numerals, the names themselves - and a grey label was
   the only part of the hierarchy outside that system, which is exactly why it
   read as faint rather than as a heading. #666 on white is 5.7:1; this is
   15.8:1. Size, case, tracking and the rule keep it clear of the content it
   introduces. */
/* A group heading, on Contributors and on References.

   It used to sit on a hairline, and every row under it sits on a hairline
   too, so the heading read as one more row - a row set smaller than the ones
   it was labelling, and in exactly their colour. Uppercase and letter-spacing
   were the only things telling them apart, and they were not enough.

   The mark is the page title's accent colour, turned on its side. It was a
   34px rule above the heading first, which cleared up the confusion with the
   row separators but started another: the page title carries an 80px rule of
   the same colour and thickness, so the first heading on a page put two
   horizontal orange rules one above the other, and they read as one doubled
   device. Spacing them further apart did not help - they were still two
   horizontal rules.

   Standing it up settles it. A vertical bar cannot be confused with either a
   horizontal rule above it or a hairline below it, and every group keeps the
   same mark, including the first. Orange appears nowhere else in either
   list. */
.ref-group {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 34px 0 12px;
  padding-left: 13px;
  position: relative;
}

.ref-group::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background-color: var(--color-accent);
}

.ref-group:first-child { margin-top: 0; }

/* A definition list, not a table: an abbreviation and its meaning are a term
   and its definition, and it reflows on a phone where a table cannot. */
.abbrev-list {
  display: grid;
  grid-template-columns: minmax(56px, max-content) minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
  font-family: var(--font-text);
  font-size: 15px;
}

.abbrev-list dt {
  font-weight: 700;
  color: var(--color-primary);
  /* Sigla are compared down the column, so keep them aligned. */
  font-variant-numeric: tabular-nums;
}

.abbrev-list dd {
  margin: 0;
  color: var(--color-text-dark);
  line-height: 1.6;
}

/* Contributors: a team per line, its people behind the count.
   Every name can hold Pali, so every name is --font-text; the counts and
   labels around them are chrome and stay on the UI face. */
.contrib-teams {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contrib-teams > li { border-bottom: 1px solid var(--color-table-header); }
.contrib-teams > li:last-child { border-bottom: 0; }

/* The four transcription teams are one centre in four countries: name the
   centre once, then bullet the countries under it. */
.contrib-org {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 4px;
}

.contrib-teams.is-nested { padding-left: 22px; }
.contrib-teams.is-nested > li { list-style: disc; }
.contrib-teams.is-nested > li::marker { color: var(--color-text-light); }

.contrib-row,
.contrib-team > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 9px 0;
}

.contrib-team > summary {
  cursor: pointer;
  list-style: none;
}

.contrib-team > summary::-webkit-details-marker { display: none; }

.contrib-name {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-primary);
  min-width: 0;
}

.contrib-notes {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-text-light);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The count is the control that opens the team, so it has to look like one. */
.contrib-count {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-table-header);
  border-radius: 3px;
  padding: 3px 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.contrib-count::after { content: " \25B8"; font-size: 0.72em; opacity: 0.7; }
.contrib-team[open] > summary .contrib-count::after { content: " \25BE"; }

.contrib-team > summary:hover .contrib-count,
.contrib-team > summary:focus-visible .contrib-count {
  background: var(--color-accent);
  color: #fff;
}

/* A team credited by count alone: nothing to open, so nothing that invites a
   click. */
.contrib-count.is-static {
  background: none;
  color: var(--color-text-light);
  font-weight: 400;
  padding-left: 0;
}

.contrib-count.is-static::after { content: ""; }

.contrib-people {
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #fff;
  border-left: 2px solid var(--color-border);
}

.contrib-members {
  columns: 2;
  column-gap: 32px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
}

.contrib-members span {
  display: block;
  break-inside: avoid;
  padding: 2px 0;
  color: var(--color-text-dark);
}

.contrib-past {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 16px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.list-edit-hint {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 620px) {
  /* Six keywords ran to four rows at 375px, which is a long way to travel
     before the first sentence. Smaller chips and a tighter gap fit them in
     three. */
  .article-keywords { gap: 6px; margin-top: 12px; }
  .article-keywords .tag-badge { font-size: 11px; padding: 4px 9px; }

  .contrib-members { columns: 1; }
  .abbrev-list { grid-template-columns: 1fr; gap: 2px 0; }
  .abbrev-list dd { margin-bottom: 12px; }
}

/* ---- list editor ---- */
.modal-wide { max-width: 860px; width: 94vw; }

.list-editor-head,
.list-editor-row {
  display: grid;
  grid-template-columns: 150px 120px minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: center;
}

.list-editor-head {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-light);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.list-editor-row { margin-bottom: 6px; }

/* Standing references have one editable column, so the row is three cells
   wide, not four, and the reference itself takes the room the second column
   would have had. */
.list-editor-head.is-single,
#list-editor-rows.is-single .list-editor-row {
  grid-template-columns: 150px minmax(0, 1fr) 92px;
}

/* A contributors row carries two name lists as well as its three fields, so it
   stops being one grid line: the fields keep the grid, the lists sit under it
   at full width. */
.list-editor-row.lr-stacked {
  display: block;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.lr-main,
.list-editor-head.is-stacked {
  display: grid;
  /* A team name and its centre are both long where a siglum is short, so this
     row gives them the width the abbreviations grid spends on the meaning. */
  grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: center;
}

.lr-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 10px 0 0 158px;
}

.lr-area,
.lr-count { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.lr-count { grid-column: 1 / -1; max-width: 320px; }

.lr-area > span,
.lr-count > span {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.lr-area-input {
  width: 100%;
  padding: 7px 9px;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  resize: vertical;
}

.lr-area-input:focus,
.lr-count-input:focus {
  outline: none;
  border-color: var(--color-primary-light);
}

.list-editor-row input {
  width: 100%;
  padding: 7px 9px;
  font-family: var(--font-text);
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
}

.list-editor-row input:focus {
  outline: none;
  border-color: var(--color-primary-light);
}

.lr-tools { display: flex; gap: 2px; justify-content: flex-end; }

.lr-tools button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 13px;
  line-height: 1;
}

.lr-tools button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lr-tools .lr-remove:hover { border-color: #e0b4b4; color: #a32d2d; }

.list-editor-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

#list-editor-rows {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
}

.list-modal-footer { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 620px) {
  .list-editor-head { display: none; }
  .list-editor-row { grid-template-columns: 1fr; gap: 4px; margin-bottom: 16px; }
  .lr-main { grid-template-columns: 1fr; gap: 4px; }
  .lr-extra { grid-template-columns: 1fr; margin-left: 0; }
  .lr-tools { justify-content: flex-start; }
}


/* An Edit button on each card, for signed-in editors only.
   Hidden by default and revealed by a class on <body>: the cards are rebuilt
   whenever the list is filtered or sorted, so anything set per element at
   sign-in time would be lost on the next render. */
.note-card-edit {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 14px;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: none;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text-light);
  cursor: pointer;
}

body.is-signed-in .note-card-edit {
  display: inline-flex;
}

.note-card-edit:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* The subtitle sits under the title as its own line, a step down in weight
   and size. It is part of the same heading, not a separate one: a citation
   joins the two with a colon and quotes them as one title. */
/* The same navy as the title, one step lighter - not grey. A subtitle is the
   rest of the title, so it should read as the same voice at lower volume; the
   grey made it look like a caption from a different family. 9.4:1 on white. */
.view-subtitle {
  display: block;
  margin-top: 6px;
  font-size: 0.72em;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-primary-light);
}

.note-card .view-subtitle,
.sidebar-note-item .view-subtitle {
  font-size: 0.82em;
}