/*
 * One brand for the three demo services.
 *
 * The agent, the MCP console and the approver were built at different times and each
 * invented its own dark palette — blue-grey, green-tinted, brown. Three services that
 * exist to be watched SIDE BY SIDE looked like three unrelated products, which undercuts
 * the point the demo is making: that these are independent parties governed by one
 * platform.
 *
 * ## Why this is a stylesheet and not a rewrite
 *
 * All three already declared the same VARIABLE NAMES — `--bg`, `--card`, `--line`,
 * `--ink`, `--dim`, `--green`, `--red`, `--amber` — and only disagreed about the values.
 * So rebinding those names here rebrands every existing rule in all three pages without
 * touching their markup or their layout logic. Each page keeps its own component CSS for
 * the parts that genuinely differ (a chat column, a decision feed, an approval queue) and
 * drops only its `:root` block.
 *
 * Values are the marketing site's `mm` scale (frontend/tailwind.config.ts) so the demos
 * and the site cannot drift apart by being maintained separately.
 */

/* ------------------------------------------------------------------ the mm scale */

:root {
    /* Brand */
    --mm-violet: #7d4cfa;
    --mm-deep-violet: #5b2df5;
    --mm-indigo: #6069f8;
    --mm-blue: #4895f7;
    --mm-gradient: linear-gradient(135deg, #4895f7 0%, #6069f8 42%, #7d4cfa 100%);

    /* Neutrals */
    --mm-ink: #101728;
    --mm-slate: #1f2937;
    --mm-graphite: #464646;
    --mm-soft: #f0eff3;
    --mm-border: #d9dce7;

    /*
     * The names the three pages already use. Rebinding them here is the whole mechanism:
     * every existing rule in every page picks these up untouched.
     */
    --bg: var(--mm-soft);
    --card: #ffffff;
    --line: var(--mm-border);
    --ink: var(--mm-ink);
    --dim: var(--mm-graphite);

    /*
     * Status colours, retuned for a light surface. The originals were chosen against a
     * near-black background and fail contrast on white — #2fbf71 in particular reads as
     * decoration rather than a verdict, and a verdict is exactly what it is.
     */
    --green: #0f7a43;
    --red: #c02532;
    --amber: #9a6206;
    --blue: var(--mm-blue);
    --violet: var(--mm-violet);
    --teal: #0d7a72;

    /* Tinted fills for badges/rows, so status reads without shouting. */
    --green-soft: #e8f6ee;
    --red-soft: #fdecee;
    --amber-soft: #fdf3e2;
    --violet-soft: #f1ecff;

    --radius: 12px;
    --shadow-card: 0 1px 2px rgba(16, 23, 40, 0.04), 0 1px 3px rgba(16, 23, 40, 0.06);
}

/* ---------------------------------------------------------------------- baseline */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--mm-soft);
    color: var(--ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

code,
pre,
.mono {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

a {
    color: var(--mm-deep-violet);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

button {
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    padding: 7px 13px;
    transition: border-color 0.15s, background 0.15s;
}
button:hover:not(:disabled) {
    border-color: var(--mm-violet);
}
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The primary action on each page — one per screen, deliberately. */
button.primary,
button[type="submit"] {
    background: var(--mm-gradient);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
button.primary:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    filter: brightness(1.07);
}

input,
select,
textarea {
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
}
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--violet-soft);
    border-color: var(--mm-violet);
}

/* ------------------------------------------------------------- the shared header */

/*
 * The same bar on all three, so a reader moving between tabs knows they are still in one
 * system. `mm-role` carries the same three phrases the quickstart cards use — drives the
 * flow / enforces independently / approves what escalates — because that page is where
 * most people meet these services, and matching the words is what makes them recognisable.
 */
.mm-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.mm-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.mm-brand img {
    height: 26px;
    width: auto;
    display: block;
}

.mm-divider {
    width: 1px;
    height: 22px;
    background: var(--line);
}

.mm-app {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.mm-app-name {
    font-weight: 650;
    font-size: 15px;
    color: var(--ink);
}
.mm-role {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mm-violet);
}

.mm-spacer {
    flex: 1;
}

/* Cross-links to the other two services and the dashboard. */
.mm-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
}
.mm-links a {
    color: var(--mm-graphite);
}
.mm-links a:hover {
    color: var(--mm-deep-violet);
}

/* ------------------------------------------------------- primitives all three use */

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 20px 48px;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.tag {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--mm-graphite);
    background: var(--mm-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 8px;
}

.muted,
.sub,
.dim {
    color: var(--dim);
}

.ok {
    color: var(--green);
}
.bad {
    color: var(--red);
}
.warn {
    color: var(--amber);
}

.lead {
    color: var(--mm-graphite);
    max-width: 80ch;
}

.empty {
    color: var(--dim);
    padding: 18px;
    text-align: center;
}

/* The live pulse each console shows. Same dot everywhere it appears. */
.live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--green);
}
.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: mm-pulse 1.8s ease-in-out infinite;
}
@keyframes mm-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}
@media (prefers-reduced-motion: reduce) {
    .dot {
        animation: none;
    }
}