/* Archive-specific composition on top of @colonization-re/web-ui.
 * Candidates for the shared design system are documented in WEB_UI_GAPS.md. */

body.archive-background{
  min-height:100vh;
  min-height:100svh;
  background-color:var(--bg);
  background-image:
    linear-gradient(180deg,rgba(242,246,252,.38),rgba(242,246,252,.72) 46%,rgba(242,246,252,.84)),
    url("ship-leaving-europe.png");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.archive-skip-link{
  position:fixed;
  left:16px;
  top:12px;
  z-index:calc(var(--z-bar) + 1);
  padding:8px 12px;
  color:var(--on-brand);
  background:var(--brand);
  border-radius:var(--r-sm);
  transform:translateY(-160%);
}
.archive-skip-link:focus{transform:translateY(0)}

.archive-intro{
  max-width:760px;
  padding:clamp(38px,8vh,88px) 0 clamp(28px,5vh,52px);
  text-shadow:0 1px 0 rgba(255,255,255,.8),0 2px 18px rgba(255,255,255,.8);
}
.archive-intro .col-lead{max-width:62ch}
.archive-intro .col-btn{text-shadow:none}

/* web-ui's a:hover outranks .col-btn's color, turning link-button text blue on blue. */
a.col-btn:where(:hover){color:var(--_fg)}

.archive-background .col-card{
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 12px 30px -24px rgba(13,28,46,.5);
}
.archive-background .archive-map-preview{
  background:color-mix(in srgb,var(--surface-2) 94%,transparent);
}
.archive-background .archive-map-preview:hover{
  background:color-mix(in srgb,var(--surface-3) 96%,transparent);
}

.archive-filter-panel{margin-bottom:24px}
.archive-search-field{flex:1 1 280px;margin:0}
.archive-tag-filter-field{flex:0 1 260px;margin:0}
.archive-tag-picker{position:relative}
.archive-tag-input{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  text-align:left;
  cursor:pointer;
}
.archive-tag-input:after{
  content:"";
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-left:10px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.archive-tag-value{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archive-tag-menu{
  position:absolute;
  z-index:calc(var(--z-bar) - 1);
  top:calc(100% + 6px);
  left:0;
  right:0;
  max-height:240px;
  padding:8px;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  box-shadow:var(--sh);
}
.archive-tag-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  color:var(--text);
  font-size:13px;
  line-height:1.2;
  border-radius:var(--r-xs);
  cursor:pointer;
}
.archive-tag-option:hover{background:var(--surface-2)}
.archive-tag-option input{margin:0}
.archive-sort-field{flex:0 1 180px;margin:0}
.archive-view-field{flex:0 1 auto;margin:0}
.archive-view-toggle button[aria-pressed=true]{background:var(--brand);color:var(--on-brand)}
.archive-filter-status{margin:0}

.archive-map-grid{
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.archive-map-grid[data-view=list]{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.archive-map-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  width:100%;
  max-width:360px;
  padding:0;
  overflow:hidden;
}
.archive-map-grid[data-view=list] .archive-map-card{
  display:grid;
  grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  height:172px;
  min-height:172px;
  max-width:none;
}
.archive-map-preview{
  position:relative;
  display:grid;
  place-items:center;
  min-height:220px;
  aspect-ratio:16 / 10;
  padding:12px;
  overflow:hidden;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.archive-map-grid[data-view=list] .archive-map-preview{
  min-height:172px;
  height:172px;
  aspect-ratio:auto;
  border-right:1px solid var(--border);
  border-bottom:0;
}
.archive-map-preview:hover{background:var(--surface-3)}
.archive-map-size{
  position:absolute;
  right:8px;
  bottom:8px;
  padding:2px 7px;
  font-size:11.5px;
  line-height:1.5;
  color:#fff;
  background:rgba(0,0,0,.62);
  border-radius:var(--r-xs);
  pointer-events:none;
}
.archive-map-preview .col-art{
  width:100%;
  height:100%;
  max-height:360px;
  object-fit:contain;
  border:0;
  transition:transform var(--t) var(--ease);
}
.archive-map-preview:hover .col-art,
.archive-map-preview:focus-visible .col-art{transform:scale(1.04)}
.archive-map-grid[data-view=list] .archive-map-preview .col-art{
  width:100%;
  height:100%;
  max-height:100%;
}
.archive-map-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:20px 22px;
}
.archive-map-grid[data-view=list] .archive-map-body{
  min-height:0;
  padding:16px 18px;
}
.archive-map-body h2{margin-top:0}
.archive-map-author{margin:-4px 0 14px;color:var(--text-2);font-weight:600}
.archive-map-grid[data-view=list] .archive-map-author{margin-bottom:10px}
.archive-map-body .col-dl{grid-template-columns:auto minmax(0,1fr)}
.archive-map-footer{margin-top:auto;padding-top:8px}
.archive-map-grid[data-view=list] .archive-map-footer{margin-top:0;padding-top:0}
.archive-map-actions{padding-top:0}
.archive-action-icon{flex:0 0 auto}
.archive-tags{margin:0 0 20px}
.archive-map-grid[data-view=list] .archive-tags{margin-bottom:12px}
.archive-tag{
  padding:2px 6px;
  font-size:.68rem;
  line-height:1.1;
}
.archive-map-dialog{max-width:min(680px,92vw)}
.archive-dialog-preview{
  width:100%;
  max-height:360px;
  margin:0 0 18px;
  object-fit:contain;
  background:var(--surface-2);
}
.archive-dialog-details{grid-template-columns:auto minmax(0,1fr)}
.archive-dialog-details .archive-tags{margin:0}

.archive-empty{max-width:760px;margin-inline:auto;text-align:center}
.archive-empty h2{margin-top:0}
.archive-empty .col-btnrow{justify-content:center}

[data-map-card][hidden],[data-no-results][hidden]{display:none}

@media (max-width:760px){
  .archive-nav{order:3;width:100%}
  .archive-intro{padding-top:36px}
  .archive-map-preview{min-height:180px}
  .archive-map-grid[data-view=list] .archive-map-card{display:flex;height:auto}
  .archive-map-grid[data-view=list] .archive-map-preview{
    min-height:180px;
    aspect-ratio:16 / 10;
    border-right:0;
    border-bottom:1px solid var(--border);
  }
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) body.archive-background{
    background-image:
      linear-gradient(180deg,rgba(6,20,38,.54),rgba(6,20,38,.78) 46%,rgba(6,20,38,.88)),
      url("ship-leaving-europe.png");
  }
  :root:not([data-theme=light]) .archive-intro{
    text-shadow:0 1px 18px rgba(0,0,0,.9);
  }
}

:root[data-theme=dark] body.archive-background{
  background-image:
    linear-gradient(180deg,rgba(6,20,38,.54),rgba(6,20,38,.78) 46%,rgba(6,20,38,.88)),
    url("ship-leaving-europe.png");
}
:root[data-theme=dark] .archive-intro{text-shadow:0 1px 18px rgba(0,0,0,.9)}

@media print{
  body.archive-background{background:#fff}
  .archive-skip-link,
  .archive-filter-panel,.archive-map-actions{display:none}
  .archive-intro{padding:24px 0;text-shadow:none}
  .archive-map-card{break-inside:avoid}
}