/* The workbench bar both Allowance prototypes are driven from: KeySign's harness, on
   Kinetic's chassis. It is not the app, so it keeps one dark chrome in both themes, and
   a portfolio card or a bare embed never shows it. Reads only --sys-* tokens and the
   literals of Kinetic's dark chassis. */
/* ───────────── the workbench bar ─────────────
   KeySign's harness, with Kinetic's chassis: the prototype is driven from here, so it
   keeps its own dark chrome in both themes and never reads as part of the app. */
.harness {
    position: sticky; top: 0; z-index: 100; align-self: stretch;
    display: flex; align-items: center; gap: var(--sys-space-2); height: 56px; padding: 0 var(--sys-space-3);
    background: #0a0b0d; color: #aeb4be; border-bottom: 1px solid rgba(255, 255, 255, .10);
    font-family: var(--sys-font-sans);
}
body.bare .harness { display: none }
.h-brand { display: flex; align-items: center; gap: var(--sys-space-2); flex: none; padding-right: var(--sys-space-3); border-right: 1px solid rgba(255, 255, 255, .10); height: 32px }
.h-mark { width: 30px; height: 30px; border-radius: var(--sys-radius-sm); display: grid; place-items: center; color: #fff; background: var(--sys-gradient-command); box-shadow: 0 4px 12px rgba(0, 123, 75, .45) }
.h-mark svg { width: 18px; height: 18px }
.h-name { font-family: var(--sys-font-display); font-weight: 700; color: #f7f8fa; font-size: 17px; line-height: 18px; letter-spacing: -.01em }
.h-name small { display: block; font-family: var(--sys-font-mono); font-weight: 500; color: #aeb4be; font-size: 10px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; margin-top: 1px }
.h-scroll {
    display: flex; gap: var(--sys-space-1); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px;
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.h-scroll::-webkit-scrollbar { display: none }
.h-btn {
    flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--sys-space-3);
    border: 1px solid rgba(255, 255, 255, .10); background: #17181b; color: #d2d6dc; border-radius: var(--sys-radius-pill);
    font-size: 13px; font-weight: 600; white-space: nowrap; transition: background var(--sys-duration-fast), color var(--sys-duration-fast);
}
.harness a { text-decoration: none }
.h-btn:hover { background: #1e2024; color: #f7f8fa }
.h-btn[aria-current] { background: #f7f8fa; border-color: transparent; color: #0d0e10 }
.h-btn .n { font-family: var(--sys-font-mono); font-weight: 500; opacity: .6 }
.h-tools { display: flex; gap: var(--sys-space-1); flex: none }
.h-tool {
    width: 36px; height: 36px; border-radius: var(--sys-radius-sm); display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .10); background: #17181b; color: #d2d6dc; transition: background var(--sys-duration-fast), color var(--sys-duration-fast);
}
.h-tool:hover { background: #1e2024; color: #f7f8fa }
.h-tool svg { width: 18px; height: 18px }
.h-tool:focus-visible, .h-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #0a0b0d, 0 0 0 4px #31df91 }
@media (max-width: 560px) { .h-name small { display: none } .h-brand { padding-right: var(--sys-space-2) } }