/* STATEMENT ARCHIVE — the twelve-month grid of originals, the budget and snapshot tiles, the document list and the
   viewer overlay (pages/archive.js, pages/archive-grid.js, pages/archive-view.js). Colours come from the shared
   variables in styles.css only; the page colour is mixed from existing page colours. */
:root{--c-archive:color-mix(in srgb,var(--c-calendar) 55%,var(--c-data))}
body[data-tab=archive]{--page:var(--c-archive);--page2:color-mix(in srgb,var(--c-calendar) 45%,var(--surface))}

/* ---------- notice, year bar ---------- */
.card.notice.blue{border-left:4px solid var(--blue)}
.arch-note{margin-bottom:var(--space-5)}
.arch-note .sub{margin-bottom:0}
.arch-note .small{margin:var(--space-3) 0 0}
.arch-bar{margin:0 0 var(--space-4);align-items:center}

/* ---------- a set of books: twelve tiles ---------- */
.arch-books{margin-bottom:var(--space-5)}
.arch-books h2{font-size:var(--text-lg);margin:0 0 var(--space-2)}
.arch-books .sub{margin-top:var(--space-1)}
.arch-year{display:inline-block;margin-left:var(--space-2);padding:2px 10px;border-radius:999px;font-size:var(--text-xs);
  font-weight:800;color:var(--muted);background:var(--tint-2);border:1px solid var(--line);vertical-align:middle}
.arch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.arch-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.arch-tile{
  position:relative;min-height:150px;display:flex;flex-direction:column;gap:6px;
  padding:var(--space-4);border-radius:var(--radius);border:1.5px solid var(--divider);
  background:var(--surface-2);color:var(--text);
}
.arch-tile h4{margin:0 0 2px;font-size:var(--text-base);font-weight:800;color:var(--navy)}
.arch-tile .chip{align-self:flex-start}
.arch-status{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.arch-tile p{margin:0}
.arch-tile .small{color:var(--muted);line-height:1.4}
.arch-tile.kept{background:linear-gradient(160deg,var(--white),var(--green-bg));border-color:var(--green-bd)}
.arch-tile.missing{background:linear-gradient(160deg,var(--white),var(--amber-bg));border-color:var(--amber-bd)}
.arch-tile.sample{background:linear-gradient(160deg,var(--white),var(--blue-bg));border-color:var(--blue-bd)}
.arch-tile.due{border-style:dashed}
.arch-kind{font-size:var(--text-xs);font-weight:700;color:var(--muted);margin-left:4px}
.arch-name{font-size:var(--text-sm);font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arch-pack{font-size:var(--text-xs);color:var(--muted)}
.arch-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding-top:var(--space-2)}
.arch-foot .small{color:var(--faint)}
.arch-up{cursor:pointer;display:inline-flex;align-items:center}
.arch-doc{padding:var(--space-2) 0;border-bottom:1px solid var(--divider);align-items:center}
.arch-doc:last-child{border-bottom:0}

/* ---------- the viewer overlay ---------- */
body.arch-open{overflow:hidden}
.arch-view{position:fixed;inset:0;z-index:80}
.arch-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--navy) 55%,transparent)}
.arch-panel{
  position:absolute;inset:3vh 4vw;display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1.5px solid var(--border);overflow:hidden;
}
.arch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--divider);background:var(--white)}
.arch-head h2{margin:0;font-size:var(--text-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.arch-head .small{margin:2px 0 0;color:var(--muted)}
.arch-actions{display:flex;gap:var(--space-2);flex-shrink:0}
.arch-actions a.btn-sm{text-decoration:none}
.arch-body{flex:1;min-height:0;overflow:auto;background:var(--bg);display:flex;flex-direction:column}
.arch-frame{flex:1;width:100%;height:100%;border:0;background:var(--white)}
.arch-pic{padding:var(--space-5);text-align:center}
.arch-pic img{max-width:100%;height:auto;border:1px solid var(--border);background:var(--white)}
.arch-wait,.arch-body>p{padding:var(--space-5)}
.arch-sheet{margin:var(--space-4);overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--white)}
.arch-sheet table{width:auto;min-width:100%}
.arch-sheet td{padding:4px 10px;border-bottom:1px solid var(--divider);border-right:1px solid var(--divider);white-space:nowrap;
  font-size:var(--text-xs);max-width:360px;overflow:hidden;text-overflow:ellipsis}
.arch-sheet tr:first-child td{font-weight:800;background:var(--surface-2);position:sticky;top:0}