/* Dragonfly Circuit: presentation only; project and importer behavior remain unchanged. */
/* BRAND-COLORS.md, copied exactly (ground rule 11; test/brand-colors.test.js). The role tokens below are these. */
:root{--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;--amber:#81541a;--amber-bg:#fff3dd;--button-text:#fff;--crit-ink:#a73546;--crit-bg:#fff0f2;--plane:var(--df-page);--surface:#fff;--surface-2:#F2F3F8;--ink:var(--df-navy);--ink-2:#545A78;--ink-3:#5F6582;--hair:#DADDE8;--grid:#DADDE8;--accent:var(--df-teal-ink);--accent-fill:var(--df-teal-ink);--accent-soft:#EDF7F7;--purple:var(--df-violet);--shadow:0 8px 30px #13153312}
:root[data-circuit-theme=dark]{color-scheme:dark;--button-text:var(--df-navy);--amber:#f0ca8a;--amber-bg:#403326;--plane:var(--df-navy);--surface:var(--df-surface-dark);--surface-2:#252957;--ink:var(--df-text-dark);--ink-2:#A9ADCB;--ink-3:#9DA2C2;--hair:#33376A;--grid:#33376A;--accent:var(--df-teal);--accent-fill:var(--df-teal);--accent-soft:#182C47;--purple:var(--df-violet-light);--good-bg:#173b32;--warn-bg:#403326;--crit-bg:#48283e;--good-ink:#8ee0b8;--warn-ink:#f0ca8a;--crit-ink:#ffb4c0;--shadow:0 16px 50px #0005}
body{background:var(--plane);color:var(--ink)}button,input,select,textarea{color:var(--ink)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gate-screen{background:var(--plane)!important}.auth-card{background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-top:2px solid var(--purple);border-radius:8px;box-shadow:var(--shadow)}.auth-logo{background:#fff}.auth-subtitle,.auth-note{color:var(--ink-2)}
.wrap{max-width:none;width:100%;padding:0 28px 80px}
.brand-bar{margin:0 -28px;min-height:70px;height:auto;padding:12px 28px;gap:18px;flex-shrink:0;background:var(--surface);color:var(--ink);border-top:2px solid var(--purple);border-bottom:1px solid var(--hair);box-shadow:none}
.brand-title,.brand-divider,.user-pill,.sign-out-btn{color:var(--ink-2)}.brand-title{font-size:13px;letter-spacing:.03em}.user-pill{background:var(--surface-2)}.header-right .who{color:inherit}.user-avatar{background:var(--accent);color:var(--button-text)}.sign-out-btn{border-color:var(--hair);min-height:36px}.sign-out-btn:hover{color:var(--ink);border-color:var(--accent)}
.env-banner{margin:0 -28px;font-size:12px;background:var(--amber-bg);color:var(--amber);border-bottom:1px solid #EF9F27;padding:6px;font-weight:600}
/* The intro is a bordered card with the purple top rule, as the CRM's and the Ticket Tracker's .circuit-intro (C16, 2026-10-04); until then it was a full-bleed band. */
header.top{margin:16px 0 0;padding:20px 24px 18px;background:linear-gradient(120deg,var(--surface),transparent);border:1px solid var(--hair);border-top:2px solid var(--purple);border-radius:6px}h1{font-size:28px;letter-spacing:-.5px}.plan-badge{border-radius:4px;border:1px solid var(--purple);background:transparent;color:var(--purple);font-size:11px;line-height:1.2}
#theme,.appearance-control{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;padding:0;border:1px solid var(--hair);border-radius:50%;background:var(--surface-2);color:var(--ink-2);cursor:pointer}.appearance-control>span{display:flex;pointer-events:none}#theme:hover,.appearance-control:hover{border-color:var(--accent);color:var(--ink)}
.stats{gap:14px}.tile,.controls,.task,.pcard,.card{border-radius:6px;box-shadow:0 3px 14px #13153308}.tile{border-top:2px solid var(--hair)}.tile:nth-child(3n){border-top-color:var(--purple)}.tile:last-child{border-top-color:var(--accent)}
.controls{padding:16px 18px}.chip,.b,.t-id{border-radius:4px}.chip[aria-pressed=true]{color:var(--plane)}.ph-letter{border-radius:5px;background:var(--accent)}.task{padding:15px 16px}.cb{border-radius:4px}.ghost{border-radius:7px;background:var(--surface)}
.banner{border-radius:0 6px 6px 0}.auth-btn{background:var(--accent);color:var(--button-text);border-radius:7px}.auth-btn:hover{filter:brightness(1.06)}
@media(max-width:850px){.wrap{padding-inline:16px}.brand-bar{margin-inline:-16px;padding:10px 16px;gap:10px}.brand-left{min-width:0}.brand-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-right{gap:8px}.env-banner{margin-inline:-16px}header.top{padding-inline:16px}.row{gap:10px}}
@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(--ink-2);border-color:currentColor}.tier-switch:hover{background:var(--surface-2);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(--accent);border-color:var(--accent);color:var(--button-text)}

/* The header collapses at 600px, the same breakpoint in all four products (C14, 2026-10-04; it
   was 560 here): the title and the signed-in name go, the mark shrinks, and the environment-only
   tier switch takes its own row. */
@media(max-width:600px){
  .user-pill .who,.brand-title,.brand-divider{display:none}
  .user-pill{padding:5px}.brand-mark img{max-width:54px}.sign-out-btn{padding-inline:9px;white-space:nowrap}
  #app>header:not(.top),.brand-bar{flex-wrap:wrap;gap:8px;padding:10px 16px}
  .header-left,.brand-left{display:contents;gap:.45rem}
  .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;font-size:9px;
    white-space:normal;border-radius:6px;padding:6px 10px}
}

/* The selected project is the working context in both tiers. */
.top .title-row{display:flex}
header.top{padding-block:16px;gap:16px}
#p-title{font-size:24px;line-height:1.25;margin:0;overflow-wrap:anywhere}
.top .sub{font-size:14px;margin-top:6px}
.controls{padding:12px 16px;margin-top:16px}
.controls input,.controls .chip{min-height:36px;font-size:14px}
/* One text size across the toolbar and filters (dry run 3, 2026-10-07): labels, chips, the search
   box, Advanced, Clear filters and the view switcher were 11.5, 13, 14 and 15px. */
.controls label.fl,.controls .chip,.controls input,.controls summary,.controls .ghost,.active-filters{font-size:14px}
/* The actions bar, the same size as the toolbar's buttons (dry run 3, 2026-10-07): New project was a
   13px ghost and Add task a 15px bold primary. Add task keeps the primary color, nothing else. */
.basic-actions .ghost,.basic-actions .primary{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:36px;padding:7px 14px;border:1px solid var(--hair);border-radius:7px;font-size:14px;font-weight:600;line-height:20px}
.basic-actions .primary{border-color:var(--accent-fill)}
.basic-actions [hidden]{display:none}
/* A primary button's text is the theme's button text: white on light teal read 1.6:1 in dark
   (found checking the actions bar in dark, dry run 3, 2026-10-07). Light is unchanged (#fff). */
.primary{color:var(--button-text)}
.cb{width:24px;height:24px;flex-shrink:0}
.stats{gap:10px;margin-top:14px}
.tile{padding:12px}
@media(max-width:600px){
  #p-title{font-size:21px}
  header.top{flex-wrap:wrap;padding-block:14px}
  header.top>div{min-width:0;max-width:100%}
  header.top>div:last-child{flex-wrap:wrap}
  .top .ghost,.top .import-link{min-height:40px}
  .controls #q{width:100%!important;min-width:0}
  .controls .chip,.basic-actions .ghost,.basic-actions .primary{min-height:40px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The skip link (C9, 2026-10-04): off-screen until it takes focus, then the first thing on the page. */
.skip-link{position:absolute;top:-100px;left:12px;z-index:300;padding:8px 14px;background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:6px;text-decoration:none;font-weight:600}
.skip-link:focus{top:10px}

/* The Tools disclosure (C15, 2026-10-04): the Agreement Tracker's .workspace-tools rules with this
   product's token names. A native disclosure keeps the secondary tools keyboard accessible without
   a handler; open, it takes the whole row of the intro card. */
.workspace-tools{--workspace-line:var(--hair);--workspace-panel:var(--surface);--workspace-accent:var(--accent)}
.workspace-tools{flex:0 0 auto;min-width:0}
.workspace-tools>summary{cursor:pointer;list-style:revert;min-height:40px;padding:8px 12px;
  border:1px solid var(--workspace-line);border-radius:6px;background:var(--workspace-panel);
  color:inherit;font-size:14px;line-height:22px;white-space:nowrap}
.workspace-tools>summary:focus-visible{outline:2px solid var(--workspace-accent);outline-offset:3px}
/* ⚙ Tools ▾ stays put (dry run 5, 2026-10-08, the same in all four products): on the right of its
   bar, a teal-outline button, and the panel a drop-down under it, right-aligned and over the
   content, so opening it never re-flows the bar or moves the button. Escape, a click outside and a
   second click close it (assets/index-page.js, closeTools()). */
.workspace-tools{position:relative}
.workspace-tools>summary{list-style:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;min-height:32px;padding:4px 12px;border-color:var(--accent);border-radius:6px;color:var(--accent);font-size:13px;font-weight:600;line-height:1.2}
.workspace-tools>summary::-webkit-details-marker{display:none}
.workspace-tools>summary:hover,.workspace-tools[open]>summary{background:var(--accent-soft)}
.workspace-tools .workspace-tool-list{position:absolute;top:calc(100% + 6px);right:0;z-index:80;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}

/* Overdue / Due today pills, dark (dry run 3, 2026-10-07). */
:root[data-circuit-theme=dark] .pill-overdue{background:#4c1d1d;color:#fecaca}
:root[data-circuit-theme=dark] .pill-today{background:#422a06;color:#fde68a}
/* 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. */
.plan-dialog,.copy-dialog,.basic-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(--surface);border-bottom:1px solid var(--hair);margin:0 -18px 12px;padding:14px 18px 10px}
.dialog-head h2,.plans-head h2,.basic-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}
.basic-dialog .dialog-head{margin:0 -24px;padding:20px 24px 12px}
.dialog-x{flex-shrink:0;min-width:36px;min-height:36px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:var(--ink-2);font-size:1.2rem;line-height:1;cursor:pointer}
.dialog-x:hover{background:var(--surface-2);color:var(--ink)}
.dialog-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
@media(max-width:720px){.plan-dialog .dialog-head{margin:0 -14px 12px;padding:12px 14px 10px}}
@media(max-width:640px){.basic-dialog .dialog-head{margin:0 -18px;padding:14px 18px 10px}}
/* end dialog-chrome */
/* 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 */