/* ==========================================================================
   publications.css
   Scoped publication components — sits on top of any theme.
   All colours come from CSS variables defined in the active theme file.
   Swap the theme file; this file needs zero edits.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TOKENS

   Text polarity is taken from the theme (`--bs-body-color` / `--bs-text-muted`
   are defined by all four and already flip light↔dark). Surfaces have to flip
   with it, so they are restated per theme below — a dark card carrying the
   light theme's dark ink is unreadable.

   Two rules keep this working:

   1. Never use `--bs-secondary-color`. No theme defines it, so it resolves to
      Bootstrap's near-black default and the text vanishes.

   2. Only ever declare *raw* values here (channels and alphas), never one
      token derived from another. A `var()` inside a custom property is
      substituted where it is DECLARED, so `--x: rgb(var(--accent))` written at
      :root freezes :root's accent and ignores the per-theme override further
      down. Rules therefore compose the raw channels inline —
      `rgba(var(--pub-accent-rgb), var(--pub-line-a))` — which resolves on the
      element and picks up the active theme.
   -------------------------------------------------------------------------- */

:root {
  /* Accent + the raw channels used for tints */
  --pub-accent-rgb:   245, 215, 110;
  --pub-on-accent:    #201603;

  --pub-shade-rgb:    11, 26, 33;   /* card / panel base */
  --pub-shade-a:      0.82;         /* surface opacity  */
  --pub-panel-a:      0.15;         /* panel tint       */
  --pub-line-a:       0.22;         /* hairline tint    */
  --pub-tint-rgb:     253, 248, 242;
  --pub-panel-rgb:    22, 91, 74;
  --pub-prose-rgb:    178, 34, 34;
  --pub-poetry-rgb:   74, 144, 217;
  --pub-dark:         var(--bs-body-bg, #0d1117);

  /* Text — follows the active theme */
  --pub-body-color:   var(--bs-body-color, #f0ece4);
  --pub-muted:        var(--bs-text-muted, #bcc4cf);

  --pub-heading-font: var(--bs-heading-font-family,  'Playfair Display', Georgia, serif);
  --pub-body-font:    var(--bs-body-font-family,     'IBM Plex Sans', system-ui, sans-serif);

  /* Misc */
  --pub-shadow-rgb:   0, 0, 0;
  --pub-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --pub-radius:       14px;
  --pub-radius-sm:    8px;

  /* Poetry / Prose accent colours */
  --pub-poetry-color: #7ab8f5;
  --pub-prose-color:  #e07070;
}

/* ── Default theme is LIGHT: invert the surfaces and darken the accents ──── */
body[data-theme="default"] {
  --pub-shade-a:      0.94;
  --pub-panel-a:      0.07;
  --pub-line-a:       0.26;
  --pub-shadow-rgb:   74, 48, 20;   /* warm, softer shadow for a light page */
  --pub-accent-rgb:   138, 90, 26;      /* bronze; gold is invisible on cream */
  --pub-on-accent:    #fff8ea;

  --pub-shade-rgb:    255, 253, 247;
  --pub-tint-rgb:     108, 72, 47;
  --pub-panel-rgb:    108, 72, 47;
  --pub-prose-rgb:    156, 61, 28;
  --pub-poetry-rgb:   29, 91, 150;

  --pub-poetry-color: #1d5b96;
  --pub-prose-color:  #9c3d1c;
}

body[data-theme="summer"] {
  --pub-accent-rgb:   245, 200, 66;
  --pub-on-accent:    #241100;
  --pub-shade-rgb:    30, 15, 2;
  --pub-tint-rgb:     253, 246, 227;
  --pub-panel-rgb:    74, 124, 63;
  --pub-prose-rgb:    212, 130, 10;
  --pub-poetry-rgb:   143, 211, 234;
  --pub-poetry-color: #8fd3ea;
  --pub-prose-color:  #ef9350;
}

body[data-theme="christmas"] {
  --pub-accent-rgb:   245, 215, 110;
  --pub-on-accent:    #201603;
  --pub-shade-rgb:    8, 22, 30;
  --pub-tint-rgb:     253, 248, 242;
  --pub-panel-rgb:    22, 91, 74;
  --pub-prose-rgb:    178, 34, 34;
  --pub-poetry-rgb:   155, 205, 245;
  --pub-poetry-color: #9bcdf5;
  --pub-prose-color:  #e58080;
}

body[data-theme="halloween"] {
  --pub-accent-rgb:   255, 143, 58;
  --pub-on-accent:    #1a0802;
  --pub-shade-rgb:    20, 14, 27;
  --pub-tint-rgb:     236, 226, 207;
  --pub-panel-rgb:    123, 69, 201;
  --pub-prose-rgb:    255, 117, 24;
  --pub-poetry-rgb:   185, 150, 242;
  --pub-poetry-color: #b996f2;
  --pub-prose-color:  #ff8f3a;
}


body[data-theme="monsoon"] {
  --pub-accent-rgb:   142, 207, 214;
  --pub-on-accent:    #06222a;
  --pub-shade-rgb:    15, 40, 48;
  --pub-tint-rgb:     227, 238, 241;
  --pub-panel-rgb:    92, 155, 127;
  --pub-prose-rgb:    201, 138, 75;
  --pub-poetry-rgb:   168, 216, 232;
  --pub-poetry-color: #a8d8e8;
  --pub-prose-color:  #d99a5e;
}


/* --------------------------------------------------------------------------
   1. PAGE HEADER  (my_publications + review_list)
   -------------------------------------------------------------------------- */
.pub-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(
    135deg,
    rgba(var(--pub-panel-rgb), 0.22) 0%,
    rgba(var(--pub-shade-rgb), 0.55) 100%
  );
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  box-shadow: 0 8px 28px rgba(var(--pub-shadow-rgb), 0.35);
  backdrop-filter: blur(6px);
}

.pub-page-header__title {
  font-family: var(--pub-heading-font);
  font-size: 1.75rem;
  font-weight: 700;
  color: rgb(var(--pub-accent-rgb));
  margin: 0 0 0.2rem;
  letter-spacing: 0.03em;
}

.pub-page-header__sub {
  color: var(--pub-muted);
  font-size: 0.9rem;
  margin: 0;
}

.pub-page-header__cta { align-self: center; }


/* --------------------------------------------------------------------------
   2. PUBLICATION CARDS  (list.html)
   -------------------------------------------------------------------------- */
.pub-card {
  background: rgba(var(--pub-shade-rgb), var(--pub-shade-a));
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(var(--pub-shadow-rgb), 0.4);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  transition:
    transform     0.28s var(--pub-ease),
    box-shadow    0.28s var(--pub-ease),
    border-color  0.28s var(--pub-ease);
}

.pub-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(var(--pub-shadow-rgb), 0.5);
  border-color: rgba(var(--pub-accent-rgb), 0.6);
}

/* ── Image area ─────────────────────────────────────────────────────────── */
.pub-card__image-link { display: block; }

.pub-card__image-wrap {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--pub-dark);
}

.pub-card__image {
  width: 100%;
  height: 100%;
  /* contain keeps the full image visible; dark bg fills the gaps */
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s var(--pub-ease);
}

.pub-card:hover .pub-card__image { transform: scale(1.04); }

/* Placeholder when no image */
.pub-card__no-image {
  height: 54px;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(var(--pub-panel-rgb), 0.14);
  border-bottom: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

/* ── Type badge ─────────────────────────────────────────────────────────── */
.pub-card__type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.pub-card__no-image .pub-card__type-badge {
  position: static;
}

.pub-card__type-badge--poetry {
  background: rgba(74, 144, 217, 0.78);
  color: #fff;
}
.pub-card__type-badge--prose {
  background: rgba(var(--pub-prose-rgb), 0.82);
  color: #fff;
}

/* ── Card body ──────────────────────────────────────────────────────────── */
.pub-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.35rem 1.35rem;
}

.pub-card__title {
  font-family: var(--pub-heading-font);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.pub-card__title-link {
  color: rgb(var(--pub-accent-rgb));
  text-decoration: none;
  transition: color 0.2s;
}

.pub-card__title-link:hover {
  color: var(--pub-body-color);
  text-decoration: none;
}

.pub-card__excerpt {
  font-size: 0.9rem;
  color: var(--pub-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1rem;
}

.pub-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

.pub-card__meta {
  font-size: 0.78rem;
  color: var(--pub-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}


/* --------------------------------------------------------------------------
   3. EMPTY STATE
   -------------------------------------------------------------------------- */
.pub-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(var(--pub-shade-rgb), 0.5);
  border: 1px dashed rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
}

.pub-empty-state--dashboard { padding: 3rem 2rem; }

.pub-empty-state--inline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.5rem 1.75rem;
  justify-content: flex-start;
  text-align: left;
  border-radius: 10px;
}

.pub-empty-state__icon {
  font-size: 2.5rem;
  color: rgba(var(--pub-accent-rgb), 0.35);
  display: block;
  margin-bottom: 0.75rem;
}

.pub-empty-state__icon--sm {
  font-size: 1.4rem;
  margin-bottom: 0;
}

.pub-empty-state__title {
  font-family: var(--pub-heading-font);
  font-size: 1.15rem;
  color: rgb(var(--pub-accent-rgb));
  margin-bottom: 0.4rem;
}

.pub-empty-state__text {
  color: var(--pub-muted);
  font-size: 0.9rem;
  margin: 0;
}


/* --------------------------------------------------------------------------
   4. PAGINATION  (list.html)
   -------------------------------------------------------------------------- */
.pub-pagination { margin-top: 2.5rem; }

.pub-pagination .page-link {
  background: transparent;
  border-color: rgba(var(--pub-accent-rgb), var(--pub-line-a));
  color: rgb(var(--pub-accent-rgb));
  border-radius: var(--pub-radius-sm) !important;
  min-width: 38px;
  text-align: center;
  transition: all 0.2s;
}

.pub-pagination .page-link:hover {
  background: rgba(var(--pub-accent-rgb), 0.1);
  border-color: rgb(var(--pub-accent-rgb));
}

.pub-pagination .page-item.active .page-link {
  background: rgb(var(--pub-prose-rgb));
  border-color: rgb(var(--pub-prose-rgb));
  color: #fff;
  box-shadow: 0 0 14px rgba(var(--pub-prose-rgb), 0.45);
}

.pub-pagination .page-item.disabled .page-link {
  opacity: 0.3;
  background: transparent;
}


/* --------------------------------------------------------------------------
   5. SIDEBAR CARDS  (list.html)
   -------------------------------------------------------------------------- */
.pub-sidebar-card {
  background: rgba(var(--pub-panel-rgb), var(--pub-panel-a));
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 6px 22px rgba(var(--pub-shadow-rgb), 0.28);
  backdrop-filter: blur(6px);
}

.pub-sidebar-card__heading {
  font-family: var(--pub-heading-font);
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--pub-accent-rgb));
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

.pub-filter-btn {
  border-radius: var(--pub-radius-sm) !important;
  text-align: left;
  transition: all 0.2s !important;
}

.pub-sidebar-divider {
  border-color: rgba(var(--pub-accent-rgb), var(--pub-line-a));
  margin: 0.25rem 0;
}


/* --------------------------------------------------------------------------
   6. DETAIL PAGE  (detail.html)
   -------------------------------------------------------------------------- */
.pub-detail-nav { display: flex; align-items: center; gap: 0.5rem; }

.pub-alert-draft {
  background: rgba(var(--pub-accent-rgb), 0.08);
  border: 1px solid rgba(var(--pub-accent-rgb), 0.35);
  border-left: 4px solid rgb(var(--pub-accent-rgb));
  color: rgb(var(--pub-accent-rgb));
  border-radius: var(--pub-radius-sm);
}

.pub-detail {
  background: rgba(var(--pub-shade-rgb), 0.65);
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  padding: 2rem 2.25rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(var(--pub-shadow-rgb), 0.45);
}

/* ── Hero image ─────────────────────────────────────────────────────────── */
/* Full-bleed figure that bleeds to card edges */
.pub-detail__figure {
  margin: -2rem -2.25rem 2rem;
  background: #000;           /* fills letterbox gaps for contain */
  border-radius: var(--pub-radius) var(--pub-radius) 0 0;
  overflow: hidden;
  position: relative;
}

.pub-detail__hero-image {
  display: block;
  width: 100%;
  /* 
    Use contain so portrait images are never cropped.
    The dark background behind the figure acts as the letterbox.
    max-height keeps very tall images from dominating the page.
  */
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
}

.pub-detail__caption {
  font-size: 0.82rem;
  color: var(--pub-muted);
  text-align: center;
  padding: 0.55rem 1.25rem 0.75rem;
  font-style: italic;
  margin: 0;
  background: rgba(var(--pub-shadow-rgb), 0.55);
}

/* ── Meta chips ─────────────────────────────────────────────────────────── */
.pub-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin-bottom: 1.25rem;
}

.pub-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}

.pub-meta-chip--poetry {
  background: rgba(var(--pub-poetry-rgb), 0.15);
  color: var(--pub-poetry-color);
  border: 1px solid rgba(var(--pub-poetry-rgb), 0.30);
}
.pub-meta-chip--prose {
  background: rgba(var(--pub-prose-rgb), 0.15);
  color: var(--pub-prose-color);
  border: 1px solid rgba(var(--pub-prose-rgb), 0.30);
}

.pub-meta-item {
  font-size: 0.85rem;
  color: var(--pub-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pub-detail__divider {
  border: none;
  border-top: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  margin: 1.25rem 0;
}

/* ── Content body ───────────────────────────────────────────────────────── */
.pub-detail__content {
  font-family: var(--pub-body-font);
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--pub-body-color);
}

/* Poetry: centred, italic, pre-line whitespace */
.pub-detail__content--poetry {
  text-align: center;
  white-space: pre-line;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 2.1;
  letter-spacing: 0.015em;
  color: var(--pub-body-color);
  /* Subtle decorative indent */
  padding: 0.5rem 1.5rem;
}

.pub-detail__content p { color: inherit; }


/* --------------------------------------------------------------------------
   7. COMMENTS  (detail.html)
   -------------------------------------------------------------------------- */
.pub-comments { margin-top: 2rem; }

.pub-comments__heading {
  font-family: var(--pub-heading-font);
  font-size: 1.2rem;
  color: rgb(var(--pub-accent-rgb));
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pub-comments__count {
  font-size: 0.75rem;
  background: rgba(var(--pub-accent-rgb), 0.12);
  color: rgb(var(--pub-accent-rgb));
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: 999px;
  padding: 1px 9px;
  font-family: var(--pub-body-font);
}

.pub-comments__empty {
  color: var(--pub-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.pub-comments__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.pub-comment {
  display: flex;
  gap: 12px;
  background: rgba(var(--pub-shade-rgb), 0.55);
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: 10px;
  padding: 1rem 1.2rem;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s;
}

.pub-comment:hover {
  border-color: rgba(var(--pub-accent-rgb), 0.6);
}

.pub-comment__avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  opacity: 0.8;
}

.pub-comment__body  { flex: 1; min-width: 0; }

.pub-comment__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-bottom: 0.4rem;
}

.pub-comment__author {
  font-size: 0.88rem;
  color: rgb(var(--pub-accent-rgb));
}

.pub-comment__time {
  font-size: 0.75rem;
  color: var(--pub-muted);
}

.pub-comment__delete-form { margin-left: auto; }

.pub-comment__delete-btn {
  background: none;
  border: none;
  color: rgba(220, 53, 69, 0.55);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.pub-comment__delete-btn:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

.pub-comment__text {
  font-size: 0.9rem;
  color: var(--pub-body-color);
  line-height: 1.65;
  margin: 0;
}

/* Comment form */
.pub-comment-form {
  background: rgba(var(--pub-shade-rgb), 0.55);
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  padding: 1.4rem 1.5rem;
  margin-top: 1.5rem;
  backdrop-filter: blur(4px);
}

.pub-comment-form__title {
  font-family: var(--pub-heading-font);
  font-size: 1rem;
  color: rgb(var(--pub-accent-rgb));
  margin-bottom: 1rem;
}

.pub-comment-form__textarea {
  resize: vertical;
  min-height: 90px;
}

.pub-comment-login {
  font-size: 0.9rem;
  color: var(--pub-muted);
  padding: 1rem;
  text-align: center;
  border: 1px dashed rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: 10px;
  margin-top: 1rem;
}

.pub-comment-login a { color: rgb(var(--pub-accent-rgb)); }

.pub-form-error { font-size: 0.82rem; color: #e07070; }


/* --------------------------------------------------------------------------
   8. ADD / EDIT FORM  (add_edit.html)
   -------------------------------------------------------------------------- */
.pub-form-card {
  background: rgba(var(--pub-shade-rgb), 0.7);
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  padding: 2rem 2.25rem;
  box-shadow: 0 10px 32px rgba(var(--pub-shadow-rgb), 0.35);
  backdrop-filter: blur(8px);
}

.pub-form-card__subtitle {
  color: var(--pub-muted);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

.pub-field-group { margin-bottom: 1.4rem; }

.pub-field-label {
  display: block;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(var(--pub-accent-rgb));
  margin-bottom: 0.4rem;
}

.pub-field-required { color: #e07070; margin-left: 2px; }

/* Form inputs inherit from bootstrap but we soften them for the dark theme */
.pub-field-input {
  background: rgba(var(--pub-tint-rgb), 0.06) !important;
  border-color: rgba(var(--pub-accent-rgb), var(--pub-line-a)) !important;
  color: var(--pub-body-color) !important;
  border-radius: var(--pub-radius-sm) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.pub-field-input::placeholder {
  color: rgba(var(--pub-tint-rgb), 0.3) !important;
}

.pub-field-input:focus {
  border-color: rgb(var(--pub-accent-rgb)) !important;
  box-shadow: 0 0 0 3px rgba(var(--pub-accent-rgb), 0.18) !important;
  background: rgba(var(--pub-tint-rgb), 0.09) !important;
}

.pub-field-input option {
  background: var(--pub-dark);
  color: var(--pub-body-color);
}

.pub-field-textarea {
  resize: vertical;
  min-height: 300px;
  line-height: 1.75;
  font-family: var(--pub-body-font);
}

.pub-field-hint {
  font-size: 0.78rem;
  color: var(--pub-muted);
  margin-top: 0.3rem;
  margin-bottom: 0;
}

.pub-field-image-preview { margin-bottom: 0.75rem; }

.pub-field-image-preview__img {
  max-height: 220px;
  border-radius: var(--pub-radius-sm);
  object-fit: contain;
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  display: block;
  background: #000;
}

.pub-submit-note {
  font-size: 0.82rem;
  color: var(--pub-muted);
  background: rgba(var(--pub-accent-rgb), 0.06);
  border: 1px solid rgba(var(--pub-accent-rgb), 0.2);
  border-radius: var(--pub-radius-sm);
  padding: 0.7rem 1rem;
  margin: 1.25rem 0 1.5rem;
}

.pub-form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.pub-form-actions__submit { min-width: 190px; }


/* --------------------------------------------------------------------------
   9. TABLE  (my_publications + review_list)
   -------------------------------------------------------------------------- */
.pub-table-wrap {
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(var(--pub-shadow-rgb), 0.3);
}

.pub-table {
  margin: 0;
  background: rgba(var(--pub-shade-rgb), 0.88);
  --bs-table-bg: transparent;
}

.pub-table thead tr {
  background: linear-gradient(
    90deg,
    rgba(var(--pub-prose-rgb), 0.28),
    rgba(var(--pub-panel-rgb), 0.24)
  );
  border-bottom: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

.pub-table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--pub-accent-rgb));
  padding: 0.9rem 1.1rem;
  border: none;
  white-space: nowrap;
}

.pub-table tbody tr {
  border-bottom: 1px solid rgba(var(--pub-accent-rgb), 0.07);
  transition: background 0.15s;
}

.pub-table tbody tr:last-child { border-bottom: none; }

.pub-table tbody tr:hover {
  background: rgba(var(--pub-accent-rgb), 0.04);
}

.pub-table td {
  padding: 0.85rem 1.1rem;
  vertical-align: middle;
  color: var(--pub-body-color);
  border: none;
  font-size: 0.9rem;
}

.pub-table__title-cell { max-width: 300px; }

.pub-table__title-link {
  color: rgb(var(--pub-accent-rgb));
  text-decoration: none;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s;
}

.pub-table__title-link:hover { color: var(--pub-body-color); text-decoration: none; }

.pub-table__ext-icon {
  font-size: 0.62rem;
  opacity: 0.45;
  margin-left: 4px;
  vertical-align: middle;
}

.pub-table__author { color: var(--pub-muted); font-size: 0.88rem; }

.pub-table__date {
  color: var(--pub-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.pub-table__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

.pub-table__actions { display: flex; gap: 6px; flex-wrap: wrap; }


/* --------------------------------------------------------------------------
   10. INLINE BADGES
   -------------------------------------------------------------------------- */
.pub-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.pub-type-badge--poetry {
  background: rgba(var(--pub-poetry-rgb), 0.15);
  color: var(--pub-poetry-color);
  border: 1px solid rgba(var(--pub-poetry-rgb), 0.30);
}
.pub-type-badge--prose {
  background: rgba(var(--pub-prose-rgb), 0.15);
  color: var(--pub-prose-color);
  border: 1px solid rgba(var(--pub-prose-rgb), 0.30);
}

.pub-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.pub-status-badge--published {
  background: rgba(40, 167, 69, 0.16);
  color: #85d898;
  border: 1px solid rgba(40, 167, 69, 0.3);
}
.pub-status-badge--pending {
  background: rgba(var(--pub-accent-rgb), 0.12);
  color: rgb(var(--pub-accent-rgb));
  border: 1px solid rgba(var(--pub-accent-rgb), 0.3);
}
.pub-status-badge--secondary {
  background: rgba(108, 117, 125, 0.16);
  color: #a8b0b8;
  border: 1px solid rgba(108, 117, 125, 0.3);
}


/* --------------------------------------------------------------------------
   11. REVIEW PAGE SPECIFICS
   -------------------------------------------------------------------------- */
.pub-review-section__heading {
  font-family: var(--pub-heading-font);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.pub-review-section__heading--pending  { color: rgb(var(--pub-accent-rgb)); }
.pub-review-section__heading--approved { color: #85d898; }

.pub-review-section__count {
  font-size: 0.7rem;
  background: rgba(var(--pub-accent-rgb), 0.12);
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: 999px;
  padding: 1px 9px;
  font-family: var(--pub-body-font);
  color: rgb(var(--pub-accent-rgb));
}

.pub-approve-btn {
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.25);
}

.pub-approve-btn:hover { box-shadow: 0 0 18px rgba(40, 167, 69, 0.45); }


/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pub-page-header {
    flex-direction: column;
    padding: 1.25rem;
  }

  .pub-page-header__title { font-size: 1.4rem; }

  .pub-detail { padding: 1.25rem; }

  .pub-detail__figure {
    margin: -1.25rem -1.25rem 1.5rem;
  }

  .pub-detail__hero-image { max-height: 320px; }

  .pub-form-card { padding: 1.25rem; }

  .pub-form-actions { flex-direction: column; }

  .pub-form-actions__submit { width: 100%; }

  /* Responsive table → stacked cards on mobile */
  .pub-table thead { display: none; }

  .pub-table tbody tr {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  }

  .pub-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    border: none;
  }

  .pub-table td::before {
    content: attr(data-label);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--pub-accent-rgb));
    opacity: 0.65;
    min-width: 80px;
    flex-shrink: 0;
  }

  .pub-table__actions  { flex-wrap: wrap; }
  .pub-table__title-cell { max-width: none; }
  .pub-comment { gap: 8px; }
}

@media (max-width: 480px) {
  .pub-card__image-wrap  { height: 170px; }
  .pub-detail__meta      { gap: 0.4rem 0.8rem; }
}


/* --------------------------------------------------------------------------
   9. INLINE PDF VIEWER  (web/partials/_pdf_inline.html)

   A document shown on the page it was linked from, rather than handed over as a
   file. Built on the same --pub-* tokens as everything above, so it follows the
   active theme on every page that includes it.

   The page itself stays paper-white on every theme: a PDF is rendered to a
   canvas with its own white background baked in, and tinting the frame around
   it to match a dark theme only makes the mismatch louder. The frame is themed,
   the leaf is paper. Same reasoning as --wk-parchment in works.css.
   -------------------------------------------------------------------------- */

.pdf-inline {
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  background: rgba(var(--pub-shade-rgb), var(--pub-shade-a));
  box-shadow: 0 6px 24px rgba(var(--pub-shadow-rgb), 0.28);
  overflow: hidden;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.pdf-inline__toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: rgba(var(--pub-panel-rgb), var(--pub-panel-a));
  border-bottom: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

.pdf-inline__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-family: var(--pub-body-font);
  font-size: 0.86rem;
  font-weight: 600;
  color: rgb(var(--pub-accent-rgb));
  background: transparent;
  border: 1px solid rgba(var(--pub-accent-rgb), 0.45);
  border-radius: var(--pub-radius-sm);
  cursor: pointer;
  transition: background 0.18s var(--pub-ease), color 0.18s var(--pub-ease),
              border-color 0.18s var(--pub-ease);
}

.pdf-inline__btn:hover:not(:disabled),
.pdf-inline__btn:focus-visible:not(:disabled) {
  background: rgb(var(--pub-accent-rgb));
  border-color: rgb(var(--pub-accent-rgb));
  color: var(--pub-on-accent);
  outline: none;
}

/* Kept visible rather than hidden at either end of the document: a control that
   disappears reads as a bug, one that greys out reads as "no further". */
.pdf-inline__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pdf-inline__counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  font-family: var(--pub-body-font);
  font-size: 0.86rem;
  color: var(--pub-muted);
  font-variant-numeric: tabular-nums;
}

.pdf-inline__counter-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.8;
}

.pdf-inline__counter-sep { opacity: 0.5; }

/* ── Stage ──────────────────────────────────────────────────────────────── */
/* The mat the page is laid on. On the dark themes this is the theme's own deep
   surface, which frames a white PDF page nicely. On the light theme that same
   token is near-white, so a white page would dissolve into it — there the mat
   becomes a faint warm tint instead, and the page gets a hairline edge. */
.pdf-inline__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 1rem;
  background: rgba(var(--pub-shade-rgb), 0.55);
}

body[data-theme="default"] .pdf-inline__stage {
  background: rgba(var(--pub-tint-rgb), 0.08);
}

.pdf-inline__canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(var(--pub-shadow-rgb), 0.35);
}

body[data-theme="default"] .pdf-inline__canvas {
  border: 1px solid rgba(var(--pub-tint-rgb), 0.18);
  box-shadow: 0 8px 24px rgba(var(--pub-shadow-rgb), 0.14);
}

/* ── Loading / error states ─────────────────────────────────────────────── */
.pdf-inline__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.pdf-inline__state[hidden] { display: none; }

.pdf-inline__state-text {
  margin: 0;
  max-width: 34rem;
  font-family: var(--pub-body-font);
  font-size: 0.9rem;
  color: var(--pub-muted);
}

.pdf-inline__state-icon {
  font-size: 1.6rem;
  color: rgb(var(--pub-accent-rgb));
  opacity: 0.8;
}

.pdf-inline__spinner {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(var(--pub-accent-rgb), 0.28);
  border-top-color: rgb(var(--pub-accent-rgb));
  border-radius: 50%;
  animation: pdf-inline-spin 0.8s linear infinite;
}

@keyframes pdf-inline-spin { to { transform: rotate(360deg); } }

/* Respect a reader who has asked for less motion: keep the indicator, drop the
   spin. */
@media (prefers-reduced-motion: reduce) {
  .pdf-inline__spinner { animation: none; opacity: 0.6; }
}

.pdf-inline__caption {
  margin: 0;
  padding: 0.65rem 1rem;
  font-family: var(--pub-body-font);
  font-size: 0.8rem;
  color: var(--pub-muted);
  text-align: center;
  border-top: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

@media (max-width: 575.98px) {
  .pdf-inline__toolbar   { gap: 0.6rem; padding: 0.6rem 0.7rem; }
  .pdf-inline__btn-label { display: none; }
  .pdf-inline__stage     { padding: 0.6rem; min-height: 200px; }
}


/* --------------------------------------------------------------------------
   10. CERTIFICATE PAGES  (web/certificates/{verify,lookup,not_found}.html)

   These three pages deliberately use NONE of Bootstrap's `.card` or `.alert`
   components, and it is worth writing down why, because the obvious edit is to
   put them back.

   Bootstrap declares `--bs-card-bg: var(--bs-body-bg)` inside its own `.card`
   rule. A declaration on the element beats an inherited one, so every theme's
   `:root { --bs-card-bg: <cream> }` is shadowed and `.card` quietly takes the
   *page* background — while `.card-body { color: <dark ink> }`, which the themes
   set for a cream card, still applies. On the dark themes that is dark text on a
   dark panel. (Monsoon is the exception: it redeclares `--bs-card-bg` inside its
   own `.card` block, which is the fix, and the reason its cards look right.)

   `.alert-success` and friends have the mirror-image problem: a fixed pale
   panel, with the theme's light body text on top of it.

   So these panels own both halves of every contrast pair, built from the
   --pub-* tokens that already flip per theme. Nothing here can be dark-on-dark
   on one theme and fine on another, because no colour is inherited from
   somewhere else.
   -------------------------------------------------------------------------- */

.cert-page {
  max-width: 54rem;
  margin-inline: auto;
}

.cert-page__note {
  margin: 0 0 0.35rem;
  font-family: var(--pub-body-font);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--pub-muted);
}

.cert-page__note:last-child { margin-bottom: 0; }


/* ── Panels ─────────────────────────────────────────────────────────────── */
.cert-panel {
  margin-bottom: 1.5rem;
  padding: 1.75rem;
  background: rgba(var(--pub-shade-rgb), var(--pub-shade-a));
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  box-shadow: 0 6px 24px rgba(var(--pub-shadow-rgb), 0.24);
  /* Set explicitly, so nothing inherits ink meant for a cream card. */
  color: var(--pub-body-color);
  font-family: var(--pub-body-font);
}

.cert-panel p,
.cert-panel li { color: var(--pub-body-color); }

.cert-panel__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--pub-accent-rgb));
  opacity: 0.85;
}

.cert-panel__name {
  margin: 0 0 1.25rem;
  font-family: var(--pub-heading-font);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--pub-accent-rgb));
}


/* ── The record itself ──────────────────────────────────────────────────── */
.cert-fields {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.7rem 1.5rem;
  margin: 0;
}

.cert-fields dt {
  margin: 0;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--pub-muted);
}

.cert-fields dd {
  margin: 0;
  color: var(--pub-body-color);
}

.cert-fields__hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--pub-muted);
}

/* The number and the masked address are read character by character, and often
   compared against print. Tabular figures stop the columns drifting. */
.cert-fields__mono {
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.cert-citation {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
}

.cert-citation__label {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--pub-accent-rgb));
  opacity: 0.85;
}

.cert-citation__text {
  margin: 0;
  line-height: 1.7;
  color: var(--pub-body-color);
}

@media (max-width: 575.98px) {
  .cert-panel  { padding: 1.25rem; }
  .cert-fields { grid-template-columns: 1fr; gap: 0.15rem; }
  .cert-fields dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
                    text-transform: uppercase; }
  .cert-fields dd { margin-bottom: 0.8rem; }
}


/* ── Status banner ───────────────────────────────────────────────────────────

   Green means valid and red means withdrawn — that distinction is the whole
   point of the page and is not somewhere to be inventive. But *which* green and
   *which* red comes from each theme's own palette, so the banner belongs to the
   page it sits on: wet moss on Monsoon, leaf green on Summer, evergreen on
   Christmas, lantern green on Halloween.

   The title and icon carry the hue; the explanatory line stays body text, which
   is what keeps it readable at small sizes on all five.

   Every hue below was checked against its own washed panel over that theme's
   page background, and lifted in lightness (hue and saturation untouched) until
   it cleared 4.5:1. The reds needed it most — a saturated red on a near-black
   page looks emphatic and measures badly.
   -------------------------------------------------------------------------- */

:root {
  --cert-ok-rgb:      63, 163, 127;
  --cert-bad-rgb:     224, 82, 82;
  --cert-wait-rgb:    245, 215, 110;   /* "too many attempts" — a caution     */
  --cert-none-rgb:    150, 165, 175;   /* "no such number" — neutral, not bad */
  --cert-wash-a:      0.15;            /* panel tint over a dark page         */
  --cert-edge-a:      0.45;            /* panel border                        */
}

/* The light page needs the mirror treatment: these hues must darken to stay
   legible on cream, where on slate they had to brighten. */
body[data-theme="default"] {
  --cert-ok-rgb:      63, 107, 52;     /* deep leaf, sits with the coffee brown */
  --cert-bad-rgb:     156, 61, 28;     /* the same brick as --pub-prose         */
  --cert-wait-rgb:    138, 90, 26;     /* bronze, as --pub-accent goes here     */
  --cert-none-rgb:    108, 92, 78;
  --cert-wash-a:      0.10;
  --cert-edge-a:      0.38;
}

body[data-theme="monsoon"] {
  --cert-ok-rgb:      92, 155, 127;    /* --color-wet-moss                    */
  --cert-bad-rgb:     209, 111, 96;    /* brick, warmed to survive the teal   */
  --cert-wait-rgb:    201, 138, 75;    /* --color-petrichor                   */
  --cert-none-rgb:    159, 182, 189;   /* --color-cloud-grey                  */
}

body[data-theme="summer"] {
  --cert-ok-rgb:      127, 176, 105;   /* --color-leaf-green, lifted off bark */
  --cert-bad-rgb:     228, 87, 46;     /* terracotta, kin to golden amber     */
  --cert-wait-rgb:    245, 200, 66;    /* --color-mango-yellow                */
  --cert-none-rgb:    196, 168, 122;   /* the theme's own muted tone          */
}

body[data-theme="christmas"] {
  --cert-ok-rgb:      63, 163, 127;    /* --color-forest-green, brightened    */
  --cert-bad-rgb:     226, 91, 91;     /* holly red, off --color-coffee       */
  --cert-wait-rgb:    245, 215, 110;   /* --color-hunyadi-yellow              */
  --cert-none-rgb:    207, 232, 255;   /* --color-icy-blue                    */
}

body[data-theme="halloween"] {
  --cert-ok-rgb:      157, 240, 138;   /* --hw-ecto, the wisp green           */
  --cert-bad-rgb:     229, 86, 107;    /* --hw-blood-lift                     */
  --cert-wait-rgb:    255, 182, 92;    /* --hw-candle                         */
  --cert-none-rgb:    185, 150, 242;   /* --hw-witch-lift                     */
}

.cert-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--pub-radius);
  border: 1px solid rgba(var(--cert-hue-rgb), var(--cert-edge-a));
  border-left-width: 4px;
  background: rgba(var(--cert-hue-rgb), var(--cert-wash-a));
  color: var(--pub-body-color);
  font-family: var(--pub-body-font);
}

.cert-status--ok      { --cert-hue-rgb: var(--cert-ok-rgb); }
.cert-status--bad     { --cert-hue-rgb: var(--cert-bad-rgb); }
.cert-status--waiting { --cert-hue-rgb: var(--cert-wait-rgb); }
.cert-status--unknown { --cert-hue-rgb: var(--cert-none-rgb); }

.cert-status__icon {
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: rgb(var(--cert-hue-rgb));
}

.cert-status__title {
  margin: 0 0 0.2rem;
  font-family: var(--pub-heading-font);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgb(var(--cert-hue-rgb));
}

.cert-status__detail {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--pub-body-color);
}


/* ── Lookup form ────────────────────────────────────────────────────────────

   The input is styled here too. Left to Bootstrap it renders on the theme's
   cream `--bs-body-bg` fallback with a near-white placeholder, which on the
   dark themes is a pale slab with an unreadable hint inside it.
   -------------------------------------------------------------------------- */
.cert-lookup__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--pub-accent-rgb));
  opacity: 0.85;
}

.cert-lookup__row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cert-lookup__input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pub-body-color);
  background: rgba(var(--pub-shade-rgb), 0.5);
  border: 1px solid rgba(var(--pub-accent-rgb), 0.4);
  border-radius: var(--pub-radius-sm);
  transition: border-color 0.18s var(--pub-ease), box-shadow 0.18s var(--pub-ease);
}

/* The placeholder is a sample certificate number, so it has to be legible
   enough to copy the shape of, and faint enough not to look like a value. */
.cert-lookup__input::placeholder {
  color: var(--pub-muted);
  opacity: 0.65;
  text-transform: none;
  letter-spacing: 0.04em;
}

.cert-lookup__input:focus {
  outline: none;
  border-color: rgb(var(--pub-accent-rgb));
  box-shadow: 0 0 0 3px rgba(var(--pub-accent-rgb), 0.2);
}

.cert-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.2rem;
  font-family: var(--pub-body-font);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--pub-on-accent);
  background: rgb(var(--pub-accent-rgb));
  border: 1px solid rgb(var(--pub-accent-rgb));
  border-radius: var(--pub-radius-sm);
  cursor: pointer;
  transition: opacity 0.18s var(--pub-ease), transform 0.18s var(--pub-ease);
}

.cert-btn:hover,
.cert-btn:focus-visible {
  color: var(--pub-on-accent);
  opacity: 0.88;
  text-decoration: none;
}

.cert-lookup__hint {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--pub-muted);
}


/* --------------------------------------------------------------------------
   11. INLINE PDF ON THE CERTIFICATE PAGE
   -------------------------------------------------------------------------- */

.cert-artifact { margin-bottom: 1.5rem; }

.cert-artifact__label {
  margin-bottom: 0.6rem;
  font-family: var(--pub-body-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--pub-accent-rgb));
  opacity: 0.85;
}

.cert-artifact__image-wrap {
  padding: 1rem;
  border: 1px solid rgba(var(--pub-accent-rgb), var(--pub-line-a));
  border-radius: var(--pub-radius);
  background: rgba(var(--pub-shade-rgb), 0.55);
}

body[data-theme="default"] .cert-artifact__image-wrap {
  background: rgba(var(--pub-tint-rgb), 0.08);
}

.cert-artifact__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(var(--pub-shadow-rgb), 0.35);
}

.cert-artifact__note {
  margin: 0.6rem 0 0;
  font-family: var(--pub-body-font);
  font-size: 0.78rem;
  color: var(--pub-muted);
}