/* ui.techdynamix.com only: the strip bin/build-site puts on top of every example page, with the way back
   to the site. Not part of the kit: apps never get it. Fixed colors so it reads as site chrome, not the example.
   Self contained (no kit tokens or classes), because some examples, like the email, do not load td-ui.css. */
.kit-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 35; height: 36px;
    display: flex; align-items: center; gap: 16px; padding: 0 16px; box-sizing: border-box;
    background: #17191C; color: #F6F7F8;   /* kit-check: allow: site chrome, same in both themes */
    border-bottom: 2px solid #E87722;   /* kit-check: allow: site chrome */
    font: 500 13px/1 "IBM Plex Sans", system-ui, sans-serif;
}
.kit-bar a { color: #F6F7F8; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }   /* kit-check: allow: site chrome */
.kit-bar a:hover { color: #E87722; }   /* kit-check: allow: site chrome */
.kit-bar a:focus-visible { outline: 2px solid #E87722; outline-offset: 2px; }   /* kit-check: allow: site chrome */
.kit-bar svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.kit-bar-home { font-weight: 600; }
.kit-bar-title { color: #9AA2AD; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* kit-check: allow: site chrome */
.kit-bar-links { margin-left: auto; display: flex; gap: 16px; }
@media (max-width: 600px) { .kit-bar-links .kit-bar-label { display: none; } }

/* Make room: everything that sticks to the top of the page sticks below the strip instead. */
body.has-kit-bar { padding-top: 36px !important; }   /* beats inline body padding, as in the email */
body.has-kit-bar .sidebar { top: 36px; height: calc(100vh - 36px); }
body.has-kit-bar .pagehead { top: 36px; }
body.has-kit-bar.message-page { padding-top: 52px !important; }
@media print { .kit-bar { display: none; } body.has-kit-bar { padding-top: 0; } }
.kit-bar-search input { width: 180px; height: 24px; padding: 0 8px; border: 1px solid #3A3F47; border-radius: 4px; background: #23262B; color: #F6F7F8; font: 13px "IBM Plex Sans", system-ui, sans-serif; }   /* kit-check: allow: site chrome */
.kit-bar-search input::placeholder { color: #9AA2AD; }   /* kit-check: allow: site chrome */
.kit-bar-search input:focus { outline: 2px solid #E87722; outline-offset: 0; }   /* kit-check: allow: site chrome */
@media (max-width: 760px) { .kit-bar-search { display: none; } }