/*
   ai.kiwimedia.nz brand stylesheet
   Single source of truth for web styling.
   Tokens follow patterns-global:
     global/typography.md       (font scale)
     global/spacing.md          (8px scale)
     projects/kiwimedia/ai-colors.md  (palette)
*/

:root {
    /* colors - per ai-colors.md */
    --color-primary:        #EEC615;
    --color-secondary:      #D97828;
    --color-accent:         #999A36;
    --color-success:        #1ECB6B;
    --color-error:          #FF3864;
    --color-bg-primary:     #000000;
    --color-bg-secondary:   #111111;
    --color-bg-input:       #1A1A1A;
    --color-bg-hover:       #161616;
    --color-text:           #FFFFFF;

    /* spacing - per global/spacing.md (8px base) */
    --spacing-xs:           4px;
    --spacing-sm:           8px;
    --spacing-md:           16px;
    --spacing-lg:           24px;
    --spacing-xl:           32px;
    --spacing-2xl:          48px;
    --spacing-3xl:          64px;

    /* font sizes - per global/typography.md */
    --fs-xs:                0.75rem;    /* 12px */
    --fs-sm:                0.875rem;   /* 14px */
    --fs-base:              1rem;       /* 16px */
    --fs-lg:                1.125rem;   /* 18px */
    --fs-xl:                1.25rem;    /* 20px - h4 */
    --fs-2xl:               1.5rem;     /* 24px - h3 */
    --fs-3xl:               1.875rem;   /* 30px - h2 */
    --fs-4xl:               2.25rem;    /* 36px - h1 */

    /* font weights - per global/typography.md */
    --fw-regular:           400;
    --fw-medium:            500;
    --fw-semibold:          600;
    --fw-bold:              700;

    /* radius */
    --radius:               8px;
    --radius-sm:            6px;
}

@font-face {
    font-family: 'Public Sans';
    src: url('/static/fonts/PublicSans-ExtraBold.ttf') format('truetype');
    font-weight: 400 800;
    font-display: swap;
}

* { box-sizing: border-box; color: var(--color-text); }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg-primary);
    color: var(--color-text);
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    min-height: 100vh;
    text-align: center;
}

.wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
}
@media (min-width: 640px) {
    .wrap { padding: var(--spacing-xl) var(--spacing-lg); }
}

/* header */
header.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-bg-secondary);
    width: 100%;
}
header.brand img { height: 64px; width: auto; display: block; margin: 0; }
header.brand h1 {
    margin: 0;
    font-weight: var(--fw-bold);
    font-size: var(--fs-2xl);
    color: var(--color-accent);
    line-height: 1.2;
}
header.brand .who {
    font-size: var(--fs-sm);
    margin-top: var(--spacing-xs);
}
header.brand a:not(.btn) { color: var(--color-text); text-decoration: none; display: inline-block; }
header.brand form { display: inline; margin: 0; max-width: none; }
header.brand .header-actions {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}

/* typography */
h1, h2, h3, h4, h5, h6 { color: var(--color-text); line-height: 1.2; }
p, span, div, label, small, li, ol, ul, summary, details, td, th, strong { color: var(--color-text); }

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); }
h2 {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--spacing-sm);
    margin: var(--spacing-xl) auto var(--spacing-md);
    display: inline-block;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}
h2.hero { border: none; font-size: var(--fs-4xl); margin: 0 0 var(--spacing-md); }
h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md);
}
p { margin: 0 0 var(--spacing-md); font-size: var(--fs-base); }
strong { font-weight: var(--fw-bold); }
small { font-size: var(--fs-sm); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-secondary); text-decoration: underline; }

/* back bar */
.back-bar {
    text-align: left;
    margin: var(--spacing-md) 0;
}

/* generic card */
.card {
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) auto;
    text-align: center;
    max-width: 100%;
}
.card.left { text-align: left; }
.card details { margin: var(--spacing-md) 0; }
.card summary {
    cursor: pointer;
    font-weight: var(--fw-bold);
    color: var(--color-secondary);
}
.card ol { text-align: left; margin: var(--spacing-sm) 0 0; padding-left: 22px; }
.card li { margin-bottom: var(--spacing-xs); }

/* hero / landing */
.hero-block {
    text-align: center;
    padding: var(--spacing-lg) 0 var(--spacing-lg);
}
.hero-block .actions {
    display: inline-flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

/* MCP server cards */
.mcp-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) auto;
    text-align: left;
    max-width: 100%;
}
.mcp-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon name"
        "desc desc"
        "actions actions";
    align-items: center;
    column-gap: var(--spacing-md);
    row-gap: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-success);
    border-radius: var(--radius);
    padding: var(--spacing-md) var(--spacing-lg);
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
    overflow: hidden;
}
.mcp-row::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 6px;
    background: var(--color-success);
}
.mcp-row.off { border-color: var(--color-secondary); }
.mcp-row.off::before { background: var(--color-secondary); }
.mcp-row:hover {
    transform: translateY(-1px);
    background: var(--color-bg-hover);
}

.mcp-row .icon { grid-area: icon; font-size: var(--fs-xl); line-height: 1; }
.mcp-row .name {
    grid-area: name;
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
}

.mcp-row .desc {
    grid-area: desc;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
    padding-left: 0;
}

.mcp-row .actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}
.mcp-row .actions .info,
.mcp-row .actions .buttons {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}
.mcp-row .actions .buttons { gap: var(--spacing-md); }

.mcp-row .status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--color-text);
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--fw-regular);
    white-space: nowrap;
}
.mcp-row .status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success);
    display: inline-block;
}
.mcp-row .status.off::before { background: var(--color-secondary); }

.mcp-row .stat {
    font-size: var(--fs-sm);
    color: var(--color-text);
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mcp-row { column-gap: var(--spacing-sm); }
    .mcp-row .actions { justify-content: center; }
}

/* forms */
form {
    margin: 0 auto;
    text-align: center;
    max-width: 480px;
}
form label {
    display: block;
    margin: var(--spacing-md) 0 var(--spacing-sm);
    font-weight: var(--fw-bold);
    text-align: center;
}
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=number],
form select,
form textarea {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-input);
    color: var(--color-text);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--fs-base);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
form input:focus, form select:focus, form textarea:focus {
    outline: 2px solid var(--color-secondary);
}
form small {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--fs-sm);
}
.form-actions {
    margin-top: var(--spacing-lg);
    display: inline-flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}
.required-mark {
    color: var(--color-error);
    font-weight: var(--fw-bold);
}

/* buttons - one consistent style */
.btn, button.btn, a.btn {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    cursor: pointer;
    text-decoration: none;
    min-width: 160px;
    text-align: center;
    line-height: 1.25;
}
.btn:hover {
    background: var(--color-secondary);
    color: var(--color-bg-primary);
    text-decoration: none;
}
.btn-danger {
    background: var(--color-error);
    color: var(--color-text);
}
.btn-danger:hover {
    background: var(--color-error);
    color: var(--color-text);
    filter: brightness(1.1);
}

/* flash / alerts */
.flash {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    margin: var(--spacing-md) auto;
    font-weight: var(--fw-bold);
    max-width: 600px;
    text-align: center;
}
.flash-error   { background: rgba(255,56,100,0.15); border: 1px solid var(--color-error); }
.flash-success { background: rgba(30,203,107,0.15); border: 1px solid var(--color-success); }

/* code snippet */
pre.snippet {
    background: var(--color-bg-input);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    overflow-x: auto;
    font-size: var(--fs-sm);
    line-height: 1.45;
    white-space: pre;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: var(--color-text);
    text-align: left;
    margin: var(--spacing-md) auto;
    max-width: 100%;
}

/* utility */
.muted { color: var(--color-text); font-size: var(--fs-sm); }