/* ============================================================
   gimbal-flow.css — 雲台設計流程列（跨頁共用）

   刻意獨立成一個檔案而不是塞進 tools-common.css：那個檔案是站台
   50+ 個工具共用的，加進雲台專屬樣式會污染它。也不是複製到兩個
   頁面各寫一份——那會隨時間各自演化而漂移。

   選色一律走 CSS 自訂屬性（--panel／--rule／--accent…），這兩個
   頁面的 .gmc-app 與 .gbv-app 都定義了同一組變數名，因此同一份
   樣式在兩頁的淺色/深色主題下都自動正確。
   ============================================================ */

.gimbal-flow {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.gimbal-flow-head {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 9px;
}

.gimbal-flow-steps {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gimbal-flow-step {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gimbal-flow-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    background: var(--panel-2);
    color: var(--text-muted);
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
a.gimbal-flow-item:hover { color: var(--text); border-color: var(--accent); }
a.gimbal-flow-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 沒有對應頁面的步驟（例如「建造」是離線動作）不做成連結，
   也不要看起來像可以點——用降低對比表達「這一步不在網站上」。 */
span.gimbal-flow-item { opacity: 0.62; }

.gimbal-flow-item-n {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    opacity: 0.75;
}
.gimbal-flow-item-name {
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}
.gimbal-flow-item-desc {
    font-size: 0.64rem;
    line-height: 1.35;
    opacity: 0.8;
    white-space: nowrap;
}

.gimbal-flow-item[aria-current="step"] {
    color: var(--accent-strong);
    border-color: var(--accent);
    background: var(--accent-wash);
    opacity: 1;
}

.gimbal-flow-arrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.5;
    user-select: none;
}

.gimbal-flow-loop {
    margin: 9px 0 0;
    font-size: 0.68rem;
    line-height: 1.55;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    /* 窄螢幕下描述文字讓位給步驟名稱，避免每個項目都被撐成兩行 */
    .gimbal-flow-item-desc { display: none; }
    .gimbal-flow-arrow { display: none; }
    .gimbal-flow-item { flex: 1 1 auto; }
}