/* ============================================================
   clashzip.com — components.css
   跨页面组件:tab / toc / FAQ 折叠 / 词条卡 / 下载卡 /
   文章卡 / callout / dl-fab / 进程监控表 / hero 终端 / 下载引导卡
   仅引用 base.css 中的设计令牌
   ============================================================ */

/* ============ Tab 切换(tabs.js 配套) ============ */

.tabrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-2);
  background: var(--gm-surface);
  margin-bottom: 18px;
}

.tabrow [role="tab"] {
  padding: 7px 16px;
  font-family: var(--gm-font-mono);
  font-size: 13px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--gm-rad-1);
  color: var(--gm-fg-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.tabrow [role="tab"]:hover {
  color: var(--gm-fg);
  background: var(--gm-phos-a05);
}

.tabrow [role="tab"][aria-selected="true"] {
  background: var(--gm-phos);
  color: var(--gm-bg);
  font-weight: 700;
}

.tabsheet {
  display: none;
}

.tabsheet.on {
  display: block;
}

/* ============ 长页分类跳转导航 toc ============ */

.jumpbar {
  position: sticky;
  top: 58px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 14px;
  margin-bottom: 24px;
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-2);
  background: var(--gm-veil);
  backdrop-filter: blur(4px);
}

.jumpbar__label {
  font-family: var(--gm-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gm-phos);
  flex-shrink: 0;
}

.jumpbar a {
  flex-shrink: 0;
  padding: 4px 12px;
  font-family: var(--gm-font-mono);
  font-size: 12px;
  color: var(--gm-fg-dim);
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-pill);
  text-decoration: none;
  white-space: nowrap;
}

.jumpbar a:hover {
  color: var(--gm-phos);
  border-color: var(--gm-phos-a35);
  background: var(--gm-phos-a05);
}

/* ============ FAQ 折叠项 ============ */

.foldq {
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-2);
  background: var(--gm-surface);
  margin-bottom: 10px;
  overflow: hidden;
}

.foldq summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 16px;
  font-family: var(--gm-font-mono);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.foldq summary::-webkit-details-marker {
  display: none;
}

.foldq summary::before {
  content: "+";
  color: var(--gm-phos);
  font-weight: 700;
  flex-shrink: 0;
  width: 1em;
}

.foldq[open] summary::before {
  content: "−";
}

.foldq summary:hover {
  background: var(--gm-phos-a05);
  color: var(--gm-phos);
}

.foldq[open] summary {
  border-bottom: 1px dashed var(--gm-edge);
  color: var(--gm-phos);
}

.foldq__a {
  padding: 14px 16px 4px 16px;
  font-size: 14px;
  color: var(--gm-fg);
  background: var(--gm-surface-2);
}

.foldq__a p:last-child {
  margin-bottom: 12px;
}

/* ============ 词条卡(专有名词解释) ============ */

.lexgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.lexgrid > * {
  min-width: 0;
}

.lexcard {
  border: 1px solid var(--gm-edge);
  border-left: 3px solid var(--gm-phos-deep);
  border-radius: var(--gm-rad-1);
  background: var(--gm-surface);
  padding: 14px 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lexcard:hover {
  border-left-color: var(--gm-phos);
  background: var(--gm-surface-2);
}

.lexcard__word {
  margin: 0 0 6px;
  font-family: var(--gm-font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--gm-phos);
  overflow-wrap: break-word;
}

.lexcard__def {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--gm-fg-dim);
}

/* ============ 下载客户端卡片 ============ */

.dlcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-2);
  background: var(--gm-surface);
  margin-bottom: 14px;
  overflow: hidden;
}

.dlcard--prime {
  border-color: var(--gm-phos-a35);
  box-shadow: 0 0 22px var(--gm-phos-a10);
}

.dlcard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--gm-surface-2);
  border-bottom: 1px solid var(--gm-edge);
}

.dlcard__name {
  margin: 0;
  font-family: var(--gm-font-mono);
  font-size: 15px;
  font-weight: 700;
}

.dlcard__ver {
  font-family: var(--gm-font-mono);
  font-size: 12px;
  color: var(--gm-fg-dim);
}

.dlcard__body {
  padding: 14px 16px;
}

.dlcard__desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--gm-fg-dim);
}

.dlcard__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 徽章:首推 / 推荐 / 已停止维护 */
.mark {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-family: var(--gm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: var(--gm-rad-1);
  border: 1px solid var(--gm-edge);
  color: var(--gm-fg-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.mark--prime {
  background: var(--gm-phos);
  border-color: var(--gm-phos);
  color: var(--gm-bg);
  font-weight: 700;
}

.mark--rec {
  border-color: var(--gm-phos-a35);
  color: var(--gm-phos);
  background: var(--gm-phos-a10);
}

.mark--eol {
  border-color: var(--gm-warn-a40);
  color: var(--gm-warn);
  background: var(--gm-warn-a12);
}

/* ============ 博客文章卡 ============ */

.postrow {
  display: block;
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-2);
  background: var(--gm-surface);
  padding: 16px 18px;
  margin-bottom: 12px;
  text-decoration: none;
  color: var(--gm-fg);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.postrow:hover {
  border-color: var(--gm-phos-a35);
  background: var(--gm-surface-2);
  color: var(--gm-fg);
  transform: translateX(3px);
}

.postrow__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-family: var(--gm-font-mono);
  font-size: 12px;
  color: var(--gm-fg-dim);
}

.postrow__tag {
  padding: 1px 9px;
  border: 1px solid var(--gm-phos-a35);
  border-radius: var(--gm-rad-pill);
  color: var(--gm-phos);
  white-space: nowrap;
  flex-shrink: 0;
}

.postrow__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.postrow:hover .postrow__title {
  color: var(--gm-phos);
}

.postrow__sum {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--gm-fg-dim);
}

/* 博客标签筛选条 */
.tagfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tagfilter button {
  padding: 5px 14px;
  font-family: var(--gm-font-mono);
  font-size: 12px;
  background: var(--gm-surface);
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-pill);
  color: var(--gm-fg-dim);
  cursor: pointer;
}

.tagfilter button:hover {
  color: var(--gm-phos);
  border-color: var(--gm-phos-a35);
}

.tagfilter button.is-on {
  background: var(--gm-phos);
  border-color: var(--gm-phos);
  color: var(--gm-bg);
  font-weight: 700;
}

/* ============ callout 引用块 ============ */

.callout {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  margin: 0 0 1.2em;
  border: 1px solid var(--gm-edge);
  border-left: 3px solid var(--gm-phos);
  border-radius: var(--gm-rad-1);
  background: var(--gm-phos-a05);
  font-size: 13px;
  line-height: 1.85;
}

.callout::before {
  content: "▸";
  color: var(--gm-phos);
  flex-shrink: 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout--warn {
  border-left-color: var(--gm-warn);
  background: var(--gm-warn-a12);
}

.callout--warn::before {
  content: "!";
  color: var(--gm-warn);
  font-weight: 700;
}

.callout--err {
  border-left-color: var(--gm-err);
  background: var(--gm-err-a12);
}

.callout--err::before {
  content: "✕";
  color: var(--gm-err);
}

/* ============ 右下角常驻下载浮层 ============ */

.dl-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  font-family: var(--gm-font-mono);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: var(--gm-phos);
  color: var(--gm-bg);
  border: 1px solid var(--gm-phos);
  border-radius: var(--gm-rad-pill);
  box-shadow: 0 6px 22px var(--gm-phos-a35);
}

.dl-fab:hover {
  background: var(--gm-phos-deep);
  border-color: var(--gm-phos-deep);
  color: var(--gm-bg);
}

.dl-fab svg {
  flex-shrink: 0;
}

/* ============ Hero:左终端右文案(镜像布局) ============ */

.hero {
  padding: 56px 0 48px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
}

.hero__grid > * {
  min-width: 0;
}

.hero__copy > .tagchip {
  margin-bottom: 18px;
  white-space: normal;
}

.hero__lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--gm-fg-dim);
}

.hero__lead strong {
  color: var(--gm-fg);
}

.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 18px;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 实时日志终端装饰面板 */
.logdeck {
  position: relative;
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-2);
  background: var(--gm-surface);
  overflow: hidden;
  box-shadow: 0 0 34px var(--gm-phos-a10);
}

.logdeck::after {
  /* 缓慢下移的扫描线高光 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 26%;
  background: linear-gradient(180deg, transparent, var(--gm-phos-a05), transparent);
  animation: gm-sweep 7s linear infinite;
  pointer-events: none;
}

@keyframes gm-sweep {
  to { top: 130%; }
}

.logdeck__feed {
  padding: 14px 16px 6px;
  min-height: 218px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: var(--gm-font-mono);
  font-size: 12px;
  line-height: 1.9;
  overflow: hidden;
}

.logdeck__line {
  display: flex;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gm-fg-dim);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.logdeck__line.is-in {
  animation: gm-login 0.35s ease;
}

@keyframes gm-login {
  from { opacity: 0; transform: translateY(8px); }
}

.logdeck__line.is-fade {
  opacity: 0.3;
}

.logdeck__ts {
  color: var(--gm-fg-dim);
  flex-shrink: 0;
}

.logdeck__lv {
  flex-shrink: 0;
  font-weight: 700;
}

.logdeck__lv--info { color: var(--gm-phos); }
.logdeck__lv--rule { color: var(--gm-warn); }
.logdeck__lv--proxy { color: var(--gm-phos-deep); }

.logdeck__prompt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px 14px;
  font-family: var(--gm-font-mono);
  font-size: 13px;
  color: var(--gm-phos);
}

.logdeck__cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--gm-phos);
  animation: gm-blink 1s steps(2, start) infinite;
  flex-shrink: 0;
}

@keyframes gm-blink {
  50% { opacity: 0; }
}

/* ============ 首页特性:进程监控表 ============ */

.proctab {
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-2);
  background: var(--gm-surface);
  overflow: hidden;
}

.proctab__head {
  display: grid;
  grid-template-columns: 52px 24px 1fr 110px;
  gap: 12px;
  padding: 9px 16px;
  background: var(--gm-surface-2);
  border-bottom: 1px solid var(--gm-edge);
  font-family: var(--gm-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gm-fg-dim);
}

.proc {
  border-bottom: 1px solid var(--gm-edge);
}

.proc:last-child {
  border-bottom: none;
}

.proc__row {
  display: grid;
  grid-template-columns: 52px 24px 1fr 110px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}

.proc__row:hover,
.proc__row:focus-visible {
  background: var(--gm-phos-a05);
}

.proc__row:hover .proc__no::before,
.proc__row:focus-visible .proc__no::before {
  content: "❯";
  position: absolute;
  left: 4px;
  color: var(--gm-phos);
}

.proc__no {
  font-family: var(--gm-font-mono);
  font-size: 13px;
  color: var(--gm-fg-dim);
}

.proc__name {
  font-family: var(--gm-font-mono);
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proc__st {
  font-family: var(--gm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gm-phos);
  text-align: right;
  white-space: nowrap;
}

.proc__row[aria-expanded="true"] {
  background: var(--gm-phos-a10);
}

.proc__row[aria-expanded="true"] .proc__name {
  color: var(--gm-phos);
}

.proc__detail {
  display: none;
  margin: 0 16px 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--gm-phos);
  background: var(--gm-surface-2);
  border-radius: var(--gm-rad-1);
}

.proc.is-open .proc__detail {
  display: block;
}

.proc__detail p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--gm-fg);
}

.proc__detail .cmd {
  display: block;
  font-size: 12px;
  color: var(--gm-fg-dim);
  overflow-x: auto;
  white-space: nowrap;
}

/* ============ 文末下载引导卡(博客文章用) ============ */

.endcta {
  border: 1px solid var(--gm-phos-a35);
  border-radius: var(--gm-rad-2);
  background: var(--gm-surface);
  padding: 22px 20px;
  margin: 36px 0 28px;
}

.endcta__h {
  margin: 0 0 8px;
  font-size: 17px;
}

.endcta__p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--gm-fg-dim);
}

.endcta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============ 面包屑(博客文章页) ============ */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  font-family: var(--gm-font-mono);
  font-size: 12px;
  color: var(--gm-fg-dim);
}

.crumbs a {
  color: var(--gm-fg-dim);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--gm-phos);
}

.crumbs span {
  color: var(--gm-fg-dim);
}

/* ============ 步骤序号圆标(教程用) ============ */

.stepflow {
  list-style: none;
  counter-reset: gm-step;
  padding: 0;
  margin: 0 0 1.4em;
}

.stepflow > li {
  counter-increment: gm-step;
  position: relative;
  padding: 0 0 22px 46px;
}

.stepflow > li::before {
  content: counter(gm-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gm-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--gm-phos);
  border: 1px solid var(--gm-phos-a35);
  border-radius: var(--gm-rad-1);
  background: var(--gm-surface);
}

.stepflow > li::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 37px;
  bottom: 2px;
  width: 1px;
  background: var(--gm-edge);
}

.stepflow > li:last-child::after {
  display: none;
}

/* ============ 响应式 ============ */

@media (max-width: 880px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* 移动端:终端面板收纳到文案下方并降低高度 */
  .hero__grid .logdeck {
    order: 2;
  }

  .hero__grid .hero__copy {
    order: 1;
  }

  .logdeck__feed {
    min-height: 150px;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .proctab__head {
    grid-template-columns: 40px 18px 1fr 84px;
    gap: 8px;
    padding: 8px 12px;
  }

  .proc__row {
    grid-template-columns: 40px 18px 1fr 84px;
    gap: 8px;
    padding: 11px 12px;
  }

  .proc__detail {
    margin: 0 12px 12px;
  }

  .dl-fab {
    right: 12px;
    bottom: 12px;
    padding: 10px 15px;
    font-size: 12px;
  }

  .jumpbar {
    top: 56px;
  }
}