/* ==========================================================================
   图片反推（/reverse/）

   跟工具箱同一套视觉语言（暖中性纸面 + rem 体系，根字号 62.5%），
   但**不是**工具箱的一部分：工具箱承诺「文件不上传」，这个页面会上传并保存图片。
   所以它有自己的样式表、自己的路径，页面顶部也有独立的告知条。

   两条沿用工具箱的约定：
   · 不出现任何写死的颜色值，一律走站点 token
   · accent 上的文字用 var(--base) 而不是白色——accent 在两套主题间翻转
   ========================================================================== */

.rev {
  --rev-fill: color-mix(in srgb, var(--t-medium) 12%, transparent);
  --rev-hover: color-mix(in srgb, var(--t-medium) 7%, transparent);
  --rev-line: color-mix(in srgb, var(--t-medium) 24%, transparent);
  --rev-radius: 1.2rem;

  position: relative;
  /* 单栏时 76rem 就够，两栏要宽得多，否则右边的提示词被挤成细长条 */
  max-width: 124rem;
  margin: 0 auto;
  padding: 0 2rem 8rem;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--t-bright);
}

/* —— 两栏 —— */

.rev__cols {
  display: grid;
  /* 左栏定宽：投料口不需要跟着变宽，多出来的空间全给结果 */
  grid-template-columns: 34rem minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.rev__side {
  /* 批量传几十张时右边会很长，投料口跟着滚走就没法继续加图了。
     top 要避开站点的固定头部。 */
  position: sticky;
  top: 10rem;
}


/* 模板给全局 p 设了 font-size，会穿透进任何组件（图库那次踩过）。
   组件内的文字块显式钉回 inherit，否则 p 和 span 会差出两号字。 */
.rev p {
  font-size: inherit;
  line-height: inherit;
}

/* 同一类渗漏的另一个变种，这次是 display：
   模板给 figure 设了 display，作者样式压过浏览器对 [hidden] 的默认 display:none，
   于是带 hidden 的 <figure> 照样显示——初次进页面就能看见一张破图。
   div 不受影响（实测 status/result 的 hidden 正常），所以只在 figure 上暴露。
   在组件根下把 [hidden] 重新钉死，别指望 UA 默认值。 */
.rev [hidden] {
  display: none !important;
}

.rev__head {
  /* 不铺满 124rem —— 正文一行太长读起来累，头部文案压在 76rem 内 */
  max-width: 76rem;
  padding: 4rem 0 2.4rem;
}

.rev__title {
  margin: 0 0 0.8rem;
  font-size: 3.2rem;
  line-height: 1.2;
}

.rev__lede {
  margin: 0 0 2rem;
  color: var(--t-medium);
}

/* 最小告知。刻意做小、不抢注意力，但保留在投料口正下方 ——
   访客真要找「我的图去哪了」时，第一眼看的就是这个位置。 */
.rev p.rev__fineprint {
  margin: 1rem 0 0;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--t-medium);
  opacity: 0.8;
}

/* 提示条（限流、离线等运行时消息）。 */
.rev__notice {
  margin: 0;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--rev-line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--rev-radius) var(--rev-radius) 0;
  background: var(--rev-hover);
  color: var(--t-medium);
}

.rev__notice strong {
  color: var(--t-bright);
}

/* —— 拖放区 —— */

.rev__stage {
  margin: 2.4rem 0;
}

.rev__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 24rem;
  padding: 3rem 2rem;
  border: 2px dashed var(--rev-line);
  border-radius: var(--rev-radius);
  background: var(--rev-hover);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.rev__drop:hover,
.rev__drop:focus-visible,
.rev__drop.is-over {
  border-color: var(--accent);
  background: var(--rev-fill);
  outline: none;
}

.rev__drop-icon svg {
  width: 4rem;
  height: 4rem;
  color: var(--t-medium);
}

.rev__drop-main {
  font-size: 1.6rem;
  color: var(--t-bright);
}

.rev__drop-sub {
  font-size: 1.3rem;
  color: var(--t-medium);
}

.rev__drop kbd {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--rev-line);
  border-radius: 0.4rem;
  background: var(--rev-fill);
  font-family: var(--_font-accent, monospace);
  font-size: 0.9em;
}

/* —— 操作条 —— */

/* 左栏窄，操作条改成纵向堆叠：横排三个按钮会挤成两行还对不齐 */
.rev__bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.2rem;
  margin: 1.6rem 0 1.2rem;
  padding: 1.2rem 1.6rem;
  border-radius: var(--rev-radius);
  background: var(--rev-fill);
}

.rev__bar-text {
  font-size: 1.35rem;
  color: var(--t-medium);
}

.rev__bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.rev__bar-actions .rev__btn {
  flex: 1 1 auto;
}

.rev__btn {
  padding: 0.6rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  /* accent 在两套主题间翻转，写死白色会在浅色主题下消失 */
  color: var(--base);
  font: inherit;
  font-size: 1.3rem;
  cursor: pointer;
  white-space: nowrap;
}

.rev__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.rev__btn--ghost {
  background: none;
  border: 1px solid var(--rev-line);
  color: var(--t-medium);
}

.rev__btn--ghost:hover {
  color: var(--t-bright);
  border-color: var(--t-medium);
}

.rev__btn--small {
  padding: 0.4rem 1.2rem;
  font-size: 1.2rem;
}

/* 行内提示条，复用告知条的外观但语气弱一些 */
.rev__notice--inline {
  margin: 0 0 1.6rem;
  font-size: 1.3rem;
}

/* —— 批量卡片 —— */

.rev__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* 右栏空着时给个占位，否则两栏布局下右边是一大片空白，
   看起来像页面没加载完 */
.rev p.rev__empty {
  margin: 0;
  padding: 6rem 2rem;
  border: 1px dashed var(--rev-line);
  border-radius: var(--rev-radius);
  text-align: center;
  font-size: 1.35rem;
  color: var(--t-medium);
}

/* 有卡片时占位自动让位，不用 JS 管 */
.rev__list:not(:empty) + .rev__empty {
  display: none;
}

.rev__card {
  display: flex;
  gap: 1.6rem;
  padding: 1.4rem;
  border: 1px solid var(--rev-line);
  border-radius: var(--rev-radius);
  background: var(--rev-hover);
}

.rev__card-thumb {
  flex: 0 0 auto;
  width: 9rem;
  height: 9rem;
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--rev-fill);
}

.rev__card-thumb img {
  width: 100%;
  height: 100%;
  /* cover 而不是 contain：一排缩略图尺寸统一才扫得快，
     反正原图随时能在结果里对照 */
  object-fit: cover;
  display: block;
}

.rev__card-body {
  flex: 1 1 auto;
  min-width: 0; /* 不加这条，长文件名会把 flex 子项撑破、溢出卡片 */
}

.rev__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
}

.rev__card-name {
  font-size: 1.35rem;
  color: var(--t-bright);
  overflow-wrap: anywhere;
}

.rev__card-state {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: var(--t-medium);
  white-space: nowrap;
}

/* 「在忙」和「出事了」必须一眼分得开——反推慢是常态，
   用同一种颜色会让正常的等待看起来像故障。 */
.rev__card-state.is-running,
.rev__card-state.is-uploading {
  color: var(--accent);
}

.rev__card-state.is-done {
  color: var(--t-bright);
}

.rev__card-state.is-failed {
  color: var(--t-bright);
  /* 失败信息可能是一整句话，这里不能 nowrap，否则会把卡片撑破 */
  white-space: normal;
  overflow-wrap: anywhere;
}

.rev p.rev__card-prompt {
  margin: 0 0 1rem;
  /* 选择器必须带 `p`：上面那条 `.rev p` 的特异性是 (0,1,1)，
     单写 `.rev__card-prompt` 只有 (0,1,0)，会被压掉、font-size 静默失效。
     （防样式渗漏的规则反过来渗漏进了自己的组件，实测才发现。） */
  font-size: 1.4rem;
  line-height: 1.75;
  color: var(--t-bright);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.rev__card-actions {
  display: flex;
  gap: 0.8rem;
}

/* 两栏塌成一栏。1000px 是按「左栏 34rem + 右栏至少能放下一行提示词」定的，
   再窄右边就只剩四五个字宽了。 */
@media (max-width: 1000px) {
  .rev__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .rev__side {
    /* 一栏时 sticky 会把投料口钉在屏幕上挡住结果，关掉 */
    position: static;
  }

  .rev__drop {
    min-height: 16rem;
  }

  /* 一栏时横排按钮放得下，恢复左右分置 */
  .rev__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .rev__bar-actions .rev__btn {
    flex: 0 0 auto;
  }

  .rev__empty {
    display: none;
  }
}

@media (max-width: 700px) {
  .rev {
    padding: 0 1.6rem 6rem;
  }

  .rev__title {
    font-size: 2.6rem;
  }

  /* 窄屏改成缩略图在上、文字在下，否则正文只剩几个字宽 */
  .rev__card {
    flex-direction: column;
  }

  .rev__card-thumb {
    width: 100%;
    height: 16rem;
  }

  .rev__bar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Turnstile 挂载点。Managed 模式多数时候无交互、不渲染任何东西，
   所以默认不留白；真弹出组件时才靠 :not(:empty) 撑开间距。 */
.rev__turnstile:not(:empty) {
  margin: 1.2rem 0 0;
}

/* 面包屑。跟站点其他内页同一层级感，但不引 toolbox.css —— 只为一行导航
   拉进整张表会把工具箱的卡片样式一起带进来。 */
.rev__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
  font-size: 1.25rem;
  color: var(--t-medium);
}

.rev__crumbs a {
  color: var(--t-medium);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.rev__crumbs a:hover {
  color: var(--t-bright);
  border-color: currentColor;
}

.rev__crumbs [aria-current="page"] {
  color: var(--t-bright);
}