/* theme.mako.css — Mako design system v1 brand layer for Mako UI Studio.
 *
 * Loaded LAST in index.html. This file only re-expresses the shared token
 * vocabulary declared by tokens.studio.css (which stays a byte-snapshot of
 * the Forge editor tokens — CI parity untouched). Cascade order does the
 * reskin: same custom-property names, Mako brand values.
 *
 * Sources of truth:
 *   design/brand/final-assets-production-v5  (palette, symbol, lockups)
 *   MakoworksPortal app/globals.css          (applied graphite/green scale)
 * Rules: one meaning per colour — mineral green #49C978 = selection/focus/
 * action; orange = warning/divergence; red = error; mint = success/live.
 */

/* Brand faces (ForgeUI resolves the FIRST matching @font-face for a
 * family, so aliasing "Inter" does not work — we override the stacks). */
@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-VF.ttf");
}

@font-face {
    font-family: "Chivo Mono";
    src: url("../assets/fonts/ChivoMono-VF.ttf");
}

:root {
    /* Surface ladder — Makoworks graphite, luminance separates surfaces */
    --bg-0: #080a0c;
    --bg-1: #0c0e10;
    --bg-2: #121416;
    --bg-3: #16191d;
    --bg-4: #1e2022;
    --bg-5: #282a2c;

    /* Text — warm white display over green-grey body */
    --text-0: #f4f2ec;
    --text-1: #b9cac4;
    --text-2: #83948f;

    /* Seams — green-grey, not blue-grey */
    --line: #3a4a46;

    /* One meaning per colour */
    --primary: #49c978;        /* mineral green: selection, focus, action */
    --primary-strong: #2fa864; /* pressed/strong action fills */
    --secondary: #f5c09a;      /* soft highlight (was amber) */
    --tertiary: #f28c33;       /* warning / divergence */
    --success: #2ff7bf;        /* alive / ok */
    --danger: #ff6b5f;         /* error / destructive */

    /* Glass — same alphas, graphite-neutral hue (was blue-tinted) */
    --ab-glass-base: rgba(10, 13, 12, 0.82);
    --ab-glass-panel: rgba(17, 20, 19, 0.76);
    --ab-glass-panel-strong: rgba(22, 25, 24, 0.84);
    --ab-glass-surface: rgba(9, 12, 11, 0.58);
    --ab-glass-pane: rgba(18, 21, 20, 0.64);

    /* ── Mako density scale (slice ⑪) — CLOSED ladders ──────────────────
     * Heights: controls/rows ∈ {22, 26, 30, 36, 40} px, main toolbar 44.
     * Spacing: 4px grid (2px only as the tab-strip half step).
     * Text: {11, 12, 13, 15} px — Manrope 400/500/600 chrome, Chivo Mono
     * values. studio.css and the density layer below consume ONLY these
     * tokens for the chrome; no new hard-coded px allowed. */
    --fs-1: 11px;     /* micro: uppercase labels, statusbar, values, badges */
    --fs-2: 12px;     /* body: default chrome text */
    --fs-3: 13px;     /* emphasis: readouts, panel values, floating titles */
    --fs-4: 15px;     /* display: section titles inside the chrome */

    --row-h: 22px;    /* list rows (tree, source tabs), statusbar */
    --ctl-h: 26px;    /* controls: chips, inputs, small buttons, subtabs */
    --bar-h: 30px;    /* bars: tab strips, panel headers, toolbars */
    --header-h: 44px; /* main toolbar (mockup ladder tops at 44) */

    --gap-0: 2px;     /* tab-strip inner half step */
    --gap-1: 4px;
    --gap-2: 8px;
    --gap-3: 12px;
    --gap-4: 16px;

    /* Hairlines — 1px seams at low alpha; luminance separates surfaces, so
     * the old blue-grey rgba(65,71,85,…) borders become these. */
    --hairline: rgba(58, 74, 70, 0.32);
    --hairline-strong: rgba(58, 74, 70, 0.55);
}

/* Timeline semantics: time position and selection spend the one mineral-green
 * accent; the rail stays neutral graphite and native range UA white/blue is
 * explicitly suppressed. Geometry lives in studio-kit.css. */
.timeline-playhead,
.timeline-playhead::before { background: var(--primary); }
.timeline-bar {
    background: linear-gradient(90deg, rgba(185, 202, 196, 0.13), rgba(185, 202, 196, 0.34));
}
.anim-transport input[type="range"] {
    background-color: transparent;
    accent-color: var(--primary);
}

/* ── Brand typography ─────────────────────────────────────────────────────
 * Chrome face: Manrope (echoes the Mako wordmark geometry).
 * Values/code face: Chivo Mono. Icons keep Material Symbols. */
body,
button, input, select, textarea,
.agent-dock-panel input, .agent-dock-panel textarea, .agent-dock-panel select {
    font-family: "Manrope", "ForgeUI Studio CJK", sans-serif;
}

.inspector-summary-title, .inspector-token, .cascade-sel, .cascade-val,
.uikit-field-readout, .start-status-row strong, .start-status-info p,
.theme-token-name, .prop-token-reference-name,
.agent-harness-text, .agent-signin-command, .agent-md-code,
.agent-direct-color-value,
#status-doc, .workspace-map span, .source-status-path {
    font-family: "Chivo Mono", ui-monospace, Menlo, monospace;
}


/* ── Command palette (slice 6) — floating surface + green selection ───────
 * The palette is the ONE surface that floats above every dock, so it gets
 * the brand's float ladder step (--s-float, one notch above --bg-3) and
 * the mineral green that means "active selection" everywhere else in the
 * Studio. tokens.studio.css keeps its blue: only this brand layer greens it. */
:root {
    --s-float: #1a1d20;        /* floating overlay surface (palette, menus) */
}

.cmd-palette, .cmd-palette-input {
    font-family: "Manrope", "ForgeUI Studio CJK", sans-serif;
}

.cmd-palette-row.sel {
    background: rgba(73, 201, 120, 0.16);
    box-shadow: inset 2px 0 0 var(--primary);
    color: var(--text-0);
}

.cmd-palette-row.sel .cmd-palette-kbd { color: var(--text-1); }

/* A disabled row stays legible but never reads as "selected/actionable". */
.cmd-palette-row.disabled.sel {
    background: rgba(58, 74, 70, 0.28);
    box-shadow: inset 2px 0 0 var(--line);
}


/* ── Start screen (slice 7) — brand home surface ──────────────────────────
 * The start screen is the first thing a user sees and the surface the brand
 * lockup lives on, so it takes the graphite ladder and the ONE action colour
 * (mineral green). studio.css keeps the structure; this layer only recolours
 * what tokens.studio.css still paints Forge-blue. */
.start-screen {
    background: var(--bg-0);
}

.start-content {
    max-width: 900px;
}

.start-header h2 {
    font-family: "Manrope", "ForgeUI Studio CJK", sans-serif;
    letter-spacing: -0.01em;
}

/* Primary actions read as actions: green icon, green edge on hover/focus,
 * a faint green wash. Disabled cards drop to the neutral seam colour — a
 * disabled action must never wear the action colour. */
.start-card-primary {
    background: var(--bg-2);
    border-color: var(--line);
}

.start-card-primary:hover:not(:disabled),
.start-card-primary:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(73, 201, 120, 0.22);
}

.start-card:disabled {
    opacity: 0.55;
    cursor: default;
}

.start-card:disabled .ms-icon { color: var(--text-2); }

/* The empty-project state is a call to action, not an error. */
.start-card[data-start-empty-project="true"] {
    border-color: var(--primary);
    background: rgba(73, 201, 120, 0.08);
}

/* Session card — was a blue-tinted panel from the Forge token snapshot. */
.start-status-info {
    background: rgba(73, 201, 120, 0.06);
    border-color: rgba(73, 201, 120, 0.22);
}

.start-status-info .status-title { color: var(--primary); }

.start-recent-row:hover:not(:disabled) {
    box-shadow: inset 2px 0 0 var(--primary);
}

.start-recent-flag-open {
    color: var(--primary);
    font-weight: 700;
}

.start-recent-name,
.start-recent-sub {
    font-family: "Chivo Mono", ui-monospace, Menlo, monospace;
}

.start-close:focus-visible,
.start-recent-row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}


/* ═══ Density layer (slice ⑪) ═════════════════════════════════════════════
 * studio.css owns the shell (header, statusbar, dock tabs, doc tabs, state
 * axis, source dock, menus) and was densified in place. The shared component
 * classes below live in studio-kit.css — a CI byte/regex-locked file that
 * this brand layer may only re-express through the cascade, exactly like the
 * colour layer above. Same selectors, later in the cascade: no DOM, no ids,
 * no behaviour change. The bottom-dock tab strip (34px header, 34px overflow
 * button, 96px tab minimum) is LOCKED by tests and is deliberately NOT
 * densified here — see slice11-report.md. */

/* Panels: header 34→30, title 10→11, luminance hairlines. */
.panel-header {
    height: var(--bar-h);
    padding: 0 var(--gap-2);
    border-bottom: 1px solid var(--hairline);
}
.panel-title {
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.panel-footer {
    height: var(--ctl-h);
    padding: 0 var(--gap-2);
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-1);
}
.dock-panel { border-color: var(--hairline); }
.panel-search {
    height: var(--ctl-h);
    gap: var(--gap-1);
    margin: var(--gap-1);
    border: 1px solid var(--hairline);
}

/* Dock tab strips 32/34→30; uppercase micro labels 10→11 at weight 500. */
.center-dock-tabs {
    flex: 0 0 var(--bar-h);
    height: var(--bar-h);
    min-height: var(--bar-h);
    border-bottom: 1px solid var(--hairline);
}
.center-dock-tab { gap: var(--gap-1); }
.dock-tab-btn { font-weight: 500; letter-spacing: 0.04em; }
.bottom-subtabs .center-dock-tab { padding: 0 var(--gap-2); }

/* Controls: chips/buttons 24/28→26, inputs stay 26 on hairlines. */
.chip {
    height: var(--ctl-h);
    padding: 0 var(--gap-2);
    border: 1px solid var(--hairline);
}
.seg .chip { padding: 0 var(--gap-1); }
.small-primary-btn {
    height: var(--ctl-h);
    padding: 0 var(--gap-2);
    gap: var(--gap-1);
    font-weight: 600;
}
.icon-btn {
    flex: 0 0 var(--row-h);
    min-width: var(--row-h);
    min-height: var(--row-h);
    width: var(--row-h);
    height: var(--row-h);
}
.tree-item { height: var(--row-h); }
.prop-input {
    height: var(--ctl-h);
    line-height: calc(var(--ctl-h) - 2px);
    border: 1px solid var(--hairline);
}
.prop-select-field { height: var(--ctl-h); }
.prop-select-chevron { height: var(--ctl-h); line-height: var(--ctl-h); }
.prop-select-option {
    font-family: "Manrope", "ForgeUI Studio CJK", sans-serif;
    font-size: var(--fs-1);
    line-height: 18px;
}
.prop-row { min-height: var(--ctl-h); margin: var(--gap-0) 0; }
.prop-section { border-bottom: 1px solid var(--hairline); }
.prop-section-header {
    height: var(--ctl-h);
    padding: 0 var(--gap-2);
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.prop-section-body { padding: var(--gap-1) var(--gap-2) var(--gap-2); }
.prop-empty { padding: var(--gap-1) var(--gap-2); }
.scp-btn-row .btn-secondary,
.scp-btn-row .btn-primary { font-size: var(--fs-1); }

/* Inspector summary card: 8px frame, four text levels. */
.inspector-summary { padding: var(--gap-2); }
.inspector-summary-eyebrow {
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.inspector-summary-title { font-size: var(--fs-3); font-weight: 600; }
.inspector-token { font-size: var(--fs-1); }
.inspector-token-strip { gap: var(--gap-1); margin-top: var(--gap-1); }
.inspector-meta-grid { gap: var(--gap-1); margin-top: var(--gap-2); }
.inspector-meta-item {
    gap: var(--gap-0);
    padding: var(--gap-1) var(--gap-2);
    border: 1px solid var(--hairline);
}
.inspector-meta-label { font-size: var(--fs-1); }

/* Agent dock (right dock, Agent tab): selects 28→26 to match prop inputs. */
.agent-select, .agent-select-field { height: var(--ctl-h); }
.agent-select { line-height: calc(var(--ctl-h) - 2px); }
.agent-select, .agent-text-input, .agent-input { border-color: var(--hairline-strong); }
.agent-provider-model {
    height: var(--row-h);
    line-height: calc(var(--row-h) - 2px);
    font-size: var(--fs-1);
}
.agent-compact-btn { min-height: var(--ctl-h); font-size: var(--fs-1); }
.agent-connection-banner { font-size: var(--fs-1); }
.agent-settings-heading { font-size: var(--fs-1); }
.agent-settings-advanced-summary {
    min-height: var(--ctl-h);
    font-size: var(--fs-1);
}
.agent-settings-advanced, .agent-mcp-form { border-color: var(--hairline); }
.agent-harness-label { font-size: var(--fs-1); }
.agent-harness-text { font-size: var(--fs-1); border-color: var(--hairline-strong); }

/* Stage toolbar (stage.css): 30px bar stays; grid gaps + hairline seams. */
.stage-toolbar {
    gap: var(--gap-1);
    padding: 0 var(--gap-2);
    border-bottom: 1px solid var(--hairline);
}
.stage-mode-btn { gap: var(--gap-1); }
.selection-action-btn { border-color: var(--hairline-strong); }

/* Floating popups keep a visible edge — hairline-strong, not solid --line. */
.prop-select-popup, .cmd-palette { border-color: var(--hairline-strong); }

/* Theme workspace: 23px preview select → the 22px row step. */
.theme-preview-header select { height: var(--row-h); }

/* Desktop update banner controls 38→36 (nearest rung on the ladder). */
.desktop-update-token input,
.desktop-update-channel select { height: 36px; border-radius: 4px; }

/* ⌘K palette: 4px row rhythm inside the floating surface. */
.cmd-palette-input { padding: 10px var(--gap-3); font-size: var(--fs-3); }
.cmd-palette-row { padding: var(--gap-1) 10px; }
.cmd-palette-foot { padding: var(--gap-1) 10px; }
.cmd-palette-section { padding: var(--gap-2) 10px var(--gap-1); }
.cmd-palette-kbd { font-size: var(--fs-1); }