/* Sub-functions view — cohesive with context.css (.status-pill / .conf-pill vocab, shared vars). */
.sf-panel { display: flex; flex-direction: column; gap: 10px; }
.sf-caption { font-size: 12px; color: var(--ink-2); margin: 0 0 4px; line-height: 1.5; }

.sf-fn { border: 1px solid var(--border-3); border-radius: 8px; background: var(--bg-2); overflow: hidden; }
.sf-fn[open] { border-color: var(--border-2); }
.sf-fn-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; user-select: none; }
.sf-fn-head::-webkit-details-marker { display: none; }
.sf-fn-head::before { content: '▸'; color: var(--ink-3); font-size: 11px; transition: transform .15s; }
.sf-fn[open] .sf-fn-head::before { transform: rotate(90deg); }
.sf-fn-label { font-weight: 600; font-size: 13px; color: var(--ink-1); }
.sf-hc { font-size: 11px; color: var(--ink-2); }
.sf-hc-note { color: var(--ink-3); }
.sf-fn-count { margin-left: auto; font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sf-fn-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }

.sf-sub { border-top: 1px solid var(--border-4, var(--border-3)); padding-top: 8px; }
.sf-sub:first-child { border-top: none; }
.sf-sub-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-sub-label { font-size: 12px; color: var(--ink-1); }

/* footprint chip — semantic, not "maturity" */
.sf-foot { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; border: 1px solid; letter-spacing: .02em; }
.sf-foot-high { color: var(--accent-green); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08); }
.sf-foot-middle { color: var(--accent-amber); border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
.sf-foot-low { color: var(--ink-2); border-color: var(--border-3); background: var(--bg-3); }
.sf-foot-na { color: var(--ink-3); border-color: var(--border-3); background: transparent; font-style: italic; }

.sf-ev-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sf-ev { font-size: 10.5px; padding: 2px 7px; border-radius: 4px; background: var(--bg-3); color: var(--ink-2); }
.sf-ev-ext { color: var(--accent-green); text-decoration: none; }
.sf-ev-ext:hover { text-decoration: underline; }
.sf-ev-gap { color: var(--ink-3); background: transparent; border: 1px dashed var(--border-3); }
.sf-ev-caveat { color: var(--accent-amber); background: rgba(251,191,36,.06); }

/* core value-creation roles */
.sf-core { margin-top: 6px; padding: 12px; border: 1px dashed var(--border-2); border-radius: 8px; background: var(--bg-2); }
.sf-core-title { margin: 0 0 2px; font-size: 13px; color: var(--ink-1); }
.sf-core-sub { margin: 0 0 8px; font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.sf-core-residual { font-size: 12px; color: var(--ink-1); margin-bottom: 8px; }
.sf-core-role { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--border-3); font-size: 12px; }
.sf-core-label { color: var(--ink-1); }
.sf-core-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.sf-empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* triangulation chip (also used on the Capabilities view) */
.sf-tri { font-size: 9.5px; font-weight: 600; padding: 2px 6px; border-radius: 3px; border: 1px solid; text-transform: uppercase; letter-spacing: .03em; }
.sf-tri-corroborated { color: var(--accent-green); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08); }
.sf-tri-diverged { color: #f87171; border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.sf-tri-observed_only { color: #60a5fa; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.08); }
.sf-tri-hypothesis_only { color: var(--accent-amber); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); }

/* triangulation band on the Capabilities view */
.ctx-tri-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border-3); border-radius: 8px; background: var(--bg-2); }
.ctx-tri-band-label { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.ctx-tri-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); }