/**
 * 启动SOP归档页样式覆盖分片（仅归档，作用域 .opc-arc--sop）。
 *
 * 注意：本文件在 single-opc_sop 详情页也会被加载，因此所有规则一律以
 * .opc-arc 作用域限定，绝不影响详情页。详情页由主控范式A单独负责。
 *
 * 与成功案例保持一致的改良双列结构；SOP 卡片无封面图，缩略图区域仅承载序号徽标，
 * 弱化为占位方块；rich-meta 承载「成本 / 周期」两行，需放宽避免换行。
 */

/* ---- 顶部工具条：结果统计 + 投稿入口 ---- */
.opc-arc .view-toggle {
    gap: 16px;
    padding-bottom: 4px;
}
.opc-arc .result-summary {
    font-weight: 600;
    letter-spacing: .01em;
}
.opc-arc-submit {
    font-family: var(--font-display);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    letter-spacing: .01em;
}

/* ---- 两列容器 ---- */
.opc-arc .two-col-wrap {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.opc-arc .col-stack {
    padding: 0 34px;
}
.opc-arc .col-stack:first-child { padding-left: 2px; }
.opc-arc .col-stack:last-child  { padding-right: 2px; }

/* ---- 卡片行 ---- */
.opc-arc .rich-row {
    gap: 16px;
    padding: 22px 16px;
    margin: 0 -16px;
    width: calc(100% + 32px);
    height: auto;
    overflow: visible;
    border-radius: 14px;
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.opc-arc .col-stack .rich-row:last-child { border-bottom: none; }
.opc-arc .rich-row:hover {
    background: #fff;
    box-shadow: 0 10px 30px -14px rgba(29,29,31,.16);
    transform: translateY(-1px);
}

/* ---- 缩略图占位（SOP 无封面，仅序号）---- */
.opc-arc .rich-thumb {
    width: 88px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-soft) 0%, #f3f5ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.opc-arc .rich-thumb::before {
    content: "SOP";
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: rgba(var(--accent-rgb), .55);
    letter-spacing: .04em;
}
.opc-arc .rich-thumb img { position: relative; z-index: 1; }
.opc-arc .rich-thumb:has(img)::before { content: none; }
.opc-arc .rich-thumb .order-badge {
    top: 7px;
    left: 7px;
    z-index: 2;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ---- 正文 ---- */
.opc-arc .rich-body { gap: 7px; }
.opc-arc .rich-name-row { flex-wrap: wrap; gap: 8px; }
.opc-arc .rich-name {
    font-family: var(--font-display);
    font-size: 14.5px;
    line-height: 1.35;
}
.opc-arc .rich-batch {
    background: var(--surface);
    color: var(--muted);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    line-height: 1.5;
}
.opc-arc .rich-desc { margin: 1px 0; }
.opc-arc .rich-tags { margin-top: 2px; gap: 8px; }
.opc-arc .rich-tags span { color: var(--muted-2); font-weight: 400; }

/* ---- 关键修复：放宽右侧 meta（成本/周期两行）---- */
.opc-arc .rich-meta {
    width: 112px;
    gap: 7px;
    padding-left: 14px;
}
.opc-arc .rich-meta .revenue {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-display);
    color: var(--text);
    font-size: 12.5px;
}
.opc-arc .rich-meta .revenue:first-child { color: var(--accent); }
.opc-arc .rich-meta .pill { white-space: nowrap; }

/* ---- 空状态 ---- */
.opc-arc-empty {
    text-align: center;
    padding: 48px 0;
    color: var(--muted);
    -webkit-line-clamp: unset;
}

/* ---- 响应式 ---- */
@media (max-width: 900px) {
    .opc-arc .col-stack { padding: 0 20px; }
    .opc-arc .rich-meta { width: 104px; }
}
@media (max-width: 768px) {
    .opc-arc .two-col-wrap { grid-template-columns: 1fr; }
    .opc-arc .two-col-wrap::after { display: none; }
    .opc-arc .col-stack,
    .opc-arc .col-stack:first-child,
    .opc-arc .col-stack:last-child { padding: 0; }
    .opc-arc .col-stack:last-child .rich-row:first-child { border-top: 1px solid var(--line); }
    .opc-arc .rich-row { padding: 18px 14px; margin: 0 -14px; width: calc(100% + 28px); }
    .opc-arc .rich-thumb { width: 76px; }
}
@media (max-width: 460px) {
    .opc-arc .rich-row { gap: 12px; }
    .opc-arc .rich-thumb { width: 64px; }
    .opc-arc .rich-meta { width: 92px; padding-left: 8px; }
    .opc-arc-submit { display: none; }
}

/* ============================================================
 * 详情页（范式B）· P4 步骤结构化
 * 作用域 .opc-sop-detail，仅命中 SOP 详情，不影响归档 .opc-arc。
 * 将"输入→工具→动作→输出"从无样式纯文本升级为带序号的步骤卡 +
 * 四栏结构；"常见坑"升级为清晰的清单卡。
 * ============================================================ */

/* 小节标题：accent 竖条 + 中号加粗（区别于字段网格的微型 sb-label） */
.opc-sop-detail .opc-sop-block-label {
    position: relative;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text);
    padding-left: 12px;
    margin: 0 0 18px;
    line-height: 1.3;
}
.opc-sop-detail .opc-sop-block-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.opc-sop-detail .opc-sop-steps-block { margin-top: 40px; }

/* 步骤列表：左侧序号连成时间轴，卡片承载四栏 */
.opc-sop-detail .sop-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.opc-sop-detail .sop-step {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
/* 序号徽标：accent 实心圆 */
.opc-sop-detail .sop-step .num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    box-shadow: var(--shadow-accent);
    z-index: 1;
}
/* 时间轴竖线：连接相邻序号 */
.opc-sop-detail .sop-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 30px;
    bottom: -14px;
    width: 2px;
    background: var(--line-strong);
}

/* 四栏卡片：输入 / 工具 / 动作 / 输出 */
.opc-sop-detail .grid4 {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    overflow: hidden;
}
.opc-sop-detail .sop-cell {
    padding: 14px 16px;
    min-width: 0;
}
/* 栏间发丝分隔线 */
.opc-sop-detail .sop-cell + .sop-cell {
    border-left: 1px solid var(--line);
}
.opc-sop-detail .sop-cell .k {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-2);
    margin-bottom: 6px;
}
.opc-sop-detail .sop-cell .v {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    word-wrap: break-word;
}

/* 常见坑：清单卡 */
.opc-sop-detail .opc-sop-pitfalls-block { margin-top: 40px; }
.opc-sop-detail .opc-pitfall-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.opc-sop-detail .opc-pitfall-list li {
    position: relative;
    padding: 13px 16px 13px 40px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
}
.opc-sop-detail .opc-pitfall-list li::before {
    content: "!";
    position: absolute;
    left: 14px;
    top: 13px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

/* 响应式：≤768 四栏→两栏，≤480→单栏 */
@media (max-width: 768px) {
    .opc-sop-detail .grid4 { grid-template-columns: repeat(2, 1fr); }
    .opc-sop-detail .sop-cell:nth-child(3) { border-left: none; }
    .opc-sop-detail .sop-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
    .opc-sop-detail .grid4 { grid-template-columns: 1fr; }
    .opc-sop-detail .sop-cell + .sop-cell { border-left: none; border-top: 1px solid var(--line); }
    .opc-sop-detail .sop-step { gap: 12px; }
}

/* ========== 2026-07-18：列表页 post-loop 精致设计（对齐资讯列表产品级质感）========== */
.opc-arc--sop .post-loop.post-loop-default {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  align-items: start;
}
.opc-arc--sop .post-loop-default .item {
  display: flex;
  gap: var(--space-4);
  padding: 22px 16px;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 14px;
  align-items: flex-start;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.opc-arc--sop .post-loop-default .item:hover {
  background: #fff;
  box-shadow: 0 10px 30px -14px rgba(29,29,31,.16);
  transform: translateY(-1px);
}
.opc-arc--sop .post-loop-default .item.item-no-thumb { display: block; }

/* 缩略图 */
.opc-arc--sop .post-loop-default .item-img {
  flex: 0 0 132px;
  width: 132px;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin: 0;
}
.opc-arc--sop .post-loop-default .item-img .item-img-inner,
.opc-arc--sop .post-loop-default .item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.opc-arc--sop .post-loop-default .item:hover .item-img {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18);
}
/* 无封面占位缩略块：中性浅灰底 + 灰字（与 OPC资讯缩略图同尺寸，保证每个 item 都有图区） */
.opc-arc--sop .post-loop-default .item-img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--entity-ph);
  color: var(--entity-ph-fg);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 12px;
  user-select: none;
}
.opc-arc--sop .post-loop-default .item-content { 
  flex: 1 1 auto; 
  min-width: 0; 
  position: relative; 
}

/* 整卡可点 */
.opc-arc--sop .post-loop-default .item-content .item-stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
}
.opc-arc--sop .post-loop-default .item-content > *:not(.item-stretched-link) { 
  position: relative; 
  z-index: 2; 
}
.opc-arc--sop .post-loop-default .item-content .item-title a,
.opc-arc--sop .post-loop-default .item-content .item-meta a { 
  position: relative; 
  z-index: 2; 
}

/* 标题 / 摘要 */
.opc-arc--sop .post-loop .item-title,
.opc-arc--sop .post-loop .item-title a {
  font-family: var(--font-display);
  color: var(--text);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.opc-arc--sop .post-loop .item-title a:hover { color: var(--accent); }
.opc-arc--sop .post-loop .item-excerpt {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 分类标签：纯文字叠在缩略图上 */
.opc-arc--sop .post-loop .item-category {
  color: #fff;
  background: none;
  border: none;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.4);
  position: absolute;
  top: 7px;
  left: 9px;
  z-index: 3;
}
.opc-arc--sop .post-loop .item-category:hover { color: var(--accent-soft); }

/* meta 行 */
.opc-arc--sop .post-loop .item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.opc-arc--sop .post-loop .item-meta,
.opc-arc--sop .post-loop .item-meta-li {
  color: var(--muted-2);
  font-family: var(--font-sans);
  font-size: 12px;
}
/* 成本 / 周期：关键信息——标签弱灰、数值品牌蓝加粗，快速抓取投入与耗时。 */
.opc-arc--sop .post-loop .item-meta-li.cost,
.opc-arc--sop .post-loop .item-meta-li.duration {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.opc-arc--sop .post-loop .item-meta-li.cost .k,
.opc-arc--sop .post-loop .item-meta-li.duration .k {
  color: var(--muted);
  font-weight: 500;
}
.opc-arc--sop .post-loop .item-meta-li.cost .v,
.opc-arc--sop .post-loop .item-meta-li.duration .v {
  color: var(--accent);
  font-weight: 700;
}

/* 响应式 */
@media (max-width: 900px) {
  .opc-arc--sop .post-loop-default .item-img { 
    flex-basis: 116px; 
    width: 116px; 
    height: 82px; 
  }
}
@media (max-width: 768px) {
  .opc-arc--sop .post-loop.post-loop-default { 
    grid-template-columns: 1fr; 
    gap: 0; 
  }
  .opc-arc--sop .post-loop-default .item { padding: 18px 14px; }
  .opc-arc--sop .post-loop .item-title,
  .opc-arc--sop .post-loop .item-title a { font-size: 15px; }
}
@media (max-width: 460px) {
  .opc-arc--sop .post-loop-default .item { gap: 12px; }
  .opc-arc--sop .post-loop-default .item-img { 
    flex-basis: 96px; 
    width: 96px; 
    height: 70px; 
  }
}

/* ========== 2026-07-18d：meta 样式补充，完全对齐资讯列表 ========== */
.opc-arc--sop .post-loop .item-meta a,
.opc-arc--sop .post-loop .item-meta-li a {
  color: var(--muted-2);
  text-decoration: none;
  transition: color .2s ease;
}
.opc-arc--sop .post-loop .item-meta-li a:hover { 
  color: var(--accent); 
}