/* ==========================================================================================
   screens/textures.css — 资源校验 (js/screens/textures.js) + its persistent badge (js/ui/textureBadge.js).
   The page is a full-screen overlay in the grammar of 统计数据 (screens/stats.css): top bar with 返回 and the run
   button, a note line, a summary strip, then the 缺失清单 grouped by 分类 with the file paths behind each group.
   The badge is the small icon that stays on every screen while a run is going (and after one left files behind).
   Sizes are design px ÷ 100 (theme.css root scale); text that must stay readable on phones uses max(.xxrem, N px).
   ========================================================================================== */

.tx {
  position: fixed; inset: 0; z-index: 55; /* like .st / .lo: above every screen (1) and the in-match banners (40),
                                             below the connection banner (60), modals (80), toasts and tooltips */
  display: flex; flex-direction: column;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  background: var(--bg-0);
  color: var(--text-hi);
  outline: none;
  animation: tx-in 200ms var(--ease-out) backwards;
  overscroll-behavior: contain;
}
@keyframes tx-in { from { opacity: 0; } }
.tx__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 82% 8%, rgba(78, 216, 175, .07), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(246, 163, 41, .05), transparent 60%),
    linear-gradient(rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
    linear-gradient(90deg, rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
    linear-gradient(180deg, #0f1312, #090b0a);
}
.tx-top, .tx-note, .tx-body { position: relative; }
/* the app screens behind the overlay do not need to animate */
.sp-textures-open .app-root > .screen { visibility: hidden; }

/* ---- top bar ----------------------------------------------------------------------------------------------------- */
.tx-top {
  flex: none; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: .2rem;
  height: max(1rem, 32px, calc(48px * var(--sp-ui, 1))); padding: 0 .36rem;
  background: linear-gradient(180deg, rgba(8, 10, 9, .95), rgba(10, 13, 12, .6));
  border-bottom: 1px solid var(--line);
}
.tx-top::after {
  content: ''; position: absolute; left: .36rem; right: .36rem; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
}
.tx-top__left { justify-self: start; display: flex; align-items: center; gap: .14rem; }
.tx-top__center { display: flex; flex-direction: column; align-items: center; gap: .02rem; min-width: 0; }
.tx-top__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
.tx-title { margin: 0; font-size: max(calc(.28 * var(--t)), 15px); font-weight: 900; letter-spacing: .16em; }

/* the note lines under the bar: what the run does, and where it stands right now */
.tx-note {
  flex: none; display: flex; align-items: center; gap: .08rem; margin: 0; padding: .07rem .36rem;
  font-size: max(calc(.15 * var(--t)), 10px); color: var(--text-lo);
  background: linear-gradient(90deg, rgba(78, 216, 175, .08), transparent 70%);
  border-bottom: 1px solid rgba(47, 58, 53, .6);
}
.tx-note .icon, .tx-note .spinner { width: max(.16rem, 11px); height: max(.16rem, 11px); color: var(--mint-500); flex: none; }
.tx-note--status { color: var(--text-hi); }
.tx-note.is-warn { color: var(--amber); background: linear-gradient(90deg, rgba(246, 163, 41, .12), transparent 70%); }
.tx-note.is-warn .icon { color: var(--amber); }

/* ---- body -------------------------------------------------------------------------------------------------------- */
.tx-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .18rem; padding: .24rem .36rem .5rem;
}
.tx-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .12rem; }
.tx-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: .02rem;
  padding: .12rem .16rem; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); border-radius: 2px;
}
.tx-stat__v { font-size: max(calc(.3 * var(--t)), 18px); font-weight: 900; line-height: 1.1; color: var(--text-hi); }
.tx-stat__k { font-size: max(calc(.14 * var(--t)), 10px); letter-spacing: .1em; color: var(--text-lo); }
.tx-stat--ok .tx-stat__v { color: var(--mint-500); }
.tx-stat--warn .tx-stat__v { color: var(--amber); }

.tx-empty {
  margin: .3rem 0; text-align: center; font-size: max(calc(.18 * var(--t)), 12px); color: var(--text-lo);
  display: flex; align-items: center; justify-content: center; gap: .1rem;
}
.tx-empty.is-ok { color: var(--mint-500); }

/* ---- 素材来源 (the asset-source picker: 本服务器 / 镜像 + 测速) ------------------------------------------------------ */
.tx-source { display: flex; flex-direction: column; gap: .06rem; }
.tx-source__row { display: flex; align-items: center; gap: .14rem; padding: .06rem .02rem; }
.tx-source__k { font-size: max(calc(.17 * var(--t)), 12px); color: var(--text-lo); }
.tx-source__sel {
  flex: 0 1 auto; min-width: 2.6rem; padding: .04rem .08rem;
  font: inherit; font-size: max(calc(.17 * var(--t)), 12px); color: var(--text-hi);
  /* the native popup paints before any of our styles land: `color-scheme` is what keeps its first frame dark (an
     opaque background of our own so the popup never shows through as white) */
  color-scheme: dark; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px;
}
/* the dropdown popup is drawn by the OS: without this its options are light-on-light (the convention every other
   select in the app follows — css/components.css .seatpick) */
.tx-source__sel option { background: var(--bg-2); color: var(--text-hi); }
.tx-source__ms { list-style: none; display: flex; flex-wrap: wrap; gap: .06rem .2rem; margin: 0; padding: .02rem; }
.tx-source__m { display: inline-flex; align-items: baseline; gap: .08rem; font-size: max(calc(.15 * var(--t)), 11px); color: var(--text-lo); }
.tx-source__m b { font-size: max(calc(.15 * var(--t)), 11px); color: var(--mint-500); }
.tx-source__m.is-dead, .tx-source__m.is-dead b { color: var(--amber); }

/* ---- 缺失清单: one row per 分类, the file paths behind a disclosure ------------------------------------------------- */
.tx-missing { display: flex; flex-direction: column; gap: .06rem; }
.tx-missing__head { display: flex; align-items: baseline; gap: .12rem; padding: .04rem .02rem; border-bottom: 1px solid var(--line); }
.tx-missing__label { display: inline-flex; align-items: center; gap: .1rem; font-size: max(calc(.18 * var(--t)), 12px); font-weight: 900; letter-spacing: .1em; }
.tx-missing__n { margin-left: auto; font-size: max(calc(.2 * var(--t)), 13px); font-weight: 900; color: var(--text-hi); }
.tx-missing__n.is-warn { color: var(--amber); }
.tx-group { border-bottom: 1px solid rgba(47, 58, 53, .45); }
.tx-group__head {
  display: grid; grid-template-columns: auto minmax(max-content, .5fr) minmax(0, 1fr) auto; align-items: center; gap: .14rem;
  width: 100%; padding: .1rem .02rem; font: inherit; font-size: max(calc(.17 * var(--t)), 12px); color: var(--text-hi);
  background: transparent; border: 0; cursor: pointer; text-align: left; touch-action: manipulation;
}
.tx-group__head:hover { background: rgba(78, 216, 175, .05); }
.tx-group__icon { width: max(.16rem, 11px); height: max(.16rem, 11px); color: var(--mint-500); }
.tx-group__name { font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.tx-group__bar { display: block; height: 3px; background: rgba(255, 255, 255, .06); }
.tx-group__bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint-700), var(--mint-500)); }
.tx-group__n { font-size: max(calc(.17 * var(--t)), 12px); font-weight: 900; color: var(--amber); }
.tx-files { list-style: none; margin: 0 0 .1rem; padding: 0 0 0 .3rem; max-height: 4.4rem; overflow-y: auto; overscroll-behavior: contain; }
.tx-file {
  padding: .02rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: max(calc(.13 * var(--t)), 10px); color: var(--text-lo); word-break: break-all;
}
.tx-file--rest { color: var(--amber); font-family: inherit; }
.tx-hint { margin: .06rem 0 0; font-size: max(calc(.14 * var(--t)), 10px); color: var(--text-lo); }
.tx-missing--failed .tx-missing__label { color: var(--amber); }

/* ---- the persistent badge (ui/textureBadge.js) ------------------------------------------------------------------- */
.txb {
  position: fixed; z-index: 30; right: calc(.3rem + var(--sa-r, 0px)); bottom: calc(.3rem + var(--sa-b, 0px));
  display: inline-flex; align-items: center; justify-content: center; gap: .08rem;
  min-width: max(.5rem, 32px, calc(34px * var(--sp-ui, 1))); height: max(.5rem, 32px, calc(34px * var(--sp-ui, 1))); padding: 0 .1rem;
  font: inherit; color: var(--text-lo); background: rgba(10, 13, 12, .82);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  opacity: .42; transition: opacity 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
  touch-action: manipulation;
}
.txb:hover { opacity: 1; color: var(--text-hi); }
.txb__icon, .txb__spin { width: max(.2rem, 14px); height: max(.2rem, 14px); flex: none; }
.txb__n { font-size: max(calc(.14 * var(--t)), 10px); font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.txb.is-run { opacity: 1; color: var(--text-hi); border-color: var(--mint-700); box-shadow: 0 0 0 1px rgba(78, 216, 175, .18); }
.txb.is-run .txb__spin, .txb.is-run .txb__icon { color: var(--mint-500); }
.txb.is-done { opacity: 1; color: var(--mint-500); border-color: var(--mint-700); }
.txb.is-warn { opacity: 1; color: var(--amber); border-color: rgba(246, 163, 41, .5); }
.txb.is-warn .txb__icon { color: var(--amber); }

/* ---- narrow screens ---------------------------------------------------------------------------------------------- */
@media (max-width: 720px), (max-height: 460px) {
  .tx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx-top { grid-template-columns: minmax(max-content, auto) minmax(0, 1fr) minmax(max-content, auto); }
  .tx-top__center .tx-title { font-size: max(calc(.22 * var(--t)), 13px); }
}
@media (max-width: 420px) {
  .tx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-group__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tx-group__bar { display: none; }
}