/* ============================================================
   tool-kit.css · 工具中心卡片 + 工具模块外壳（wrapper shell）
   ------------------------------------------------------------
   布局风格参照「桑树小站」工具中心：
     · 工具卡片三行式：名称 / 引擎 / 描述
     · 工具外壳三层：顶栏(60) + 返回条(52) + 内容区(calc 剩余高度)
     · 第三方工具（JBrowse / SequenceServer）以 iframe 包裹，
       加载完成前用骨架屏占位

   颜色全部取自 design-tokens.css，本文件不硬编码色值
   （仅 #fff 用于深绿顶栏上的文字，属允许例外）
   ============================================================ */

/* 外壳两层高度：顶栏 60px（复用 --nav-h）+ 返回条 52px
   --shell-h 由 tool-kit.js 按实际顶栏高度写入，未写入时回退到 --nav-h */
:root {
  --backbar-h: 52px;
  --shell-h: var(--nav-h);
}

/* ---------- 1. 工具中心：网格与卡片 ----------
   布局：.tool-grid 只作纵向容器，行由 .tool-row 显式声明列数。
   这样「第一行单独一张满宽卡 / 后面按 4 列」才有确定语义，
   而 auto-fill 流式网格无法表达跨行差异。
   列数用固定 repeat(N, minmax(0, 1fr)) 而非 auto-fit：
   行内卡片数恒定（4 张就 4 列），窄屏统一降级为单列。   */
.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

/* 行容器：默认 4 列 */
.tool-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
/* 满宽行：单张卡拉满整行 */
.tool-row--full { grid-template-columns: minmax(0, 1fr); }
/* 半宽行：2 列，但限制整行宽度，避免两张卡被拉成超宽 */
.tool-row--half {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc(50% - var(--space-5) / 2);
}

.tool-card {
  /* 新增：待上线徽标用绝对定位，卡片需成为定位参考。
     其余声明保持原样，不改变已有卡片外观。 */
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-bright);
  text-decoration: none;
}
.tool-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 第一行：工具名称（可挂 badge） */
.tool-name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
}
.tool-name .badge { margin-left: var(--space-3); vertical-align: 2px; }

/* 第二行：底层引擎 / 服务（斜体胶囊，与名称区分） */
.tool-engine {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-style: italic;
  letter-spacing: 0.3px;
  color: var(--tool-accent-d);
  background: var(--tool-accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* 第三行：一句话说明 */
.tool-desc {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--muted);
}

/* 卡片底部：进入动作提示 */
.tool-cta {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}
.tool-card:hover .tool-cta { text-decoration: underline; }

/* 未开放工具：不可点、弱化
   关于 opacity：入场动画 html.js .reveal.is-in{opacity:1}（style.css:1102）
   特异度为 (0,2,1)，高于 .tool-card--soon 的 (0,1,0)，会覆盖卡片自身的
   opacity。若在卡片上设 opacity 就永远生效不了（旧代码即有此隐性问题）。
   这里改为「不透明卡片 + 内部内容降透明度」，绕开与 .reveal 的特异度争夺，
   视觉等效且不受动画状态影响。 */
.tool-card--soon {
  cursor: not-allowed;
}
.tool-card--soon > * {
  opacity: 0.72;
}
.tool-card--soon:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--card-border);
}
.tool-card--soon .tool-cta { color: var(--muted); }
/* 徽标自身不参与降透明，保持清晰可读 */
.tool-card--soon > .tool-soon { opacity: 1; }

/* 待调试工具：仍可点击查阅，但标注「调试中」
   与 --soon 的差异只在于「能用」：保留 pointer 光标与常规 hover 位移/阴影/描边
   （不覆盖 .tool-card:hover），内容仅极轻微降透明（0.92）以作区分。 */
.tool-card--debug {
  cursor: pointer;
}
.tool-card--debug > * {
  opacity: 0.92;
}
/* 徽标自身保持完全不透明，清晰可读 */
.tool-card--debug > .tool-soon { opacity: 1; }

/* 工具行之间的分割线：宽度与工具网格对齐，颜色取令牌，不硬编码色值。
   用 <hr> 但显式重置 border/background，避免被浏览器默认 hr 样式影响。
   上下留白用 --space-* 变量；仅作用于自身，不影响各行间距。 */
.tool-divider {
  width: 100%;
  height: 1px;
  margin: var(--space-6) 0 0;
  border: 0;
  background: var(--card-border);
}

/* 待上线徽标：卡片顶部右侧的胶囊，真实 DOM 文本（→ 可被 i18n 词典翻译）
   颜色全部取自 design-tokens.css，无硬编码色值。
   布局：不采用 absolute 叠在标题上（长标题会被压住，如 Hormone Network），
   而是作为 flex 子项占据卡片顶部一整行 —— .tool-card 为 column flex，
   故 order:-1 置顶 + align-self:flex-end 靠右，任何卡宽下都不会与标题重叠。 */
.tool-soon {
  order: -1;
  align-self: flex-end;
  display: inline-block;
  margin-bottom: calc(var(--space-2) * -1);
  padding: var(--badge-padding);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--badge-radius);
  pointer-events: none;
}

/* ---------- 2. 工具外壳：深绿顶栏 ---------- */
.ux-shell-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: #fff;
  box-shadow: var(--nav-shadow);
}
.ux-shell-header__inner {
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.ux-shell-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.ux-shell-brand:hover { color: #fff; text-decoration: none; }

.ux-shell-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
  min-width: 0;
}
.ux-shell-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  padding: var(--space-2) 0;
  white-space: nowrap;
}
.ux-shell-nav a:hover { color: #fff; text-decoration: none; }
.ux-shell-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-fast) var(--ease-out);
}
.ux-shell-nav a:hover::after { transform: scaleX(1); }
.ux-shell-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring-on-dark); border-radius: var(--radius-sm); }

.ux-shell-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.ux-shell-breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.ux-shell-breadcrumb a:hover { color: #fff; }
.ux-shell-sep { opacity: 0.6; }
.ux-shell-crumb-current { color: #fff; font-weight: var(--weight-semibold); }

/* ---------- 3. 返回条（顶栏下方，带返回主页链接） ---------- */
.ux-backbar {
  position: sticky;
  top: var(--shell-h, var(--nav-h));
  z-index: var(--z-backbar);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ux-backbar__inner {
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.ux-backbar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.ux-backbar__back:hover { color: var(--accent-hover); text-decoration: none; }
.ux-backbar__back:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.ux-backbar__back svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ux-backbar__title {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--muted);
  text-align: right;
}

/* ---------- 4. iframe 包裹层 + 骨架屏 ---------- */
.ux-iframe-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--shell-h) - var(--backbar-h));
  min-height: 420px;
}
/* 移动端浏览器地址栏会改变 100vh，支持时用 dvh */
@supports (height: 100dvh) {
  .ux-iframe-wrap { height: calc(100dvh - var(--shell-h) - var(--backbar-h)); }
}
.ux-iframe-wrap iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--surface);
}
/* 骨架屏铺满包裹层，iframe onload 后由脚本隐藏 */
.ux-iframe-wrap > .ux-skeleton {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
  z-index: 0;
}

/* ---------- 5. 响应式 ---------- */
@media (max-width: 1023px) {
  .ux-shell-header__inner { gap: var(--space-4); }
  .ux-shell-breadcrumb { display: none; }
  /* 工具行：4 列 → 2 列 */
  .tool-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 半宽行本为 2 列，此处解除宽度限制，与其它行对齐 */
  .tool-row--half { max-width: none; }
}
@media (max-width: 767px) {
  .ux-shell-header__inner {
    min-height: auto;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    flex-wrap: wrap;
    row-gap: 0;
  }
  .ux-shell-nav {
    width: 100%;
    flex: 1 0 100%;
    gap: var(--space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ux-shell-nav::-webkit-scrollbar { display: none; }
  .ux-backbar__title { display: none; }
}
@media (max-width: 639px) {
  .tool-grid { grid-template-columns: 1fr; }
  /* 所有工具行一律退化单列，满宽卡与半宽卡行为一致 */
  .tool-row,
  .tool-row--half { grid-template-columns: minmax(0, 1fr); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card { transition: none; }
  .tool-card:hover { transform: none; }
}