/* Dragonfly Circuit: shared presentation layer. Ticket behavior remains in index.html. */
/* BRAND-COLORS.md, copied exactly (ground rule 11; test/brand-colors.test.js). The role tokens below are these. */
:root{color-scheme:light;--df-navy:#131533;--df-violet:#5B3E84;--df-blue:#3C67A6;--df-teal:#29A4A6;--df-teal-ink:#1F7B7D;--df-blue-light:#678FC8;--df-violet-light:#9B7FC3;--df-page:#F4F5F9;--df-surface-dark:#1D2047;--df-text-dark:#E8EAF4;--ink:var(--df-navy);--muted:#545A78;--line:#DADDE8;--panel:#fff;--page:var(--df-page);--teal:var(--df-teal-ink);--teal-bg:#EDF7F7;--red:#a73546;--red-bg:#fff0f2;--amber:#81541a;--amber-bg:#fff3dd;--purple:var(--df-violet);--surface2:#F2F3F8;--button-text:#fff;--shadow:0 8px 30px #13153312}
:root[data-circuit-theme=dark]{color-scheme:dark;--ink:var(--df-text-dark);--muted:#A9ADCB;--line:#33376A;--panel:var(--df-surface-dark);--page:var(--df-navy);--teal:var(--df-teal);--teal-bg:#182C47;--red:#ffb4c0;--red-bg:#48283e;--amber:#f0ca8a;--amber-bg:#403326;--purple:var(--df-violet-light);--surface2:#252957;--button-text:var(--df-navy);--shadow:0 16px 50px #0005}
body{line-height:1.5;background:var(--page)}
button,input,select,textarea{color:var(--ink);background:var(--panel)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
button{border-color:var(--line);border-radius:7px;min-height:36px}button.primary,.auth-btn{background:var(--teal);border-color:var(--teal);color:var(--button-text)}
#auth-screen{background:var(--page)}.auth-card{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:2px solid var(--purple);border-radius:8px;box-shadow:var(--shadow)}.auth-logo{background:#fff}.auth-subtitle,.auth-note{color:var(--muted)}
header{height:auto;min-height:70px;padding:12px 28px;background:var(--panel);color:var(--ink);border-top:2px solid var(--purple);border-bottom:1px solid var(--line);box-shadow:none}.header-title,.header-divider,.user-pill,.sign-out-btn{color:var(--muted)}.user-pill{background:var(--surface2)}.user-avatar{background:var(--teal);color:var(--button-text)}.sign-out-btn{border-color:var(--line)}.plan-badge{color:var(--purple);border-color:var(--purple);background:transparent;border-radius:4px}
.appearance-control{display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface2);color:var(--muted);flex:none}.appearance-control span{display:flex;pointer-events:none}
.circuit-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 16px;padding:24px 26px 20px;background:linear-gradient(120deg,var(--panel),transparent);border:1px solid var(--line);border-top:2px solid var(--purple);border-radius:6px}.circuit-intro span{color:var(--purple);font-size:11px;letter-spacing:1.2px;font-weight:700}.circuit-intro h1{font-size:27px;line-height:1.2;letter-spacing:-.6px;margin:6px 0}.circuit-intro p{margin:0;color:var(--muted);font-size:13px}.circuit-intro svg{width:210px;height:70px;color:var(--teal);opacity:.18;flex:none}
main{padding:20px 28px;grid-template-columns:minmax(0,1fr);gap:18px}main>section{min-width:0;overflow-x:auto}.toolbar{padding:12px 14px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:6px}.toolbar input,.toolbar select,textarea,dialog input,dialog select,dialog textarea{background:var(--surface2);color:var(--ink);border-color:var(--line)}
table,.detail-dialog,dialog,.msg{background:var(--panel);border-color:var(--line);border-radius:6px;box-shadow:0 3px 14px #13153308}table{min-width:940px}th{background:var(--surface2);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}th:nth-child(2),td:nth-child(2){min-width:190px}th:nth-child(3),td:nth-child(3){min-width:190px}th:last-child,td:last-child{min-width:170px}td{padding-block:12px}tr.row:hover,tr.row.selected{background:var(--surface2)}.detail-dialog{border-top:2px solid var(--purple)}.pill{border-radius:4px}.msg.out{background:var(--teal-bg);border-color:var(--teal)}#toast{background:var(--ink);color:var(--page)}
@media(max-width:960px){header{padding-inline:16px}.circuit-intro{padding:18px}.circuit-intro svg{display:none}main{padding:16px;grid-template-columns:1fr}.header-right{gap:8px}}
@media(max-width:600px){.header-title,.header-divider,.user-pill span{display:none}.header-mark img{max-width:58px}.auth-card{padding:24px 18px}.toolbar>*{flex:1 1 140px}.toolbar .grow{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.auth-card>.appearance-control{margin:0 0 16px auto}
/* The Lite/Premium test switch (dev, qa, demo only). index.html styles it white-on-transparent for the
   pre-Circuit navy header; on Circuit's white light-mode header that was invisible (Matthew, 2026-09-24). */
.tier-switch{color:var(--muted);border-color:currentColor}.tier-switch:hover{background:var(--surface2);color:var(--ink)}
/* Sign-in card, Matthew 2026-09-24: the product name larger and in the main ink, and the environment line as a
   yellow caution badge. The old brown (#784600) read 2.1:1 on the dark card. The badge is 11:1 in both modes and
   never shows empty: prod has no environment line. */
.auth-subtitle{font-size:1.05rem;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.auth-env{display:inline-block;margin:0 0 1rem;padding:.3rem .75rem;border:1px solid #d9a800;border-radius:6px;background:#ffd23f;color:#2b2100;font-size:.95rem;font-weight:800;letter-spacing:.04em}
.auth-env:empty,.auth-env[hidden]{display:none}
/* Sign-in card, Matthew 2026-09-24: the product name on the top row beside the appearance control, above the logo,
   and the DEV badge evenly spaced between the logo and the sign-in button. The control is pinned to the card's corner
   so the name can share its row; the name's side padding keeps it clear of the control, more on a phone,
   where the card's own padding is narrower. The logo owns the gap below it, so prod, which has no badge, keeps the same gap. */
.auth-card{position:relative;padding-top:1.6rem}
.auth-card>.appearance-control{position:absolute;top:1.1rem;right:1.1rem;margin:0}
.auth-card>.auth-subtitle{min-height:34px;display:flex;align-items:center;justify-content:center;margin:0 0 1rem;padding:0 16px;font-size:1.15rem}
.auth-card>.auth-logo-wrap{margin-bottom:1.4rem}
.auth-card>.auth-env{margin:0 0 1.4rem}
@media(max-width:600px){.auth-card>.auth-subtitle{padding:0 42px}}
/* The Premium tier badge, Matthew 2026-09-24 ("looks weird", seen on the Project Tracker): the
   pre-Circuit pages filled it dark green and the rule above colored its text Circuit purple, so
   Premium read purple on dark green; the Agreement Tracker never filled it, so Premium looked like
   Lite. Premium is the primary teal chip with the button text color, 5.0:1 in light and 5.9:1 in
   dark, and Lite keeps the violet outline. The same in all four products. In the navy header the
   shared:navy-header block below draws both in Teal (BRAND-COLORS.md). */
body[data-plan="premium"] .plan-badge{background:var(--teal);border-color:var(--teal);color:var(--button-text)}

/* Compact working headers: general update for Lite and Premium. */
.circuit-intro{padding:14px 20px;margin-bottom:12px;gap:12px}
.circuit-intro h1{font-size:22px;line-height:1.25;letter-spacing:-.4px;margin:0 0 4px}
.circuit-intro p{margin:0;font-size:14px;line-height:1.45}
.circuit-intro>div>span,.circuit-intro>svg{display:none}
@media(max-width:600px){
  .circuit-intro{padding:12px 16px;margin-bottom:10px}
  .circuit-intro h1{font-size:20px}
  .circuit-intro p{font-size:13px}
}

/* Keep the environment-only tier switch on its own row on narrow screens. */
@media(max-width:600px){
  #app>header:not(.top),.brand-bar{flex-wrap:wrap;gap:8px;padding:10px 16px}
  .header-left,.brand-left{display:contents}
  .header-right{margin-left:auto;gap:6px;flex-shrink:0}
  .tier-switch{order:3;flex:1 0 100%;width:100%;margin:0;min-height:32px;
    white-space:normal;border-radius:6px;padding:6px 10px}
}

.workspace-tools{--workspace-line:var(--line);--workspace-panel:var(--panel);--workspace-accent:var(--teal)}

/* ⚙ Tools ▾ (dry run 5, Matthew 2026-10-08): a teal-outline button on the right of its bar, whose
   panel drops down under it, right-aligned, over the content. Opening it re-flows nothing and never
   moves the button. A native disclosure, so the summary opens and closes it from the keyboard; the
   page closes it on Escape and on a click outside. The same in all four products. */
.workspace-tools{position:relative;flex:0 0 auto;min-width:0;margin-left:auto}
.workspace-tools>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;
  border:1px solid var(--workspace-accent);border-radius:6px;background:var(--workspace-panel);
  color:var(--workspace-accent);font-size:14px;font-weight:600;line-height:22px;white-space:nowrap}
.workspace-tools>summary::-webkit-details-marker{display:none}
.workspace-tools>summary:hover,.workspace-tools[open]>summary{background:var(--teal-bg)}
.workspace-tools>summary:focus-visible{outline:2px solid var(--workspace-accent);outline-offset:3px}
.workspace-tools .workspace-tool-list{position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;width:max-content;min-width:220px;
  max-width:min(320px,calc(100vw - 32px));padding:8px;border:1px solid var(--workspace-line);border-radius:6px;
  background:var(--workspace-panel);box-shadow:var(--shadow)}
.workspace-tool-list>button,.workspace-tool-list>a{min-height:40px;justify-content:flex-start;text-align:left}

.toolbar select,.toolbar input{min-height:40px;padding:8px;border:1px solid var(--line);border-radius:6px;font-size:14px}
.toolbar>.primary{min-height:40px}
td{font-size:14px}
.num{white-space:nowrap}
@media(max-width:600px){
  .toolbar{gap:8px;padding:10px}
  .toolbar>.primary{flex:1 1 180px}
  .toolbar>.workspace-tools{flex:0 0 auto;margin-left:auto}
  .toolbar>#f-q{flex:1 0 100%;min-width:0!important;width:100%}
  .toolbar>.work-views{flex:1 0 100%}.work-views>button{flex:1 1 auto}
  .toolbar>#f-status,.toolbar>#f-queue{flex:1 1 calc(50% - 8px);min-width:0}
  .toolbar>#refreshed:empty{display:none}
  .rollup{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:6px;scroll-snap-type:x proximity}
  .rollup-card{flex:0 0 170px;scroll-snap-align:start}
}

/* Phone workspaces keep the first useful record close to the controls. */
@media(max-width:640px){.circuit-intro p{display:none}.circuit-intro{padding-block:8px}.circuit-intro h1{margin:0;font-size:18px}}

/* The Overdue and Due today pills in the dark palette (the dry run of 2026-10-07; the light ones are
   in index.html). The same pair in all four products. */
:root[data-circuit-theme=dark] .pill-overdue{background:#4c1d1d;color:#fecaca}
:root[data-circuit-theme=dark] .pill-today{background:#45300c;color:#fde68a}
/* The plan card's Premium glow, in the dark palette's teal. */
:root[data-circuit-theme=dark] .plan-card-premium{box-shadow:0 5px 22px #70d9da22}

/* dialog-chrome -- every pop-up window, the same in all four products (test/dialog-chrome.test.js).
   Matthew, 2026-10-08: "I have to scroll all the way back up to the top and click the X in the
   corner to close this window". The title row and its close button stay at the top while the
   body scrolls under them; a window with nothing to save ends with a Close button of its own;
   Escape closes it; and every title is 1.3rem, 700, in the heading color. The header takes over
   the window's top padding, so it sticks to the very top edge with no strip above it. */
dialog,.detail-dialog,.plan-dialog,.report-dialog{padding-top:0}
.dialog-head{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--panel);border-bottom:1px solid var(--line);margin:0 -18px 12px;padding:14px 18px 10px}
.dialog-head h2,dialog h2{margin:0;font-size:1.3rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.detail-dialog .dialog-head{margin:0 -20px 10px;padding:16px 20px 10px}
.plan-dialog .dialog-head{margin:0 -1.5rem 1.25rem;padding:1.25rem 1.5rem .75rem}
.dialog-x,.detail-close{flex-shrink:0;min-width:36px;min-height:36px;padding:0 6px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer}
.dialog-x:hover,.detail-close:hover{background:var(--surface2);color:var(--ink)}
.dialog-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.report-dialog .dialog-head{flex-wrap:wrap;align-items:center}.report-dialog .dialog-head h2{flex:1 1 auto}
@media(max-width:720px){.plan-dialog .dialog-head{margin:0 -1rem 1rem;padding:1rem 1rem .6rem}.report-dialog .dialog-head .report-range{order:3;flex-basis:100%}}
/* end dialog-chrome */
/* The import page's "← Queue" link is this product's own control in the top bar (an a.back, where the
   others have a .btn), so it takes the navy bar's button colors here, beside the shared block. */
#app>header:first-child .back{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
#app>header:first-child .back:hover{background:rgba(255,255,255,.08);border-color:var(--df-teal)}
/* shared:ai-mark-dark -- identical in all four products (test/brand-colors.test.js). BRAND-COLORS.md's
   Violet light reads 4.6:1 on a dark card but 4.0:1 on the AI box's own violet tint, so in dark mode the
   AI marks take the same hue lightened, 5.7:1 there: the shade the file allows where text would fail. */
:root[data-circuit-theme=dark] :is(.ai-label,.ai-fill-note,.ai-filled,.ai-filled span,#entry-mode.entry-mode-filled){color:color-mix(in srgb,var(--df-violet-light) 75%,#fff)}
/* end shared:ai-mark-dark */
/* shared:navy-header -- identical in all four products (test/brand-colors.test.js, test/parity.test.js).
   Matthew, 2026-10-10 (BRAND-COLORS.md, ground rule 11): the top bar is Deep Navy in both modes, its
   text white, and its own accents -- the underline, the plan badge, the tier switch, the avatar and
   focus rings -- Teal. The selector is each product's top bar, the header that opens #app on the board
   and on the import page (the Project Tracker's brand bar), never a header.top card inside <main>
   (the Project Tracker's project card and its import page's title).
   Since 2026-10-10 (checklist item 95, "My big thing is consistency with all these apps") this block
   sets the whole header, not only its colors: every part's type, size, spacing and the three
   breakpoints, so no product rule can make one product's header read differently (the CRM's "/" was
   a different glyph from the Agreement Tracker's because the header inherited each page's own font
   stack). The anatomy and every value are DESIGN.md's "UI standard"; a product keeps only its own
   title text and its own placement on the page: whether the bar sticks, and the Project Tracker's bleeding out of .wrap.
   Values are the Agreement Tracker's, the reference, except where three products agreed. */
#app>header:first-child{background:var(--df-navy);color:#fff;border-top-color:var(--df-navy);border-bottom-color:var(--df-teal)}
#app>header:first-child :is(.header-title,.brand-title,.who,.user-pill,.sign-out-btn){color:#fff}
#app>header:first-child #header-title{font-family:system-ui,-apple-system,sans-serif;font-size:.85rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:#fff}
#app>header:first-child :is(.header-divider,.brand-divider){color:rgba(255,255,255,.6)}
#app>header:first-child .user-pill{background:rgba(255,255,255,.1)}
#app>header:first-child .user-avatar{background:var(--df-teal);color:var(--df-navy)}
#app>header:first-child :is(.sign-out-btn,.btn,.appearance-control){background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
#app>header:first-child :is(.sign-out-btn,.btn,.appearance-control):hover{background:rgba(255,255,255,.08);color:#fff;border-color:var(--df-teal)}
#app>header:first-child .tier-switch{color:#fff;border-color:var(--df-teal)}
#app>header:first-child .tier-switch:hover{background:rgba(255,255,255,.12);color:#fff}
#app>header:first-child .plan-badge{background:transparent;border-color:var(--df-teal);color:var(--df-teal)}
body[data-plan="premium"] #app>header:first-child .plan-badge{background:var(--df-teal);border-color:var(--df-teal);color:var(--df-navy)}
#app>header:first-child :focus-visible{outline-color:var(--df-teal)}
#app>header:first-child{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:18px;box-sizing:border-box;height:auto;min-height:70px;padding:12px 28px;box-shadow:none;border-width:2px 0 1px;border-style:solid;font-family:system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;font-style:normal;line-height:1.5;letter-spacing:normal;text-transform:none}
#app>header:first-child .header-left{display:flex;align-items:center;gap:12px;min-width:0;margin:0;padding:0}
#app>header:first-child .header-mark{display:inline-flex;align-items:center;flex-shrink:0;margin:0;padding:0}
#app>header:first-child .header-mark img{display:block;height:34px;width:auto;max-width:none;margin:0;padding:0}
#app>header:first-child .header-divider{font-family:system-ui,-apple-system,sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:normal;margin:0;padding:0;opacity:1}
#app>header:first-child #header-title{margin:0;padding:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app>header:first-child .plan-badge{display:inline-flex;align-items:center;box-sizing:border-box;min-height:0;margin:0;padding:1px 8px;border-width:1px;border-style:solid;border-radius:4px;font-family:system-ui,-apple-system,sans-serif;font-size:10.5px;font-weight:700;line-height:16px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
#app>header:first-child .tier-switch:not([hidden]){display:inline-flex}
#app>header:first-child .tier-switch{align-items:center;box-sizing:border-box;min-height:0;width:auto;flex:0 1 auto;order:0;margin:0 0 0 6px;padding:1px 9px;border-width:1px;border-style:dashed;border-radius:999px;font-family:system-ui,-apple-system,sans-serif;font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;background:transparent}
#app>header:first-child .header-right{display:flex;align-items:center;gap:16px;flex-shrink:0;margin:0;padding:0}
#app>header:first-child [data-appearance]:not([hidden]){display:grid}
#app>header:first-child [data-appearance]{place-items:center;box-sizing:border-box;width:34px;height:34px;min-height:34px;flex:0 0 auto;margin:0;padding:0;border-width:1px;border-style:solid;border-radius:50%;font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;cursor:pointer}
#app>header:first-child .user-pill{display:flex;align-items:center;gap:8px;box-sizing:border-box;margin:0;padding:3.2px 12px 3.2px 4px;border:0;border-radius:999px;font-family:system-ui,-apple-system,sans-serif;font-size:12.8px;font-weight:400;line-height:1.5;letter-spacing:normal;white-space:nowrap}
#app>header:first-child .user-avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;margin:0;padding:0;border-radius:50%;font-size:10.4px;font-weight:700;line-height:1.5;letter-spacing:normal}
#app>header:first-child #user-name{font-size:12.8px;font-weight:400;line-height:1.5;color:#fff;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app>header:first-child .sign-out-btn{box-sizing:border-box;min-height:36px;margin:0;padding:4.8px 11.2px;border-width:1px;border-style:solid;border-radius:6px;font-family:system-ui,-apple-system,sans-serif;font-size:12.48px;font-weight:400;line-height:1.5;letter-spacing:normal;white-space:nowrap;cursor:pointer}
/* When space runs short the header gives way in one order, the same in all four, and no part ever
   wraps its own text: first the tier switch takes its short label (data-short, "Lite · switch"),
   then the signed-in name goes and the avatar stays, then the title shortens with an ellipsis (the
   whole name is its title attribute), then below 800px the switch drops to a row of its own and
   below 600px the title and the "/" go. 1440px at 125% zoom is 1152px wide, at 150% 960px. */
@media(max-width:1180px){#app>header:first-child .tier-switch[data-short]{font-size:0;letter-spacing:0}#app>header:first-child .tier-switch[data-short]::after{content:attr(data-short);font-size:10px;letter-spacing:.06em}}
@media(max-width:1100px){#app>header:first-child #user-name{display:none}#app>header:first-child .user-pill{padding:5px}}
@media(max-width:960px){#app>header:first-child{padding-inline:16px}#app>header:first-child .header-right{gap:8px}}
@media(max-width:850px){#app>header:first-child{padding:10px 16px;gap:10px}}
@media(max-width:800px){
#app>header:first-child{flex-wrap:wrap;gap:8px;padding:10px 16px}
#app>header:first-child .header-left{display:contents}
#app>header:first-child #header-title{flex:1 1 0;max-width:max-content}
#app>header:first-child .tier-switch{order:3;flex:1 0 100%;width:100%;margin:0;min-height:32px;border-radius:6px;padding:6px 10px;overflow:hidden;text-overflow:ellipsis}
#app>header:first-child .tier-switch[data-short]{font-size:10px;letter-spacing:.06em}
#app>header:first-child .tier-switch[data-short]::after{content:none}
#app>header:first-child .header-right{margin-left:auto;gap:6px;flex-shrink:0}
}
@media(max-width:600px){
#app>header:first-child .header-mark img{max-width:54px}
#app>header:first-child :is(#header-title,.header-divider){display:none}
#app>header:first-child .sign-out-btn{padding-inline:9px}
}
/* end shared:navy-header */
/* shared:environment-banner-and-plan-badge -- identical in all four products (test/design-md.test.js).
   Matthew, 2026-09-25: the Agreement Tracker's badge and the Project Tracker's banner did not match
   the others. The look is the Ticket Tracker's and the CRM's: banner, badge and header title. Each page keeps its own
   display rules (dev and qa only) and layout margins. */
html body .env-banner,html body .environment-banner{background:#fff3dd;color:#81541a;border:0;border-bottom:1px solid #ef9f27;border-radius:0;padding:6px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:normal;text-transform:none;text-align:center}
html[data-circuit-theme=dark] body .env-banner,html[data-circuit-theme=dark] body .environment-banner{background:#403326;color:#f0ca8a}
html body .plan-badge{background:transparent;border:1px solid var(--purple);color:var(--purple);border-radius:4px;padding:1px 8px;font-size:10.5px;font-weight:700;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
html body .header-title,html body .brand-title{font-size:.85rem;letter-spacing:.06em;font-weight:400;text-transform:uppercase}
/* end shared:environment-banner-and-plan-badge */