/* Archives surface and tree, based on the supplied Zuma_Archives reference. */
.archives-window {
  --archive-ink: #29271e;
  --archive-grain: url('assets/archives-ivory-grain.webp');
  --archive-base: #f0e1d1;
  --archive-highlight: #f8f0de;
  --archive-shadow: #8e8570;
  container-type: inline-size;
  width: min(340px, 100%);
  height: min(320px, 100%);
  min-height: 260px;
  padding: 3px;
  border: 3px solid;
  border-color: #f8efdb #8b8270 #817967 #f2e8d4;
  border-radius: 2px;
  color: var(--archive-ink);
  background: linear-gradient(#9e8d7160, #9e8d7160), var(--archive-base) var(--archive-grain) 0 0 / 350px;
  box-shadow: inset 1px 1px 3px #fff8e4, inset -1px -1px 2px #a39984, 2px 3px 2px #534d4566;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: .3px .4px .5px #63553d3d;
}
.archives-window button { color: inherit; font-family: inherit; text-shadow: inherit; }
/* Match Contact's artwork dimensions at its responsive default size. */
:root {
  --desktop-chrome-reference: min(460px, 71.76vw, calc((100dvh - var(--dock-height) - 56px) * .92));
  --desktop-title-height: calc(var(--desktop-chrome-reference) * .092429);
  --desktop-control-width: calc(var(--desktop-chrome-reference) * .0448);
  --desktop-control-height: calc(var(--desktop-title-height) * .46);
}
.archives-titlebar {
  height: calc(var(--desktop-title-height) - 6px);
  min-height: 0;
  padding: 0 calc(var(--desktop-chrome-reference) * .012);
  gap: calc(var(--desktop-chrome-reference) * .014);
  border: 0;
  background: transparent;
}
.archives-title-icon {
  width: calc(var(--desktop-title-height) * .5);
  height: calc(var(--desktop-title-height) * .5);
}
.archives-titlebar h2 {
  font: 400 clamp(14px, 4.6cqw, 18px)/1 Arial, sans-serif;
  letter-spacing: 0;
}
.archives-window-controls { gap: calc(var(--desktop-chrome-reference) * .006); }
.archives-window-controls button {
  width: var(--desktop-control-width); min-width: 0;
  height: var(--desktop-control-height);
  padding: 0; border: 0; background: transparent; box-shadow: none;
  touch-action: manipulation;
}
.archives-window-controls button:active { border: 0; }
.archives-window-controls img { display: block; width: 100%; height: 100%; object-fit: fill; }
.archives-menubar {
  display: flex; flex: 0 0 auto; align-items: center; gap: 4%;
  padding: 2px 2%; min-height: 32px;
  border: 3px solid; border-color: #fff8e4 #958b75 #8d826c #fff8e4;
  box-shadow: 0 -1px 2px #8c8371, inset 1px 1px 1px #d5c7ab;
  color: var(--archive-highlight);
  background: linear-gradient(#725cda80, #725cda80), var(--archive-base) var(--archive-grain) 0 0 / 350px;
  font: 400 clamp(16px, 3.6cqw, 24px)/1.15 Arial, sans-serif;
}
.archives-menubar details { position: relative; }
.archives-menubar summary { padding: 2px 8px; cursor: pointer; list-style: none; }
.archives-menubar summary::-webkit-details-marker { display: none; }
.archives-menubar summary:focus-visible { outline: 1px dotted var(--archive-highlight); outline-offset: -1px; }
.archives-menu { color: var(--archive-ink); position: absolute; z-index: 5; top: 100%; left: 0; width: 210px; padding: 4px; border: 2px outset #ede2ce; background: #e0d4bd var(--archive-grain) center / 350px; box-shadow: 2px 3px 2px #5a504950; }
.archives-menu button { display: block; width: 100%; min-width: 0; height: auto; padding: 9px; text-align: left; font-size: 15px; background: transparent; border: 0; box-shadow: none; }
.archives-menu button:hover { background: #b7a58b55; filter: none; }
.archives-window[data-view="dropdown"] .archives-explorer {
  display: block; flex: 1; min-height: 0; margin: 0;
  overflow: auto; overscroll-behavior: contain;
  border: 3px solid; border-color: #948975 #faf1df #fbf2df #8d836f;
  background: linear-gradient(#b4a08728, #b4a08728), var(--archive-base) var(--archive-grain) 0 0 / 350px;
  box-shadow: inset 1px 1px 2px #756e5733;
}
.archives-window[data-view="dropdown"] .archives-tree { overflow: visible; max-height: none; padding: 5% 4% 7%; border: 0; background: transparent; }
.archives-window[data-view="dropdown"] .archives-tree-root, .archives-window[data-view="dropdown"] .archives-branch-row { display: flex; align-items: center; gap: 3%; min-width: 0; }
.archives-window[data-view="dropdown"] .archives-tree-root { position: relative; }
.archives-window[data-view="dropdown"] .archives-tree-toggle {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: clamp(20px, 3.8cqw, 33px); min-width: 20px; height: clamp(20px, 3.8cqw, 33px);
  border: 2px solid; border-color: #8c836e #8c836e #afa38c #afa38c; border-radius: 1px;
  background: #f6eddc; box-shadow: inset 1px 1px 1px #fffdf3, inset -2px -2px 1px #c4bba6, 1px 1px 1px #fffaeb;
  font: 400 clamp(18px, 3.5cqw, 30px)/.8 Arial, sans-serif !important;
}
.archives-window[data-view="dropdown"] .archives-tree-folder {
  gap: 4%; width: auto; max-width: 100%; height: auto; min-height: 1.7em; padding: 0;
  font: 400 clamp(17px, 4.4cqw, 26px)/1.3 Arial, sans-serif;
  letter-spacing: -.025em; background: transparent;
}
.archives-window[data-view="dropdown"] .archives-tree-folder:hover, .archives-window[data-view="dropdown"] .archives-tree-folder.is-selected { background: transparent; filter: none; }
.archives-window[data-view="dropdown"] .archives-tree-folder:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.archives-window[data-view="dropdown"] .archives-folder-icon {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 1.38em; height: .96em; margin: .1em .13em 0 0;
  background: linear-gradient(145deg, #efe1b1 42%, #d5b760 45%, #ddc26f 75%, #b79745);
  border: 2px solid; border-color: #d7c69b #8d805d #80724f #b7a478;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 1px 1px 1px #fff0c4, inset -1px -1px 1px #b1944d, 1px 2px 1px #70684f77;
}
.archives-window[data-view="dropdown"] .archives-folder-icon::before { content: ''; position: absolute; left: -2px; top: -.23em; width: 51%; height: .23em; background: #e3cf94; border: 2px solid #bca77c; border-bottom: 0; border-radius: 3px 4px 0 0; box-shadow: inset 1px 1px #f8eccd; }
.archives-window[data-view="dropdown"] .archives-folder-icon::after { content: ''; position: absolute; inset: 0; background: var(--archive-grain) center / 120px; mix-blend-mode: multiply; opacity: .23; }
.archives-window[data-view="dropdown"] .archives-tree-children { margin: 0 0 0 clamp(9px, 1.9cqw, 16px); padding: 3% 0 0 6%; border-left: 1px dotted #9e9278; }
.archives-window[data-view="dropdown"] .archives-tree-children::before { display: none; }
.archives-window[data-view="dropdown"] .archives-branch { position: relative; padding-bottom: 4%; }
.archives-window[data-view="dropdown"] .archives-branch::before { content: ''; position: absolute; top: clamp(18px, 3.8cqw, 32px); left: -6.4%; width: 6.4%; border-top: 1px dotted #9e9278; }
.archives-window[data-view="dropdown"] .archives-content { position: relative; overflow: visible; padding: 3% 0 0 7%; margin-left: clamp(9px, 1.9cqw, 16px); border-left: 1px dotted #9e9278; background: transparent; }
.archives-window[data-view="dropdown"] .archives-content[hidden] { display: none; }
.archives-window[data-view="dropdown"] .archives-content::after { content: ''; position: absolute; bottom: 0; left: 0; width: 6%; border-top: 1px dotted #9e9278; }
.archives-window[data-view="dropdown"] .archives-content-heading { display: none; }
.archives-window[data-view="dropdown"] .archives-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 5%; }
.archives-window[data-view="dropdown"] .archives-file-card { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.archives-window[data-view="dropdown"] .archives-file-card:hover, .archives-window[data-view="dropdown"] .archives-file-card:focus-visible { background: transparent; outline: 1px dotted #a49375; outline-offset: 5px; filter: none; }
.archives-window[data-view="dropdown"] .archives-file-preview { aspect-ratio: 1.7; border: 2px solid; border-color: #b2a58b #f7eedc #faf1df #aaa088; background: #cabea6; box-shadow: 0 0 1px #a39376; }
.archives-window[data-view="dropdown"] .archives-file-preview img { filter: saturate(.8) contrast(.95); }
.archives-window[data-view="dropdown"] .archives-file-name { margin-top: 9px; color: var(--archive-ink); font: 400 clamp(12px, 3.1cqw, 19px)/1.15 Arial, sans-serif; letter-spacing: -.025em; }
.archives-window[data-view="dropdown"] .archives-file-type { display: none; }
.archives-window[data-view="dropdown"] .archives-statusbar { height: 24px; padding: 1px 5px 1px 10px; border: 0; background: transparent; font: 13px/1 Arial, sans-serif; color: #766c57; }
.archives-status-grip { width: 21px; height: 21px; background: transparent url('window-resize-grip.svg') right 2px bottom 2px / 13px 13px no-repeat; clip-path: none; filter: none; }
.archives-viewer { inset: clamp(110px, 16cqw, 147px) 6px 41px; background: #e8ddc9 var(--archive-grain) center / 350px; border-color: #a49880 #fbf1da #fbf1da #a49880; }
.archives-viewer-top, .archives-viewer-top button, .archives-viewer-caption { font-family: Arial, sans-serif; }
@media (max-width: 520px) {
  .archives-menubar { min-height: 32px; padding: 2px 2%; }
.archives-window[data-view="dropdown"] .archives-tree { padding: 7% 4%; }
.archives-window[data-view="dropdown"] .archives-tree-root, .archives-window[data-view="dropdown"] .archives-branch-row { gap: 4%; }
.archives-window[data-view="dropdown"] .archives-tree-children { padding-left: 6%; padding-top: 5%; }
.archives-window[data-view="dropdown"] .archives-content { padding-top: 6%; padding-left: 5%; }
.archives-window[data-view="dropdown"] .archives-grid { gap: 22px 6%; }
.archives-window[data-view="dropdown"] .archives-file-preview { aspect-ratio: 1.35; }
.archives-window[data-view="dropdown"] .archives-file-name { margin-top: 6px; font-size: 12px; }
  .archives-viewer { top: 92px; }
.archives-window[data-view="dropdown"] .archives-statusbar { height: 24px; }
  .archives-viewer { bottom: 31px; }
}


/* Folder View uses the original layout, icons, typography and breakpoints.
   Only its surface texture follows the updated window aesthetic. */
.archives-window[data-view="dropdown"] .archives-toolbar { display: none; }
.archives-window[data-view="folder"] .archives-content {
  background: linear-gradient(#b4a08728, #b4a08728), var(--archive-base) var(--archive-grain) 0 0 / 350px;
}
.archives-window[data-view="folder"] .archives-tree {
  background: linear-gradient(#9e8d7130, #9e8d7130), var(--archive-base) var(--archive-grain) 0 0 / 350px;
}
.archives-window[data-view="folder"] .archives-address {
  background: linear-gradient(#b4a08728, #b4a08728), var(--archive-base) var(--archive-grain) 0 0 / 350px;
}
.archives-menu button[aria-pressed="true"]::before { content: '✓'; display: inline-block; width: 20px; }
.archives-menu button[aria-pressed="false"]::before { content: ''; display: inline-block; width: 20px; }
.archives-viewer-media { touch-action: pan-y pinch-zoom; overscroll-behavior-x: contain; }
.archives-viewer-media img { user-select: none; -webkit-user-drag: none; }

/* Use alpha-transparent artwork, without Safari-dependent color blending. */
.archives-folder-card img, .archives-tree-folder img { mix-blend-mode: normal; }
.archives-statusbar { justify-content: flex-end; }
.archives-window[data-view="folder"] .archives-content { min-height: 0; }

/* A resized narrow window needs the original stacked folder layout even on a
   wide desktop. Keep the split pane available when the window is enlarged. */
@container (max-width: 500px) {
  .archives-window[data-view="folder"] .archives-explorer { display: flex; flex-direction: column; }
  .archives-window[data-view="folder"] .archives-tree { flex: 0 0 auto; max-height: 96px; padding: 5px 9px; border-right: 0; border-bottom: 2px ridge #ccb9a8; }
  .archives-window[data-view="folder"] .archives-tree-folder { height: 30px; }
  .archives-window[data-view="folder"] .archives-tree-folder img { width: 24px; height: 24px; }
  .archives-window[data-view="folder"] .archives-content { flex: 1; padding: 8px 9px 4px; }
  .archives-window[data-view="folder"] .archives-content-heading { margin-bottom: 4px; padding-bottom: 4px; font-size: .94rem; }
  .archives-window[data-view="folder"] .archives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .archives-window[data-view="folder"] .archives-file-card { padding: 4px; }
  .archives-window[data-view="folder"] .archives-file-name { margin-top: 5px; font-size: .72rem; }
  .archives-window[data-view="folder"] .archives-toolbar { min-height: 37px; padding: 4px 7px; }
  .archives-window[data-view="folder"] .archives-toolbar-label { display: none; }
  .archives-window[data-view="folder"] .archives-folder-card { padding: 4px; gap: 4px; }
  .archives-window[data-view="folder"] .archives-folder-card img { width: 64px; height: 64px; }
  .archives-viewer { padding: 6px; }
  .archives-viewer-stage { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 3px; }
  .archives-viewer-arrow { width: 28px; min-width: 28px; height: 46px; font-size: 34px !important; }
  .archives-viewer-top { height: 25px; }
  .archives-viewer-caption { height: 22px; padding-top: 4px; }
  .archives-filmstrip { height: 40px; justify-content: start; }
  .archives-filmstrip-item { flex-basis: 37px; width: 37px; min-width: 37px; height: 34px; }
}

/* Frame the media itself at every window size, without a wide dark matte. */
.archives-window .archives-viewer-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}
.archives-window .archives-viewer-media :is(img, video) {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 2px inset #d0b9a6;
  background: #282c2b;
}