/* Panel hue identifies its owner; line style identifies item references. */
.wfp { --wfp-git: #924c2c; --wfp-git-main: #98406d; --wfp-git-feature: #006b79; --wfp-git-release: #765300; --wfp-azure: #175eab; --wfp-fabric: #1b6650; --wfp-ok: #287139; --wfp-auto: #50596b; --wfp-local: #8a570b; --wfp-cross: #7144a3; --wfp-control: #535867; --wfp-accent: var(--wfp-control); border: 1px solid var(--md-default-fg-color--lightest); border-radius: .3rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); font-size: .7rem; line-height: 1.4; margin: 1rem 0 1.5rem; outline: none; }
[data-md-color-scheme="slate"] .wfp { --wfp-git: #e8ac86; --wfp-git-main: #f6a0ca; --wfp-git-feature: #6ed9df; --wfp-git-release: #f1d26f; --wfp-azure: #89bcf2; --wfp-fabric: #83c8b0; --wfp-ok: #91c99b; --wfp-auto: #c4cad5; --wfp-local: #ebbf73; --wfp-cross: #c0a0e6; --wfp-control: #aeb7c5; }
.wfp:focus-visible { box-shadow: 0 0 0 2px var(--wfp-control); }
.wfp h4 { display: flex; align-items: center; gap: .35rem; margin: 0; padding: .3rem .6rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--md-default-fg-color--light); border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.wfp-pane { background: color-mix(in srgb, var(--md-default-bg-color) 90%, var(--wfp-accent)); }
.wfp-pane > h4 { color: var(--wfp-accent); background: color-mix(in srgb, var(--md-default-bg-color) 80%, var(--wfp-accent)); }
.wfp-repo, .wfp-history { --wfp-accent: var(--wfp-git); }
.wfp-azdo { --wfp-accent: var(--wfp-azure); }
.wfp-fabric { --wfp-accent: var(--wfp-fabric); }
.wfp-term { --wfp-accent: var(--wfp-git); }
.wfp[data-actor="pipeline"] .wfp-term, .wfp[data-actor="ado"] .wfp-term { --wfp-accent: var(--wfp-azure); }
.wfp-logo { width: 1.1em; height: 1.1em; }
.wfp-icon { width: 1em; height: 1em; flex: none; }

/* the theme styles every list and pre in .md-typeset; these are not prose */
.md-typeset .wfp ul, .md-typeset .wfp ol { list-style: none; margin: 0; padding: 0; }
.md-typeset .wfp li { margin: 0; }
.md-typeset .wfp pre { margin: 0; }
.md-typeset .wfp img { margin: 0; vertical-align: middle; }

/* bar */
.wfp-bar { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; padding: .4rem .6rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); background: var(--md-default-bg-color); }
.wfp-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border-radius: .25rem .25rem 0 0; }
.wfp-act { position: relative; font: inherit; font-size: .65rem; padding: .45rem .3rem; border: 0; border-right: 1px solid var(--md-default-fg-color--lightest); border-bottom: 1px solid var(--md-default-fg-color--lightest); background: var(--md-code-bg-color); color: var(--md-default-fg-color--light); cursor: pointer; }
.wfp-act:last-child { border-right: 0; }
.wfp-act::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); background: var(--wfp-control); opacity: .2; transition: width .4s ease; }
.wfp-act span { position: relative; }
.wfp-act:hover { border-color: var(--wfp-control); }
.wfp-act.is-current { color: var(--md-default-fg-color); border-bottom-color: var(--wfp-control); font-weight: 700; }
.wfp-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.wfp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; font: inherit; font-size: .65rem; line-height: 1.2; min-height: 1.7rem; padding: .3rem .5rem; border-radius: .2rem; border: 1px solid var(--md-default-fg-color--lightest); background: var(--md-default-bg-color); color: var(--md-default-fg-color); cursor: pointer; }
.wfp-btn:hover:not(:disabled) { border-color: var(--wfp-accent); }
.wfp-btn:disabled { opacity: .35; cursor: default; }
.wfp-icon-btn { width: 1.9rem; padding: .3rem; font-size: .9rem; }
.wfp-icon-btn.is-ready { background: var(--md-accent-fg-color); color: #fff; border-color: transparent; animation: wfp-ready 1.6s ease-in-out infinite; }
.wfp-btn:focus-visible, .wfp-act:focus-visible, .wfp-ws:focus-visible, .wfp-screen:focus-visible, .wfp-history > div:focus-visible, .wfp-repo .wfp-content:focus-visible, .wfp-jobs-body:focus-visible { outline: 2px solid var(--wfp-accent); outline-offset: -2px; }
.wfp-approve { background: var(--md-accent-fg-color); color: #fff; border-color: transparent; font-weight: 700; font-size: .75rem; padding: .35rem .9rem; animation: wfp-ready 1.6s ease-in-out infinite; }
.wfp-approve:hover:not(:disabled) { filter: brightness(1.12); border-color: transparent; }
.wfp-approve svg { width: 1em; height: 1em; fill: currentColor; }
.wfp-title { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.wfp-step-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .7rem; }
.wfp-next-step { font-size: .62rem; color: color-mix(in srgb, var(--md-accent-fg-color) 70%, var(--md-default-bg-color)); }
.wfp-next-step b { text-transform: uppercase; font-size: .55rem; letter-spacing: .04em; margin-right: .2rem; }
.wfp-step { font-weight: 700; font-size: .8rem; color: var(--wfp-git); }
.wfp[data-actor="ado"] .wfp-step, .wfp[data-actor="pipeline"] .wfp-step { color: var(--wfp-azure); }
.wfp-step-num { color: var(--md-default-fg-color--light); font-weight: 600; margin-right: .15rem; }
.wfp-note { color: var(--md-default-fg-color); font-size: .7rem; line-height: 1.4; }
.wfp-note:empty { display: none; }
.wfp-command { display: flex; flex-direction: column; gap: .1rem; padding: .25rem .5rem; background: var(--md-code-bg-color); border-left: 3px solid var(--wfp-git); }
.wfp[data-actor="ado"] .wfp-command, .wfp[data-actor="pipeline"] .wfp-command { border-left-color: var(--wfp-azure); }
.wfp-actor { font-weight: 700; font-size: .6rem; }
.md-typeset .wfp-command code { padding: 0; font-size: .6rem; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.4em; }
.wfp-action { font-size: .65rem; min-height: 1.3em; line-height: 1.3; font-weight: 600; padding: .15rem .4rem; border-left: 3px solid var(--wfp-git); background: color-mix(in srgb, var(--md-default-bg-color) 88%, var(--wfp-git)); border-radius: 0 .2rem .2rem 0; }
.wfp[data-actor="ado"] .wfp-action, .wfp[data-actor="pipeline"] .wfp-action { border-left-color: var(--wfp-azure); background: color-mix(in srgb, var(--md-default-bg-color) 88%, var(--wfp-azure)); }

/* Local files, Azure DevOps and Fabric share one row. */
.wfp-panes { display: grid; grid-template-columns: minmax(0, 25fr) minmax(0, 25fr) minmax(0, 50fr); grid-template-areas: "repo azdo fabric"; }
.wfp-repo { grid-area: repo; }
.wfp-azdo { grid-area: azdo; }
.wfp-fabric { grid-area: fabric; }
.wfp-pane { min-width: 0; border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.wfp-owner { margin-left: auto; font-size: .5rem; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.wfp-fabric-phase { margin-left: auto; font-size: .5rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.wfp[data-actor="local"] .wfp-repo, .wfp[data-actor="ado"] .wfp-azdo, .wfp[data-actor="pipeline"] .wfp-azdo { box-shadow: inset 0 -3px var(--wfp-accent); }
.wfp-repo { overflow: hidden; border-right: 1px solid var(--md-default-fg-color--lightest); }
.wfp-term, .wfp-history { border-bottom: 0; }
.wfp-content { padding: .4rem; }
.wfp-legend { padding: .3rem .4rem; font-size: .55rem; color: var(--md-default-fg-color--light); display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
.wfp-key { display: inline-block; width: .8rem; margin-right: .25rem; vertical-align: middle; border-top: 2px solid var(--wfp-local); }
.wfp-key-auto { border-top-color: var(--wfp-auto); border-top-style: dotted; }
.wfp-key-allez { border-top-style: dashed; border-top-color: var(--wfp-cross); }

.wfp-details { display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); }
.wfp-history { border-right: 1px solid var(--md-default-fg-color--lightest); }
.wfp-history > div { padding: .4rem; max-height: 12rem; overflow: auto; }
.wfp-azdo { border-right: 1px solid var(--md-default-fg-color--lightest); }
.wfp-jobs-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; align-content: start; }
.wfp-jobs-body > .wfp-transfer, .wfp-jobs-body > .wfp-plan { grid-column: 1 / -1; }
.wfp[data-actor="local"] .wfp-repo > h4, .wfp[data-actor="ado"] .wfp-azdo > h4, .wfp[data-actor="pipeline"] .wfp-azdo > h4 { box-shadow: inset 3px 0 var(--wfp-accent); }
.wfp-pipeline { padding: .3rem; margin-bottom: .3rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .15rem; font-size: .55rem; overflow-wrap: anywhere; }
.wfp-pipeline.is-active { border-left: 2px solid var(--wfp-azure); }
.wfp-pipeline-name { display: flex; justify-content: space-between; align-items: center; gap: .3rem; font-family: var(--md-code-font-family); }
.wfp-pipeline-name small { color: var(--md-default-fg-color--light); font-size: .5rem; }
.wfp-jobs-body { padding: .3rem .4rem; font-size: .55rem; overflow-wrap: anywhere; }
.wfp-jobs-body p { margin: .2rem 0 0; font-size: inherit; }
.wfp-transfer { padding: .25rem .35rem; margin-bottom: .25rem; border-left: 2px solid var(--wfp-git); background: var(--md-code-bg-color); font-family: var(--md-code-font-family); }
.wfp-jobs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.wfp-job { display: flex; justify-content: space-between; align-items: center; gap: .15rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .15rem; padding: .2rem; margin-top: .2rem; }
.wfp-job small { color: var(--md-default-fg-color--light); font-size: .5rem; }
.wfp-job.is-running, .wfp-job.is-waiting { border-color: var(--wfp-azure); }
.wfp-job.is-running { border-left: 3px solid var(--wfp-azure); background: color-mix(in srgb, var(--md-default-bg-color) 82%, var(--wfp-azure)); font-weight: 700; }
.wfp-job.is-running small { color: var(--wfp-azure); }
.wfp-job-indicator { display: inline-block; font-style: normal; }
.wfp[data-playing="true"] .wfp-job.is-running .wfp-job-indicator { animation: wfp-running 1.5s ease-in-out infinite; }
.wfp-job.is-done { border-left: 3px solid var(--wfp-azure); }
.wfp-gate { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .3rem .4rem; font-size: .6rem; }
.wfp-plan { padding: .4rem 0; border-top: 1px solid var(--md-default-fg-color--lightest); }
.wfp-gate[hidden] { display: none; }
.wfp-terminal-source { display: inline-flex; align-items: center; gap: .25rem; margin-left: .25rem; font-weight: 400; text-transform: none; }
.wfp-terminal-source.is-local { color: var(--wfp-git); }
.wfp-terminal-source.is-azure { color: var(--wfp-azure); }

/* terminal */
.wfp-screen { margin: 0; height: calc(12 * 1.5em + 1rem); box-sizing: border-box; overflow: auto; padding: .5rem .6rem; background: transparent; color: var(--md-default-fg-color); font-family: var(--md-code-font-family); font-size: .55rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 0; }
.wfp-line { min-height: 1.5em; }
.wfp-dim { opacity: .7; }
.wfp-bold { font-weight: 700; }
.wfp-cyan { color: var(--md-default-fg-color); }
.wfp-bold-cyan { font-weight: 700; }
.wfp-green { color: var(--wfp-ok); }
.wfp-yellow, .wfp-bold-yellow { color: #8b6500; }
[data-md-color-scheme="slate"] .wfp-yellow, [data-md-color-scheme="slate"] .wfp-bold-yellow { color: #e9c15d; }
.wfp-bold-yellow { font-weight: 700; }
.wfp-red { color: #d33; }

/* repo */
.wfp-repo-head { display: flex; gap: .3rem; margin-bottom: .4rem; flex-wrap: wrap; }
.wfp-sync { font-size: .52rem; color: var(--md-default-fg-color--light); margin-bottom: .25rem; overflow-wrap: anywhere; }
.wfp-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: 1rem; background: var(--md-code-bg-color); font-family: var(--md-code-font-family); font-size: .6rem; }
.wfp-branch { color: var(--wfp-git); border: 1px solid var(--wfp-git); background: none; font-weight: 700; }
.wfp-tag { background: var(--wfp-git); color: var(--md-default-bg-color); }
.wfp-tree, .wfp-log { font-family: var(--md-code-font-family); font-size: .55rem; }
.wfp-tree { box-sizing: border-box; width: 100%; min-width: 0; overflow: hidden; }
.wfp-tree li { display: flex; align-items: center; gap: .2rem; box-sizing: border-box; min-width: 0; max-width: 100%; padding-left: calc(var(--d, 0) * .5rem); overflow: hidden; white-space: nowrap; }
.wfp-tree li.is-open { background: color-mix(in srgb, var(--md-default-bg-color) 80%, var(--wfp-git)); box-shadow: inset 2px 0 var(--wfp-git); color: var(--wfp-git); font-weight: 700; }
.wfp-tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wfp-tree li.is-edited { color: var(--wfp-local); font-weight: 700; }
.wfp-tree li.is-added { color: var(--wfp-ok); font-weight: 700; }
.wfp-file-status { margin-left: .4rem; font-weight: 700; }
.wfp-log .wfp-commit { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: .3rem; height: 22px; min-width: 0; white-space: nowrap; }
.wfp-graph { display: block; overflow: visible; }
.wfp-graph line, .wfp-graph path { fill: none; stroke-width: 1.5; }
.wfp-lane-0 { stroke: var(--wfp-git-main); }
.wfp-lane-1 { stroke: var(--wfp-git-feature); }
.wfp-dot-0 { fill: var(--wfp-git-main); }
.wfp-dot-1 { fill: var(--wfp-git-feature); }
.wfp-graph .is-hollow { fill: var(--md-default-bg-color); stroke: var(--wfp-git-feature); stroke-width: 1.5; }
.wfp-commit-lane-1 .wfp-ref { color: var(--wfp-git-feature); }
.wfp-ref, .wfp-commit-message { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wfp-refs { display: flex; gap: .2rem; }
.wfp-ref { color: var(--wfp-git-main); border: 1px solid currentColor; background: color-mix(in srgb, var(--md-default-bg-color) 88%, currentColor); border-radius: .2rem; padding: 0 .2rem; font-size: .5rem; line-height: 1.4; }
.wfp-ref.wfp-ref-release { color: var(--wfp-git-release); }
.wfp-commit-message { color: var(--md-default-fg-color); }

/* fabric: one row per environment, its workspaces side by side, every card the same height */
.wfp-fabric .wfp-content { position: relative; }
.wfp-grid { box-sizing: border-box; display: grid; width: 100%; min-width: 0; grid-template-columns: 3.2rem repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(4, minmax(3.4rem, auto)); gap: .3rem; align-items: stretch; }
.wfp-column { font-size: .65rem; font-weight: 700; text-align: center; }
.wfp-env-name { display: flex; flex-direction: column; justify-content: center; font-weight: 700; font-size: .6rem; text-transform: uppercase; color: var(--wfp-fabric); border-left: 2px solid var(--wfp-fabric); padding: .2rem; line-height: 1.3; }
.wfp-env-name small { display: block; font-size: .5rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.wfp-ws { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; min-height: 3.4rem; overflow: hidden; border: 1px solid var(--md-default-fg-color--lightest); border-left: 3px solid var(--md-default-fg-color--lightest); border-radius: .25rem; padding: .15rem .3rem; }
.wfp-ws-none { border-style: dashed; border-left-width: 1px; justify-content: center; align-items: center; text-align: center; }
.wfp .is-muted { opacity: .75; }
.wfp-ws { background: color-mix(in srgb, var(--md-default-bg-color) 95%, var(--wfp-fabric)); }
.wfp-ws.is-active { border-left-color: var(--wfp-fabric); background: color-mix(in srgb, var(--md-default-bg-color) 80%, var(--wfp-fabric)); box-shadow: 0 0 0 2px var(--wfp-fabric); }
.wfp-ws.is-done { border-left-color: var(--wfp-fabric); }
.wfp-ws-name { display: flex; align-items: center; gap: .25rem; min-width: 0; font-size: .62rem; line-height: 1.2; font-weight: 700; }
.wfp-ws-name span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfp-ws-git { display: flex; align-items: center; gap: .2rem; color: var(--wfp-git); font-size: .52rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.wfp-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; margin-top: .35rem; flex: 1; align-content: flex-start; }
.wfp-item-row { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; min-width: 0; }
.wfp-item { box-sizing: border-box; display: inline-flex; align-items: center; gap: .15rem; width: fit-content; max-width: 100%; padding: 0 .25rem; border-radius: .2rem; background: var(--md-code-bg-color); font-size: .55rem; line-height: 1.2; position: relative; }
.wfp-empty { color: var(--md-default-fg-color--light); font-size: .6rem; }
.wfp-dep { color: var(--md-default-fg-color--light); }
.wfp-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.wfp-link { fill: none; stroke-width: 1.4; opacity: .8; pointer-events: stroke; }
.wfp-link:hover { opacity: 1; stroke-width: 1.8; }
.wfp-link-items { stroke: var(--wfp-local); }
.wfp-link-auto { stroke: var(--wfp-auto); stroke-dasharray: 1.5 2.5; }
.wfp-link-allez { stroke: var(--wfp-cross); stroke-dasharray: 4 2.5; }
.wfp-head-items { fill: var(--wfp-local); }
.wfp-head-auto { fill: var(--wfp-auto); }
.wfp-head-allez { fill: var(--wfp-cross); }

/* motion */
.wfp[data-playing="true"] .is-new { animation: wfp-in .65s ease-out; }
.wfp[data-playing="true"] .is-flash { animation: wfp-flash 2.4s ease-out; }
.wfp[data-playing="true"] .is-output-new { animation: wfp-output 2.4s ease-out; }
@keyframes wfp-in { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }
@keyframes wfp-flash { 0% { box-shadow: 0 0 0 2px var(--wfp-fabric); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes wfp-running { 50% { opacity: .3; transform: scale(.85); } }
@keyframes wfp-ready { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, transparent 50%, var(--md-accent-fg-color)); } }
@keyframes wfp-output { from { background: color-mix(in srgb, transparent 82%, var(--wfp-accent)); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .wfp[data-playing] .is-new, .wfp[data-playing] .is-flash, .wfp[data-playing] .is-output-new, .wfp[data-playing] .wfp-job.is-running .wfp-job-indicator, .wfp-icon-btn.is-ready, .wfp-approve { animation: none; } .wfp-act::before { transition: none; } }

/* Keep every panel on screen on a laptop; trees and logs scroll inside. */
@media (min-width: 60em) {
  .wfp { display: grid; box-sizing: border-box; height: min(calc(100dvh - 4rem), 41.5rem); min-height: 660px; grid-template-columns: minmax(0, 25fr) minmax(0, 25fr) minmax(0, 50fr); grid-template-rows: auto auto minmax(0, 20.5rem) minmax(0, 1fr); grid-template-areas: "acts acts acts" "bar bar bar" "repo azdo fabric" "details details details"; scroll-margin-top: 3rem; }
  .wfp-acts { grid-area: acts; }
  .wfp-bar { grid-area: bar; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; padding: .3rem .5rem; }
  .wfp-title { grid-column: 2; }
  .wfp-ctl { grid-column: 1; grid-row: 1; align-self: start; }
  .wfp-action { grid-column: 1 / -1; }
  .wfp-note { font-size: .6rem; }
  .wfp-panes { display: contents; }
  .wfp-pane { min-height: 0; }
  .wfp-fabric, .wfp-repo, .wfp-azdo, .wfp-term, .wfp-history { display: flex; flex-direction: column; }
  .wfp-pane > h4 { flex: none; padding: .2rem .45rem; }
  .wfp-fabric .wfp-content { flex: 1; min-height: 0; }
  .wfp-grid { height: 100%; grid-template-rows: auto repeat(4, minmax(0, 1fr)); gap: .2rem; }
  .wfp-ws { min-height: 0; padding: .25rem .4rem; }
  .wfp-ws-name { font-size: .55rem; }
  .wfp-ws-git { font-size: .5rem; }
  .wfp-env-name { font-size: .55rem; }
  .wfp-legend { flex: none; padding: .2rem .4rem; font-size: .5rem; }
  .wfp-repo .wfp-content, .wfp-jobs-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
  .wfp-sync { min-height: 1rem; margin: 0; }
  .wfp-tree li { break-inside: avoid; line-height: 1.75; }
  .wfp-details { grid-area: details; min-height: 0; }
  .wfp-history > div { min-height: 0; max-height: none; flex: 1; }
  .wfp-command { flex: none; flex-direction: row; align-items: baseline; gap: .4rem; }
  .wfp-actor { display: none; }
  .wfp-screen { height: auto; min-height: 0; flex: 1; padding: .25rem .5rem; }
  .wfp-jobs { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .wfp-jobs-body { grid-template-columns: minmax(0, 1fr); }
  .wfp-job { flex-wrap: wrap; padding: .1rem .2rem; margin-top: .1rem; }
  .wfp-transfer { padding: .1rem .25rem; margin-bottom: 0; font-size: .5rem; }
  .wfp-pipeline { padding: .15rem .25rem; margin: 0; }
  .wfp-gate { padding: .15rem .4rem; }
}

@media (max-width: 59.9375em) {
  .wfp-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "repo azdo" "fabric fabric"; }
  .wfp-grid { grid-template-columns: 2.5rem repeat(2, minmax(0, 1fr)); }
  .wfp-ws-name span { white-space: normal; overflow-wrap: anywhere; }
  .wfp-item { overflow-wrap: anywhere; }
  .wfp-jobs-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 44.9375em) {
  .wfp-panes { grid-template-columns: 1fr; grid-template-areas: "repo" "azdo" "fabric"; }
  .wfp-details { grid-template-columns: 1fr; }
  .wfp-history { border-right: 0; border-bottom: 1px solid var(--md-default-fg-color--lightest); }
  .wfp-azdo { border-right: 0; border-bottom: 1px solid var(--md-default-fg-color--lightest); }
  .wfp-repo { border-right: 0; }
  .wfp-screen { height: calc(10 * 1.5em + 1rem); }
  .wfp-grid { grid-template-columns: 2.8rem repeat(2, minmax(0, 1fr)); }
  .wfp-ws-name span { white-space: normal; overflow-wrap: anywhere; }
  .wfp-item { overflow-wrap: anywhere; }
  .wfp-ctl { flex-wrap: wrap; }
}