/* App-pane chrome for kit components rendered inside .wm-win bodies.
   Bible tokens only — no hardcoded color, font, or radius. Focus = inset rail; no shadows, no gradients. */

/* ── terminal-app ───────────────────────────────────────────────────── */
.terminal-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--os-bg-1);
    color: var(--os-fg);
    font-family: var(--os-mono);
}
.terminal-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--os-bg-2);
    font-family: var(--os-mono);
    font-size: 11px;
    color: var(--os-fg-2);
    text-transform: lowercase;
    flex: 0 0 auto;
}
.terminal-app-title {
    font-family: var(--os-mono);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.terminal-app-status {
    font-family: var(--os-mono);
    color: var(--os-fg-3);
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.terminal-app-slot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--os-bg-0);
    position: relative;
}
.terminal-app-slot > * { width: 100%; height: 100%; }

/* ── browser-app ────────────────────────────────────────────────────── */
.browser-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--os-bg-1);
    color: var(--os-fg);
    font-family: var(--os-font);
}
.browser-app-bar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--os-bg-2);
    flex: 0 0 auto;
}
.browser-app-btn {
    height: 28px;
    min-width: 28px;
    padding: 0 var(--space-2);
    background: var(--os-bg-3);
    color: var(--os-fg);
    border: none;
    border-radius: var(--os-radius-sm);
    font: 12px var(--os-mono);
    cursor: pointer;
    outline: none;
}
.browser-app-btn:hover { background: var(--os-accent-soft); }
.browser-app-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--os-accent); }
.browser-app-url {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 var(--space-2);
    background: var(--os-bg-0);
    color: var(--os-fg);
    border: none;
    border-radius: var(--os-radius-sm);
    font: 12px var(--os-mono);
    outline: none;
}
.browser-app-url:focus { box-shadow: inset 4px 0 0 var(--os-accent); }
.browser-app-slot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--os-bg-0);
    position: relative;
}
.browser-app-slot > * { width: 100%; height: 100%; }
.browser-app-status {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-2);
    background: var(--os-bg-2);
    font: 11px var(--os-mono);
    color: var(--os-fg-3);
    text-transform: lowercase;
    min-height: 18px;
}

/* ── validator-app ──────────────────────────────────────────────────── */
.validator-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--os-bg-1);
    color: var(--os-fg);
    font-family: var(--os-font);
}
.validator-app-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--os-bg-2);
    flex: 0 0 auto;
}
.validator-app-banner {
    flex: 0 0 auto;
    padding: 2px var(--space-2);
    border-radius: 999px;
    font: 11px var(--os-mono);
    text-transform: lowercase;
    background: var(--os-bg-3);
    color: var(--os-fg-2);
}
.validator-app-banner[data-state="pending"] { background: var(--os-amber); color: var(--os-bg-0); }
.validator-app-banner[data-state="pass"] { background: var(--os-accent); color: var(--os-bg-0); }
.validator-app-banner[data-state="fail"] { background: var(--os-red); color: var(--os-bg-0); }
.validator-app-counts {
    flex: 0 0 auto;
    font: 11px var(--os-mono);
    color: var(--os-fg-2);
}
.validator-app-rerun {
    margin-left: auto;
    flex: 0 0 auto;
    height: var(--space-4);
    padding: 0 var(--space-2);
    background: var(--os-bg-3);
    color: var(--os-fg);
    border: none;
    border-radius: var(--os-radius-sm);
    font: 11px var(--os-mono);
    text-transform: lowercase;
    cursor: pointer;
    outline: none;
}
.validator-app-rerun:hover { background: var(--os-accent-soft); }
.validator-app-slot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    position: relative;
    background: var(--os-bg-0);
}
.validator-app-slot > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
.validator-app-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--os-bg-0);
}