/* ENDFIELD ARCHIVE — shell v2: slim sticky top bar, drawer nav, search palette.
   Loaded after style.css; reuses its palette variables and base classes. */

/* ---- top bar ---- */
.tb{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:8px 0;background:rgba(16,19,24,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);margin:0 -20px;padding-left:20px;padding-right:20px}
.tb:before{content:"";position:absolute;left:0;bottom:-1px;width:160px;height:2px;
  background:linear-gradient(90deg,var(--amber),transparent)}
.tb .logo{flex-direction:row;align-items:baseline;gap:8px}
.tb .lg-e{font-size:13px}
.tb .lg-c{font-size:9px}

.tb-search{display:flex;align-items:center;gap:8px;margin-left:auto;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);color:var(--dim);
  padding:6px 10px;font:inherit;font-size:12.5px;min-width:220px;max-width:340px;width:100%;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.tb-search:hover{border-color:var(--cyan);color:var(--ink)}
.tb-search svg{flex:none;color:var(--cyan)}
.tb-search span{flex:1;text-align:left;letter-spacing:.04em}
.tb-search kbd{font-family:var(--mono);font-size:10px;color:var(--faint);
  border:1px solid var(--line);padding:1px 5px;background:var(--bg)}

/* hamburger + drawer */
.tb-menu{position:relative}
.tb-menu summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;
  padding:9px 10px;border:1px solid var(--line);background:var(--bg2)}
.tb-menu summary::-webkit-details-marker{display:none}
.bm{display:block;width:16px;height:2px;background:var(--dim)}
.tb-menu[open] .bm{background:var(--amber)}
.tb-menu[open] summary{border-color:var(--amber)}
.drawer{position:absolute;right:0;top:calc(100% + 8px);width:232px;max-height:74vh;overflow:auto;
  background:var(--plate);border:1px solid var(--line);padding:8px;z-index:60;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:0 12px 30px rgba(0,0,0,.5)}
.drawer a{display:block;padding:7px 12px;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);border-left:2px solid transparent}
.drawer a:hover{color:var(--ink);background:var(--bg2);border-left-color:var(--cyan)}
.drawer a.on{color:var(--amber2);border-left-color:var(--amber);background:rgba(245,166,35,.07)}
.dw-h{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.22em;
  text-transform:uppercase;margin:12px 8px 4px}
.dw-h:first-child{margin-top:2px}

/* notice: quiet single line above the footer (moved out of the header zone) */
.notice:empty{display:none}

/* ---- search palette ---- */
.spb[hidden]{display:none}
.spb{position:fixed;inset:0;z-index:100;background:rgba(8,10,13,.7);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 16px}
.sp{width:min(640px,100%);background:var(--plate);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.sp-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--cyan)}
.sp-row input{flex:1;min-width:0;background:transparent;border:none;color:var(--ink);
  font-size:15px;padding:2px 0}
.sp-row input:focus{outline:none}
.sp-esc{font-family:var(--mono);font-size:10px;color:var(--faint);border:1px solid var(--line);padding:2px 6px}
.sp-results{max-height:46vh;overflow:auto;padding:6px}
.sp-r{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;color:var(--dim);
  border-left:2px solid transparent}
.sp-r .sp-n{color:var(--ink);font-weight:600;font-size:13.5px}
.sp-r .sp-x{font-size:11px;color:var(--faint);flex:1;text-align:right;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sp-r .badge{flex:none;font-size:10px;padding:1px 7px}
.sp-r.sel{background:rgba(47,197,201,.09);border-left-color:var(--cyan)}
.sp-r.sel .sp-n{color:var(--cyan2)}
.sp-r mark{background:rgba(245,166,35,.25);color:var(--amber2)}
.sp-empty{padding:18px 14px;color:var(--faint);font-size:13px}
.sp-hint{padding:8px 14px;border-top:1px solid var(--line);color:var(--faint);font-size:11px}
.sp-hint b{color:var(--dim);font-family:var(--mono);font-weight:400}

/* ---- visual grids ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;margin-top:16px}
.gcard{position:relative;display:block;color:var(--ink);background:linear-gradient(180deg,var(--plate),var(--bg2));
  border:1px solid var(--line);border-top:3px solid var(--ec,#888);padding:12px 12px 10px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:transform .12s,border-color .12s}
.gcard:hover{transform:translateY(-2px);border-top-color:var(--amber)}
.gc-band{position:absolute;right:0;top:0;width:44px;height:44px;opacity:.5;
  background:radial-gradient(circle at 100% 0,var(--ec,#888),transparent 70%)}
.gc-name{font-weight:700;font-size:14.5px;margin:2px 0 5px;position:relative}
.gc-name small{display:block;font-weight:400;color:var(--faint);font-size:10.5px}
.gc-sub{display:flex;gap:4px;flex-wrap:wrap;position:relative}
.gc-meta{margin-top:8px;display:flex;gap:10px;font-family:var(--mono);font-size:11px;
  color:var(--dim);position:relative}
.gc-meta .svgn{color:var(--amber2)}

/* filters row */
.frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.frow input{min-width:200px}
.chip{cursor:pointer;user-select:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--line);background:var(--bg2);color:var(--dim)}
.chip:hover{color:var(--ink);border-color:var(--cyan)}
.chip.on{color:var(--amber2);border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.08)}

/* related block */
.rel{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rel a.u-chip:hover{color:var(--cyan2);border-color:var(--cyan)}
.rel .rl{font-size:11px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;margin-right:2px}

/* progressive list loading */
.more-btn{display:block;margin:14px auto 0;background:var(--bg2);border:1px solid var(--line);
  color:var(--cyan);font:inherit;font-size:12.5px;letter-spacing:.1em;padding:9px 26px;cursor:pointer;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.more-btn:hover{border-color:var(--cyan);color:var(--cyan2)}
.more-btn[disabled]{color:var(--faint);cursor:default}
tr:target td{background:rgba(245,166,35,.09)}

@media(max-width:720px){
  .tb{padding-left:14px;padding-right:14px;margin:0 -14px}
  .tb-search{min-width:0;max-width:none}
  .tb-search span{display:none}
  .frame{padding:0 14px 48px}
}

/* stats numbers: SVG pixel digits scale with their context (tiles/strip set size) */

/* ---- visual gate R1: meta rows & stat tables clipped at right edge ---- */
.gc-meta{flex-wrap:wrap;row-gap:3px}
.panel{overflow-x:auto}
.stat-t td,.stat-t th{white-space:nowrap}

/* ---- visual gate R2: mobile top bar stays on one line ---- */
@media(max-width:860px){
  .tb{flex-wrap:nowrap}
  .tb-search{min-width:0;width:auto;flex:1 1 auto}
  .tb-search kbd{display:none}
  .tb .lg-c{display:none}
}

/* ---- visual gate R3: drawer as fixed dropdown (no clipping) ---- */
.drawer{position:fixed;top:60px;right:12px;width:250px;left:auto;
  box-shadow:0 18px 44px rgba(0,0,0,.65)}
@media(max-width:720px){
  .drawer{left:12px;right:12px;width:auto}
}

/* gate R1 follow-up: fit the 8-col per-level stat table without h-scroll */
.stat-t{font-size:13px}
.stat-t td,.stat-t th{padding:5px 6px}
.stat-t td{font-family:var(--mono);font-size:13px}

/* gate R1 follow-up 2: cap detail grid at 2 cols so stat table fits */
.cd-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

/* wide tables scroll inside their container, never stretch the page */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}