/* ==========================================================================
   /archive/ : page shell, toolbar, cards, image viewer, modals.
   Only site tokens from base.css are used (light and dark both come free).
   Labels are parallelograms and buttons keep the small --radius-s corner, per
   AGENT.MD. Nothing lifts on hover. All motion is switched off by the
   prefers-reduced-motion rule in base.css.
   ========================================================================== */

.archive-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 20px 64px;
}

/* ---------- parallelogram label (same cut as .nf-card-tag in base.css) ---------- */
.archive-eyebrow,
.archive-tag {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 16px 5px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.archive-eyebrow { margin-bottom: 10px; }

/* ---------- hero ---------- */
.archive-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.archive-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 72px;
  background: var(--amber-alt);
  transform-origin: left;
  animation: archiveRule 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes archiveRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.archive-heading { min-width: 0; animation: archiveRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }

.archive-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  letter-spacing: -0.01em;
}

.archive-subtitle {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--ink);
  max-width: 58ch;
}

.archive-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  animation: archiveRise 0.55s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- buttons ---------- */
.archive-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.archive-action-btn:hover:not(:disabled),
.archive-action-btn:focus-visible:not(:disabled) {
  border-color: var(--amber-alt);
  background: var(--paper-dim);
}

.archive-action-btn.primary {
  background: var(--amber-alt);
  border-color: var(--amber-alt);
  color: #fff;
}

.archive-action-btn.primary:hover:not(:disabled),
.archive-action-btn.primary:focus-visible:not(:disabled) {
  background: var(--amber-alt-deep);
  border-color: var(--amber-alt-deep);
}

.archive-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.archive-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

.archive-link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--brand-deep);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.archive-link-btn:hover { color: var(--ink); }

/* ---------- toolbar: type tabs + icon search ---------- */
.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 4px;
}

.archive-tabs { display: flex; gap: 4px; min-width: 0; }

.archive-tab {
  position: relative;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.2s ease;
}

.archive-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--amber-alt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.archive-tab:hover,
.archive-tab:focus-visible { color: var(--ink); }
.archive-tab.is-active { color: var(--ink); }
.archive-tab.is-active::after { transform: scaleX(1); }

.archive-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.archive-icon-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.archive-icon-btn svg { width: 18px; height: 18px; }

.archive-icon-btn:hover,
.archive-icon-btn:focus-visible,
.archive-search.is-open .archive-icon-btn {
  border-color: var(--amber-alt);
  background: var(--paper-dim);
}

.archive-search-field { min-width: 0; }

.archive-search-input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--input-fill);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}

.archive-search-input:focus-visible { outline: 2px solid var(--amber-alt-deep); outline-offset: 1px; }

/* collapsed to just the icon only when JS is running; without JS the field stays visible */
.archive-js .archive-search-field {
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s 0.34s;
}

.archive-js .archive-search.is-open .archive-search-field {
  width: min(300px, calc(100vw - 150px));
  opacity: 1;
  visibility: visible;
  overflow: visible;
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s 0.06s ease, visibility 0s;
}

/* ---------- filter row: category + added by ---------- */
.archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 6px 0 0;
}

.archive-filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
}

.archive-filter-field {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.archive-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.archive-filter-select {
  width: 100%;
  height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--input-fill);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
}

.archive-filter-select:focus-visible { outline: 2px solid var(--amber-alt-deep); outline-offset: 1px; }

/* active filter hint shown in the summary line above the grid */
.archive-filter-chip {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- summary line above the grid ---------- */
.archive-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 10px 0 18px;
  font-size: 0.82rem;
  color: var(--ink);
}

/* ---------- grid ---------- */
.archive-grid-shell { display: block; }

.archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 640px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }

@keyframes archiveRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.archive-grid-shell.is-searching .archive-grid { opacity: 0.45; transition: opacity 0.2s ease; }

.archive-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: archiveRise 0.55s calc(var(--i, 0) * 55ms) cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.archive-card:hover,
.archive-card:focus-within {
  border-color: var(--amber-alt);
  box-shadow: var(--shadow-raised);
}

.archive-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-dim);
  overflow: hidden;
}

.archive-card-media .archive-tag {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

.archive-card-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.archive-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease;
}

.archive-card:hover .archive-card-media img { transform: scale(1.05); }

/* pictures fade in over a shimmer once they have loaded (only when JS runs) */
.archive-js .archive-card-media:not(.archive-card-media-file) {
  background: linear-gradient(100deg, var(--paper-dim) 30%, var(--line) 50%, var(--paper-dim) 70%);
  background-size: 250% 100%;
  animation: archive-skeleton-shimmer 1.7s ease-in-out infinite;
}

.archive-js .archive-card-media img { opacity: 0; }
.archive-js .archive-card-media img.is-loaded { opacity: 1; }

/* ---------- file tile ---------- */
.archive-card-media-file { display: flex; }

.archive-filetile {
  position: relative;
  margin: auto;
  width: 84px;
  height: 104px;
  color: var(--amber-deep);
}

.archive-filesheet { width: 100%; height: 100%; display: block; }

.archive-filetile-ext {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- video tile ----------
   A video item in the gallery plays itself (muted, looped) behind one
   pause/play button. The clip is NOT cropped or letterboxed into the
   shared 4/3 picture frame: the media box drops that aspect ratio and lets
   the video set its own height, so the whole clip shows at its exact
   dimensions with no black bars and no extra padding. The button glyph
   swaps on the .is-paused class kept in step by
   ARCHIVE/static/archive/js/archive.js. */
.archive-card-media-video { display: block; aspect-ratio: auto; background: transparent; }
.archive-js .archive-card-media-video { animation: none; background: transparent; }

.archive-videotile {
  position: relative;
  width: 100%;
  display: block;
  min-height: 180px;
  background: var(--paper-dim);
}

.archive-card-media-video video {
  display: block;
  width: 100%;
  height: auto;
}

.archive-video-toggle {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(14, 27, 44, 0.62);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background 0.15s ease;
}

.archive-video-toggle:hover,
.archive-video-toggle:focus-visible { background: rgba(14, 27, 44, 0.85); }
.archive-video-toggle:focus-visible { outline: 2px solid var(--amber-alt); outline-offset: 2px; }

/* Nothing is fetched until the reader presses play, so while the clip is idle
   the button IS the tile: one large, centred play affordance over the empty
   box. Once it starts, the button shrinks back to the small corner pause. */
.archive-videotile.is-paused .archive-video-toggle {
  left: 50%;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
}

.archive-video-icon { display: block; width: 16px; height: 16px; }
.archive-video-icon-play { display: none; }
.archive-videotile.is-paused .archive-video-icon-play { display: block; }
.archive-videotile.is-paused .archive-video-icon-pause { display: none; }

/* ---------- card body ---------- */
.archive-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.archive-card-desc {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.archive-card-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.archive-card-specs li {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 100%;
}

.archive-card-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-card-credit {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--ink);
}

.archive-card-uploader {
  font-family: monospace;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-card-credit time { flex-shrink: 0; }

.archive-card-actions {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  gap: 8px;
}

.archive-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink);
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.archive-card-btn.is-primary { flex: 1; min-width: 0; }
.archive-card-btn.is-icon { flex: 0 0 40px; padding: 8px 0; }

.archive-card-btn:hover,
.archive-card-btn:focus-visible {
  border-color: var(--amber-alt);
  background: var(--paper-dim);
}

.archive-card-btn.is-primary:hover,
.archive-card-btn.is-primary:focus-visible {
  background: var(--amber-alt);
  border-color: var(--amber-alt);
  color: #fff;
}

.archive-card-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- empty state ---------- */
.archive-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 56px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-m);
  animation: archiveRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.archive-empty-icon { width: 42px; height: 42px; color: var(--slate); margin-bottom: 6px; }
.archive-empty-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.archive-empty-text { margin: 0 0 12px; color: var(--ink); font-size: 0.9rem; max-width: 44ch; }

/* shared paginator comes from base.css: remove its hover lift here */
.archive-pagination { margin-top: 32px; margin-bottom: 8px; }
.archive-pagination .story-page-btn:hover,
.archive-pagination .story-page-btn:focus-visible { transform: none; }

/* ---------- image viewer ---------- */
html.archive-locked { overflow: hidden; }

.archive-viewer {
  position: fixed;
  inset: 0;
  z-index: 2700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.archive-viewer[hidden] { display: none; }

.archive-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 15, 26, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: archiveFade 0.25s ease both;
}

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

.archive-viewer.is-closing .archive-viewer-backdrop { animation: archiveFade 0.18s ease reverse both; }
.archive-viewer.is-closing .archive-viewer-body { opacity: 0; transform: scale(0.98); transition: opacity 0.18s ease, transform 0.18s ease; }

.archive-viewer-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  width: min(1100px, 100%);
  max-height: calc(100vh - 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber-alt);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  animation: archiveRise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.archive-viewer-stage {
  position: relative;
  margin: 0;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-dim);
  overflow: hidden;
}

.archive-viewer-stage.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--paper-dim) 30%, var(--line) 50%, var(--paper-dim) 70%);
  background-size: 250% 100%;
  animation: archive-skeleton-shimmer 1.7s ease-in-out infinite;
}

.archive-viewer-stage img {
  position: relative;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.archive-viewer-stage.is-loading img { opacity: 0; }

.archive-viewer-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 26px 22px 22px;
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

.archive-viewer-title {
  margin: 0 0 12px;
  font-size: 1.15rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.archive-viewer-facts { width: 100%; margin: 0 0 20px; }

.archive-viewer-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}

.archive-viewer-facts dt { color: var(--slate); }
.archive-viewer-facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.archive-viewer-facts dd[data-viewer-uploader] { font-family: monospace; font-size: 0.78rem; }

.archive-viewer-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; }

.archive-viewer-btn {
  position: absolute;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.archive-viewer-btn svg { width: 18px; height: 18px; }
.archive-viewer-btn:hover,
.archive-viewer-btn:focus-visible { border-color: var(--amber-alt); background: var(--paper-dim); }

.archive-viewer-close { top: 12px; right: 12px; }
.archive-viewer-prev,
.archive-viewer-next { top: calc(50% - 21px); }
.archive-viewer-prev { left: 12px; }
.archive-viewer-next { right: 312px; }
.archive-viewer.is-single .archive-viewer-prev,
.archive-viewer.is-single .archive-viewer-next { display: none; }

@media (max-width: 820px) {
  .archive-viewer { padding: 0; align-items: stretch; }
  .archive-viewer-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border-top-width: 3px;
  }
  .archive-viewer-stage img { max-height: 58vh; }
  .archive-viewer-panel { border-left: 0; border-top: 1px solid var(--line); padding: 16px 16px 18px; max-height: 40vh; }
  .archive-viewer-actions { flex-direction: row; margin-top: 4px; }
  .archive-viewer-actions .archive-action-btn { flex: 1; }
  .archive-viewer-next { right: 12px; }
  .archive-viewer-prev,
  .archive-viewer-next { top: calc(29vh - 21px); }
}

/* ---------- file preview ----------
   A document, a clip or a track opened from a file card. It reads like the
   image viewer above: the same backdrop, the same sheet, the same close
   button -- but the stage holds the file itself instead of a picture. */
.archive-preview {
  position: fixed;
  inset: 0;
  z-index: 2750;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.archive-preview[hidden] { display: none; }

.archive-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 15, 26, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: archiveFade 0.25s ease both;
}
.archive-preview.is-closing .archive-preview-backdrop { animation: archiveFade 0.18s ease reverse both; }
.archive-preview.is-closing .archive-preview-body { opacity: 0; transform: scale(0.98); transition: opacity 0.18s ease, transform 0.18s ease; }

.archive-preview-body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  max-height: calc(100vh - 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber-alt);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  animation: archiveRise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.archive-preview-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.archive-preview-heading { min-width: 0; flex: 1 1 auto; }
.archive-preview-title {
  margin: 4px 0 2px;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.archive-preview-meta {
  margin: 0;
  color: var(--slate);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.archive-preview-close {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--ink); cursor: pointer;
}
.archive-preview-close svg { width: 18px; height: 18px; }
.archive-preview-close:hover { background: var(--paper-dim); }

.archive-preview-stage {
  flex: 1 1 auto;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: var(--paper-dim);
  overflow: auto;
}
.archive-preview-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.archive-preview-audio { width: 100%; }
.archive-preview-video { width: 100%; max-height: 60vh; background: #000; border-radius: var(--radius-s); }
.archive-preview-note {
  margin: 0;
  color: var(--slate);
  font-size: 0.78rem;
}
.archive-preview-actions {
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 820px) {
  .archive-preview { padding: 0; align-items: stretch; }
  .archive-preview-body { width: 100%; max-height: 100vh; border-radius: 0; border-top-width: 3px; }
  .archive-preview-frame { min-height: 46vh; }
  .archive-preview-actions .archive-action-btn { flex: 1; }
}

/* ---------- blur the page behind a popup while it loads ---------- */
.archive-page-blur {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.15s ease;
}

/* ---------- popups (Add and Manage) ---------- */
.archive-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.archive-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 27, 44, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: archiveFade 0.25s ease both;
}

.archive-modal-card {
  position: relative;
  width: min(92vw, 500px);
  max-height: min(90vh, 760px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber-alt);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-raised);
  padding: 22px 22px 20px;
  animation: archiveRise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.archive-modal-layer.is-closing .archive-modal-backdrop { animation: archiveFade 0.16s ease reverse both; }
.archive-modal-layer.is-closing .archive-modal-card { opacity: 0; transform: scale(0.98); transition: opacity 0.16s ease, transform 0.16s ease; }

.archive-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.archive-modal-head .archive-eyebrow { margin-bottom: 8px; }

.archive-modal-head h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--ink);
}

.archive-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--slate);
  transition: background 0.2s ease, color 0.2s ease;
}

.archive-modal-close svg { width: 18px; height: 18px; }
.archive-modal-close:hover,
.archive-modal-close:focus-visible { color: var(--ink); background: var(--paper-dim); }

.archive-modal-error {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--danger);
  background: var(--paper-dim);
  color: var(--danger);
  font-weight: 700;
  font-size: 0.86rem;
}

.archive-modal-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.archive-modal-field label,
.archive-modal-label {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--ink);
}

/* ---------- file drop zone (the real input sits invisibly over it, so click and drag and drop both work natively) ---------- */
.archive-modal-field .archive-file-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-s);
  background: var(--input-fill);
  text-align: center;
  font-weight: 400;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.archive-file-zone:hover,
.archive-file-zone.is-dragover,
.archive-file-zone:focus-within {
  border-color: var(--amber-alt);
  background: var(--paper-dim);
}

.archive-file-zone-icon { width: 28px; height: 28px; color: var(--amber-alt-deep); margin-bottom: 2px; }
.archive-file-zone-title { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.archive-file-zone-hint { font-size: 0.76rem; color: var(--ink); max-width: 38ch; }

.archive-modal-field .archive-file-zone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: 0;
}

.archive-modal-preview {
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--paper-dim, transparent);
  max-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.archive-modal-preview[hidden],
.archive-modal-preview img[hidden],
.archive-modal-preview video[hidden],
.archive-modal-preview-file[hidden] { display: none; }

.archive-modal-preview img,
.archive-modal-preview-video {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.archive-modal-note {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.4;
}

.archive-modal-note[hidden] { display: none; }

/* live readout of what the width/height boxes will actually store */
.archive-modal-size {
  margin: 6px 0 0;
  color: var(--amber-deep);
  font-weight: 700;
  font-size: 0.8rem;
}

.archive-modal-size[hidden] { display: none; }

.archive-modal-preview-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--ink);
  font-size: 0.86rem;
  word-break: break-all;
}

.archive-modal-preview-file svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--amber-deep);
}

.archive-modal-field input:not([type="file"]),
.archive-modal-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--input-fill);
  color: var(--ink);
  padding: 10px 11px;
  font: inherit;
}

.archive-modal-field input:focus,
.archive-modal-field select:focus {
  outline: none;
  border-color: var(--amber-alt);
}

.archive-modal-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 480px) {
  .archive-modal-row { grid-template-columns: 1fr 1fr; }
  .archive-modal-row .archive-modal-field { margin-bottom: 14px; }
}

.archive-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ---------- Manage my uploads modal ---------- */
.archive-manage-card {
  width: min(94vw, 620px);
}

.archive-manage-hint {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--ink);
}

.archive-manage-notice {
  margin: 0 0 12px;
  color: var(--amber-deep);
  font-weight: 700;
  font-size: 0.86rem;
}

/* Name + date search, one horizontal row. */
.archive-manage-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.archive-manage-filter {
  flex: 1 1 130px;
  min-width: 0;
}

.archive-manage-filter input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper-dim, transparent);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.84rem;
}

.archive-manage-filter input:focus {
  outline: none;
  border-color: var(--amber-alt);
}

.archive-manage-filters .archive-action-btn {
  flex: none;
  padding: 8px 14px;
  font-size: 0.82rem;
}

.archive-manage-filter-clear {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 8px 4px;
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.archive-manage-filter-clear[hidden] { display: none; }

.archive-manage-filter-clear:hover,
.archive-manage-filter-clear:focus-visible {
  color: var(--ink);
}

.archive-manage-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.archive-manage-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px;
}

.archive-manage-row-media {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.archive-manage-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-manage-row-media-file svg {
  width: 26px;
  height: 26px;
  color: var(--amber-deep);
}

.archive-manage-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archive-manage-row-form {
  display: flex;
  gap: 8px;
}

.archive-manage-row-form input,
.archive-manage-row-form select {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper-dim, transparent);
  color: var(--ink);
  padding: 7px 9px;
  font: inherit;
  font-size: 0.84rem;
}

.archive-manage-row-form input:focus,
.archive-manage-row-form select:focus {
  outline: none;
  border-color: var(--amber-alt);
}

.archive-manage-quality {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 0.75rem;
  white-space: nowrap;
}

.archive-manage-quality select {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper-dim, transparent);
  color: var(--ink);
  padding: 7px 8px;
  font: inherit;
  font-size: 0.78rem;
}

.archive-manage-row-form input[type="file"] {
  flex: 1 1 100%;
  width: 100%;
  font-size: 0.72rem;
}

.archive-manage-row-form button {
  padding: 7px 12px;
  font-size: 0.78rem;
}

.archive-manage-row-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--ink);
}

.archive-manage-row-delete {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--danger);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.archive-manage-row-delete svg { width: 17px; height: 17px; }

.archive-manage-row-delete:hover,
.archive-manage-row-delete:focus-visible {
  background: var(--paper-dim);
  border-color: var(--danger);
}

.archive-manage-more {
  width: 100%;
  margin-top: 4px;
}

.archive-manage-more.is-loading {
  opacity: 0.65;
  cursor: progress;
}

/* ---------- gallery pagination: skeleton cards while an htmx page swap
   is in flight (see archive.js) -- reuses .archive-card/.archive-grid
   sizing so the layout doesn't jump when the real cards swap in. ---------- */
.archive-grid-shell.is-paginating { overflow: hidden; }

.archive-skeleton-card { pointer-events: none; animation: none; }

.archive-skeleton-media { aspect-ratio: 4 / 3; }

@keyframes archive-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.archive-skeleton-media,
.archive-skeleton-line {
  background: linear-gradient(100deg, var(--paper-dim) 30%, var(--line) 50%, var(--paper-dim) 70%);
  background-size: 250% 100%;
  animation: archive-skeleton-shimmer 1.7s ease-in-out infinite;
}

.archive-skeleton-line { height: 11px; border-radius: 3px; }

.archive-card-body .archive-skeleton-line + .archive-skeleton-line { width: 55%; }

.archive-skeleton-actions { margin-top: auto; display: flex; gap: 8px; }

.archive-skeleton-actions .archive-skeleton-line {
  flex: 1;
  height: 38px;
  border-radius: var(--radius-s);
}

/* ---------- upload progress bar: shared by the Add popup and the manage-row Save form ---------- */
.archive-upload-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  background: var(--paper-dim);
  margin: 2px 0 10px;
  flex: 1 0 100%;
}

.archive-upload-progress[hidden] { display: none; }

.archive-upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--amber-alt);
  transition: width 0.15s ease;
}

.archive-manage-row-form { flex-wrap: wrap; }

@media (max-width: 560px) {
  .archive-shell { padding: 24px 14px 44px; }

  .archive-header-actions { width: 100%; }
  .archive-header-actions .archive-action-btn { flex: 1 1 auto; }

  .archive-toolbar { flex-wrap: wrap; }
  .archive-search.is-open { flex: 1 1 100%; justify-content: flex-end; }
  .archive-js .archive-search.is-open .archive-search-field { flex: 1 1 auto; width: auto; }

  /* Category + Added by scroll sideways instead of stacking, so both stay
     reachable without pushing the grid down the page. */
  .archive-filters-form {
    flex-wrap: wrap;
    width: 100%;
  }
  .archive-filters-form::-webkit-scrollbar { height: 6px; }
  .archive-filters-form::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
  .archive-filter-field { min-width: 170px; flex: 0 0 auto; }

  .archive-modal-layer { padding: 8px; }
  .archive-modal-card { padding: 18px 14px 14px; }

  .archive-manage-card { width: 100%; max-height: 94vh; padding: 16px 12px 12px; }

  .archive-manage-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .archive-manage-row-media { width: 48px; height: 48px; align-self: start; }

  .archive-manage-row-delete { grid-column: 2; justify-self: end; margin-top: -4px; }

  .archive-manage-row-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .archive-manage-row-form > input[name="alt"],
  .archive-manage-row-form input[type="file"] { grid-column: 1 / -1; width: 100%; }

  .archive-manage-quality { min-width: 0; }
  .archive-manage-row-meta { flex-wrap: wrap; }
  .archive-grid { gap: 16px; }
  .archive-card-body { padding: 14px; }
}

/* once a picture has loaded the shimmer behind it stops (matters for transparent PNGs) */
.archive-js .archive-card-media:has(img.is-loaded) {
  animation: none;
  background: var(--paper-dim);
}

/* A previewable file opens when its tile is tapped. */
.archive-card:has([data-archive-file-open]) .archive-card-media-file:not(.archive-card-media-video) { cursor: pointer; }