/* Capabilities page (Components/Pages/Capabilities.razor): the filters in the hero panel, the
   view's introduction, and the capabilities by area with their tags. */

/* ---------- filters ---------- */
.capx .hpanel-body { display: grid; gap: .85rem; }
/* Every filter is a link to its own view, so the panel's entry animation would replay on each choice. */
.capx .hpanel-body > * > * { animation: none; }
.capf { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .4rem; }
.capf-k { flex: 0 0 7.2rem; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.capf-b { display: inline-flex; align-items: center; gap: .5rem; padding: .44rem .8rem; border: 1px solid var(--line-strong); background: var(--surface);
          color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
.capf-b:hover { border-color: var(--acc-solid); color: var(--ink); }
.capf-b i { width: .55rem; height: .55rem; flex: 0 0 auto; background: var(--acc-solid); }
.capf-b[aria-current="true"] { background: var(--acc-solid); border-color: var(--acc-solid); color: #FFFFFF; }
.capf-b[aria-current="true"] i { background: #FFFFFF; }

/* ---------- the view's introduction ---------- */
.capintro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.2rem 3rem; padding: 1.6rem 1.8rem;
            border: 1px solid var(--line); border-top: 4px solid var(--acc-solid); background: var(--surface); }
.capintro.single { grid-template-columns: minmax(0, 1fr); }
.capintro h2 { font-size: 1.55rem; }
.capintro .lede { margin-top: .55rem; font-size: 1rem; }
.capintro h3 { font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.capintro ul.ticks { margin-top: .6rem; }
.capintro ul.ticks li { margin-top: .35rem; }
.capintro .note { margin-top: 1.1rem; }

.capsum { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.6rem; font-size: .92rem; color: var(--muted); }
.capsum a { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.capsum a::before { content: ""; width: .55rem; height: .55rem; background: var(--acc-solid); }
.capsum a span { color: var(--muted); font-weight: 600; }

/* ---------- capabilities by area ---------- */
.caparea { margin-top: 2.8rem; scroll-margin-top: 90px; }
.caparea-h { display: flex; align-items: baseline; gap: .75rem; padding-bottom: .55rem; border-bottom: 2px solid var(--acc-solid); }
.caparea-h h2 { font-size: 1.3rem; }
.caparea-h span { font-size: .85rem; font-weight: 700; color: var(--muted); }
.caplist { list-style: none; margin: 0; padding: 0; }
.capr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: .5rem 2rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.capr h3 { font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.capr p { margin: .2rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.capr-meta { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: .35rem; }
.ctag { display: inline-flex; align-items: center; gap: .35rem; padding: .16rem .5rem; font-size: .76rem; font-weight: 700; line-height: 1.35; }
.ctag.gap { background: var(--acc-bg); color: var(--acc); }
.ctag.solo { background: var(--ok-bg); color: var(--ok); }
.ctag.solo::before { content: ""; width: .45rem; height: .45rem; background: var(--ok); }
.ctag.via { border: 1px solid var(--line); background: var(--surface2); color: var(--muted); }
.ctag.os { border: 1px solid var(--line); color: var(--muted); }
.capempty { margin-top: 2rem; color: var(--muted); }

@media (max-width: 860px) {
    .capintro { grid-template-columns: minmax(0, 1fr); padding: 1.3rem 1.2rem; }
    .capr { grid-template-columns: minmax(0, 1fr); }
    .capr-meta { justify-content: flex-start; }
    .capf-k { flex-basis: 100%; }
}