/* Archive workspace */
:root{
  --paper:#eef2f7;
  --paper-2:#f5f7fb;
  --line:#d2deeb;
  --line-soft:#e0e7f0;
  --dim:#526987;
  --rail:218px;
  --hdr:64px;
  --archive-gap:clamp(15px,2.1vw,34px);
}
[data-theme="dark"]{
  --paper:#0a111f;
  --paper-2:#0e1828;
  --card:#121d30;
  --line:#263953;
  --line-soft:#213049;
  --dim:#a0b2ce;
}
body{grid-template-columns:var(--rail) minmax(0,1fr);grid-template-rows:var(--hdr) minmax(0,1fr)}
body::before{background-size:40px 40px}
.topbar,[data-theme="dark"] .topbar{
  gap:10px;padding-inline:var(--archive-gap);
  background:linear-gradient(110deg,#111f39,#091427 70%);
}
.topbar::after{display:none}
.brand{gap:9px;margin-inline-end:14px}
.brand-txt b{letter-spacing:.14em}
.brand-txt span{letter-spacing:.13em}
.topbar .module-nav{display:flex;gap:4px;margin:0;padding:0;border:0}
.topbar .module-nav button{
  min-height:38px;padding:5px 9px;color:#bccde7;
  background:transparent;border:1px solid transparent;border-radius:6px;white-space:nowrap;
}
.topbar .module-nav button:hover{background:#1b2d49;color:#fff}
.topbar .module-nav button[aria-current="page"]{
  color:#fff;background:#1a3153;border-color:#365886;box-shadow:inset 0 -2px #88b9ff;
}
.topbar .module-icon{
  width:20px;height:20px;flex:none;background:#274265;border-color:#476484;color:#d9e8ff;
}
.topbar .module-icon svg{width:16px;height:16px}
.topbar #btnNews .module-icon{color:#ffe2aa;background:#453927;border-color:#796344}
.topbar #btnMagic .module-icon{color:#e9d7ff;background:#3a2d54;border-color:#695388}
.rail,[data-theme="dark"] .rail{padding:24px 14px 18px;background:var(--paper-2)}
.archive-filters{display:grid;gap:24px}
.rail-sec-h{margin:0 0 9px;font-size:12px;letter-spacing:.09em;color:var(--ink-3)}
.grade-list{gap:4px}
.grade-item{min-height:39px;border-radius:6px}
.chip{border-radius:5px}
.chip[aria-pressed="true"],[data-theme="dark"] .chip[aria-pressed="true"]{
  color:#fff;background:var(--blue);border-color:var(--blue-hi);
}
.filter-toggle{display:none}
.stage{padding-inline:var(--archive-gap);scrollbar-gutter:stable}
.module-open .rail{display:none}
.module-open .stage{grid-column:1/-1}
.archive-module{padding-top:var(--archive-gap);max-width:1430px}
.archive-header{
  isolation:isolate;position:relative;overflow:hidden;min-height:178px;
  align-items:flex-start;padding:24px clamp(15px,3vw,34px);
  border:1px solid #335375;border-radius:11px;
  background:radial-gradient(ellipse at 82% 45%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 49%),
    linear-gradient(105deg,#111e35,#0d172a 72%);
  color:#f0f5ff;
}
.archive-header h1{font-size:clamp(25px,3vw,42px);letter-spacing:.015em}
.archive-heading,.archive-header .btn{position:relative;z-index:1}
.archive-header .btn{height:38px}
.archive-overview{display:flex;gap:24px;margin-top:15px}
.archive-overview div{display:flex;align-items:baseline;gap:7px}
.archive-overview b{font:700 22px var(--mono);color:#fff}
.archive-overview span{font-size:12px;color:#c2d3ed}
.archive-heading .stat-bar{width:min(190px,100%);height:4px;margin-top:9px;background:#ffffff24}
.archive-emblem{
  position:absolute;right:clamp(100px,18%,270px);top:50%;translate:0 -50%;
  display:grid;place-items:center;width:146px;aspect-ratio:1;color:#cfe0ff9c;pointer-events:none;
}
.archive-emblem i{position:absolute;inset:0;border:1px dashed #b0c9ff50;border-radius:50%}
.archive-emblem i:nth-child(2){inset:12px;border-style:solid}
.archive-emblem i:nth-child(3){inset:23px;border-style:dotted}
.archive-emblem .archive-glyph{display:block;width:86px;height:86px;overflow:visible}
.archive-glyph [data-glyph]{display:none}
.archive-module[data-grade="all"] .archive-glyph [data-glyph="all"],
.archive-module[data-grade="alpha"] .archive-glyph [data-glyph="alpha"],
.archive-module[data-grade="beta"] .archive-glyph [data-glyph="beta"],
.archive-module[data-grade="gamma"] .archive-glyph [data-glyph="gamma"],
.archive-module[data-grade="delta"] .archive-glyph [data-glyph="delta"],
.archive-module[data-grade="omega"] .archive-glyph [data-glyph="omega"]{display:inline}
#archiveModule .toolbar{padding:13px 0;background:var(--paper);border-bottom:1px solid var(--line);margin-bottom:9px}
#archiveModule .toolbar .search{max-width:none}
#archiveModule .search input,#archiveModule .sort{height:40px;border-radius:6px}
#archiveModule .search input{padding-inline-end:35px}
#archiveModule .view-switch{border-radius:6px}
#archiveModule .view-switch button{min-height:32px}
.result-line{font-size:12px;letter-spacing:.02em;color:var(--ink-3);margin-block:12px}
#archiveModule .grid:not(.is-list){grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr));gap:13px}

/* Grade motifs */
[data-grade]{--accent:#77a8ed}
[data-grade="alpha"]{--accent:var(--alpha);--grade-ink:var(--alpha-fg);--motif:radial-gradient(circle,currentColor 1px,transparent 1.5px);--motif-size:8px 8px}
[data-grade="beta"]{--accent:var(--beta);--grade-ink:var(--beta-fg);--motif:repeating-linear-gradient(0deg,currentColor 0 1px,transparent 1px 6px);--motif-size:auto}
[data-grade="gamma"]{--accent:var(--gamma);--grade-ink:var(--gamma-fg);--motif:repeating-linear-gradient(135deg,currentColor 0 2px,transparent 2px 8px);--motif-size:auto}
[data-grade="delta"]{--accent:var(--delta);--grade-ink:var(--delta-fg);--motif:repeating-conic-gradient(from 45deg,currentColor 0deg 25deg,transparent 25deg 90deg);--motif-size:11px 11px}
[data-grade="omega"]{--accent:var(--omega);--grade-ink:var(--omega-fg);--motif:repeating-linear-gradient(135deg,currentColor 0 4px,transparent 4px 6px,currentColor 6px 7px,transparent 7px 13px);--motif-size:auto}
#archiveModule .card{
  isolation:isolate;animation:none;display:flex;flex-direction:column;
  min-height:184px;padding:14px 14px 11px 17px;border-radius:8px;
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
  background:linear-gradient(126deg,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card) 55%);
}
#archiveModule .card[data-alert]{
  border-color:color-mix(in srgb,var(--status-edge) 73%,var(--line));
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 11%,var(--card)),var(--card) 52%,color-mix(in srgb,var(--status-paper) 60%,var(--card)));
}
[data-alert="contained"]{--status-ink:#176349;--status-edge:#398167;--status-paper:#dcf4e9}
[data-theme="dark"] [data-alert="contained"]{--status-ink:#a1e2c8;--status-paper:#16392f}
.status-icon{display:inline-block;width:14px;height:14px;vertical-align:middle}
.chip[data-alert]{display:inline-flex;align-items:center;gap:4px}
.chip[data-alert][aria-pressed="false"] .status-icon{color:var(--status-ink)}
.card-status[data-alert="contained"],.card-status[data-alert="watch"]{border-radius:999px}
.card-status[data-alert="lockdown"]{border:3px double var(--status-edge);border-radius:3px;padding-block:1px}
.card-status[data-alert="pending"]{border-style:dashed;border-radius:1px}
.card-status[data-alert="inactive"]{border-radius:1px 7px;background:linear-gradient(135deg,var(--status-paper) 82%,var(--status-edge) 83%)}
.card-status[data-alert="missing"]{border-style:dotted;border-radius:8px 2px 8px 2px}
.status-editor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.status-editor .card-status{white-space:nowrap}
#archiveModule .card[data-alert="watch"]::after{height:6px}
#archiveModule .card[data-alert="lockdown"]::after{height:6px}
#archiveModule .card[data-alert="pending"]::after{height:5px;left:auto;right:9px;top:0;width:36%}
#archiveModule .card[data-alert="inactive"]::after{height:2px;top:auto;bottom:0}
#archiveModule .card[data-alert="missing"]::after{height:3px;width:55%}
#archiveModule .card::before{background:var(--accent);width:3px}
#archiveModule .card:hover{border-color:var(--accent)}
#archiveModule .card[data-alert]:hover{border-color:var(--status-edge)}
#archiveModule .card-top{margin-bottom:10px;gap:6px;flex-wrap:wrap}
#archiveModule .badge,#archiveModule .card-code{font-size:11px}
#archiveModule .badge i{display:none}
#archiveModule .card-status{font-size:10px;white-space:normal}
.card-grade-emblem{
  position:relative;isolation:isolate;display:grid;place-items:center;
  width:32px;height:32px;flex:none;border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line));
  border-radius:7px;background:var(--card);color:var(--grade-ink);font:700 20px/1 var(--serif);
}
.card-grade-emblem::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--motif);background-size:var(--motif-size);opacity:.19;
}
[data-grade="alpha"] .card-grade-emblem{border-radius:50%}
[data-grade="gamma"] .card-grade-emblem{border-radius:2px 8px}
[data-grade="delta"] .card-grade-emblem{border-radius:8px 2px}
[data-grade="omega"] .card-grade-emblem{border-style:double;border-width:3px;border-radius:4px}
#archiveModule .card-name{font-size:20px;overflow-wrap:anywhere}
#archiveModule .card-nature{min-height:0;margin:0 0 10px;overflow-wrap:anywhere}
#archiveModule .card-foot{margin-top:auto;padding-top:8px;flex-wrap:wrap;gap:5px}
#archiveModule .mini-lvl{color:var(--grade-ink);flex:0 1 auto}
#archiveModule .card-foot .mini-who{max-width:100%;margin-inline-start:auto}
#archiveModule .is-list .card{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr) minmax(0,1.7fr);
  gap:10px;min-height:53px;padding-block:8px;
}
#archiveModule .is-list .card-top,#archiveModule .is-list .card-nature{margin:0}
#archiveModule .is-list .card-name{font-size:16px}
#drawer[data-grade] .drawer-head{
  border-inline-start:4px solid var(--accent);
  background:linear-gradient(115deg,#10213e,color-mix(in srgb,var(--accent) 23%,#10192d));
}
#drawer[data-grade] .drawer-head::after{
  color:var(--accent);background:var(--motif);background-size:var(--motif-size);opacity:.35;
}
#drawer .drawer-body .field-v{line-height:1.75}

/* Motion */
@media(prefers-reduced-motion:no-preference){
  .stage>section:not([hidden]){animation:archive-reveal .28s ease-out both}
  #archiveModule .card.card-enter{animation:archive-reveal .37s ease-out var(--enter-delay) both}
  .archive-emblem i:first-child{animation:archive-orbit 50s linear infinite}
  .topbar .module-nav button,.view-switch button{transition:background .18s,color .18s,border-color .18s}
}
@keyframes archive-reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes archive-orbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .pill .dot,.stage>section,#archiveModule .card{animation:none!important}
  #archiveModule .card,.topbar .module-nav button{transition:none!important}
}
@media(max-width:980px){
  body{--hdr:102px;grid-template-columns:1fr;grid-template-rows:var(--hdr) auto minmax(0,1fr)}
  .topbar,[data-theme="dark"] .topbar{
    display:grid;grid-template-columns:minmax(0,1fr) repeat(3,auto);grid-template-rows:52px 41px;
    gap:0 6px;padding-inline:var(--archive-gap);
  }
  .topbar .brand{grid-area:1/1}
  .topbar .module-nav{grid-area:2/1/3/-1}
  .topbar .spacer,.topbar .pill{display:none}
  .topbar #btnOnline{grid-area:1/2}
  .topbar #btnTheme{grid-area:1/3}
  .topbar #btnMore{grid-area:1/4}
  .rail,[data-theme="dark"] .rail{
    grid-area:2/1;display:block;padding:8px var(--archive-gap);max-height:35dvh;
    overflow:auto;border-right:0;border-bottom:1px solid var(--line);
  }
  .stage,.module-open .stage{grid-area:3/1}
  .filter-toggle{display:inline-flex;height:32px}
  .archive-filters{display:none;padding-top:9px;gap:10px}
  .archive-filters.filters-expanded{display:grid}
  .grade-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail-foot{display:none}
  .archive-emblem{right:24px;opacity:.35}
}
@media(max-width:540px){
  .topbar .module-nav button{flex:1;justify-content:center;min-width:0}
  .topbar .btn{padding-inline:8px}
  .archive-header{flex-wrap:wrap;min-height:145px;padding:14px}
  .archive-emblem{right:7px}
  .archive-overview{gap:14px;margin-top:8px}
  .archive-overview b{font-size:18px}
  .archive-header .btn{height:32px}
  #archiveModule .toolbar{gap:7px;padding-block:8px}
  #archiveModule .is-list .card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
@media print{
  .archive-header{min-height:0;background:white;color:#111;border:0}
  .archive-overview,.archive-emblem,.stat-bar,.archive-header .btn{display:none}
  #archiveModule .card{background:white;box-shadow:none}
  #archiveModule .grid:not(.is-list){grid-template-columns:repeat(2,minmax(0,1fr))}
}
