/* ============ 图片宫格的「查看 + 编辑」浮层样式（T18 优化③，派总 2026-10-26 第 3 条）============
   由 static/js/img-grid.js 动态生成，模板里没有这些类名，所以 audit_css.py 扫不到 ——
   改了类名要两边手工对（JS 里的 'ymw-ig-xxx' ↔ 这里的 .ymw-ig-xxx）。

   为什么单独一份文件：这套浮层**两端长得一样、行为也一样**（手机端上传宫格 + 两端详情页
   点图浏览都走它），写成 m.css / app.css 两份必然分家。所以和 share.css 一样
   由 templates/base.html 与 templates/m/base.html **各引一次**，并登记进
   audit_css.py 的 SHARED_CSS —— 只被一端引的样式千万不要放这里。
   ⚠️ 令牌只写在自己的选择器上、不开 :root：手机/网页两份 :root 必须逐字相同
      （audit_mobile_tokens.py），这里一律用 var(--x, 兜底值)。 */
html.ymw-ig-on { overflow: hidden; }
.ymw-ig { position: fixed; inset: 0; z-index: var(--z-lightbox, 300); display: flex; flex-direction: column;
  background: rgba(8, 10, 12, .94); color: #fff;
  /* T49：全站页面都留了顶部安全区（m.css 的 --safe-t），唯独这层浮层没有 ——
     viewport-fit=cover 下刘海屏/全屏 WebView 里浮层内容正好钻进状态栏被裁掉。 */
  padding-top: var(--safe-t, env(safe-area-inset-top, 0px));
  --ig-bar: 52px; --ig-gap: 10px;
  transform: translateY(var(--ig-dy, 0px)); opacity: calc(1 - var(--ig-fade, 0));
  transition: transform var(--dur-2, 180ms) var(--ease, ease), opacity var(--dur-2, 180ms) var(--ease, ease); }
/* T62：上面那条 transition 原来是**死的** —— 开合只切 hidden（display:none ↔ flex），
   display 变化没有可插值的起点状态，transition 不跑；--ig-dy / --ig-fade 只有
   「下滑退出」拖拽时才被 JS 赋值。实测点开 50ms 与 650ms 的 opacity 都是 1（硬切）。
   现在：进场用 keyframes（display 变化**会**跑 animation，口径同 m.css 的 .mv-hold），
   退场由 app.js 的 ymwSheetHide() 加 .is-closing 播完再 hidden。
   拖拽跟手那条 transition 保留不动 —— 它才是 --ig-dy / --ig-fade 的真正消费者。 */
.ymw-ig:not([hidden]) { animation: ymwIgIn var(--dur-3, 260ms) var(--ease, ease-out); }
.ymw-ig.is-closing { animation: ymwIgOut var(--dur-2, 180ms) var(--ease-in-out, ease) forwards; }
@keyframes ymwIgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ymwIgOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ymw-ig:not([hidden]), .ymw-ig.is-closing { animation: none; }
  .ymw-ig { transition: none; }
}
.ymw-ig-view, .ymw-ig-edit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ymw-ig-stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center;
  overflow: hidden; touch-action: none; padding: 8px; }
.ymw-ig-img { max-width: 100%; max-height: 100%; object-fit: contain;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  will-change: transform; }
.ymw-ig-pager { margin: 0; padding: 2px 0 6px; text-align: center;
  font-size: 12px; color: rgba(255, 255, 255, .72); min-height: 20px; }
.ymw-ig-pager:empty { padding: 0; }
.ymw-ig-bar { display: flex; align-items: center; justify-content: center; gap: 22px;
  min-height: var(--ig-bar); padding: 6px 16px calc(6px + var(--safe-b, 0px)); }
.ymw-ig-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 52px; padding: 6px 8px; border: 0; border-radius: 12px;
  background: none; color: rgba(255, 255, 255, .92); font: inherit; font-size: 11.5px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ymw-ig-btn .ic { width: 22px; height: 22px; }
.ymw-ig-btn .flip { transform: scaleX(-1); }
.ymw-ig-btn:active { background: rgba(255, 255, 255, .14); }
.ymw-ig-btn.off { opacity: .3; }
.ymw-ig-btn.on { background: var(--brand, #00bda6); color: #fff; }
/* 编辑态：画布按图片比例居中；工具条两行换行（T49：九件一行 390px 实量 500px 放不下，
   原来横滑把撤销/前进整排藏出屏外），创作类一行、变换/历史一行 */
.ymw-ig-canvaswrap { flex: 1 1 auto; min-height: 0; display: grid; place-items: center;
  overflow: hidden; padding: 8px; }
.ymw-ig-canvas { max-width: 100%; max-height: 100%; touch-action: none;
  background: #000; border-radius: 6px; }
.ymw-ig-tools { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: 0 4px; padding: 2px 8px 4px; }
.ymw-ig-tbreak { flex-basis: 100%; height: 0; }
.ymw-ig-sub { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px;
  background: rgba(255, 255, 255, .07); border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ymw-ig-emoji { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ymw-ig-cell { border: 0; background: none; color: inherit; font-size: 22px; line-height: 1;
  padding: 4px 0; cursor: pointer; }
.ymw-ig-cell:active { background: rgba(255, 255, 255, .16); border-radius: 8px; }
.ymw-ig-text { width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 10px;
  background: rgba(0, 0, 0, .35); color: #fff; font-size: 14px; }
.ymw-ig-colors { display: flex; gap: 8px; }
.ymw-ig-sw { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5);
  cursor: pointer; padding: 0; }
.ymw-ig-colors.picked .ymw-ig-sw { opacity: .55; }
.ymw-ig-size { width: 100%; accent-color: var(--brand, #00bda6); }

/* ---- 上传未提交态的宫格本体（网页版三个上传页用它）----
   手机端四处宫格各有自己的瓦片类（.pcn-prev / .pub-prev / .ed-tile / .pcp-cmt-imgcell），
   不动它们；这份只服务「文件框 + 预览」形态的网页版页面，由 img-grid.js 的 bindInput 生成。
   类名同样不在模板里（JS 生成），改名字要跟 img-grid.js 里的 sel / tile / skipTap 一起改。 */
.ymw-ig-grid { display: grid; grid-template-columns: repeat(3, 96px); gap: 10px; margin: 10px 0 0; }
.ymw-ig-tile { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
  background: var(--surface-2, #f2f3f5); box-shadow: var(--sh-1, 0 1px 3px rgba(0, 0, 0, .08));
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.ymw-ig-tile img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ymw-ig-tile.is-drag { cursor: grabbing; opacity: .55; }
.ymw-ig-tile.is-over { outline: 2px solid var(--brand, #00bda6); outline-offset: 1px; }
.ymw-ig-tile-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; font: inherit; font-size: 15px; line-height: 1;
  cursor: pointer; }