/* Kuhlars.com shared site banner for standalone tool pages under /apps/.
   Markup is injected by banner.js; mirrors templates/_styles.html banner.
   Keep in sync with _styles.html. */
@font-face {
    font-family: "Outfit";
    src: url("/static/fonts/outfit-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fraunces";
    src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
#ks-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
    background: #ffffff; color: #09090b;
    border-bottom: 1px solid #e4e4e7;
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
    #ks-banner { background: #131316; color: #fafafa; border-bottom-color: #27272a; }
}
#ks-banner .ks-inner {
    max-width: 816px; margin: 0 auto; padding: 12px 28px;
    display: flex; align-items: center; gap: 12px;
}
#ks-banner .ks-brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit; transition: opacity 0.15s;
}
#ks-banner .ks-brand:hover { opacity: 0.85; }
#ks-banner .ks-logo { width: 34px; height: 34px; flex-shrink: 0; }
#ks-banner .ks-logo .ks-tile { fill: #0f172a; stroke: #1e293b; }
@media (prefers-color-scheme: dark) {
    #ks-banner .ks-logo .ks-tile { fill: #27272a; stroke: #3f3f46; }
}
#ks-banner .ks-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
#ks-banner .ks-name {
    font-family: "Fraunces", Georgia, serif; font-weight: 650;
    font-size: 1.05rem; letter-spacing: -0.02em;
}
#ks-banner .ks-dot { color: #db2777; }
@media (prefers-color-scheme: dark) { #ks-banner .ks-dot { color: #ec4899; } }
#ks-banner .ks-tag {
    font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: #71717a; margin-top: 2px; white-space: nowrap;
}
@media (prefers-color-scheme: dark) { #ks-banner .ks-tag { color: #a1a1aa; } }
#ks-banner .ks-app {
    margin-left: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: #71717a; white-space: nowrap;
}
@media (prefers-color-scheme: dark) { #ks-banner .ks-app { color: #a1a1aa; } }
@media (max-width: 560px) {
    #ks-banner .ks-inner { padding: 10px 16px; }
    #ks-banner .ks-app { display: none; }
}