/* GlockCollector registry -- minimal, legible styling for the public
   browse/search pages. No framework; kept small and hand-written so it's
   easy to restyle later once real branding/UI work happens. */

:root {
  --ink: #1c1f24;
  --ink-soft: #52585f;
  --line: #dcdfe3;
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --accent: #2f4858;
  --accent-soft: #eef2f4;
  --tag-confirmed: #1f7a4d;
  --tag-probable: #a3690f;
  --tag-reported: #7a7f85;
  --tag-featured: #a3690f;
  --link: #2f4858;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --tint-green: #eaf5ea;
  --tint-blue: #eaf1fa;
  --tint-green-2: #f3faf3;
  --tint-blue-2: #f2f7fc;
  --year-dark: #6b6f75;
  --year-light: #d9dce0;
  --tab-hover: #e2e9ed;
  --gold: #b8860b;
  --gold-ink: #7a5a00;
  --gold-soft: #fff6dc;
  --gold-soft-2: #ffecb3;
  --chart-grid: #e6e8eb;
  --chart-axis: #c9cdd2;
  --chart-mute: #7a7f85;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg-soft);
  line-height: 1.5;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  background: var(--accent);
  color: #fff;
  padding: 0.9rem 1.25rem;
}

.site-header .header-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-header a {
  color: #fff;
}

.site-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  row-gap: 0.6rem;
  font-size: 0.92rem;
  opacity: 0.92;
  /* Wraps instead of overflowing once the dropdowns + search box + Log
     in/username don't all fit on one line -- without this, the search box
     (added after this nav was originally sized) pushed Log in/username
     off the right edge of the header on narrow screens. */
  flex-wrap: wrap;
}

/* Header dropdowns (Registry / Research) -- plain <details>/<summary>, no
   JS required to open/close; style.css just gives it a menu look instead
   of the default browser triangle-and-list. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  cursor: pointer;
  list-style: none;
  color: #fff;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown > summary::after {
  content: " \25BE";
  font-size: 0.7em;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.6rem;
  background: var(--bg);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  padding: 0.35rem 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.nav-dropdown-menu a {
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

.page-title {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
}

.page-subtitle {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
}

.hero {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem 1.75rem;
  margin-bottom: 1.75rem;
}

.hero h1 {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
}

.hero p {
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  max-width: 55ch;
}

.stat-row {
  display: flex;
  gap: 2rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.stat {
  min-width: 100px;
}

.stat .num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--link);
}

.stat .label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.button {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  border-radius: 6px;
  padding: 0.55rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none !important;
}

.button.secondary {
  background: var(--accent-soft);
  color: var(--link) !important;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.filter-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.filter-form label {
  color: var(--ink-soft);
  font-weight: 600;
}

.filter-form input[type="text"],
.filter-form select {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.92rem;
  min-width: 8rem;
}

.filter-form button {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
}

.filter-form .clear-link {
  font-size: 0.85rem;
  align-self: center;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

table.data-table th,
table.data-table td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

table.data-table th {
  background: var(--bg-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

table.data-table tr:last-child td {
  border-bottom: none;
}

table.data-table tr:hover td {
  background: var(--accent-soft);
}

.table-scroll {
  overflow-x: auto;
}

table.data-table.centered-table th,
table.data-table.centered-table td {
  text-align: center;
}

/* SN Graphic page */

.sn-legend-table {
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.sn-legend-table td {
  border: 1px solid var(--line);
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.sn-legend-table .legend-row-label {
  font-weight: 600;
  text-align: right;
  background: var(--bg);
  border: none;
  padding-right: 0.75rem;
  white-space: nowrap;
}

table.sn-graphic-table th,
table.sn-graphic-table td {
  text-align: center;
  vertical-align: middle;
}

table.sn-graphic-table td {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

table.sn-graphic-table td.year-cell {
  padding-left: 0.05rem;
  padding-right: 0.05rem;
}

table.sn-graphic-table .proof-header {
  background: var(--tint-green);
}

table.sn-graphic-table .import-header {
  background: var(--tint-blue);
}

table.sn-graphic-table td.month-cell {
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg);
  width: 6.5rem;
}

.year-cell {
  width: 0.7rem;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}

.year-cell.year-dark {
  background: var(--year-dark);
}

.year-cell.year-dark .year-label {
  color: #ffffff;
}

.year-cell.year-light {
  background: var(--year-light);
}

.year-cell.year-light .year-label {
  color: var(--ink);
}

.year-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-90deg);
}

.chip-cell {
  min-width: 12rem;
}

.chip-cell.proof-cell {
  background: var(--tint-green-2);
}

.chip-cell.import-cell {
  background: var(--tint-blue-2);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}

.proof-cell .chip-row {
  justify-content: flex-end;
}

.import-cell .chip-row {
  justify-content: flex-start;
}

.sn-chip {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.12rem 0.22rem;
  border-radius: 3px;
  border: 1px solid rgba(11, 11, 11, 0.15);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}

.sn-chip:hover {
  outline: 2px solid var(--link);
  text-decoration: none;
}

.multiselect-dropdown {
  position: relative;
  display: inline-block;
  min-width: 160px;
}

.multiselect-toggle {
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.multiselect-toggle::after {
  content: "\25BE";
  float: right;
  color: var(--ink-soft);
  margin-left: 0.5rem;
}

.multiselect-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 0.25rem;
  min-width: 180px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(11, 11, 11, 0.12);
  padding: 0.35rem;
}

.multiselect-option {
  display: block;
  padding: 0.3rem 0.4rem;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 3px;
}

.multiselect-option:hover {
  background: var(--accent-soft);
}

.multiselect-option input {
  margin-right: 0.4rem;
}

.model-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  border: 1px solid rgba(11, 11, 11, 0.15);
  margin-right: 0.4rem;
  vertical-align: middle;
}

table.sortable-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

table.sortable-table th[data-sort]:hover {
  color: var(--link);
}

table.sortable-table th[data-sort].sorted-asc::after {
  content: " \25B2";
}

table.sortable-table th[data-sort].sorted-desc::after {
  content: " \25BC";
}

.tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.tag.confirmed { background: var(--tag-confirmed); }
.tag.probable { background: var(--tag-probable); }
.tag.reported { background: var(--tag-reported); }
.tag.featured { background: var(--tag-featured); }

.featured-books-section {
  border: 1px solid var(--tag-featured);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.featured-books-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.75rem;
}

.featured-book-tile {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--bg);
  border-radius: 8px;
  padding: 0.85rem;
  max-width: 360px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.featured-book-tile .book-tile-cover,
.featured-book-tile .book-tile-cover-fallback {
  width: 72px;
  height: 108px;
  flex-shrink: 0;
}

.empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-soft);
}

.pagination {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.pagination-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
}

.pagination-jump-input {
  width: 3.5rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
}

.pagination-jump-btn {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-soft);
  font-size: 0.9rem;
  cursor: pointer;
}

.pagination-jump-btn:hover {
  background: var(--accent-soft);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem 1.5rem;
  margin: 1rem 0;
}

.detail-grid .item .label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.detail-grid .item .value {
  font-size: 1rem;
  margin-top: 0.15rem;
}

.section-title {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  color: var(--ink-soft);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.75rem;
}

.photo-grid .photo {
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}

.photo-grid .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-grid .photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* Lead photo gallery: a large focus image with thumbnails underneath,
   clicking the focus image opens a full-screen lightbox with arrow nav. */

.gallery {
  margin: 1rem 0 1.75rem;
}

.gallery-focus {
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-soft);
  padding: 0;
  margin: 0 0 0.75rem;
  cursor: zoom-in;
}

.gallery-credit {
  max-width: 640px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: -0.4rem 0 0.75rem;
}

.gallery-focus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 640px;
}

.gallery-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: pointer;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb:hover {
  border-color: var(--accent);
}

.gallery-thumb.active {
  border-color: var(--accent);
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  z-index: 1000;
  padding: 2rem;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: calc(100% - 2.5rem);
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}

.lightbox-credit {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  text-align: center;
  max-width: 90%;
}

.lightbox-credit a {
  color: #fff;
}

.lightbox-img.zoomed {
  cursor: grab;
}

.lightbox-img.zoomed.dragging {
  cursor: grabbing;
}

.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
  left: 0.75rem;
}

.lightbox-next {
  right: 0.75rem;
}

@media (max-width: 640px) {
  .gallery-focus,
  .gallery-thumbs {
    max-width: 100%;
  }

  .lightbox-arrow {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.6rem;
  }

  .lightbox {
    padding: 1rem;
  }
}

.auth-card {
  max-width: 420px;
}

.form-field {
  margin-bottom: 1rem;
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.form-field input[type="text"],
.form-field input[type="password"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
}

/* Elements only shown once a staff viewer turns on the page's "Edit" mode
   (see page-edit-toggle in specimen_detail.html) -- the !important guards
   against a class on the same element (e.g. .button, .card) setting an
   explicit display value that would otherwise win over the plain [hidden]
   attribute. */
.page-edit-only[hidden] {
  display: none !important;
}

/* The read-only counterpart to .page-edit-only -- a value's normal display,
   hidden the same way once the page's Edit mode is switched on, so a field
   shows either its static text or its input, never both at once. See
   page-edit-toggle's script in specimen_detail.html. */
.page-view-only[hidden] {
  display: none !important;
}

/* Inline-edit inputs that replace a .detail-grid item's read-only .value in
   place, once Edit mode is on -- sized to sit comfortably in a grid cell
   rather than a full-width form. */
.detail-grid .item .value-edit {
  margin-top: 0.15rem;
}

.detail-grid .item .value-edit input[type="text"],
.detail-grid .item .value-edit input[type="number"],
.detail-grid .item .value-edit input[type="date"],
.detail-grid .item .value-edit select,
.detail-grid .item .value-edit textarea,
.card > .page-edit-only .value-edit textarea {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
}

/* Inline-edit inputs dropped directly into a data-table cell (Provenance
   rows and the always-present "add a new event" row) -- compact enough to
   fit several to a row, since a table cell is much narrower than a
   detail-grid item. */
table.data-table td input[type="text"],
table.data-table td input[type="number"],
table.data-table td input[type="date"],
table.data-table td select {
  width: 100%;
  min-width: 6.5rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
}

/* Price/currency and source-text/source-url each pack two inputs into one
   cell -- keep the second (currency, source_url) narrower than the first
   rather than splitting the cell evenly, since those hold much shorter
   values. */
table.data-table td.prov-price-edit input:first-child,
table.data-table td .prov-price-edit input:first-child {
  width: 65%;
}

table.data-table td.prov-price-edit input:last-child,
table.data-table td .prov-price-edit input:last-child,
table.data-table td.prov-price-edit select:last-child,
table.data-table td .prov-price-edit select:last-child {
  width: 30%;
  min-width: 3.5rem;
  margin-left: 0.3rem;
}

table.data-table td.prov-source-edit input,
table.data-table td .prov-source-edit input {
  margin-bottom: 0.25rem;
}

.edit-toggle-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink-soft);
}

.edit-toggle-btn:hover {
  background: var(--bg-soft, #f4f4f4);
}

.form-help {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.comment-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.comment {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.comment:last-child {
  border-bottom: none;
}

.comment-meta {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.comment-meta strong {
  color: var(--ink);
}

.comment-date {
  color: var(--ink-soft);
  margin-left: 0.5rem;
}

.comment-edited {
  color: var(--ink-soft);
  margin-left: 0.5rem;
  font-style: italic;
}

.comment-body {
  margin: 0 0 0.4rem;
  white-space: pre-wrap;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

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

.comment-action {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.comment-action:hover {
  color: var(--link);
  text-decoration: underline;
}

.comment-action.active {
  color: var(--link);
  font-weight: 600;
}

.comment-action-static {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.comment-action-danger {
  color: var(--danger);
}

.comment-action-danger:hover {
  color: var(--danger);
  text-decoration: underline;
}

.reply-form,
.edit-form {
  margin: 0.6rem 0 0;
}

.reply-form textarea,
.edit-form textarea {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

.reply-form button,
.edit-form button[type="submit"] {
  margin-top: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: none;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0.4rem 0 0 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
}

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

.comment-replies {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--line);
}

.comment-replies .comment {
  padding: 0.6rem 0;
}

.comment-replies .comment:last-child {
  border-bottom: none;
}

.form-errors {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.dropzone {
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 1.75rem 1rem;
  text-align: center;
  cursor: pointer;
  background: var(--bg-soft);
  transition: border-color 0.15s ease, background 0.15s ease;
  margin-bottom: 0.75rem;
}

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

.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone-text {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--ink);
}

.dropzone-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.file-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.85rem;
}

.file-list:empty {
  margin: 0;
}

.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  margin-bottom: 0.3rem;
  color: var(--ink-soft);
}

/* Higher-specificity ".file-list .file-list-remove" (rather than the bare
   class) so this small inline "remove" control doesn't get swept up by the
   generic ".auth-card button" rule further down, which styles real
   submit-style buttons (like this page's own "Upload" button) as solid
   accent-colored pills. */
.file-list .file-list-remove {
  flex: none;
  background: none;
  border: none;
  padding: 0 0.2rem;
  margin-right: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.file-list .file-list-remove:hover {
  color: var(--ink);
}

.auth-card button,
.card form button[type="submit"] {
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.92rem;
  margin-right: 0.75rem;
}

.messages {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.messages .message {
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--accent-soft);
  color: var(--link);
}

.messages .message.error {
  background: var(--danger-soft);
  color: var(--danger);
}

.site-nav span {
  opacity: 0.85;
}

/* Header search box -- see search_results.html/registry.views.search.
   Semi-transparent white against the header's accent-color background,
   matching the "site-header a { color: #fff; }" treatment the rest of the
   header uses rather than a stark white input box. */
.site-search-form {
  margin: 0;
  /* Shrinks instead of forcing the nav wider than the viewport, and grows
     to fill any slack on a wide header -- a fixed width is what caused
     the mobile overflow (see .site-nav above). */
  flex: 1 1 140px;
  min-width: 0;
}
.site-search-input {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: #fff;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  width: 100%;
}
.site-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.site-search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.28);
  border-color: #fff;
}

.search-section-more {
  margin: 0.5rem 0 1.75rem;
  font-size: 0.88rem;
}

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

.site-nav .link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-nav .link-button:hover {
  text-decoration: underline;
}

.site-footer {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.82rem;
  padding: 1.5rem 1rem 2.5rem;
}

.site-footer p {
  margin: 0.2rem 0;
}

.site-footer .copyright {
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .stat-row { gap: 1.25rem; }
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-form .field { width: 100%; }
  .multiselect-dropdown { width: 100%; }

  /* Header nav on mobile, per explicit request: the search box stays
     inline with Registry/Literature/avatar on one row, positioned between
     Literature and the avatar -- its natural position in the HTML source
     order. order:0 (the flex default) keeps it from being pushed after
     them the way an earlier order:10/full-width rule did. The flex-basis
     is cut to 70px here (half of the 140px desktop default) -- at the
     140px basis the box was still wide enough to push Log in/the avatar
     onto their own line on a 375px-wide screen, per explicit follow-up
     request to reduce it by half; confirmed via live visual check before
     shipping. */
  .site-search-form {
    order: 0;
    flex: 1 1 70px;
  }

  /* Just the avatar/initials tile on mobile -- the username text next to
     it is dropped so that link stays compact enough to share a line with
     Registry/Literature. aria-label on the link itself (see base.html)
     keeps it accessible with the visible text gone. Unaffected above this
     breakpoint -- desktop still shows the full username. */
  .site-nav-username {
    display: none;
  }

  /* Language switcher on mobile, per explicit request: lifted out of the
     nav's second row and pinned to the far right of the first row, level
     with "GlockCollector.com". It stays where it is in the markup (so the
     desktop header is untouched); the header-inner box is the positioning
     context. */
  .site-header .header-inner {
    position: relative;
  }

  .nav-dropdown.lang-switcher {
    position: absolute;
    top: 0.2rem;
    right: 0;
    line-height: 1.6;
  }
}

/* Prefix-page "sale price over time" chart */

.sales-chart-subtitle {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.sales-chart-caption {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.6rem 0 1.25rem;
}

.sales-chart {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem 0.75rem;
}

.sales-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.sales-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sales-chart-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}

.sales-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sales-chart .axis-label {
  font-size: 10px;
  fill: var(--ink-soft);
}

.sales-chart .grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.sales-chart .baseline {
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.sales-chart .sale-dot-link {
  cursor: pointer;
}

/* Candlestick beside the dots (see _sales_chart.html). */
.sales-chart .candle-sep {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.sales-chart .candle-body {
  stroke: var(--bg);
}

.sales-chart .candle-group {
  cursor: default;
  outline: none;
}

.sales-chart .candle-group:hover,
.sales-chart .candle-group:focus {
  filter: brightness(1.15);
}

.sales-chart .sale-dot-link:hover,
.sales-chart .sale-dot-link:focus {
  filter: brightness(1.2);
  outline: none;
}

.sales-chart-tooltip {
  position: fixed;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.08s ease;
  z-index: 20;
  white-space: nowrap;
}

.sales-chart-tooltip.visible {
  opacity: 1;
}

.sales-chart-tooltip .tt-serial {
  font-weight: 600;
}

.sales-chart-tooltip .tt-price {
  font-weight: 700;
}

.sales-chart-tooltip .tt-line {
  margin-top: 0.1rem;
  opacity: 0.85;
}

/* Books page: a grid of cover-photo tiles, a detail page with a larger
   cover beside the book's own fields, and a shared star-rating look used
   for both a book's average and one member's own review. */

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
  margin: 1rem 0 1.75rem;
}

.book-tile {
  display: block;
  color: inherit;
}

.book-tile:hover {
  text-decoration: none;
}

.book-tile:hover .book-tile-title {
  text-decoration: underline;
  color: var(--link);
}

.book-tile-cover {
  aspect-ratio: 2 / 3;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  margin-bottom: 0.5rem;
}

.book-tile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-tile-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--bg-soft);
}

.book-tile-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.book-tile-author {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.1rem 0 0.35rem;
}

.book-detail-layout {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  /* Without this, flexbox's default cross-axis behavior (stretch) pulls
     .book-detail-cover down to match .book-detail-info's height whenever
     the info column runs longer (a description, buy/download links, a
     wide detail-grid) -- flex-start lets the cover frame size to its own
     2:3 shape instead of trailing empty background space to the bottom of
     the section. */
  align-items: flex-start;
}

.book-detail-cover {
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-soft);
}

.book-detail-cover img {
  width: 100%;
  height: 100%;
  /* contain, not cover -- the frame box above is a fixed 2:3 shape for
     layout consistency, but the cover photo itself is scaled to fit
     entirely inside it at its own true aspect ratio (letterboxed if it
     isn't already 2:3) rather than being cropped/stretched to fill the
     frame, which is what made off-ratio covers look distorted. Top-
     aligned (object-position) rather than centered, so a cover shorter
     than the frame sits flush with the title/spine art at the top instead
     of floating in the middle with an even gap above and below. */
  object-fit: contain;
  object-position: top;
  display: block;
}

.book-detail-info {
  flex: 1 1 320px;
  min-width: 260px;
}

.star-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0.9rem;
}

.star-row {
  letter-spacing: 0.1em;
  font-size: 1.05rem;
}

.star-row .star {
  color: var(--line);
}

.star-row .star.filled {
  color: var(--tag-probable);
}

.star-rating-text {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.star-picker {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.star-picker-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
}

.star-picker-btn.filled {
  color: var(--tag-probable);
}

.star-picker-label {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.book-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* Accessory reference pop-up: the small "?" icon next to an Example's
   Accessories/Components field values, and the shared modal it opens
   showing that variant's reference photo + caption. */
.accessory-ref-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--link);
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
}

.accessory-ref-btn[hidden] { display: none; }
.acc-check td:nth-child(2) { display: flex; align-items: center; }
.acc-check td:nth-child(2) .acc-select { flex: 1 1 auto; width: auto; min-width: 0; }
.acc-check td:nth-child(2) .accessory-ref-btn { flex: none; }

.accessory-ref-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.accessory-ref-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.accessory-ref-modal[hidden] {
  display: none;
}

.accessory-ref-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.accessory-ref-modal-content {
  position: relative;
  background: var(--bg);
  border-radius: 10px;
  padding: 1.25rem;
  max-width: 640px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* A variant with a single photo keeps the narrow pop-up. */
.accessory-ref-modal-content.single {
  max-width: 420px;
}

/* Up to 8 photos: 2 across x 4 down (the pop-up scrolls if the screen is short). */
.accessory-ref-modal-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: start;
  margin-top: 0.4rem;
}

.accessory-ref-modal-content.single .accessory-ref-modal-images {
  grid-template-columns: minmax(0, 1fr);
}

/* 3+ photos: shrink each so all four rows fit on screen without scrolling
   (click a photo to see it large). */
.accessory-ref-modal-content.many .accessory-ref-modal-images img {
  max-height: calc((92vh - 8rem) / 4);
}

.accessory-ref-modal-images img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 45vh;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
}

/* Stacks above .accessory-ref-modal (same z-index as .lightbox) so clicking
   a photo in the small pop-up opens full-screen on top of it, not behind
   it -- see the lightbox markup/script in specimen_detail.html. */
#accessory-ref-lightbox {
  z-index: 1100;
}

.accessory-ref-modal-caption {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}

.accessory-ref-modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  margin: -0.4rem -0.3rem 0 0;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}

/* Analytics consent banner -- see base.html's {% if umami_website_id %}
   block. Fixed to the bottom of the viewport, above everything else, until
   dismissed via Accept/Decline (then it's simply hidden and never shown
   again, per the localStorage choice). */
.consent-banner[hidden] {
  display: none;
}
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem 1.25rem;
  background: #14181c;
  color: #fff;
  border-top: 1px solid #2f373e;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}
.consent-banner p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 62ch;
}
.consent-banner a {
  color: #fff;
  text-decoration: underline;
}
.consent-banner-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.consent-btn {
  padding: 0.45rem 1rem;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.consent-btn-primary {
  background: #fff;
  color: #1c1f24;
  border-color: #fff;
}
.consent-btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Examples list: table/card view toggle -- see specimen_list.html and the
   "view" GET param read in specimen_list (views.py). */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.view-toggle-link {
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}
.view-toggle-link:hover {
  text-decoration: none;
  color: var(--ink);
}
.view-toggle-link.active {
  background: var(--ink);
  color: var(--bg);
}

/* Examples list, card view -- a "baseball card" per Example, standing in
   for a row of the data-table above when "Cards" is selected. */
.specimen-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
  margin: 0 0 1.75rem;
}
.specimen-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.specimen-card:hover {
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(28, 31, 36, 0.12);
}
.specimen-card-banner {
  padding: 0.85rem 1rem;
}
.specimen-card-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.specimen-card-serial {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.specimen-card-banner-sub {
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.25rem;
  opacity: 0.85;
}
.specimen-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.specimen-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.specimen-card-photo-fallback {
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: center;
  max-width: 80%;
}
.specimen-card-body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* My Collection, card view only -- the body sits outside the card's <a>
   now (see my_collection.html) so the Prefix stat can be its own link;
   cursor:pointer signals the rest of the body still navigates to the
   specimen via its click handler there. The shared card grid partial
   (_specimen_card_grid.html) keeps its body inside its <a>, where this
   rule has no visible effect since the whole thing is already a link. */
.specimen-card-body[data-specimen-href] {
  cursor: pointer;
}
.specimen-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}
.specimen-card-stat-wide {
  grid-column: span 2;
}
.specimen-card-stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.specimen-card-stat-value {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.1rem;
}
.specimen-card-notes {
  margin-top: 0.65rem;
}
.specimen-card-notes-text {
  font-size: 0.78rem;
  margin-top: 0.15rem;
  max-height: 3.4rem;
  overflow-y: auto;
  line-height: 1.4;
  padding-right: 0.25rem;
}
.specimen-card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.specimen-card-status {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* My Collection, card view -- a small circular remove button overlaid on
   the card banner. Lives outside the card's own <a> (see my_collection.html)
   since a <form>/<button> can't validly nest inside an anchor; its click
   handler posts the matching hidden per-card remove form instead. */
.specimen-card-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.specimen-card-remove:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Manage-photos drag-and-drop (see _photo_gallery.html and media_reorder).
   The first image in the table is the cover. */
.media-handle-cell {
  width: 2.2rem;
  padding-right: 0;
}
.media-drag-handle {
  cursor: grab;
  touch-action: none; /* dragging the handle must not scroll the page on touch screens */
  user-select: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.35rem 0.4rem;
  line-height: 1;
  letter-spacing: -0.15em;
  color: inherit;
}
.media-drag-handle:active {
  cursor: grabbing;
}
.media-item.media-dragging > tr > td {
  background: var(--accent-soft);
}
.media-item.media-dragging {
  outline: 2px solid var(--link);
}
.media-cover-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--tag-probable);
  margin-top: 0.2rem;
  white-space: nowrap;
}


/* "?" icon with a mouse-over (or keyboard-focus / tap) text bubble -- see
   specimen_detail.html's Slide finish. The text comes from the data-tip
   attribute. */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--link);
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}

.help-tip:hover,
.help-tip:focus {
  background: var(--accent);
  color: var(--bg);
  outline: none;
}

/* The mouse-over text bubble is one shared element placed by script (see
   base.html) so it always stays inside the screen, on computer and phone. */
.help-tip-bubble {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  visibility: hidden;
}

.help-tip-bubble.show {
  visibility: visible;
}

/* "Show 25 / 50 / 100 per page" picker above a list -- see _per_page.html. */
.per-page-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.per-page-control select {
  width: auto;
  padding: 0.2rem 0.4rem;
}

/* Language switcher (header) -- reuses the .nav-dropdown disclosure pattern;
   the menu is a <form> of buttons so choosing a language POSTs to set_language. */
.nav-dropdown-menu.align-right {
  left: auto;
  right: 0;
}

.nav-dropdown-menu button {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  text-align: left;
  white-space: nowrap;
}

.nav-dropdown-menu button:hover {
  background: var(--accent-soft);
}

.nav-dropdown-menu button.current {
  font-weight: bold;
}

/* "Written in <language>" tag on member comments/reviews (see lang_detect.py) */
.lang-tag {
  font-size: 0.75rem;
  color: var(--ink-soft);
  border: 1px solid var(--line, #dcdfe3);
  border-radius: 999px;
  padding: 0 0.45rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* Search results: heading links sort the table server-side (see _apply_search_sort);
   the arrow comes from aria-sort. */
table.sortable-table th a.sort-link {
  color: inherit;
  text-decoration: none;
}

table.sortable-table th[aria-sort="ascending"] a.sort-link::after {
  content: " \25B2";
}

table.sortable-table th[aria-sort="descending"] a.sort-link::after {
  content: " \25BC";
}


/* Member-submitted Examples awaiting staff review -- red outline + "Unverified"
   tag on cards and list rows, a banner on the Example page, and the member
   "Add an Example" form / staff review queue. */
:root { --unverified: #c62828; --unverified-soft: #fdecec; }  /* dark values are in the Dark theme block at the end of this file */

.tag.unverified {
  background: var(--unverified);
  color: #fff;
}

.specimen-card.is-unverified {
  border: 2px solid var(--unverified);
  box-shadow: 0 0 0 1px var(--unverified-soft);
}

.data-table tr.is-unverified td {
  background: var(--unverified-soft);
}

.data-table tr.is-unverified td:first-child {
  box-shadow: inset 4px 0 0 var(--unverified);
}

.unverified-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border: 2px solid var(--unverified);
  background: var(--unverified-soft);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 1rem;
  color: var(--ink);
}

.unverified-banner strong {
  color: var(--unverified);
}

.unverified-flag {
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

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

.unverified-actions form {
  margin: 0;
}

.submit-instructions ol {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.5;
}

.required-mark {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--ink-soft);
}

.submit-form select,
.submit-form input[type="text"],
.submit-form input[type="url"],
.submit-form input[type="number"] {
  max-width: 100%;
}

.submit-price-row input[type="number"] {
  width: 8rem;
}

.submit-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.submit-photo img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.submit-photo span {
  font-size: 0.8rem;
}

.submit-prov {
  margin-bottom: 0.75rem;
}

.submit-remove {
  font-size: 0.85rem;
}

.submit-actions {
  margin: 1.25rem 0 0.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.submit-delete-form {
  margin-top: 1.5rem;
}

.review-card {
  margin-bottom: 1rem;
  border-left: 4px solid var(--unverified);
}

.review-head {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.review-thumb {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
}

.review-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem 1rem;
  margin: 0.5rem 0;
}

.review-facts dt {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.review-facts dd {
  margin: 0;
}

.review-flag {
  color: var(--unverified);
  font-size: 0.9rem;
}

.review-prov {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.review-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.review-actions form {
  margin: 0;
}

.review-reject {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.review-reject input[type="text"] {
  min-width: 14rem;
}

.submit-actions button[type="submit"] {
  padding: 0.55rem 1.3rem;
  border: none;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}

.submit-form input[type="number"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.95rem;
  font-family: inherit;
}

.submit-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.submit-price-row label {
  flex: 0 0 100%;
  margin-bottom: 0;
}

.submit-price-row select {
  width: auto;
}

.submit-price-row .form-errors {
  flex: 0 0 100%;
}

.review-reject button[type="submit"] {
  background: var(--unverified);
}


/* Private collection details (My Collection / Example page / details form) */
.tag.sold {
  background: #5b6b7a;
  color: #fff;
}

.private-details-panel {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.private-details-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.9rem;
  margin: 0 0 0.6rem;
}

.private-details-list dt {
  color: var(--ink-soft);
}

.private-details-list dd {
  margin: 0;
}

.submit-form input[type="date"] {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: var(--bg);
  color: var(--ink);
}


/* Excel import */
.import-export-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.import-steps ol { margin: 0; padding-left: 1.25rem; }
.import-summary { margin: 0 0 1rem; }
.import-errors, .import-changes { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.import-errors { color: var(--unverified); }
.import-row-error td { background: var(--unverified-soft); }
.import-old { color: var(--ink-soft); text-decoration: line-through; }
.import-clears strong { color: var(--unverified); }

/* ---- My Dashboard ---- */
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.dash-tile { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.9rem; }
.dash-tile-k { font-size: 0.75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.dash-tile-v { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.dash-tile-n { font-size: 0.78rem; color: var(--tag-reported); min-height: 1.1em; }
.dash-card { margin-top: 1rem; }
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: flex-start; }
.dash-sub { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.9rem; }
.dash-note { margin: 0.6rem 0 0; color: var(--tag-reported); font-size: 0.8rem; line-height: 1.5; }
.dash-sort { font-size: 0.85rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.4rem; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.5rem; align-items: center; }
.dash-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.dash-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.dash-candle { display: inline-block; width: 10px; height: 14px; position: relative; }
.dash-candle::before { content: ""; position: absolute; left: 4px; top: 0; width: 2px; height: 14px; background: currentColor; }
.dash-candle::after { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 6px; background: currentColor; border-radius: 1px; }
.dash-diamond { display: inline-block; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); }
.dash-scroll { overflow-x: auto; }
.dash-svg { display: block; width: 100%; height: auto; }
.dash-tooltip { position: fixed; pointer-events: none; background: var(--ink); color: var(--bg); padding: 6px 9px; border-radius: 6px; font-size: 0.78rem; line-height: 1.4; opacity: 0; z-index: 50; max-width: 300px; left: 0; top: 0; }
.dash-title { font-size: 1.05rem; margin: 0 0 0.25rem; }
.dash-sub { font-size: 1rem; }
.dash-legend { font-size: 0.95rem; gap: 0.35rem 1.3rem; }
.dash-note { font-size: 0.9rem; }
.dash-sort { font-size: 0.95rem; }
.dash-tile-k { font-size: 0.82rem; }
.dash-tile-n { font-size: 0.85rem; }
.dash-tooltip { font-size: 0.95rem; max-width: 360px; }
[hidden] { display: none !important; }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.dash-grid .dash-card { margin-top: 0; min-width: 0; }
.dash-span2 { grid-column: span 2; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } .dash-span2 { grid-column: span 1; } }
.dash-care { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.dash-care div { border-top: 1px solid var(--line); padding-top: 0.5rem; }
.dash-care b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.dash-care span { display: block; font-size: 0.9rem; color: var(--ink-soft); }
.value-disclaimer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.85rem; line-height: 1.55; }
.value-disclaimer h3 { margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--ink-soft); }
.value-disclaimer p { margin: 0; }

/* ---- "Rare" votes ---- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Rare vote pill: same size and shape as the .tag pills (Confirmed etc.) it sits beside. */
.rare-vote { display:inline; margin-left:0.4rem; }
.rare-vote form { display:inline; margin:0; }
.rare-btn { display:inline-block; padding:0.15rem 0.5rem; border:0; border-radius:999px; background:var(--bg); color:var(--gold-ink); box-shadow:inset 0 0 0 1px var(--gold); font:inherit; font-size:0.75rem; font-weight:600; line-height:inherit; text-decoration:none; cursor:pointer; white-space:nowrap; }
.rare-btn:hover { background:var(--gold-soft); }
.rare-btn.active { background:var(--gold); color:#fff; }
.rare-btn.active:hover { background:#9a6f08; }
.rare-btn.static { cursor:default; }
.rare-btn.static:hover { background:var(--bg); }
a.rare-btn.static { cursor:pointer; }
.rare-btn-count { margin-left:0.2rem; font-weight:700; }
.rare-chip { display:inline-flex; align-items:center; gap:.2rem; margin-left:auto; padding:.05rem .5rem; border-radius:999px; background:var(--gold-soft); border:1px solid var(--gold); color:var(--gold-ink); font-size:.8rem; font-weight:700; white-space:nowrap; }
.filter-form .field-check { align-self:flex-end; }
.filter-form .field-check label { display:flex; align-items:center; gap:.35rem; font-weight:400; }
.dash-rare h3 { font-size: 0.95rem; margin: 0.5rem 0 0.25rem; color: var(--ink-soft); }
.dash-rare ul { list-style: none; margin: 0; padding: 0; }
.dash-rare li { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; border-top: 1px solid var(--line); }
.dash-rare .rare-chip { margin-left: auto; }
.specimen-card-tags { display:inline-flex; align-items:center; gap:0.4rem; flex-wrap:wrap; justify-content:flex-end; }
.specimen-card-tags .rare-chip { margin-left:0; padding:0.15rem 0.5rem; font-size:0.75rem; border:0; box-shadow:inset 0 0 0 1px var(--gold); }

/* Cards: the whole card is clickable through a stretched link on the serial/prefix, so the
   Rare star can be its own separate link (a link can't sit inside another link). */
.specimen-card-link { color: inherit; text-decoration: none; }
.specimen-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.specimen-card-link:focus-visible::after { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 10px; }
.specimen-card .rare-chip { position: relative; z-index: 2; text-decoration: none; }
.specimen-card .rare-chip:hover { background: var(--gold-soft-2); }
.specimen-card-footer .rare-chip { margin-left: 0; }
.rare-about p { margin: 0 0 0.75rem; }
.rare-about p:last-child { margin-bottom: 0; }


/* Example page: Public / Private tabs under the photos (specimen_detail.html).
   Big two-line tabs; the active one is filled and its panel hangs from it.
   The Private tab only exists for members who have the Example in their
   collection. */
.detail-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
}
.detail-tab {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  padding: 0.85rem 1.25rem;
  font: inherit;
  color: var(--ink-soft);
  background: var(--accent-soft);
  border: 2px solid var(--line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.detail-tab:hover {
  background: var(--tab-hover);
  color: var(--ink);
}
.detail-tab-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}
.detail-tab-sub {
  font-size: 0.82rem;
  opacity: 0.85;
}
.detail-tab[aria-selected="true"],
.detail-tab[aria-selected="true"]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.detail-tab:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.detail-tabs + .tab-panel {
  border-top: 4px solid var(--accent);
  padding-top: 1rem;
}
.tab-panel[data-tab="private"] {
  border-top: 4px solid var(--accent);
  padding-top: 1rem;
}
.tab-panel > .section-title:first-child {
  border-top: none;
  margin-top: 0.5rem;
  padding-top: 0;
}
@media (max-width: 520px) {
  .detail-tab { padding: 0.7rem 0.85rem; }
  .detail-tab-title { font-size: 1.05rem; }
}

/* Private tab: one-Example dashboard (same look as My Collection's dashboard) */
.pd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.25rem;
}
.pd-title {
  margin: 0;
  font-size: 1.3rem;
}
.pd-up { color: #2a78d6; }
.pd-down { color: #d1603d; }
.dash-tile-v.pd-small { font-size: 1.2rem; line-height: 2.2rem; }
.pd-bars { display: grid; gap: 0.7rem; }
.pd-row { display: grid; grid-template-columns: 9.5rem 1fr 8.5rem; gap: 0.75rem; align-items: center; }
.pd-lab { font-size: 0.92rem; color: var(--ink-soft); }
.pd-val { font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.pd-track { position: relative; height: 22px; background: var(--bg-soft); border-radius: 4px; }
.pd-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.pd-paid { background: #8b929c; }
.pd-value { background: #1f8a7a; }
.pd-wick { position: absolute; top: 10px; height: 2px; background: var(--ink-soft); }
.pd-body { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; min-width: 6px; }
.pd-up-bg { background: #2a78d6; }
.pd-down-bg { background: #d1603d; }
.pd-single { background: var(--ink-soft); min-width: 4px; }
.pd-diamond { position: absolute; top: 7px; width: 8px; height: 8px; margin-left: -4px; background: var(--ink); border: 1px solid var(--bg); transform: rotate(45deg); }
.pd-todo { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.pd-todo li { padding-left: 1.3rem; position: relative; font-size: 0.95rem; }
.pd-todo li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.7rem; height: 0.7rem; border: 2px solid #c4921c; border-radius: 50%; }
.pd-todo li::first-letter { text-transform: uppercase; }
.pd-grid { margin-bottom: 0; }
@media (max-width: 640px) {
  .pd-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .pd-val { text-align: left; }
}

/* Private tab: accessory checklist and the Accessory report */
.acc-check td { vertical-align: middle; }
.acc-select { width: 100%; max-width: 20rem; }
.acc-target.is-override { border-color: var(--accent, #2c6e49); box-shadow: inset 3px 0 0 var(--accent, #2c6e49); }
.acc-select option.acc-recommended { font-weight: 700; background: var(--accent-soft, #e6f0ec); }
.acc-target:not(.is-override) { background-color: var(--accent-soft, #e6f0ec); }
.acc-override-note { color: var(--ink-soft); font-size: 0.85em; }
.acc-muted { color: var(--ink-soft); }
.acc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.9rem; }
.acc-actions .button, .acc-actions button { margin: 0; }
@media (max-width: 640px) {
  /* One compact card per accessory: name + result on top, then the two
     dropdowns with their label to the left. */
  .acc-check thead { display: none; }
  .acc-check tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.15rem 0.6rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .acc-check td { border: 0 !important; padding: 0.1rem 0; min-width: 0; }
  .acc-check td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .acc-check td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .acc-check td:nth-child(2), .acc-check td:nth-child(3) { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; gap: 0.6rem; margin-top: 0.15rem; }
  .acc-check td:nth-child(2) { grid-row: 2; }
  .acc-check td:nth-child(3) { grid-row: 3; }
  .acc-check td:nth-child(1)::before, .acc-check td:nth-child(4)::before { content: none; }
  .acc-check td::before { content: attr(data-label); color: var(--ink-soft); font-size: 0.8rem; }
  .acc-check td:nth-child(2)::before, .acc-check td:nth-child(3)::before { flex: 0 0 5.2rem; }
  .acc-check td:nth-child(2) .acc-select, .acc-check td:nth-child(3) .acc-select { flex: 1 1 auto; width: auto; min-width: 0; }
  .acc-check .acc-select { max-width: none; font-size: 16px; min-height: 2.5rem; text-overflow: ellipsis; }
  .acc-check .accessory-ref-btn { width: 1.7rem; height: 1.7rem; font-size: 0.9rem; margin-left: 0; }
}
.acc-report-note { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 0.75rem; }
@media print {
  .site-nav, .site-footer, .acc-actions, .breadcrumb { display: none !important; }
}
.acc-status { font-size: 0.9rem; color: var(--ink-soft); min-width: 6rem; }

/* Dashboard: accessory report card */
.dash-acc-lists { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1rem; }
.dash-acc-h { font-size: 0.95rem; margin: 0 0 0.35rem; color: var(--ink-soft); }

/* ---- Mobile pass (phones) ------------------------------------------------
   Collected here so the phone-specific rules are easy to find:
   - 16px form text (iOS Safari zooms the page when a smaller field is focused)
   - larger touch targets for buttons and fields
   - wide data tables scroll inside themselves instead of widening the page
   - attribute grids use two columns, filters sit two to a row            */
@media (max-width: 640px) {
  input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="url"], input[type="tel"],
  select, textarea { font-size: 16px; }
  textarea { max-width: 100%; }
  .filter-form input[type="text"], .filter-form select,
  .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="password"],
  .form-field select, .form-field textarea { min-height: 44px; }
  .filter-form button, .button, button.button, .acc-save-btn { min-height: 44px; }
  .site-search-input { font-size: 16px; }

  table.data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data-table:not(.sn-graphic-table) th, table.data-table:not(.sn-graphic-table) td { padding: 0.55rem 0.6rem; }
  table.sortable-table td { white-space: nowrap; }
  table.sortable-table td .tag { white-space: nowrap; }
  .sn-legend-table { display: block; max-width: 100%; overflow-x: auto; }
  table.data-table.acc-check { overflow-x: visible; border: 0; border-radius: 0; background: transparent; }
  .auth-card button[type="submit"] { min-height: 44px; padding-left: 1.4rem; padding-right: 1.4rem; }

  .page-subtitle[style*="margin:0"] { margin-bottom: 0.75rem !important; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1rem; margin: 0.25rem 0; }
  .detail-grid .item .value { overflow-wrap: anywhere; }
  .detail-grid .item:has(.value-edit:not([hidden])) { grid-column: 1 / -1; }

  .filter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.75rem; }
  .filter-form .field { min-width: 0; }
  .filter-form .field:has(input[type="text"]), .filter-form .field:has(input[type="checkbox"]),
  .filter-form .field:has(.multiselect-dropdown), .filter-form button, .filter-form .clear-link,
  .filter-form input[type="hidden"] + .field:has(input) { grid-column: 1 / -1; }
}

/* Provenance table on phones: one stacked card per event so the edit inputs
   (date, event, price + currency, source text + link) each get the full width
   instead of being squeezed into four narrow cells and overlapping. */
@media (max-width: 640px) {
  table.data-table.prov-table { display: block; overflow: visible; width: 100%; max-width: 100%; }
  .prov-table thead { display: none; }
  .prov-table tbody, .prov-table tr, .prov-table td { display: block; }
  .prov-table tr { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); }
  .prov-table tr:last-child { border-bottom: 0; }
  .prov-table td { border: 0; padding: 0.15rem 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .prov-table td::before { content: attr(data-label); flex: 0 0 4.2rem; color: var(--ink-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }
  .prov-table td > span, .prov-table td > input, .prov-table td > select { min-width: 0; }
  .prov-table td > .page-view-only, .prov-table td > .page-edit-only { flex: 1 1 0; }
  .prov-table td input, .prov-table td select { min-width: 0 !important; width: 100%; font-size: 16px; min-height: 2.5rem; }
  .prov-table td .prov-price-edit { display: flex; gap: 0.4rem; }
  /* the always-present "add an event" row has the inputs directly in its cells */
  .prov-table td.prov-price-edit { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 5.5rem; gap: 0.4rem 0.6rem; align-items: center; }
  .prov-table td.prov-source-edit { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.4rem 0.6rem; align-items: center; }
  .prov-table td.prov-source-edit::before { grid-row: 1 / span 2; align-self: start; padding-top: 0.6rem; }
  .prov-table td.prov-price-edit input:last-child, .prov-table td.prov-price-edit select:last-child { width: 100% !important; margin-left: 0 !important; }
  .prov-table td:not(.prov-price-edit):not(.prov-source-edit) > input, .prov-table td:not(.prov-price-edit):not(.prov-source-edit) > select { flex: 1 1 0; width: auto; }
  .prov-table td, .prov-table td * { white-space: normal; overflow-wrap: anywhere; }
  .prov-table .page-edit-only.prov-price-edit input:first-child { flex: 1 1 auto; width: auto; }
  .prov-table .page-edit-only.prov-price-edit input:last-child, .prov-table .page-edit-only.prov-price-edit select:last-child { flex: 0 0 5.5rem; width: 5.5rem; margin-left: 0; }
  .prov-table .page-edit-only.prov-source-edit { display: flex; flex-direction: column; gap: 0.4rem; }
  .prov-table .prov-source-edit input { margin-bottom: 0; }
  .prov-table td.prov-actions::before { content: none; }
  .prov-table td.prov-actions { gap: 1rem; padding-top: 0.4rem; }
  .prov-table .page-edit-only[hidden], .prov-table .page-view-only[hidden] { display: none !important; }
  .prov-table td.page-edit-only[hidden] { display: none !important; }
}

/* ---- Dark theme ---------------------------------------------------------
   Follows the visitor's system setting unless they picked Light or Dark with
   the header toggle (which sets data-theme on <html>; see base.html). The two
   blocks below hold the same values: one for "system says dark and no explicit
   choice", one for an explicit "Dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8eaed;
    --ink-soft: #a9b1b9;
    --line: #2f373e;
    --bg: #1a2027;
    --bg-soft: #12161b;
    --accent: #3d5a6f;
    --accent-soft: #212c35;
    --link: #8dbbd8;
    --tag-confirmed: #2a8f5f;
    --tag-probable: #b9791a;
    --tag-reported: #6f757c;
    --tag-featured: #c9972b;
    --unverified: #e0524f;
    --unverified-soft: #3a1f21;
    --danger: #ff8a80;
    --danger-soft: #3a1f1c;
    --tint-green: #1c2e22;
    --tint-blue: #1b2a3a;
    --tint-green-2: #18251d;
    --tint-blue-2: #17222f;
    --year-dark: #555b62;
    --year-light: #3a4047;
    --tab-hover: #28333c;
    --gold: #d4a537;
    --gold-ink: #f1cf7a;
    --gold-soft: #3a3118;
    --gold-soft-2: #4a3f1c;
    --chart-grid: #2c343b;
    --chart-axis: #3f4850;
    --chart-mute: #8b929a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e8eaed;
  --ink-soft: #a9b1b9;
  --line: #2f373e;
  --bg: #1a2027;
  --bg-soft: #12161b;
  --accent: #3d5a6f;
  --accent-soft: #212c35;
  --link: #8dbbd8;
  --tag-confirmed: #2a8f5f;
  --tag-probable: #b9791a;
  --tag-reported: #6f757c;
  --tag-featured: #c9972b;
  --unverified: #e0524f;
  --unverified-soft: #3a1f21;
  --danger: #ff8a80;
  --danger-soft: #3a1f1c;
  --tint-green: #1c2e22;
  --tint-blue: #1b2a3a;
  --tint-green-2: #18251d;
  --tint-blue-2: #17222f;
  --year-dark: #555b62;
  --year-light: #3a4047;
  --tab-hover: #28333c;
  --gold: #d4a537;
  --gold-ink: #f1cf7a;
  --gold-soft: #3a3118;
  --gold-soft-2: #4a3f1c;
  --chart-grid: #2c343b;
  --chart-axis: #3f4850;
  --chart-mute: #8b929a;
  color-scheme: dark;
}

/* Theme toggle button in the header (Automatic / Light / Dark). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-self: center;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.theme-toggle .ti { display: none; }
.theme-toggle[data-mode="auto"] .ti-auto,
.theme-toggle[data-mode="light"] .ti-light,
.theme-toggle[data-mode="dark"] .ti-dark { display: block; }
@media (max-width: 640px) {
  /* Sits just left of the language switcher, on the title's row. */
  .site-header .theme-toggle { position: absolute; top: -0.25rem; right: 4rem; }
}

/* My Collection: Examples / Dashboard tabs reuse the Example page's Public / Private tab look (.detail-tabs); the panel hangs from the active tab. */
.coll-tabs { margin-top: 0.5rem; }
.coll-panel { border-top: 4px solid var(--accent); padding-top: 1rem; }

/* Dashboard accessory report: Accessory | Quantity | Serial numbers. Serials wrap instead of scrolling sideways. */
table.dash-acc-table td { white-space: normal; vertical-align: top; }
table.dash-acc-table td:nth-child(2) { text-align: center; }
table.dash-acc-table th:nth-child(2) { text-align: center; }
table.dash-acc-table td.dash-acc-serials { overflow-wrap: anywhere; }
/* Same column widths in the Missing and Extra tables so they line up. */
@media (min-width: 641px) {
  table.dash-acc-table { table-layout: fixed; width: 100%; }
  table.dash-acc-table th:nth-child(1) { width: 30%; }
  table.dash-acc-table th:nth-child(2) { width: 6.5rem; }
}

/* Three tabs on My Collection (Dashboard / Examples / Accessories). */
.detail-tabs.coll-tabs { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 520px) {
  .detail-tabs.coll-tabs { gap: 0.3rem; }
  .detail-tabs.coll-tabs .detail-tab { padding: 0.65rem 0.25rem; align-items: center; text-align: center; min-width: 0; }
  .detail-tabs.coll-tabs .detail-tab-title { font-size: 0.85rem; overflow-wrap: break-word; hyphens: auto; }
}

/* Additional accessories (Accessories tab): +/- quantity and the add form. */
.extra-acc { margin-top: 1.25rem; }
.extra-acc .muted { color: var(--ink-soft); }
.extra-acc-table td { vertical-align: middle; }
table.extra-acc-table td:nth-child(2), table.extra-acc-table th:nth-child(2) { text-align: left; }
table.extra-acc-table td:nth-child(3), table.extra-acc-table th:nth-child(3) { text-align: center; white-space: nowrap; }
.extra-acc-table td:nth-child(4) { width: 3rem; text-align: right; }
.extra-acc-table th:nth-child(1) { width: 30%; }
.extra-qty { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.extra-qty-n { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.extra-qty-btn { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--link); font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; }
.extra-qty-btn:hover { background: var(--accent); color: var(--bg); }
.extra-remove { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.extra-add { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.extra-add label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.extra-add select, .extra-add input[type="number"] {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.92rem;
  min-width: 9rem;
}
.extra-add input[type="number"] { min-width: 0; width: 5.5rem; }
@media (max-width: 640px) {
  .extra-add { flex-direction: column; align-items: stretch; }
  .extra-add input[type="number"], .extra-add select { width: 100%; }
  .extra-qty-btn { width: 2.4rem; height: 2.4rem; }
  .extra-qty { gap: 0.35rem; }
  .extra-acc-table th:nth-child(1) { width: auto; }
  /* Phone: each row becomes a small card (accessory + variant on the left, - qty + on the right). */
  table.extra-acc-table { overflow-x: visible; }
  table.extra-acc-table thead { display: none; }
  table.extra-acc-table tbody { display: block; }
  table.extra-acc-table tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 0.75rem; align-items: center; padding: 0.6rem 0.25rem; border-top: 1px solid var(--line); }
  table.extra-acc-table tbody tr:first-child { border-top: none; }
  table.extra-acc-table td { display: block; padding: 0; border: none; background: none; white-space: normal; }
  table.extra-acc-table td:nth-child(1) { grid-column: 1; font-weight: 600; }
  table.extra-acc-table td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; color: var(--ink-soft); }
  table.extra-acc-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  /* No room for the x on a phone: "-" at quantity 1 removes the row. */
  table.extra-acc-table td:nth-child(4) { display: none; }
}

/* Back-to-top arrow: translucent, bottom-right, appears once you've scrolled down a long page. */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.back-to-top svg { width: 1.3rem; height: 1.3rem; display: block; }
.back-to-top.is-visible { opacity: 0.55; visibility: visible; transform: none; }
.back-to-top.is-visible:hover, .back-to-top.is-visible:focus-visible { opacity: 0.95; }
.back-to-top:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }
@media print { .back-to-top { display: none; } }

/* Home page intro for logged-out visitors: a purpose statement under the
   search box, then four short blocks saying what the site is for. */
.hero-intro h1 {
  font-size: 1.9rem;
  line-height: 1.2;
}

.hero .hero-lead {
  font-size: 1.05rem;
  max-width: 62ch;
}

.hero .hero-note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.intro-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.15rem;
}

.intro-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
}

.intro-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Home page "Recently added examples" shelf: a dark slanted label over a
   sideways-scrolling row of the same colored Example cards used elsewhere
   (see _specimen_card_grid.html), at a compact size. */
.shelf { margin-bottom: 2rem; }

.shelf-title {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}

.shelf-title span {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1.6rem 0.5rem 1rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.8rem) 100%, 0 100%);
}

.shelf-wrap { position: relative; }

.shelf-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.2rem 0.15rem 0.9rem;
  scrollbar-width: thin;
}

.shelf-card {
  flex: 0 0 176px;
  scroll-snap-align: start;
  border-radius: 8px;
}
.shelf-card .specimen-card-banner { padding: 0.45rem 0.7rem; }
.shelf-card .specimen-card-serial { font-size: 1.05rem; }
.shelf-card .specimen-card-banner-line { margin-top: 0.15rem; min-height: 1.5rem; }
.shelf-card .specimen-card-banner-sub { font-size: 0.7rem; }
.shelf-card .specimen-card-photo { height: auto; }
.shelf-card .specimen-card-body { padding: 0.55rem 0.7rem 0.6rem; }
.shelf-card .specimen-card-footer { padding-top: 0.5rem; margin-top: 0.5rem; }
.shelf-card .tag { font-size: 0.64rem; padding: 0.05rem 0.4rem; }
.shelf-card .specimen-card-tags .rare-chip { font-size: 0.66rem; padding: 0.05rem 0.4rem; }

.shelf-line {
  font-size: 0.78rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shelf-line:empty { display: none; }
.shelf-muted { color: var(--ink-soft); }

.shelf-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.shelf-arrow[hidden] { display: none; }
.shelf-arrow-prev { left: -0.9rem; }
.shelf-arrow-next { right: -0.9rem; }

@media (max-width: 600px) {
  .shelf-card { flex-basis: 164px; }
  .shelf-arrow-prev { left: 0.2rem; }
  .shelf-arrow-next { right: 0.2rem; }
}
.shelf-arrow:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.shelf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Example cards: confirmed tag with the Rare star stacked under it, both
   right-aligned; the Prefix tile is a link to that Prefix's page (raised
   above the card's stretched link so it stays its own click target). */
.specimen-card-banner-top { align-items: flex-start; }
.specimen-card-tags { flex-wrap: nowrap; justify-content: flex-end; }
.specimen-card-tags .tag + .rare-chip, .specimen-card-tags .rare-chip { align-self: flex-end; }
/* Banner: serial + confirmed tag on the first line, MDL/Gen + Rare star on the second. */
.specimen-card-banner { padding: 0.6rem 0.9rem; }
.specimen-card-banner-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; min-height: 1.65rem; }
.specimen-card-banner-line .specimen-card-banner-sub { margin-top: 0; }
.specimen-card-banner-line .rare-chip { margin-left: auto; flex: none; }
.specimen-card-stats { padding-bottom: 0.7rem; }
.sn-chip-link { position: relative; z-index: 2; text-decoration: none !important; }
.sn-chip-link:hover { filter: brightness(1.08); }

/* ---- Two-row header (Discogs-style) ---------------------------------------
   Top bar: site name, search, Sign Up / Log In (or the member's avatar),
   language and theme controls. Darker bar underneath: Explore Registry,
   Explore Literature, Market Place. Loaded last so it overrides the older
   single-row header rules and their mobile positioning tricks above. */
.site-header.header-v2 { padding: 0; }

.header-v2 .header-top { padding: 0.8rem 1.25rem; }

.header-v2 .header-top .header-inner {
  gap: 1.1rem;
  align-items: center;
  flex-wrap: nowrap;
}

.header-v2 .site-title { font-size: 1.25rem; white-space: nowrap; }

.header-v2 .site-search-form {
  flex: 1 1 auto;
  max-width: 560px;
  margin: 0 auto 0 0;
}

.header-v2 .site-search-input { padding: 0.5rem 1rem; font-size: 0.92rem; }

.header-v2 .header-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
  flex: none;
}

.header-v2 .header-signin {
  background: #fff;
  color: var(--accent) !important;
  border-radius: 6px;
  padding: 0.42rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none !important;
}
.header-v2 .header-signin:hover { background: rgba(255, 255, 255, 0.88); }

.header-v2 .header-member {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
}
.header-v2 .header-avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  display: inline-flex;
}
.header-v2 .header-avatar-initial {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.header-v2 .nav-dropdown.lang-switcher { position: relative; top: auto; right: auto; line-height: inherit; }
.header-v2 .theme-toggle { position: static; }

.header-v2 .header-sub {
  background: rgba(0, 0, 0, 0.32);
  padding: 0 1.25rem;
}
.header-v2 .header-sub .header-inner {
  gap: 1.9rem;
  font-size: 0.93rem;
  font-weight: 600;
  opacity: 1;
  flex-wrap: nowrap;
}
.header-v2 .header-sub .nav-dropdown > summary,
.header-v2 .header-sub .nav-plain-link {
  display: block;
  padding: 0.6rem 0;
  color: #fff;
  white-space: nowrap;
}
.header-v2 .header-sub .nav-dropdown-menu { margin-top: 0; font-weight: 400; }

@media (max-width: 640px) {
  .header-v2 .header-top { padding: 0.6rem 1rem; }
  .header-v2 .header-top .header-inner { flex-wrap: wrap; gap: 0.55rem 0.5rem; }
  .header-v2 .site-title { font-size: 0.92rem; }
  .header-v2 .lang-switcher > summary > span { display: none; }
  .header-v2 .header-actions { gap: 0.3rem; }
  .header-v2 .header-signin { padding: 0.34rem 0.55rem; font-size: 0.74rem; }
  .header-v2 .lang-switcher > summary { font-size: 0.82rem; }
  .header-v2 .theme-toggle { width: 1.9rem; height: 1.9rem; }
  .header-v2 .site-search-form { order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
  .header-v2 .header-sub { padding: 0 1rem; }
  .header-v2 .header-sub .header-inner { gap: 0.2rem 0.9rem; font-size: 0.84rem; flex-wrap: wrap; overflow: visible; }
}

/* Members' header icons (Dashboard, Collection, Watch list, My Messages). */
.header-v2 .header-icons { display: flex; align-items: center; gap: 0.15rem; }
.header-v2 .header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  color: #fff;
  text-decoration: none !important;
}
.header-v2 .header-icon:hover { background: rgba(255, 255, 255, 0.18); }
.header-v2 .header-icon:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.header-v2 .header-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: #d6402c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}
@media (max-width: 640px) {
  .header-v2 .header-icon { width: 1.95rem; height: 1.95rem; }
  .header-v2 .header-icon svg { width: 19px; height: 19px; }
  .header-v2 .header-icons { gap: 0; }
}

/* Language and theme controls: right end of the darker bar. */
.header-v2 .header-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex: none;
  font-weight: 400;
}
.header-v2 .header-sub .header-tools .theme-toggle { align-self: center; }
@media (max-width: 640px) {
  .header-v2 .header-tools { gap: 0.2rem; }
  .header-v2 .header-tools .theme-toggle { width: 1.8rem; height: 1.8rem; }
  .header-v2 .header-sub .header-inner { gap: 0 0.7rem; font-size: 0.8rem; }
}

/* Section names: the full "Explore ..." wording on wide screens, just the
   short name on phones so the language and theme buttons fit on the row. */
.header-v2 .lbl-short { display: none; }
@media (max-width: 640px) {
  .header-v2 .lbl-full { display: none; }
  .header-v2 .lbl-short { display: inline; }
}
.header-v2 .site-nav span { opacity: 1; }

/* Narrower Example cards: tighter padding, and on phones two to a row. The
   photo keeps a 4:3 frame so more of the picture shows. */
.specimen-card-body { padding: 0.75rem 0.85rem 0.85rem; }
.specimen-card-banner { padding: 0.55rem 0.8rem; }
.specimen-card-serial { font-size: 1.2rem; }
.specimen-card-stats { gap: 0.55rem 0.8rem; }
@media (max-width: 640px) {
  .specimen-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .specimen-card-serial { font-size: 1.05rem; }
  .specimen-card-banner { padding: 0.5rem 0.6rem; }
  .specimen-card-body { padding: 0.6rem 0.6rem 0.7rem; }
  .specimen-card-banner-sub { font-size: 0.7rem; }
}
@media (max-width: 640px) {
  .banner-caliber { display: none; }
  .specimen-card-stat-label { white-space: nowrap; font-size: 0.56rem; letter-spacing: 0.02em; }
}

/* Avatar menu (members' header). */
.header-v2 .avatar-menu > summary::after { content: none; }
.header-v2 .avatar-menu > summary { display: inline-flex; border-radius: 8px; padding: 2px; }
.header-v2 .avatar-menu > summary:hover,
.header-v2 .avatar-menu[open] > summary { background: rgba(255, 255, 255, 0.18); }
.header-v2 .avatar-menu .nav-dropdown-menu { min-width: 170px; margin-top: 0.45rem; }
.header-v2 .avatar-menu .nav-dropdown-menu a { display: block; }
.header-v2 .avatar-menu .menu-count {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: #d6402c;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}
.header-v2 .avatar-menu .menu-logout { margin: 0.25rem 0 0; padding-top: 0.25rem; border-top: 1px solid var(--line, #dcdfe3); display: flex; }
.header-v2 .avatar-menu .menu-logout button { flex: 1; }

/* Add an Example: saved drafts */
.submit-actions button.button-secondary[type="submit"] {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.submit-actions button.button-secondary[type="submit"]:hover { background: var(--accent-soft); }
.draft-banner {
  margin: 0 0 1rem;
  padding: 0.55rem 0.8rem;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  font-size: 0.92rem;
}
.submit-drafts { max-width: 560px; margin-bottom: 1rem; }
.draft-list { list-style: none; margin: 0; padding: 0; }
.draft-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line, #dcdfe3);
}
.draft-list li:first-child { border-top: 0; }
.draft-meta { color: var(--ink-soft); font-size: 0.85rem; }
.draft-actions { margin-left: auto; display: inline-flex; gap: 0.8rem; align-items: baseline; }
.draft-discard { display: inline; margin: 0; }
.card .draft-discard button.link-button[type="submit"] {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--accent);
  font: inherit;
  font-size: inherit;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.card .draft-discard button.link-button[type="submit"]:hover { text-decoration: underline; }

/* List / Cards toggle on the left, "Show N per page" on the right. */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.list-toolbar .view-toggle { margin-bottom: 0; }
.list-toolbar .per-page-control { margin: 0 0 0 auto; }

/* Settings page */
.settings-jump { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 1.2rem; font-size: 0.9rem; }
.settings-jump-danger { color: #b3261e; }
.settings-card { max-width: 640px; margin-bottom: 1.25rem; scroll-margin-top: 1rem; }
.settings-card h2 { margin: 0 0 0.8rem; font-size: 1.15rem; }
.settings-card .form-field select,
.settings-card .form-field input[type="text"],
.settings-card .form-field input[type="email"],
.settings-card .form-field input[type="password"] { width: 100%; max-width: 420px; box-sizing: border-box; }
.settings-rule { border: 0; border-top: 1px solid var(--line, #dcdfe3); margin: 1.1rem 0; }
.settings-avatar-row { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.settings-avatar { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; flex: none; }
.settings-avatar-initial { background: var(--accent, #444); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; }
.settings-label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.settings-check { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
.settings-danger { border-left: 4px solid #b3261e; }
.settings-danger h2 { color: #b3261e; }
.settings-warning { color: #b3261e; }
.card form button.danger[type="submit"] { background: #b3261e; }
.card form button.danger[type="submit"]:hover { background: #8f1d17; }

/* Prefix page: sales summary */
.sales-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.sales-summary-card { border-top: 4px solid var(--line); padding: 0.55rem 0.9rem 0.65rem; container-type: inline-size; min-width: 0; }
.sales-summary-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.1rem 0.8rem; margin-bottom: 0.4rem; }
.sales-summary-currency { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.95rem; letter-spacing: 0.04em; }
.sales-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: baseline; }
.sales-summary-currency .sales-dot { margin-right: 0; }
.sales-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 0.9rem; margin: 0; }
.sales-stat { min-width: 0; }
.sales-stat dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.sales-stat dd { margin: 0; font-size: clamp(0.95rem, 4.4cqw, 1.3rem); font-weight: 700; line-height: 1.2; }
.sales-stat dd.sales-stat-sub { font-size: 0.78rem; line-height: 1.3; font-weight: 400; color: var(--ink-soft); }
@container (max-width: 560px) { .sales-stat-last { flex: 1 0 100%; } }
.sales-summary-note { margin: 0; font-size: 0.78rem; color: var(--ink-soft); }
.sales-list-wrap { overflow-x: auto; margin-bottom: 0.5rem; }
.sales-list { margin-bottom: 0; }
.sales-list td:first-child, .sales-list td:nth-child(2) { white-space: nowrap; }
.sales-list td:last-child { min-width: 10rem; }
.sales-list .sales-num { text-align: right; white-space: nowrap; }
.sales-code { font-size: 0.75rem; color: var(--ink-soft); }
.sales-sighting { color: var(--ink-soft); font-style: italic; }
.sales-list tr[hidden] { display: none; }
@media (max-width: 640px) {
  .sales-stats { gap: 0.3rem 0.5rem; }
  .sales-stat dt { font-size: 0.65rem; letter-spacing: 0; }
  .sales-stat dd.sales-stat-sub { font-size: 0.72rem; }
  /* The sales list becomes one small block per row on phones. */
  .sales-list thead { display: none; }
  .sales-list, .sales-list tbody { display: block; }
  .sales-list tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "date price" "ex type" "note note";
    gap: 0.1rem 0.8rem;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--line);
  }
  .sales-list tr[hidden] { display: none; }
  .data-table.sales-list td { display: block; padding: 0; border: 0; border-bottom: 0; }
  .sales-list td:nth-child(1) { grid-area: date; font-weight: 600; }
  .sales-list td:nth-child(2) { grid-area: ex; }
  .sales-list td:nth-child(3) { grid-area: type; text-align: right; font-size: 0.85rem; color: var(--ink-soft); }
  .sales-list td:nth-child(4) { grid-area: price; font-weight: 600; }
  .sales-list td:nth-child(5) { grid-area: note; font-size: 0.85rem; color: var(--ink-soft); min-width: 0; }
}

/* Collapsible sections on the Prefix page (sales list, sale price chart). */
.sales-collapse { margin: 0 0 1rem; border-top: 1px solid var(--line); }
.sales-collapse > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 0;
  font-weight: 700;
  font-size: 1.05rem;
}
.sales-collapse > summary::-webkit-details-marker { display: none; }
.sales-collapse > summary::before { content: "\25B8"; display: inline-block; width: 1.1rem; color: var(--ink-soft); }
.sales-collapse[open] > summary::before { content: "\25BE"; }
.sales-collapse > summary:hover { color: var(--link, var(--accent)); }
/* A Prefix with sales in only one currency: that card spans the page. */
.sales-summary-card:only-child { grid-column: 1 / -1; }

/* Profile page: clickable stat tiles. */
a.stat-link { display: block; color: inherit; text-decoration: none; border-radius: 6px; padding: 0.15rem 0.3rem; margin: -0.15rem -0.3rem; }
a.stat-link:hover { background: var(--accent-soft); text-decoration: none; }
a.stat-link:hover .label { color: var(--ink); }
.activity-count { font-size: 0.6em; color: var(--ink-soft); font-weight: 400; }
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; max-width: 760px; }
.activity-item { padding: 0.7rem 1rem; }
.activity-meta { font-size: 0.85rem; color: var(--ink-soft); }
.activity-body { margin: 0.3rem 0 0; white-space: pre-line; }
a.stat-link .label { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.stat-link:hover .label { text-decoration-color: currentColor; }

.sales-sort-phone { display: none; }
@media (max-width: 640px) {
  .sales-sort-phone { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.5rem; font-size: 0.85rem; }
  .sales-sort-phone select { width: auto; padding: 0.25rem 0.4rem; }
}

/* Wish List (private list of Prefixes / Examples a member is looking for) */
.wish-vote { display:inline; margin-left:0.4rem; }
.wish-vote form { display:inline; margin:0; }
.wish-btn { display:inline-block; padding:0.15rem 0.5rem; border:0; border-radius:999px; background:var(--bg); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); font:inherit; font-size:0.75rem; font-weight:600; line-height:inherit; cursor:pointer; white-space:nowrap; }
.wish-btn:hover { background:var(--accent-soft); }
.wish-btn.active { background:var(--accent); color:#fff; }
.wishlist-add { margin-bottom:1rem; }
.wishlist-add-form { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.wishlist-add-form label { font-weight:600; }
.wishlist-add-form input[type="text"] { min-width:0; }
.wishlist-add-form input[name="q"] { flex:1 1 16rem; }
.wishlist-add-form input[name="note"] { flex:1 1 12rem; }
.wishlist-hint { margin:0.5rem 0 0; font-size:0.8rem; color:var(--ink-soft); }
.wantlist-wrap { overflow-x:auto; }
.wishlist-table .num-col { text-align:right; }
.wantlist-note-form { display:flex; gap:0.4rem; align-items:center; margin:0; }
.wantlist-note-form input[type="text"] { width:100%; min-width:9rem; }
.wantlist-remove-form { margin:0; }
@media (max-width: 640px) {
  .wishlist-table thead { display:none; }
  .wishlist-table, .wishlist-table tbody, .wishlist-table tr, .wishlist-table td { display:block; width:100%; }
  .wishlist-table tr { padding:0.6rem 0.2rem; border-bottom:1px solid var(--line); }
  .data-table.wishlist-table td { border:0; padding:0.15rem 0.4rem; text-align:left; }
  .wishlist-table .num-col { text-align:left; }
  .wishlist-table td[data-label]::before { content:attr(data-label); color:var(--ink-soft); font-size:0.7rem; text-transform:uppercase; margin-right:0.4rem; }
}

/* Notifications + Wish List alert toggle */
.alert-btn { padding:0.1rem 0.55rem; border:0; border-radius:999px; background:var(--bg); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--line); font:inherit; font-size:0.75rem; font-weight:600; cursor:pointer; }
.alert-btn.on { background:var(--accent); color:#fff; box-shadow:none; }
.notification-item { padding:0.7rem 1rem; }
.notification-item.unread { border-left:4px solid var(--accent); background:var(--accent-soft); }
.notification-text { color:inherit; font-weight:500; text-decoration:none; }
.notification-text:hover { text-decoration:underline; }

/* ---- Messages: the mailbox (my_messages.html, _mailbox_*.html) ---- */
.settings-subhead { margin: 1rem 0 0.4rem; font-size: 0.95rem; color: var(--ink-soft); font-weight: 600; }
.mailbox { display: grid; grid-template-columns: 200px 330px minmax(0, 1fr); gap: 1rem; align-items: start;
  width: min(1280px, calc(100vw - 2.5rem)); position: relative; left: 50%; transform: translateX(-50%); }
.mb-side, .mb-list, .mb-pane { min-width: 0; }
.mb-compose-btn { display: block; text-align: center; margin-bottom: 0.8rem; box-sizing: border-box; }
.mb-side-details summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; list-style: none; }
.mb-side-details summary::-webkit-details-marker { display: none; }
@media (min-width: 901px) { .mb-side-details summary { display: none; } }
.mb-side-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 1rem 0 0.3rem; }
.mb-folders { display: flex; flex-direction: column; gap: 1px; }
.mb-folders a, .mb-label-row a { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.55rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 0.92rem; flex: 1; min-width: 0; }
.mb-folders a:hover, .mb-label-row a:hover { background: var(--bg-soft); }
.mb-folders a.active, .mb-label-row.active { background: var(--accent-soft); font-weight: 600; }
.mb-folders a > span:first-child:not(.mb-dot) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-label-row { display: flex; align-items: center; border-radius: 6px; }
.mb-label-row form { margin: 0; }
.mb-x { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 0.4rem; box-shadow: none; }
.mb-x:hover { color: var(--danger); background: none; }
.mb-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mb-count { font-size: 0.75rem; color: var(--ink-soft); margin-left: auto; }
.mb-count.unread { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 0.45rem; font-weight: 600; }
.mb-hint { font-size: 0.82rem; color: var(--ink-soft); }
.mb-label-form { display: flex; gap: 0.3rem; margin-top: 0.4rem; flex-wrap: wrap; }
.mb-label-form input[type=text] { flex: 1 1 90px; min-width: 0; padding: 0.3rem 0.4rem; font-size: 0.85rem; }
.mb-label-form select { width: 3.2rem; padding: 0.2rem; font-size: 0.85rem; }
.mb-label-form button, .mb-search button { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.mb-blocked { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.mb-blocked li { display: flex; justify-content: space-between; align-items: center; padding: 0.15rem 0.55rem; }
.mb-blocked form { margin: 0; }
.mb-search { display: flex; gap: 0.3rem; align-items: center; margin-bottom: 0.5rem; }
.mb-search input[type=search] { flex: 1; min-width: 0; padding: 0.4rem 0.5rem; }
.mb-clear { font-size: 0.85rem; margin-left: 0.4rem; }
.mb-heading { font-weight: 600; margin: 0.2rem 0 0.4rem; }
.mb-bulk { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--line); }
.mb-check-all { margin: 0 0.3rem 0 0.4rem; display: inline-flex; }
.mb-act { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.8rem; cursor: pointer; box-shadow: none; }
.mb-act:hover { background: var(--accent-soft); }
.mb-act.danger { color: var(--danger); }
.mb-labeler { display: inline-flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.mb-labeler select { font-size: 0.8rem; padding: 0.2rem; max-width: 9rem; }
.mb-rows { list-style: none; margin: 0; padding: 0; }
.mb-row { display: flex; align-items: flex-start; gap: 0.3rem; border-bottom: 1px solid var(--line); padding: 0.1rem 0.2rem; }
.mb-row.unread { background: var(--accent-soft); }
.mb-row.selected { box-shadow: inset 3px 0 0 var(--accent); background: var(--bg-soft); }
.mb-pick { margin: 0.9rem 0.3rem 0 0.4rem; flex-shrink: 0; }
.mb-row-link { display: flex; gap: 0.6rem; flex: 1; min-width: 0; padding: 0.55rem 0.3rem; color: inherit; text-decoration: none; }
.mb-row-link:hover { background: var(--bg-soft); }
.mb-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.mb-row-top { display: flex; justify-content: space-between; gap: 0.5rem; }
.mb-who { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-row.unread .mb-who, .mb-row.unread .mb-subject { font-weight: 700; }
.mb-date { font-size: 0.75rem; color: var(--ink-soft); flex-shrink: 0; }
.mb-subject { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-preview { font-size: 0.8rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 2px; }
.mb-chip { color: #fff; font-size: 0.7rem; padding: 0 0.45rem; border-radius: 9px; line-height: 1.5; }
.mb-pager { display: flex; gap: 0.8rem; align-items: center; justify-content: center; font-size: 0.88rem; margin: 0.6rem 0; }
.mb-pane { border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1rem; background: var(--bg); min-height: 320px; }
.mb-back { display: none; margin: 0 0 0.6rem; font-size: 0.9rem; }
.mb-placeholder { text-align: center; padding: 4rem 1rem; color: var(--ink-soft); }
.mb-thread-title { margin: 0 0 0.2rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.mb-thread-head { border-bottom: 1px solid var(--line); margin-bottom: 0.6rem; padding-bottom: 0.6rem; }
.mb-thread-head p { margin: 0.2rem 0; }
.mb-toolbar { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.5rem; }
.mb-messages { list-style: none; margin: 0; padding: 0; }
.mb-messages .comment { border-bottom: 1px solid var(--line); padding: 0.6rem 0; overflow-wrap: anywhere; }
.mb-attachments { list-style: none; margin: 0.3rem 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mb-attachments li { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; max-width: 220px; }
.mb-attachments img { max-width: 220px; max-height: 160px; border-radius: 6px; border: 1px solid var(--line); object-fit: cover; }
.mb-report summary { list-style: none; cursor: pointer; display: inline; }
.mb-report summary::-webkit-details-marker { display: none; }
.mb-report form { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.3rem; max-width: 320px; }
.mb-reply { margin-top: 0.8rem; }
.mb-input { width: 100%; box-sizing: border-box; }
.mb-attach { margin-top: 0.4rem; }
.mb-attach input[type=file] { max-width: 100%; font-size: 0.85rem; }
.mb-people { margin-top: 0.8rem; }
.mb-people summary { cursor: pointer; font-size: 0.9rem; }
.mb-people-list { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mb-people-list li { display: flex; align-items: center; gap: 0.6rem; }
.mb-person { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.mb-people-list form { margin: 0; }
.mb-add-person { display: flex; gap: 0.3rem; position: relative; }
.mb-add-person input { flex: 1; min-width: 0; }
@media (max-width: 1100px) {
  .mailbox { grid-template-columns: 180px 280px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mailbox { grid-template-columns: minmax(0, 1fr); width: auto; left: 0; transform: none; }
  .mb-pane { display: none; }
  .mailbox.has-pane .mb-pane { display: block; }
  .mailbox.has-pane .mb-list, .mailbox.has-pane .mb-side { display: none; }
  .mb-back { display: block; }
}
.mb-chip-anon { background: transparent; color: var(--ink-soft); border: 1px solid var(--ink-soft); }
.mb-anon-note { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; background: var(--gold-soft); color: var(--ink); border-left: 4px solid var(--gold); border-radius: 6px; padding: 0.55rem 0.8rem; margin: 0 0 0.7rem; font-size: 0.88rem; }
.mb-anon-note strong { color: var(--gold-ink); }
.mb-anon-note a { margin-left: auto; white-space: nowrap; }
.dropzone.full { opacity: 0.55; cursor: not-allowed; border-style: solid; }
.dropzone-alert { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: var(--gold-soft); border-left: 4px solid var(--gold); color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.dropzone-alert[hidden] { display: none; }
.shelf-caption { margin: -0.3rem 0 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.shelf-sold { font-size: 0.95rem; }

/* Home page (members): "Add an Example" sits on the stats line, pushed to the right. */
.stat-row { align-items: flex-end; }
.stat-row-action { margin-left: auto; }
@media (max-width: 600px) {
  /* Phones (members' home page): hide the counts; the button is centred. */
  .stat-row-member .stat { display: none; }
  .stat-row-member .stat-row-action { margin: 0 auto; }
}

/* Account-request form: the honeypot field must stay out of sight and out of
   reach for people, but present in the page for bots to find. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 380px) {
  .form-row-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Logged-out intro: clickable squares on the home page, and the "How it works"
   hub and feature pages they lead to. */
a.intro-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.intro-card-link:hover,
a.intro-card-link:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.intro-card-more {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}
.intro-tour-link {
  margin: -0.5rem 0 1.75rem;
  text-align: center;
}
.intro-lead {
  max-width: 46rem;
}
.intro-steps {
  max-width: 46rem;
  counter-reset: intro-step;
}
.intro-step {
  margin: 0 0 2rem;
}
.intro-step h2 {
  counter-increment: intro-step;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.intro-step h2::before {
  content: counter(intro-step);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
}
.intro-step p {
  margin: 0 0 0.9rem;
}
.intro-shot {
  margin: 0 0 1rem;
}
.intro-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.intro-shot figcaption {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.intro-shot-sample figcaption {
  font-weight: 600;
}
.intro-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 46rem;
  margin: 0.5rem 0 1.5rem;
  font-weight: 600;
}
.intro-cta {
  max-width: 46rem;
}
.intro-cta h2 {
  margin-top: 0;
}

/* Prefix Rare star beside the Prefix chip on Example cards */
.specimen-card-prefix { display: inline-flex; align-items: center; gap: 0.4rem; }
.specimen-card-stat-value .rare-chip { margin-left: 0.4rem; vertical-align: middle; }

/* ------------------------------------------------------------------ Forum */
.forum-subnav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; margin: 0.75rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.forum-subnav a { color: var(--ink-soft); text-decoration: none; padding: 0.15rem 0; }
.forum-subnav a.active, .forum-subnav a:hover { color: var(--ink); border-bottom: 2px solid var(--accent); }
.forum-search { margin-left: auto; }
.forum-search input { padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); min-width: 12rem; }
.forum-join { margin-bottom: 1rem; }
.forum-category { padding: 0; overflow: hidden; margin-bottom: 1rem; }
.forum-category-title { margin: 0; padding: 0.6rem 1rem; font-size: 0.95rem; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.forum-board-list, .forum-thread-list, .forum-ignore-list { list-style: none; margin: 0; padding: 0; }
.forum-board, .forum-thread-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 7.5rem 11rem; gap: 0.75rem; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.forum-board:last-child, .forum-thread-row:last-child { border-bottom: none; }
.forum-thread-list-compact .forum-thread-row { display: block; padding: 0.55rem 1rem; }
.forum-board-title { font-weight: 600; font-size: 1.02rem; }
.forum-board-desc, .forum-board-sub, .forum-thread-meta, .forum-thread-last, .forum-thread-stats { font-size: 0.82rem; color: var(--ink-soft); }
.forum-thread-stats span { display: block; }
.forum-thread-stats strong { color: var(--ink); }
.forum-thread-title { font-weight: 600; word-break: break-word; }
.forum-thread-row.is-unread .forum-thread-title a, .forum-board.is-unread .forum-board-title { font-weight: 800; }
.forum-dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--accent); }
.forum-flag { font-size: 0.75rem; color: var(--ink-soft); margin-right: 0.25rem; }
.forum-flag-solved { color: var(--tag-confirmed); font-weight: 700; }
.forum-label { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 4px; margin-right: 0.35rem; vertical-align: middle; background: var(--accent-soft); color: var(--accent); }
.forum-label-blue { background: var(--tint-blue); color: var(--link); }
.forum-label-green { background: var(--tint-green); color: var(--tag-confirmed); }
.forum-label-amber { background: var(--gold-soft); color: var(--gold-ink); }
.forum-label-red { background: var(--danger-soft); color: var(--danger); }
.forum-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.5rem 0 1rem; }
.forum-btn { display: inline-block; padding: 0.45rem 0.9rem; background: var(--accent); color: #fff !important; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.92rem; border: 0; cursor: pointer; }
.forum-btn:hover { opacity: 0.9; }
.forum-link-btn { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font-size: 0.88rem; text-decoration: underline; font-family: inherit; }
.forum-inline-form { display: inline; margin: 0; }
.forum-filters form { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; font-size: 0.88rem; }
.forum-filters select { margin-left: 0.3rem; padding: 0.25rem; }
.forum-stats { text-align: center; color: var(--ink-soft); font-size: 0.85rem; }
.forum-notice { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold-soft-2); border-radius: 6px; padding: 0.5rem 0.8rem; font-size: 0.88rem; }
.forum-tags { margin: 0 0 0.75rem; }
.forum-tag { display: inline-block; font-size: 0.8rem; padding: 0.1rem 0.5rem; margin: 0 0.3rem 0.3rem 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.forum-links { margin-bottom: 0.75rem; font-size: 0.92rem; }
.forum-xref { font-weight: 600; }

.forum-posts { margin-top: 0.5rem; }
.forum-post { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.9rem; background: var(--bg); overflow: hidden; }
.forum-post.is-solution { border-color: var(--tag-confirmed); box-shadow: 0 0 0 1px var(--tint-green); }
.forum-post.is-deleted { opacity: 0.6; border-style: dashed; }
.forum-post-author { padding: 0.9rem 0.75rem; background: var(--bg-soft); border-right: 1px solid var(--line); text-align: center; font-size: 0.82rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.forum-author-name { font-weight: 700; word-break: break-word; }
.forum-author-rank, .forum-author-count { color: var(--ink-soft); font-size: 0.78rem; }
.forum-author-team { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-soft); border-radius: 4px; padding: 0 0.4rem; }
.forum-post-main { padding: 0.7rem 1rem 0.5rem; min-width: 0; }
.forum-post-head { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.6rem; }
.forum-post-head a { color: inherit; }
.forum-post-num { margin-left: auto; }
.forum-starter-badge, .forum-solution-badge { font-size: 0.7rem; font-weight: 700; padding: 0 0.4rem; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.forum-solution-badge { background: var(--tint-green); color: var(--tag-confirmed); }
.post-body { line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; }
.post-body img { max-width: 100%; }
.forum-quote { margin: 0.5rem 0; padding: 0.5rem 0.8rem; border-left: 3px solid var(--accent); background: var(--bg-soft); border-radius: 0 6px 6px 0; font-size: 0.93rem; }
.forum-quote-by { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
.forum-quote-by cite { font-style: normal; font-weight: 700; }
.forum-code { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: 0.6rem; overflow-x: auto; font-size: 0.85rem; }
.forum-spoiler { border: 1px dashed var(--line); border-radius: 6px; padding: 0.3rem 0.6rem; margin: 0.4rem 0; }
.forum-spoiler summary { cursor: pointer; color: var(--ink-soft); }
.forum-mention { color: var(--link); font-weight: 600; }
.forum-attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.forum-attachments img { max-height: 180px; max-width: 260px; border-radius: 6px; border: 1px solid var(--line); object-fit: cover; }
.forum-signature { margin-top: 0.8rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-soft); }
.forum-post-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; margin-top: 0.7rem; padding-top: 0.45rem; border-top: 1px solid var(--line); }
.forum-post-actions .comment-action { cursor: pointer; }
.forum-mq-toggle.active { background: var(--accent-soft); font-weight: 700; }
.forum-ignored summary { cursor: pointer; color: var(--ink-soft); font-size: 0.85rem; }
.forum-report summary { list-style: none; cursor: pointer; }
.forum-report form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.forum-report form button { width: auto; }
.forum-reply, .forum-modbox, .forum-poll { margin-top: 1rem; }
.forum-editor textarea { width: 100%; min-height: 9rem; }
.forum-toolbar { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.forum-toolbar button { width: auto; min-width: 2rem; padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-soft); color: var(--ink); cursor: pointer; font-size: 0.85rem; }
.forum-toolbar-right { margin-left: auto; }
.forum-preview { border: 1px dashed var(--line); border-radius: 6px; padding: 0.6rem 0.8rem; margin-top: 0.5rem; }

/* Forum editor: word-processor style box (see forum-editor.js) */
.forum-wysiwyg, .forum-help-rich { display: none; }
.forum-editor.is-rich .forum-wysiwyg { display: block; }
.forum-editor.is-rich .forum-wysiwyg[hidden] { display: none; }
.forum-editor.is-rich textarea, .forum-editor.is-rich .forum-help-plain { display: none; }
.forum-editor.is-rich .forum-help-rich { display: block; }
.forum-toolbar { align-items: center; padding: 0.3rem; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--bg-soft); margin-bottom: 0; }
.forum-editor:not(.is-rich) .forum-toolbar { display: none; }
.forum-tb-group { display: inline-flex; gap: 0.2rem; padding-right: 0.4rem; margin-right: 0.2rem; border-right: 1px solid var(--line); }
.forum-toolbar button { background: transparent; border-color: transparent; min-width: 2rem; height: 1.9rem; line-height: 1; }
.forum-toolbar button:hover { background: var(--bg); border-color: var(--line); }
.forum-toolbar button.on { background: var(--accent-soft); border-color: var(--accent); }
.forum-toolbar #forum-preview-btn { border-color: var(--line); background: var(--bg); }
.forum-wysiwyg { position: relative; min-height: 11rem; max-height: 32rem; overflow-y: auto; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 0 0 6px 6px; background: var(--bg); color: var(--ink); line-height: 1.55; outline: none; }
.forum-wysiwyg:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.forum-wysiwyg.is-empty::before { content: attr(data-placeholder); position: absolute; left: 0.8rem; top: 0.7rem; color: var(--ink-soft); pointer-events: none; }
.forum-wysiwyg a { color: var(--link); text-decoration: underline; }
.forum-wysiwyg ul, .forum-wysiwyg ol { margin: 0.2rem 0; padding-left: 1.6rem; }
.forum-wysiwyg .fe-quote { margin: 0.4rem 0; padding: 0.4rem 0.8rem; border-left: 3px solid var(--accent); background: var(--bg-soft); border-radius: 0 6px 6px 0; font-size: 0.93rem; }
.forum-wysiwyg .fe-quote-by { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); user-select: none; }
.forum-wysiwyg .fe-spoiler { margin: 0.4rem 0; border: 1px dashed var(--line); border-radius: 6px; padding: 0.3rem 0.6rem; }
.forum-wysiwyg .fe-spoiler-label { font-size: 0.8rem; color: var(--ink-soft); user-select: none; }
.forum-wysiwyg .fe-code { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem; margin: 0.4rem 0; font-size: 0.85rem; white-space: pre-wrap; }
.forum-wysiwyg .fe-img { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0.4rem 0; }
.forum-wysiwyg .fe-img img { display: block; max-width: 100%; max-height: 260px; border-radius: 6px; border: 1px solid var(--line); }
.forum-wysiwyg .fe-img-x { position: absolute; top: 4px; right: 4px; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 1.1rem; line-height: 1.6rem; cursor: pointer; }
.forum-pop { border: 1px solid var(--line); border-bottom: 0; background: var(--bg); padding: 0.6rem 0.8rem; }
.forum-pop[hidden] { display: none; }
.forum-pop label { display: block; font-size: 0.85rem; margin-bottom: 0.4rem; }
.forum-pop input[type="text"] { display: block; width: 100%; margin-top: 0.15rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; }
.forum-pop-thumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.forum-pop-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.forum-pop-actions button { width: auto; padding: 0.3rem 0.8rem; }
.forum-pop-actions button.secondary { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); }
.forum-pop-err { color: var(--danger); font-size: 0.85rem; margin-top: 0.3rem; }
.forum-pop-thumb { width: auto; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.forum-pop-thumb img { display: block; height: 64px; border-radius: 5px; }
.forum-editor-msg { margin-top: 0.3rem; }
.forum-editor.is-previewing .forum-preview { margin-top: 0; border-style: solid; border-radius: 0 0 6px 6px; }
.forum-img-slot { display: block; margin: 0.5rem 0; }
.forum-inline-img { display: block; width: fit-content; max-width: 100%; margin: 0.5rem 0; }
.forum-img-slot img, .forum-inline-img img { max-width: 100%; max-height: 520px; border-radius: 6px; border: 1px solid var(--line); }
.forum-img-locked { display: inline-block; padding: 0.4rem 0.7rem; border: 1px dashed var(--line); border-radius: 6px; color: var(--ink-soft); font-size: 0.85rem; }
.forum-pollbox { margin: 0.75rem 0; padding: 0.5rem 0.8rem; border: 1px solid var(--line); border-radius: 6px; }
.forum-pollbox summary { cursor: pointer; font-weight: 600; }
.forum-poll-opt { display: block; margin: 0.3rem 0; }
.forum-poll-results { list-style: none; padding: 0; }
.forum-poll-results li { margin: 0.5rem 0; }
.forum-poll-bar { height: 0.7rem; background: var(--bg-soft); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.forum-poll-bar span { display: block; height: 100%; background: var(--accent); }
.forum-poll-n { font-size: 0.8rem; color: var(--ink-soft); }
.forum-modform { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; align-items: center; }
.forum-modform input[type="text"], .forum-modform input[type="number"], .forum-modform select { padding: 0.35rem; }
.forum-modform button, .forum-modbtn { width: auto; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-soft); color: var(--ink); cursor: pointer; }
.forum-modbtn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.forum-modrow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.forum-result { margin-bottom: 0.6rem; }
.forum-result-title { font-weight: 700; }
.forum-rules ol { padding-left: 1.2rem; }
.forum-rules li { margin-bottom: 0.7rem; }
.forum-edit-old pre { white-space: pre-wrap; background: var(--bg-soft); padding: 0.5rem; border-radius: 6px; }
.muted { color: var(--ink-soft); }

@media (max-width: 720px) {
  .forum-board, .forum-thread-row { grid-template-columns: 1rem minmax(0, 1fr); }
  .forum-board .forum-thread-stats, .forum-thread-row .forum-thread-stats { grid-column: 2; display: flex; gap: 0.8rem; }
  .forum-board .forum-thread-stats span, .forum-thread-row .forum-thread-stats span { display: inline; }
  .forum-thread-last { grid-column: 2; }
  .forum-post { grid-template-columns: 1fr; }
  .forum-post-author { flex-direction: row; justify-content: flex-start; text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 0.5rem 0.75rem; gap: 0.6rem; flex-wrap: wrap; }
  .forum-search { margin-left: 0; width: 100%; }
  .forum-search input { width: 100%; }
}

/* Reactions and emoji picker */
.forum-reactions { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; align-items: center; }
.forum-react-chip { padding: 0.1rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); cursor: pointer; font-size: 0.85rem; }
.forum-react-chip.active { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
.forum-react-pick { position: relative; display: inline-block; }
.forum-react-pick summary { list-style: none; cursor: pointer; }
.forum-react-pick summary::-webkit-details-marker { display: none; }
.forum-react-menu { position: absolute; z-index: 20; left: 0; bottom: 100%; display: flex; gap: 0.15rem; padding: 0.3rem; margin-bottom: 0.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
.forum-react-menu button { width: auto; padding: 0.2rem 0.35rem; border: 0; border-radius: 50%; background: none; font-size: 1.3rem; line-height: 1.2; cursor: pointer; }
.forum-react-menu button:hover { background: var(--bg-soft); transform: scale(1.15); }
.forum-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); gap: 0.15rem; max-height: 11rem; overflow-y: auto; }
.forum-emoji-grid button { width: auto; padding: 0.2rem; border: 0; border-radius: 6px; background: none; font-size: 1.35rem; line-height: 1.3; cursor: pointer; }
.forum-emoji-grid button:hover { background: var(--bg-soft); }
.forum-editor { position: relative; }
.forum-suggest { position: absolute; z-index: 30; min-width: 12rem; max-width: 20rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); overflow: hidden; }
.forum-suggest[hidden] { display: none; }
.forum-suggest-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.92rem; }
.forum-suggest-row small { color: var(--ink-soft); }
.forum-suggest-row.on, .forum-suggest-row:hover { background: var(--accent-soft); }
.forum-mentions-title { margin: 1.2rem 0 0.4rem; font-size: 1.05rem; }
.forum-mention-excerpt { color: var(--ink-soft); font-size: 0.9rem; margin: 0.15rem 0; }
.forum-card { max-width: 340px; margin: 0.6rem 0; }
.forum-card .specimen-card-grid { display: block; margin: 0; }
.forum-pop-results { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0; }
.forum-pop-results button { width: auto; padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--ink); cursor: pointer; }
.forum-pop-results button:hover { background: var(--accent-soft); }
.forum-wysiwyg .fe-card { padding: 0.55rem 2.2rem 0.55rem 0.8rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; background: var(--bg-soft); }
.forum-wysiwyg .fe-card-label { font-size: 0.92rem; user-select: none; }
.forum-wysiwyg .fe-card .fe-img-x { top: 50%; transform: translateY(-50%); }

.post-body a.forum-inline-img img, .forum-attachments a img { cursor: zoom-in; }
@media (hover: none) and (pointer: coarse), (max-width: 640px) { .post-body a.forum-inline-img img, .forum-attachments a img { cursor: pointer; } }

/* Text size ([size=…]) in posts and in the editor */
.fs-small, .fe-size[data-size="small"] { font-size: 0.85rem; }
.fs-normal, .fe-size[data-size="normal"] { font-size: 1rem; }
.fs-large, .fe-size[data-size="large"] { font-size: 1.3rem; line-height: 1.35; }
.fs-huge, .fe-size[data-size="huge"] { font-size: 1.8rem; line-height: 1.25; }
.forum-toolbar select { height: 1.9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font-size: 0.85rem; padding: 0 0.3rem; }

/* ---- Forum editor toolbar v2 (icon toolbar: below the text on desktop, above it on phones) ---- */
.forum-editor.is-rich { display: flex; flex-direction: column; }
.forum-editor.is-rich > * { order: 6; }
.forum-editor.is-rich > .forum-wysiwyg, .forum-editor.is-rich > .forum-preview { order: 1; }
.forum-editor.is-rich > .forum-toolbar { order: 2; }
.forum-editor.is-rich > .forum-pop { order: 3; }
.forum-editor.is-rich > .forum-editor-msg { order: 4; }
.forum-editor.is-rich > .forum-help-rich { order: 5; }
.forum-editor.is-rich.is-source > textarea { display: block; order: 1; min-height: 11rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; border-radius: 6px 6px 0 0; }
.forum-editor.is-rich.is-source > .forum-wysiwyg { display: none; }
.forum-editor.is-rich > .forum-wysiwyg { border-radius: 6px 6px 0 0; }
.forum-editor.is-previewing .forum-preview { border-radius: 6px 6px 0 0; }
.forum-toolbar { position: relative; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; gap: 0.1rem; padding: 0.25rem 0.35rem; }
.forum-pop { border-top: 0; border-bottom: 1px solid var(--line); }
.tb-group { display: inline-flex; align-items: center; gap: 0.1rem; padding-right: 0.35rem; margin-right: 0.2rem; border-right: 1px solid var(--line); }
.tb-group.tb-last { border-right: 0; }
.forum-toolbar .tb-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.35rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; font-size: 1.05rem; line-height: 1; }
.forum-toolbar .tb-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--line); }
.forum-toolbar .tb-btn.on { background: var(--accent-soft); border-color: var(--accent); }
.forum-toolbar .tb-btn:disabled { opacity: 0.35; cursor: default; }
.tb-ic { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tb-caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin: 0.25rem 0 0 0.1rem; flex: none; }
.tb-dd { position: relative; display: inline-flex; }
.forum-menu { position: absolute; z-index: 40; bottom: calc(100% + 4px); left: 0; min-width: 11rem; max-height: 19rem; overflow-y: auto; padding: 0.25rem; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); }
.forum-menu[hidden] { display: none; }
.forum-menu.is-right { left: auto; right: 0; }
.forum-menu.is-sizes { min-width: 5rem; }
.forum-toolbar .forum-menu button { display: flex; align-items: center; gap: 0.6rem; width: 100%; height: auto; min-width: 0; padding: 0.4rem 0.7rem; border: 0; border-radius: 6px; background: none; color: var(--ink); font-size: 0.92rem; text-align: left; cursor: pointer; }
.forum-toolbar .forum-menu button:hover { background: var(--bg-soft); }
.forum-menu.is-swatches { min-width: 0; padding: 0.4rem; }
.forum-swatches { display: grid; grid-template-columns: repeat(8, 1.5rem); gap: 3px; }
.forum-toolbar .forum-swatches button { width: 1.5rem; height: 1.5rem; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; }
.forum-toolbar .forum-swatches button:hover { outline: 2px solid var(--accent); }
.forum-pop-row { display: flex; gap: 0.7rem; }
.forum-pop-row label { flex: 1; }
.forum-pop input[type="number"] { display: block; width: 100%; margin-top: 0.15rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; }
.forum-editor-msg.is-note { color: var(--ink-soft); }
@media (max-width: 640px) {
  .tb-desk { display: none !important; }
  .forum-editor.is-rich > .forum-toolbar { order: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; }
  .forum-editor.is-rich > .forum-pop { order: 1; border-top: 1px solid var(--line); border-bottom: 0; }
  .forum-editor.is-rich > .forum-wysiwyg, .forum-editor.is-rich > .forum-preview, .forum-editor.is-rich.is-source > textarea { order: 2; border-radius: 0 0 6px 6px; }
  .forum-menu { bottom: auto; top: calc(100% + 4px); }
  .forum-tb-group, .tb-group { padding-right: 0.2rem; margin-right: 0.1rem; }
}

/* ---- text formatting inside posts and the editor ---- */
.fa-center, .forum-wysiwyg div[data-align="center"] { text-align: center; }
.fa-right, .forum-wysiwyg div[data-align="right"] { text-align: right; }
.fa-justify, .forum-wysiwyg div[data-align="justify"] { text-align: justify; }
.fa-indent { margin-left: 2rem; }
.forum-wysiwyg div[data-indent="1"] { margin-left: 2rem; }
.forum-wysiwyg div[data-indent="2"] { margin-left: 4rem; }
.forum-wysiwyg div[data-indent="3"] { margin-left: 6rem; }
.forum-wysiwyg div[data-indent="4"] { margin-left: 8rem; }
.forum-wysiwyg div[data-indent="5"] { margin-left: 10rem; }
.forum-table, .fe-table { border-collapse: collapse; margin: 0.4rem 0; max-width: 100%; }
.forum-table td, .forum-table th, .fe-table td { border: 1px solid var(--line); padding: 0.35rem 0.6rem; vertical-align: top; min-width: 2.5rem; }
.forum-icode, .fe-icode { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.25rem; }
.forum-ispoiler { background: var(--ink); border-radius: 3px; cursor: pointer; padding: 0 0.15rem; }
.forum-ispoiler:not(.is-revealed), .forum-ispoiler:not(.is-revealed) * { color: transparent !important; user-select: none; }
.forum-ispoiler.is-revealed { background: var(--bg-soft); }
.fe-ispoiler { background: var(--bg-soft); border: 1px dashed var(--ink-soft); border-radius: 4px; padding: 0 0.2rem; }

.tb-group { padding-right: 0.2rem; margin-right: 0.05rem; }
.forum-toolbar .tb-btn { min-width: 1.85rem; padding: 0 0.25rem; }
.forum-toolbar #forum-preview-btn { height: 2rem; white-space: nowrap; }

/* Phones: let toolbar icons fill each row instead of wrapping whole groups */
@media (max-width: 640px) {
  .forum-toolbar .tb-group { display: contents; }
}

.forum-toolbar .forum-menu button.on { background: var(--accent-soft); font-weight: 700; }
.forum-toolbar .forum-swatches button.on { outline: 2px solid var(--accent); outline-offset: 1px; }


/* Prefixes page: sale-price candles, one per prefix (see _prefix_candles.html) */
.prefix-candles { margin: 0.5rem 0 1rem; }
.pc-chart { overflow-x: auto; }
.sales-chart .axis-label.dim { opacity: 0.4; }
.pc-currencies { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.pc-currencies[hidden] { display: none; }
.pc-cur {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.82rem;
  cursor: pointer;
}
.pc-cur { display: inline-flex; align-items: center; gap: 0.4rem; }
.pc-cur::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pc-col, var(--ink-soft)); opacity: 0.35; }
.pc-cur.is-on { border-color: var(--pc-col, var(--ink)); box-shadow: inset 0 0 0 1px var(--pc-col, var(--ink)); font-weight: 600; }
.pc-cur.is-on::before { opacity: 1; }
.pc-key-filled, .pc-key-hollow { color: var(--ink-soft); }
.pc-key-hollow::after { background: var(--bg); border: 2px solid currentColor; box-sizing: border-box; }
.pc-legend { margin: 0.6rem 0 0; }
.sales-chart a.candle-group { cursor: pointer; }
.sales-chart .pc-divider { stroke: var(--line); stroke-width: 1; opacity: 0.55; }

.forum-modrow a.forum-modbtn { display: inline-block; text-decoration: none; }
.forum-mod-edited { font-weight: 600; }