/* Brand stylesheet. */

:root {
    /* colors */
    --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;
    --color-label:          #7FD9E7;      /* semantic cyan for uppercase labels per card.md - never grey */
    --color-warn:           #FF9500;      /* semantic orange for warnings per card.md */

    /* spacing */
    --spacing-xs:           4px;
    --spacing-sm:           8px;
    --spacing-md:           16px;
    --spacing-lg:           24px;
    --spacing-xl:           32px;
    --spacing-2xl:          48px;
    --spacing-3xl:          64px;

    /* font sizes */
    --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 */
    --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 */
/* Canonical card container - see global-patterns/global/card.md.
   Structure is invariant; the skin is picked once at :root via
   `data-card-skin="matte|glass|bordered"` on <html>. Do NOT add
   per-card variants or nest cards. */
:root {
    --card-radius: 14px;
    --card-padding: 16px;
    --section-gap: 24px;
    /* title <-> body gap: doc says 8px, ketosis-api bumped to 14px on 2026-07-10
       per user "not enough gap" feedback. Matching the live decision. */
    --title-gap: 14px;
    --card-title-color: #FFFFFF;
}
.section-card {
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    margin: 0 auto var(--section-gap);
    /* 520px = the 480px `form` max-width + card padding (16px each side)
       with a little slack. Wider than this and 2-field forms (login/signup)
       feel wasteful; narrower and the MCP list cards look cramped. */
    max-width: 520px;
    text-align: center;
}
/* Title selector accepts the explicit class OR a naked h1/h2/h3 as the first
   child of a card - matches ketosis-api so any template can drop a plain
   heading in and get correct styling. */
.section-card .section-card-title,
.section-card .section-header,
.section-card > h1:first-child,
.section-card > h2:first-child,
.section-card > h3:first-child {
    font-family: 'Public Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--card-title-color);
    text-align: center;
    margin: 0 0 var(--title-gap) 0;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
}
.section-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
}
.section-card-desc {
    margin: 0;
    text-align: center;
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.section-card-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm) var(--spacing-md);
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--color-text);
}
.section-card-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    white-space: nowrap;
}
.section-card-status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success);
    display: inline-block;
}
.section-card-status.off::before { background: var(--color-secondary); }
.section-card-stat { white-space: nowrap; }
.section-card-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Skins - one applies per <html data-card-skin=...>. Do not
   mix skins on one page. */
[data-card-skin="matte"] .section-card {
    background: #1C1C1E;
}
[data-card-skin="glass"] .section-card {
    background: rgba(28, 28, 30, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-card-skin="bordered"] .section-card {
    background: transparent;
    border: 1px solid #38383A;
}
@media (prefers-color-scheme: light) {
    :root { --card-title-color: #000000; }
    [data-card-skin="matte"] .section-card { background: #F2F2F7; }
    [data-card-skin="glass"] .section-card {
        background: rgba(242, 242, 247, 0.7);
        border-color: rgba(0, 0, 0, 0.06);
    }
    [data-card-skin="bordered"] .section-card { border-color: #D1D1D6; }
}

/* 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%;
}

/* .muted removed - per global-patterns/global/card.md, body text is white or a
   semantic accent (cyan for labels, orange/red for warnings). Grey/muted text
   is banned. If you find yourself wanting muted text, use .section-card-desc
   inside a card, or lift the content out and give it its own card. */


/* server url row */
.server-url {
    margin: var(--spacing-sm) 0;
    display: flex;
    flex-direction: column;
    align-items: center;         /* centre label + URL box inside the card */
    gap: var(--spacing-xs);
    width: 100%;
}
.server-url-label {
    font-size: var(--fs-sm);
    /* Brand gold matches the rest of the palette (buttons, accents). Kept off
       cyan/grey - both read as either "info hint" or "muted", both unwanted. */
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}
.server-url-value {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-bg-input);
    border: 1px solid var(--color-bg-hover);
    border-radius: var(--radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
    color: var(--color-text);
    text-align: center;
    word-break: break-all;
    user-select: all;
}

/* MCP tool list - the attr-group primitive: chevron + title + count pill in a
   collapsible header, rows inside. Left-aligned inside an otherwise centred
   card, because a list of identifiers is unreadable centred. */
.tool-group {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    transition: background 180ms ease-in-out;
}
.tool-group[open] { background: rgba(255,255,255,0.05); }
.tool-group-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 10px;
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}
.tool-group-summary::-webkit-details-marker { display: none; }
.tool-group-chevron {
    display: inline-block;
    font-size: 10px;
    color: var(--color-primary);
    transition: transform 180ms ease-in-out;
}
.tool-group[open] .tool-group-chevron { transform: rotate(90deg); }
.tool-group-title { flex: 1; }
.tool-group-pill {
    background: var(--color-success);
    color: var(--color-bg-primary);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.5;
}
.tool-group-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 12px;
}
.tool-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tool-row-name {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: var(--fs-xs);
    color: var(--color-primary);
    word-break: break-all;
}
.tool-row-desc {
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--color-text);
}