/* process-polish.css — 製程模組／單位交手頁共用排版修正（2026-09-24 健檢）
 * 放在各頁 <style> 之後載入；只做排版層修正，不改內容。
 */

/* ── 1. 長頁黏頂章節導覽（搭配 section-nav.js；playbook §長頁防捲 B 型） ── */
html { scroll-padding-top: 72px; }
.snav { position: sticky; top: 8px; z-index: 50; margin: 0 0 20px; padding: 6px; background: #fff;
  border: 1px solid #DADCE0; border-radius: 12px; box-shadow: 0 2px 8px rgba(60,64,67,.12); }
.snav-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.snav-row a { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.3; color: #3C4043; text-decoration: none; white-space: nowrap; }
.snav-row a b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: #F1F3F4; color: #5F6368; font-size: 11px; font-weight: 600; }
.snav-row a:hover { background: #F1F3F4; }
.snav-row a.on { background: #E8F0FE; color: #174EA6; font-weight: 600; }
.snav-row a.on b { background: #1A73E8; color: #fff; }
.snav-row a:focus-visible, .snav-mob button:focus-visible, .snav-mob select:focus-visible { outline: 2px solid #1A73E8; outline-offset: 1px; }
.snav-mob { display: none; gap: 6px; align-items: center; }
.snav-mob select { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #DADCE0; border-radius: 8px; background: #fff; color: #202124; }
.snav-mob button { width: 40px; height: 38px; flex: 0 0 auto; border: 1px solid #DADCE0; border-radius: 8px; background: #fff; font-size: 20px; color: #1A73E8; cursor: pointer; }
.snav-mob button:disabled { color: #BDC1C6; cursor: default; }
@media (max-width: 600px) {
  .snav-row { display: none; }
  .snav-mob { display: flex; }
}

/* ── 2. Callout：底色已經代表語意 → 拿掉同色左線（playbook 硬規則 17） ── */
.tip, .warning, .insight, .okbox { border-left: 0 !important; border-radius: 8px !important; }

/* ── 3. Etch Atlas 系列（有 .io-card 的頁）：首屏兩條大色帶 → 一條主結論＋一行淺色任務說明 ── */
body:has(.io-card.input) .hero { padding: 22px 24px; margin-bottom: 14px; }
.io-card.input { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; text-align: left;
  padding: 14px 20px; margin: 0 0 20px; background: #F1F3F4 !important; color: #202124; box-shadow: none; }
.io-card.input .emoji { grid-row: span 2; font-size: 26px; margin: 0; }
.io-card.input .label { color: #5F6368; opacity: 1; font-size: 11px; }
.io-card.input .text { font-size: 16px; margin-top: 0; }
.io-card.input + .arrow { display: none; }

/* 大量同型 step 卡：顏色已由編號圓點承載 → 拿掉左側色線；卡片不可點，不做 hover 浮起 */
body:has(.io-card.input) .step { border-left: 0 !important; border: 1px solid #E8EAED; }
body:has(.io-card.input) .step:hover { transform: none; }

/* ── 4. 2026-09-24 第二輪：David 圈出的三件事 ──
   (a) 子卡片：分類色已在編號／標題 icon 上 → 拿掉左側色線，改中性完整邊框（§彩色左線使用邊界）
   (b) tip／看門道歸主色，不另開黃色；綠底 insight 同理（綠色只留給「真的通過」）（Gate 1）
   (c) 章節標題右側的裝飾 emoji 不承載語意 → 不顯示（產圖後清單：純裝飾 emoji） */
.subcard { border-left: 0 !important; border: 1px solid #E8EAED; }
.tip { background: #E8F0FE !important; }
.tip .tip-label, .tip .tl, .tip .lbl, .tip > b:first-child { color: #174EA6 !important; }
.insight { background: #E8F0FE !important; }
.insight .i-label, .insight .in-label { color: #174EA6 !important; }
.step-emoji { display: none; }

/* ── 5. 2026-09-24 第二輪（續）：其餘左側色線 ──
   同型卡（step／pcard／entry／fdc…）的顏色已在編號、icon、標題上；有底色的比較欄（col／mc／har-gate…）底色已表達語意
   → 左線拿掉（§彩色左線使用邊界）。保留：沒有底色、全頁只有一個的「全頁心法」.soul。 */
.step[class*=" s-"], .step.c1, .step.c2, .step.c3, .step.c4, .step.c5, .step.c6,
.pcard, .entry, .fdc, .knife, .analogy, .memhook, .journey-read, .j-panel, .anim-note,
.mh-col, .k.up, .k.dn, .mc, .har-gate { border-left: 0 !important; }
.col, .pitem { border-left-width: 1px !important; }

/* ── 6. 分頁鈕：色塊 pill → 文字分頁（2026-09-15 選擇器規則）；手機單列橫捲 ── */
.tabs { gap: 2px !important; border-bottom: 1px solid #E8EAED; }
.tabs .tab { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  border-bottom: 2px solid transparent !important; color: #5F6368 !important; padding: 9px 14px; }
.tabs .tab:hover { color: #1A73E8 !important; }
.tabs .tab.active, .tabs .tab[aria-selected="true"] { color: #174EA6 !important; font-weight: 600; border-bottom-color: #1A73E8 !important; }
.tabs .tab:focus-visible { outline: 2px solid #1A73E8; outline-offset: -2px; }
@media (max-width: 760px) {
  .tabs { flex-wrap: nowrap !important; overflow-x: auto; }
  .tabs .tab { white-space: nowrap; flex: none; }
}