/* 仕組み › 業務（2026-10-30 2段目・F5）。見本 mock-workflow.html に合わせる。セレクタは #tab-workflows の中だけ */

/* 一覧のカード: AI 欄は部品の名前（等幅） */
#tab-workflows .wf-parts { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
#tab-workflows .wf-meta .st { font-size: 11px; }

/* 詳細 */
#tab-workflows .wfd2 { display: flex; flex-direction: column; gap: var(--stack); }
#tab-workflows .back { font-size: 13px; align-self: flex-start; }
#tab-workflows .wf-head { padding-bottom: var(--card-pad-y); }
#tab-workflows .wf-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#tab-workflows .wf-title h2 { margin: 0; font-size: 20px; font-weight: 600; }
#tab-workflows .wf-meta2 { font-size: 12px; color: var(--muted); }
#tab-workflows .wf-notes { margin-top: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#tab-workflows .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
#tab-workflows .fact { padding: 14px var(--card-pad); min-width: 0; }
#tab-workflows .fact + .fact { border-left: 1px solid var(--line-soft); }
#tab-workflows .fact .k { font-size: 12px; color: var(--muted); }
#tab-workflows .fact .v { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-workflows .fact .v small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }

/* 種類の札: 色でなく形で分ける（skill=丸・agent=角・script=等幅の面・職務=丸の面・人=塗り・未登録=薄い線） */
#tab-workflows .wk { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: var(--radius); font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); color: var(--text); background: var(--card); }
#tab-workflows .wk-skill { border-radius: 11px; }
#tab-workflows .wk-script { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; background: var(--sunken); border-color: var(--sunken); }
#tab-workflows .wk-duty { border-radius: 11px; background: var(--sunken); }
#tab-workflows .wk-human { background: var(--text); color: var(--card); border-color: var(--text); }
#tab-workflows .wk-machine { font-weight: 500; background: var(--sunken); border-color: var(--sunken); }
#tab-workflows .wk-check { background: var(--sunken); border-color: var(--line); }
#tab-workflows .wk-none { color: var(--subtle); border-color: var(--line-soft); }

#tab-workflows .card-head { display: flex; align-items: center; gap: 12px; }
#tab-workflows .card-head h3 { white-space: nowrap; }
#tab-workflows .legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

#tab-workflows .steps { list-style: none; margin: 0; padding: 0; }
#tab-workflows .step { display: grid; grid-template-columns: 28px minmax(0, 1.25fr) 64px minmax(0, 1.5fr) auto; align-items: center; gap: 14px; padding: 12px var(--card-pad); border-bottom: 1px solid var(--line-soft); }
#tab-workflows .step:last-child { border-bottom: 0; }
#tab-workflows .step .no { width: 24px; height: 24px; border-radius: 50%; background: var(--sunken); color: var(--muted); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
#tab-workflows .sname { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-workflows .impl { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
#tab-workflows .impl .nm, #tab-workflows .impl code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; background: none; padding: 0; }
#tab-workflows .impl a.nm { color: var(--text); text-decoration: none; }
#tab-workflows .impl a.nm:hover { color: var(--primary); text-decoration: underline; }
#tab-workflows .impl .sep { color: var(--subtle); flex: 0 0 auto; }
#tab-workflows .impl .fn { color: var(--primary); }
#tab-workflows .impl .where { font-size: 11px; color: var(--muted); flex: 0 0 auto; margin-left: 4px; }
#tab-workflows .impl.none { color: var(--subtle); font-size: 13px; }
#tab-workflows .step .act { justify-self: end; min-width: 92px; display: flex; justify-content: flex-end; }
#tab-workflows .step.gate { background: var(--sunken); }
#tab-workflows .step.gate .no { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
#tab-workflows .gtxt { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

#tab-workflows .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--stack); align-items: start; }
#tab-workflows .cols .card + .card { margin-top: 0; }
#tab-workflows table.t { table-layout: fixed; width: 100%; }
#tab-workflows table.t td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-workflows table.t tr.is-off td { color: var(--muted); }
#tab-workflows .kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 14px; margin: 0; padding: var(--card-pad-y) var(--card-pad); font-size: 13px; }
#tab-workflows .kv dt { color: var(--muted); margin: 0; white-space: nowrap; }
#tab-workflows .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#tab-workflows .kv code { font-size: 12px; }

@media (max-width: 768px) {
    #tab-workflows .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #tab-workflows .fact:nth-child(3) { border-left: 0; }
    #tab-workflows .fact:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
    #tab-workflows .fact .v small { display: block; margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tab-workflows .card-head { flex-wrap: wrap; }
    #tab-workflows .legend { margin-left: 0; flex-basis: 100%; }
    #tab-workflows .step { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "no name kind" "no impl impl" "no act act"; row-gap: 4px; column-gap: 10px; }
    #tab-workflows .step .no { grid-area: no; align-self: start; }
    #tab-workflows .step .sname { grid-area: name; }
    #tab-workflows .step .wk { grid-area: kind; justify-self: end; }
    #tab-workflows .step .impl, #tab-workflows .step .gtxt { grid-area: impl; }
    #tab-workflows .step .act { grid-area: act; justify-self: start; min-width: 0; }
    #tab-workflows .step .act:empty { display: none; }
    #tab-workflows .step .impl:empty { display: none; }
    #tab-workflows .impl { flex-wrap: wrap; row-gap: 2px; }
    #tab-workflows .impl .nm, #tab-workflows .impl code { flex: 0 0 auto; max-width: 100%; }
    #tab-workflows .cols { grid-template-columns: minmax(0, 1fr); }
    #tab-workflows table.t .hide-sp, #tab-workflows table.t col.hide-sp { display: none; }
    #tab-workflows .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    #tab-workflows .kv dt { margin-top: 8px; }
}

/* 権限区分の札は状態でも群でもないので、色を付けない（A1 以外にだけ出す） */
#tab-workflows .wf-lvl { background: var(--sunken); color: var(--text); border: 1px solid var(--line); font-weight: 500; }