/* Rooted Relics Estate Co. — palette sampled from the brand artwork (README.md) */
:root {
  --blue: #285088;
  --brown: #3b2a18;
  --olive: #626238;
  --cream: #f5ece1;
  --brass: #b08d2f;
  --ink: #201a12;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.6;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid rgba(59, 42, 24, 0.15);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brown);
  text-decoration: none;
}

.brand-mark {
  display: block;
  border-radius: 50%;
}

.brand-estates {
  color: var(--blue);
}

.site-header nav a {
  margin-left: 1.5rem;
  color: var(--brown);
  text-decoration: none;
  font-size: 0.95rem;
}

.hero {
  max-width: 720px;
  margin: 4rem auto;
  padding: 0 1.5rem;
  text-align: center;
}

.sale-countdown {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid rgba(59, 42, 24, 0.2);
  border-radius: 10px;
  background: #fff;
}

.sale-countdown-label {
  margin: 0 0 0.4rem;
  font-family: sans-serif;
  font-size: 0.9rem;
  color: var(--olive);
}

.sale-countdown-label a {
  color: var(--blue);
}

.sale-countdown-clock {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
}

.sale-countdown-empty {
  color: var(--olive);
  text-align: center;
}

.hero-banner {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto 2rem;
  border-radius: 10px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--olive);
  font-family: sans-serif;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: 2.4rem;
  color: var(--brown);
  margin: 0 0 1rem;
}

.hero-sub {
  color: var(--ink);
  opacity: 0.85;
  max-width: 42rem;
  margin: 0 auto 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
}

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

.btn-secondary {
  background: transparent;
  color: var(--brown);
  border: 1.5px solid var(--brass);
}

.services {
  max-width: 720px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  text-align: center;
}

.service-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 0;
}

.service-list a {
  display: block;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(98, 98, 56, 0.35);
  border-radius: 6px;
  color: var(--olive);
  text-decoration: none;
  font-family: sans-serif;
  font-size: 0.9rem;
}

.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--brown);
  font-size: 0.85rem;
}

.footer-mark {
  display: block;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  opacity: 0.9;
}

.tagline {
  font-style: italic;
}

/* Public sales listing + detail */
.sales-list-page,
.sale-detail-page {
  max-width: 960px;
  margin: 2.5rem auto;
  padding: 0 1.5rem 3rem;
}

.sale-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.sale-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid rgba(59, 42, 24, 0.2);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}

.sale-card h2 {
  margin: 0 0 0.4rem;
  color: var(--brown);
  font-size: 1.15rem;
}

.sale-card-area {
  color: var(--olive);
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
}

.sale-card-dates {
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.sale-card-categories {
  font-size: 0.8rem;
  color: var(--olive);
  margin: 0;
}

.no-sales,
.no-items {
  color: var(--olive);
}

.sale-area {
  color: var(--olive);
  margin-top: -0.5rem;
}

.sale-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 1.5rem 0;
}

.sale-facts dt {
  font-weight: 600;
  color: var(--brown);
}

.sale-facts dd {
  margin: 0;
}

.sale-rules {
  white-space: pre-wrap;
}

.item-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0;
}

.item-sort-row {
  font-size: 0.9rem;
  color: var(--olive);
}

.item-sort-row a {
  color: var(--olive);
  text-decoration: none;
}

.item-sort-row a.active {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
}

.item-gallery-heading {
  margin: 1.5rem 0 0.75rem;
  color: var(--brown);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: sans-serif;
}

.item-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.gallery-item {
  border: 1px solid rgba(59, 42, 24, 0.15);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.gallery-item img,
.gallery-item-noimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.gallery-item-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 42, 24, 0.06);
  color: var(--olive);
  font-size: 0.8rem;
}

.gallery-item-name,
.gallery-item-category,
.gallery-item-price {
  margin: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

.gallery-item-category {
  color: var(--olive);
  font-size: 0.75rem;
}

.gallery-item-price {
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 0.6rem;
}

.gallery-item-sold {
  font-weight: 600;
  color: var(--olive);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}

.past-sales-link {
  text-align: center;
  margin-top: 1.5rem;
}

.process-page {
  max-width: 720px;
  margin: 2.5rem auto;
  padding: 0 1.5rem 3rem;
  text-align: center;
}

.process-intro {
  color: var(--olive);
  font-size: 1.1rem;
  max-width: 42rem;
  margin: 0 auto 2.5rem;
}

.process-stages {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.process-stage {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.process-stage-num {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: sans-serif;
}

.process-stage h2 {
  margin: 0 0 0.3rem;
  color: var(--brown);
  font-size: 1.15rem;
}

.process-stage p {
  margin: 0;
  color: var(--ink);
}

.process-stage a {
  color: var(--blue);
}

.process-cta {
  margin-top: 1rem;
}

/* Articles */
.article-page {
  max-width: 680px;
  margin: 2.5rem auto;
  padding: 0 1.5rem 3rem;
  color: var(--ink);
  line-height: 1.6;
}

.article-page h1 {
  margin-bottom: 1.5rem;
}

.article-page h2 {
  margin-top: 2rem;
  color: var(--brown);
}

.article-page ul {
  padding-left: 1.25rem;
}

.article-page li {
  margin-bottom: 0.6rem;
}

.article-cta {
  margin-top: 2rem;
  text-align: center;
}

/* Auth */
.auth-page,
.capture-page,
.research-page {
  max-width: 560px;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
  font-family: sans-serif;
}

.auth-form,
.capture-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.auth-form label,
.capture-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--brown);
}

.auth-form input,
.capture-form input,
.capture-form textarea,
.capture-form select {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(59, 42, 24, 0.3);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

.tag-field input {
  font-size: 1.4rem;
  font-weight: 700;
}

.checkbox-field {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem !important;
}

.form-error {
  color: #a33;
  font-weight: 600;
}

.btn-large {
  padding: 1rem;
  font-size: 1.05rem;
}

.scan-video {
  width: 100%;
  border-radius: 8px;
  background: #000;
}

.photo-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.photo-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(59, 42, 24, 0.2);
}

.capture-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.capture-dashboard-link {
  margin-bottom: 1rem;
}

.capture-dashboard-link a {
  color: var(--blue);
  font-size: 0.9rem;
  text-decoration: none;
}

.sync-status {
  font-size: 0.85rem;
  color: var(--olive);
}

.research-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.research-table th,
.research-table td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid rgba(59, 42, 24, 0.15);
}

/* Admin */
.admin-page {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1.25rem;
  font-family: sans-serif;
}

.admin-nav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(59, 42, 24, 0.15);
  font-size: 0.9rem;
}

.admin-nav a {
  color: var(--blue);
  text-decoration: none;
}

.admin-nav-logout {
  margin-left: auto;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--olive);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(59, 42, 24, 0.15);
}

.admin-table a {
  color: var(--blue);
  text-decoration: none;
}

.status-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-draft {
  background: rgba(98, 98, 56, 0.15);
  color: var(--olive);
}

.status-published {
  background: rgba(40, 80, 136, 0.15);
  color: var(--blue);
}

.status-closed {
  background: rgba(59, 42, 24, 0.15);
  color: var(--brown);
}

.status-new {
  background: rgba(40, 80, 136, 0.15);
  color: var(--blue);
}

.status-contacted,
.status-consultation_scheduled {
  background: rgba(98, 98, 56, 0.15);
  color: var(--olive);
}

.status-converted {
  background: rgba(46, 107, 61, 0.15);
  color: #2e6b3d;
}

.status-lost {
  background: rgba(59, 42, 24, 0.15);
  color: var(--brown);
}

.lead-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.lead-detail-table {
  max-width: 640px;
  margin-bottom: 1.5rem;
}

.lead-detail-table th {
  text-align: left;
  width: 200px;
  color: var(--brown);
}

.lead-convert-form {
  margin-top: 0.5rem;
}

.crm-unsynced {
  color: var(--olive);
  font-size: 0.8rem;
  opacity: 0.7;
}

.btn-small {
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: sans-serif;
  background: var(--blue);
  color: #fff;
  border: none;
  cursor: pointer;
}

.subscribe-block {
  margin-top: 3rem;
  padding: 1.75rem;
  border: 1px solid rgba(59, 42, 24, 0.2);
  border-radius: 10px;
  background: #fff;
  text-align: center;
}

.subscribe-block h2 {
  margin: 0 0 0.4rem;
  color: var(--brown);
}

.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1rem;
}

.subscribe-form input[type="email"] {
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(59, 42, 24, 0.3);
  border-radius: 6px;
  font-size: 1rem;
  min-width: 260px;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 560px;
  margin-bottom: 2rem;
}

.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--brown);
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(59, 42, 24, 0.3);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

.payment-methods {
  border: 1px solid rgba(59, 42, 24, 0.2);
  border-radius: 6px;
  padding: 0.75rem;
}

.payment-methods legend {
  font-size: 0.8rem;
  color: var(--olive);
  padding: 0 0.4rem;
}

.admin-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.admin-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.btn-danger {
  background: transparent;
  color: #a33;
  border: 1.5px solid #a33;
}

/* Consultation / seller intake */
.consultation-page {
  max-width: 640px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

.consultation-sub {
  color: var(--ink);
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.consultation-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: sans-serif;
}

.consultation-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--brown);
}

.consultation-form input,
.consultation-form select,
.consultation-form textarea {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(59, 42, 24, 0.3);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

.consultation-form textarea {
  resize: vertical;
  max-height: 12rem;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--olive);
  margin-top: -0.5rem;
  line-height: 1.5;
}

.field-hint a {
  color: var(--blue);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: normal;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem 1rem;
  border: 1px solid rgba(59, 42, 24, 0.2);
  border-radius: 6px;
  padding: 0.85rem;
  margin: 0;
}

.permission-grid legend {
  padding: 0 0.4rem;
  color: var(--brown);
  font-weight: 600;
}

.role-form {
  max-width: 720px;
}

.report-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.report-filter-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}

.report-total {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--brown);
  margin: 0 0 1.25rem;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.stat-card {
  padding: 1.25rem;
  border: 1px solid rgba(59, 42, 24, 0.2);
  border-radius: 10px;
  background: #fff;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brown);
  margin: 0;
}

.stat-label {
  color: var(--olive);
  font-size: 0.85rem;
  margin: 0.2rem 0 0.6rem;
}

.stat-card a {
  font-size: 0.85rem;
  color: var(--blue);
  text-decoration: none;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* POS */
.pos-page {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1.25rem;
  font-family: sans-serif;
}

.pos-page select {
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(59, 42, 24, 0.3);
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  margin: 0.4rem 0 1rem;
}

.pos-scan-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

.pos-scan-row .tag-field {
  flex: 1;
}

.pos-total {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brown);
  margin: 1rem 0;
}

.pos-tender-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cart-price-input {
  width: 5.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid rgba(59, 42, 24, 0.3);
  border-radius: 4px;
}

.banner {
  padding: 0.8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.banner-ok {
  background: rgba(52, 211, 153, 0.15);
  color: #0d7a4f;
}

.banner-error {
  background: rgba(220, 38, 38, 0.1);
  color: #a33;
}

.tx-status-completed {
  background: rgba(40, 80, 136, 0.15);
  color: var(--blue);
}

.tx-status-pending {
  background: rgba(98, 98, 56, 0.15);
  color: var(--olive);
}

.tx-status-failed,
.tx-status-voided {
  background: rgba(220, 38, 38, 0.1);
  color: #a33;
}

.sandbox-banner {
  background: #b91c1c;
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ==========================================================================
   ADMIN — phone-first staff UI.
   Everything below this marker is admin-only and scoped under .admin-body so
   it cannot reach the public site. Older .admin-page / .admin-nav rules
   further up are superseded by this block and are no longer referenced by
   any template.
   Spec:      docs/superpowers/specs/2026-09-01-admin-ui-phone-first-design.md
   Reference: docs/design/admin-prototype/admin-mockup.html
   ========================================================================== */

:root {
  --surface: #ffffff;
  --bg: #f7f8fa;
  --border: #e4e7ec;
  --text: #1a1d23;
  --muted: #667085;
  --faint: #98a2b3;
  --blue-dark: #1d3c68;
  --blue-soft: #eaf0f9;
  --ok: #067647;
  --ok-bg: #ecfdf3;
  --warn: #b54708;
  --warn-bg: #fffaeb;
  --info: #175cd3;
  --info-bg: #eff8ff;
  --dim-bg: #f2f4f7;
  --radius: 10px;
  --radius-sm: 7px;
  --tap: 44px;
  --shell-h: 56px;
}

body.admin-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- shell -------------------------------------------------------------- */
.admin-body .shell-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Installed to a home screen this runs standalone, where content renders
     under the notch. env() is 0 in a normal browser tab. */
  height: calc(var(--shell-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(.5rem, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.admin-body .icon-btn {
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  flex: none;
}
.admin-body .icon-btn:hover { background: var(--dim-bg); }
.admin-body .icon-btn svg { width: 22px; height: 22px; }

.admin-body .shell-title {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- drawer ------------------------------------------------------------- */
.admin-body .scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 45;
}
.admin-body .scrim.open { opacity: 1; pointer-events: auto; }
.admin-body .scrim[hidden] { display: none; }

.admin-body .drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  max-width: 84vw;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform .2s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.admin-body .drawer.open { transform: translateX(0); }

.admin-body .drawer-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .875rem 1rem;
  padding-top: calc(.875rem + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border);
}
.admin-body .drawer-mark {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--brown);
  color: var(--brass);
  display: grid; place-items: center;
  font-weight: 700; font-size: .8rem;
  flex: none;
}
.admin-body .drawer-brand { font-weight: 650; font-size: .9375rem; line-height: 1.2; }
.admin-body .drawer-brand small {
  display: block; color: var(--muted); font-weight: 400; font-size: .75rem;
}

.admin-body .nav-group { padding: .625rem 0 .25rem; }
.admin-body .nav-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--faint);
  font-weight: 700;
  padding: 0 1rem .3rem;
}
.admin-body .nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: var(--tap);
  padding: 0 1rem;
  color: var(--text);
  text-decoration: none;
  font-size: .9375rem;
  border-left: 3px solid transparent;
}
.admin-body .nav-link:hover { background: var(--dim-bg); }
.admin-body .nav-link.active {
  background: var(--blue-soft);
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}
.admin-body .nav-link svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.admin-body .nav-link-button {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-body .drawer-foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: .5rem 0;
}

/* ---- content ------------------------------------------------------------ */
.admin-body .content { padding: 1rem .875rem 3rem; }
.admin-body .content > section { max-width: none; margin: 0; padding: 0; }
.admin-body .content > section > h1 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.admin-body .content > section > h2 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 .75rem;
}

/* ---- cards & stats ------------------------------------------------------ */
.admin-body .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .875rem;
}

.admin-body .stats,
.admin-body .stat-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}
.admin-body .stat,
.admin-body .stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  text-decoration: none;
  color: inherit;
}
.admin-body .stat-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  display: grid; place-items: center;
  flex: none;
  background: var(--blue-soft);
  color: var(--blue);
}
.admin-body .stat-icon svg { width: 20px; height: 20px; }
.admin-body .stat-icon.brass { background: #fdf6e3; color: var(--brass); }
.admin-body .stat-icon.ok { background: var(--ok-bg); color: var(--ok); }
.admin-body .stat-val,
.admin-body .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
}
.admin-body .stat-lbl,
.admin-body .stat-label {
  display: block;
  font-size: .8125rem;
  color: var(--muted);
  margin: 0;
}

.admin-body .section-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--faint);
  font-weight: 700;
  margin: 1.25rem 0 .5rem;
}

/* ---- tables ------------------------------------------------------------- */
.admin-body .table-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: .875rem;
}
.admin-body .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.admin-body .table-wrap table,
.admin-body .admin-table,
.admin-body .research-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: .875rem;
  margin: 0;
}
.admin-body .table-wrap th,
.admin-body .admin-table th,
.admin-body .research-table th {
  position: sticky;
  top: 0;
  background: #fbfcfd;
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-body .table-wrap td,
.admin-body .admin-table td,
.admin-body .research-table td {
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-body .table-wrap tbody tr:last-child td { border-bottom: 0; }

.admin-body th.sticky-col,
.admin-body td.sticky-col {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
  box-shadow: 1px 0 0 var(--border);
  font-weight: 600;
}
.admin-body thead th.sticky-col { background: #fbfcfd; z-index: 3; }

.admin-body .table-fade {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95));
}
.admin-body .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.admin-body .cell-link,
.admin-body .table-wrap a,
.admin-body .admin-table a { color: var(--blue); text-decoration: none; font-weight: 600; }

/* ---- badges (existing .status-* classes, restyled) ---------------------- */
.admin-body .status-badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 650;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.admin-body .status-available,
.admin-body .status-published,
.admin-body .status-converted { background: var(--ok-bg); color: var(--ok); }
.admin-body .status-sold,
.admin-body .status-new { background: var(--info-bg); color: var(--info); }
.admin-body .status-held,
.admin-body .status-contacted,
.admin-body .status-consultation_scheduled { background: var(--warn-bg); color: var(--warn); }
.admin-body .status-draft,
.admin-body .status-pulled,
.admin-body .status-donated,
.admin-body .status-closed,
.admin-body .status-lost { background: var(--dim-bg); color: var(--muted); }

/* ---- buttons ------------------------------------------------------------ */
.admin-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--tap);
  padding: 0 1rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  font-family: inherit;
}
.admin-body .btn svg { width: 17px; height: 17px; }
.admin-body .btn-primary { background: var(--blue); color: #fff; }
.admin-body .btn-primary:hover { background: var(--blue-dark); }
.admin-body .btn-secondary {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
.admin-body .btn-secondary:hover { background: var(--dim-bg); }
.admin-body .btn-danger { background: var(--surface); color: #b42318; border-color: #fda29b; }
.admin-body .btn-block { width: 100%; }
.admin-body .link-button {
  background: none; border: 0; padding: 0;
  color: var(--blue); text-decoration: underline;
  cursor: pointer; font: inherit;
  min-height: 36px;
}

/* ---- forms -------------------------------------------------------------- */
.admin-body .field { margin-bottom: .875rem; }
.admin-body .field label,
.admin-body .admin-form label,
.admin-body .capture-form label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: .3rem;
}
.admin-body .field-hint,
.admin-body .hint { font-size: .75rem; color: var(--muted); margin-top: .25rem; }

.admin-body input[type="text"],
.admin-body input[type="email"],
.admin-body input[type="password"],
.admin-body input[type="number"],
.admin-body input[type="date"],
.admin-body input[type="datetime-local"],
.admin-body select,
.admin-body textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .55rem .7rem;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-body textarea { min-height: 88px; resize: vertical; }
.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(40, 80, 136, .14);
}
.admin-body input[type="checkbox"] { width: auto; min-height: 0; }
.admin-body .checkbox-field,
.admin-body .checkbox-label {
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--tap);
  font-size: .9375rem; font-weight: 400;
}
.admin-body .row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

.admin-body .sticky-submit {
  position: sticky;
  bottom: 0;
  margin: 1rem -0.875rem 0;
  padding: .75rem .875rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}

.admin-body .photo-thumbs,
.admin-body .photo-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.admin-body .photo-thumb { border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* ---- channels ----------------------------------------------------------- */
.admin-body .channel {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--border);
}
.admin-body .channel:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-body .channel-logo {
  width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center; flex: none;
  font-weight: 800; font-size: .8rem; color: #fff;
}
.admin-body .ch-ebay { background: #0064d2; }
.admin-body .ch-fb, .admin-body .ch-auc { background: #cfd4dc; }
.admin-body .channel-name { font-weight: 600; font-size: .9375rem; }
.admin-body .channel-state { font-size: .8125rem; color: var(--muted); }
.admin-body .channel-action { margin-left: auto; }
.admin-body .soon {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--faint);
  border: 1px dashed var(--border); border-radius: 999px;
  padding: .15rem .5rem;
}

/* ==========================================================================
   TABLET >= 768px — the drawer becomes a permanent sidebar
   ========================================================================== */
@media (min-width: 768px) {
  .admin-body .drawer {
    transform: none;
    position: fixed;
    top: 0; bottom: 0;
    width: 224px;
    max-width: none;
  }
  .admin-body .scrim { display: none; }
  .admin-body .app { margin-left: 224px; }
  .admin-body .menu-btn { display: none; }
  .admin-body .shell-bar { padding-left: 1.25rem; }

  .admin-body .content { padding: 1.25rem 1.5rem 3rem; }
  .admin-body .content > section > h1 { font-size: 1.5rem; }
  .admin-body .row-3 { gap: .75rem; }

  /* auto-fit, not repeat(3): the Overview tiles are permission-gated, so
     one or two may render and should still fill the row evenly. */
  .admin-body .stats,
  .admin-body .stat-cards {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: .75rem;
  }
  .admin-body .stat,
  .admin-body .stat-card { padding: .75rem .8rem; gap: .65rem; }
  .admin-body .stat-icon { width: 34px; height: 34px; }
  .admin-body .stat-icon svg { width: 17px; height: 17px; }
  .admin-body .stat-val,
  .admin-body .stat-value { font-size: 1.25rem; }
  .admin-body .stat-lbl,
  .admin-body .stat-label { font-size: .75rem; line-height: 1.3; }

  .admin-body .sticky-submit {
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding-left: 1.5rem; padding-right: 1.5rem;
  }
}

/* ==========================================================================
   DESKTOP >= 1024px
   ========================================================================== */
@media (min-width: 1024px) {
  .admin-body .drawer { width: 248px; }
  .admin-body .app { margin-left: 248px; }
  .admin-body .shell-bar { padding-left: 1.5rem; }
  .admin-body .content { max-width: 1040px; margin: 0 auto; padding: 1.75rem 2rem 4rem; }
  .admin-body .content > section > h1 { font-size: 1.625rem; }

  .admin-body .stats,
  .admin-body .stat-cards { gap: 1rem; }
  .admin-body .stat,
  .admin-body .stat-card { padding: .875rem 1rem; gap: .875rem; }
  .admin-body .stat-icon { width: 40px; height: 40px; }
  .admin-body .stat-icon svg { width: 20px; height: 20px; }
  .admin-body .stat-val,
  .admin-body .stat-value { font-size: 1.5rem; }
  .admin-body .stat-lbl,
  .admin-body .stat-label { font-size: .8125rem; }

  .admin-body .sticky-submit {
    position: static;
    background: none;
    border-top: 0;
    margin: 1rem 0 0;
    padding: 0;
  }
  .admin-body .sticky-submit .btn { width: auto; min-width: 200px; }
}


/* Sandbox banner sits inside .app, so give it admin styling rather than the
   public site's. */
.admin-body .sandbox-banner {
  margin: 0;
  border-radius: 0;
}


/* Standalone label above a .row-3 group (e.g. shipping dimensions). */
.admin-body .dims-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: .3rem;
}
.admin-body .row-3 input { width: 100%; }

/* Long forms group into cards; keep the legacy wrappers looking like one. */
.admin-body .admin-form,
.admin-body .capture-form,
.admin-body .admin-subsection {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .875rem;
}
.admin-body .admin-subsection > h2:first-child { margin-top: 0; }


/* Secondary wording inside a field label, e.g. eBay's own alternate name. */
.admin-body .label-alt { color: var(--muted); font-weight: 400; }
.admin-body .field-hint strong { color: var(--text); }

/* ========================= END ADMIN ====================================== */

/* --- Status lights (eBay settings, and any future integration page) ---
   Red / amber / green at a glance rather than a sentence of prose. The
   light is decorative: each row also carries its state in text and in a
   visually-hidden label, so this reads correctly without colour -- colour
   alone would fail anyone colour-blind, and red/green is the worst pair
   for exactly that. */
.admin-body .status-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.admin-body .status-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .25rem .625rem;
  padding: .625rem .75rem;
  border: 1px solid var(--line, #d9d4cc);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.admin-body .light {
  width: .7rem; height: .7rem; border-radius: 50%;
  align-self: center; flex: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .04);
}
.admin-body .light-ok   { background: #1a7f4b; }
.admin-body .light-warn { background: #b26b00; }
.admin-body .light-bad  { background: #b3261e; }
.admin-body .status-row-label { font-weight: 600; }
.admin-body .status-row-detail {
  grid-column: 2; font-size: .875rem; color: var(--muted, #6b6560);
}
@media (min-width: 640px) {
  .admin-body .status-row { grid-template-columns: auto max-content minmax(0, 1fr); }
  .admin-body .status-row-detail { grid-column: auto; }
}

/* Screen-reader-only text. Used by .status-row so each light's meaning is
   available without relying on colour. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Button + explanation on one line where there's room (the Test
   connection control), stacked on narrow screens. */
.admin-body .admin-form-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin: 0 0 1.25rem;
}
.admin-body .admin-form-inline .field-hint { margin: 0; }

/* --- Signed-out pages (sign in, forced password change) ---
   The admin palette and controls without the admin shell, so signing in
   doesn't look like a different product from what's behind it. A single
   centred card rather than the drawer + shell-bar layout: there is no
   navigation to offer until the user is signed in. */
.admin-body.auth-body { display: flex; flex-direction: column; min-height: 100dvh; }

.admin-body .auth-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Honour the notch on an installed PWA -- this layout has no shell-bar
     of its own to absorb it. */
  padding: max(1.25rem, env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px))
           max(1.25rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
}

.admin-body .auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #d9d4cc);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
}

.admin-body .auth-brand {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: 1.25rem;
}
.admin-body .auth-mark {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: 9px;
  background: #285088; color: #fff;
  font-weight: 700; font-size: .8125rem; letter-spacing: .02em;
}
.admin-body .auth-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.admin-body .auth-brand-name { font-weight: 650; }
.admin-body .auth-brand-sub { font-size: .8125rem; color: var(--muted, #6b6560); }

/* The heading is the card's own title; the brand block above already
   establishes context, so it doesn't need page-title weight. */
.admin-body .auth-card h1 { font-size: 1.125rem; margin: 0 0 1rem; }

.admin-body .auth-form { display: grid; gap: .875rem; }
.admin-body .auth-form label { display: grid; gap: .3125rem; font-weight: 600; }
.admin-body .auth-form input { width: 100%; }
.admin-body .auth-form .btn { width: 100%; justify-content: center; margin-top: .25rem; }

/* Full-width at the top of the card, matching the banner in the shell. */
.admin-body.auth-body .sandbox-banner { border-radius: 0; }

/* Explanatory copy above a form in the auth card (e.g. why a password
   change is being forced) -- secondary to the fields it introduces. */
.admin-body .auth-page > p { margin: 0 0 1rem; font-size: .875rem; color: var(--muted, #6b6560); }
.admin-body .auth-page > p.form-error { color: inherit; font-size: inherit; }

/* --- Page header with a primary action ---
   Keeps the main action of a list page beside its heading instead of
   after the table, so it stays reachable no matter how long the list
   grows. Stacks on narrow screens, where a full-width button is the
   easier tap target anyway. */
.admin-body .page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .75rem;
  margin-bottom: 1rem;
}
.admin-body .page-head > div { min-width: 0; }
.admin-body .page-head h1 { margin: 0 0 .25rem; }
.admin-body .page-head .field-hint { margin: 0; }
.admin-body .page-head-action { flex: none; }
@media (max-width: 519px) {
  .admin-body .page-head { flex-direction: column; align-items: stretch; }
  .admin-body .page-head-action { width: 100%; justify-content: center; }
}

/* Empty list: say what the page is for and repeat its action, rather
   than rendering a header row over a single "nothing here" cell. */
.admin-body .empty-state {
  border: 1px dashed var(--line, #d9d4cc);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  background: var(--surface, #fff);
}
.admin-body .empty-state > p:first-child { font-weight: 600; margin-top: 0; }
.admin-body .empty-state .field-hint { max-width: 34rem; margin: .5rem auto 1rem; }

/* Neutral badge for counts and "not set" states, alongside the existing
   ok/bad status colours. */
.admin-body .status-badge.status-muted {
  background: var(--line, #e8e4de);
  color: var(--muted, #6b6560);
}

/* Cost-basis fields (acquisition cost/source/date), grouped so it reads
   as one unit distinct from the item's public-facing fields above it. */
.admin-body .cost-basis-fields {
  border: 1px solid var(--line, #d9d4cc);
  border-radius: 10px;
  padding: .875rem 1rem 1rem;
  margin: 0 0 1rem;
  display: grid;
  gap: .625rem;
}
.admin-body .cost-basis-fields legend {
  padding: 0 .375rem;
  font-weight: 600;
  font-size: .875rem;
  color: var(--muted, #6b6560);
}

/* Raw JSON payload on a log entry, collapsed behind <details> so the
   table stays scannable; monospace and wrapped so a long value doesn't
   force horizontal scroll on its own. */
.admin-body .log-detail {
  font-size: .8125rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--line, #f3f1ed);
  border-radius: 6px;
  padding: .5rem .625rem;
  margin: .375rem 0 0;
  max-width: 32rem;
}

/* Recovery codes shown once at 2FA enrollment -- monospace, evenly
   spaced, easy to read off a screen while copying to a password manager
   or printing. */
.recovery-codes {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .5rem;
}
.recovery-codes code {
  display: block;
  padding: .5rem .625rem;
  background: var(--line, #f3f1ed);
  border-radius: 6px;
  font-size: .9375rem;
  text-align: center;
}

/* Unmatched eBay listings review: a two-action row (link vs. create) is
   inherently wider than the House Stock list's plain columns, but it
   shouldn't be wide enough to force page-level horizontal scroll. Capping
   the title and the link input keeps the row inside table-scroll's own
   overflow instead of bursting the whole page sideways. */
.admin-body .unmatched-listings-table .listing-title {
  display: inline-block;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.admin-body .unmatched-listings-table .item-ref-input {
  width: 7rem;
}

/* Service pages: a service that is announced but not yet open (e.g. Estate
   Auctions, pending the bidding platform). Listed honestly rather than
   hidden -- an absent page reads as "we don't do this", which is worse than
   "this is coming". */
.badge-soon {
  background: rgba(98, 98, 56, 0.12);
  color: var(--olive);
  border: 1px solid rgba(98, 98, 56, 0.35);
  vertical-align: middle;
  margin-left: 0.6rem;
}

.service-points {
  margin: 1.5rem 0;
  padding-left: 1.2rem;
  line-height: 1.7;
}

.coming-soon-note {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(98, 98, 56, 0.3);
  border-left: 4px solid var(--olive);
  border-radius: 6px;
  background: rgba(98, 98, 56, 0.05);
}

.coming-soon-note p {
  margin-top: 0;
}

.soon-inline {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* A refusal must not look like progress. The capture status line reports
   both ("Saved. 3 queued" / "Pick a haul first"), and rendering them
   identically is why a save that did nothing read as a broken button. */
.sync-status-error {
  color: #8a2b2b;
  font-weight: 600;
}

/* Research queue: each item opens in place with its fields and one-tap
   comps lookups, rather than being a read-only row with a single button. */
.research-input {
  width: 100%;
  min-width: 7rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(98, 98, 56, 0.35);
  border-radius: 4px;
  font: inherit;
}

.research-value {
  max-width: 7rem;
}

.research-field {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.research-lookups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.research-lookup {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  text-decoration: none;
}

.research-actions {
  min-width: 13rem;
}

.research-detail-row td {
  padding-top: 0;
  border-top: 0;
}

.research-error {
  color: #8a2b2b;
  font-weight: 600;
}

.research-group + .research-group {
  border-top: 1px solid rgba(98, 98, 56, 0.2);
}