/*
|--------------------------------------------------------------------------
| GuardCheck MCP Connector — the whole stylesheet
|--------------------------------------------------------------------------
|
| Hand-written and served as a static file. There is no build step, no
| manifest and no node_modules, which is the point: a deploy cannot now
| arrive with a working PHP application and a dead consent screen. That was
| a real failure — `@vite` in the layout threw without public/build, so
| /login and /oauth/authorize returned 500 and no MCP client could ever
| complete authorization, while the tests stayed green because they call
| withoutVite().
|
| Linked root-relative from the layout rather than through asset(), so the
| URL carries no host and cannot come out as http:// on an https page via
| an APP_URL or proxy the application does not trust.
|
| The font is the platform stack on purpose. The previous build pulled
| Instrument Sans from a third-party CDN; an internal page that decides
| disclosure of special-category data should not make a request to anyone
| else to render.
|
*/

:root {
    color-scheme: light dark;

    --ground: #f5f5f3;
    --surface: #ffffff;
    --sunken: #fdfdfc;
    --ink: #1b1b18;
    --ink-soft: #706f6c;
    --line: rgba(0, 0, 0, 0.07);
    --line-strong: rgba(0, 0, 0, 0.12);
    --hover: rgba(0, 0, 0, 0.04);

    --warn-line: rgba(220, 38, 38, 0.45);
    --warn-fill: #fef2f2;
    --warn-ink: #b3261e;

    --caution-line: rgba(217, 119, 6, 0.4);
    --caution-fill: #fffbeb;

    --radius: 14px;
    --radius-sm: 10px;

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji";
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground: #0a0a0a;
        --surface: #161615;
        --sunken: #0f0f0e;
        --ink: #ededec;
        --ink-soft: #a1a09a;
        --line: rgba(255, 255, 255, 0.1);
        --line-strong: rgba(255, 255, 255, 0.16);
        --hover: rgba(255, 255, 255, 0.06);

        --warn-line: rgba(248, 113, 113, 0.4);
        --warn-fill: rgba(69, 10, 10, 0.35);
        --warn-ink: #f87171;

        --caution-line: rgba(251, 191, 36, 0.35);
        --caution-fill: rgba(69, 44, 5, 0.3);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Layout ---------------------------------------------------------------- */

.page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.page__inner {
    width: 100%;
    max-width: 28rem;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.brand__mark {
    display: flex;
    height: 36px;
    width: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--ground);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.brand__name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/*
| The card lays its own children out with a gap, so no block in a page
| carries a margin of its own. Conditional blocks — the unrecognised-address
| warning, a validation error — then space themselves correctly whether they
| render or not, which margin-based spacing does not.
*/
.card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    padding: 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.page__foot {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
}

/* Type ------------------------------------------------------------------ */

.heading {
    text-align: center;
}

.title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.lede {
    margin: 8px 0 0;
    color: var(--ink-soft);
}

.lede--tight {
    margin-top: 4px;
}

.strong {
    color: var(--ink);
    font-weight: 500;
}

.eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.note {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}

/* Panels ---------------------------------------------------------------- */

.panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--sunken);
    padding: 16px;
}

/*
| The destination panel turns red when the redirect host is not one of the
| clients this connector knows. Colour is the redundant cue; the sentence
| inside it is what actually tells the admin to stop.
*/
.panel--warn {
    border-color: var(--warn-line);
    background: var(--warn-fill);
}

.panel--caution {
    border-color: var(--caution-line);
    background: var(--caution-fill);
}

.panel__value {
    margin: 0;
    font-weight: 500;
    word-break: break-all;
}

.panel__sub {
    margin: 0;
    font-size: 12px;
    color: var(--ink-soft);
    word-break: break-all;
}

.panel__alert {
    margin: 8px 0 0;
    font-weight: 500;
    color: var(--warn-ink);
}

.panel__alert-body {
    margin: 4px 0 0;
    color: var(--warn-ink);
}

/* Key/value rows -------------------------------------------------------- */

.rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--sunken);
    padding: 16px;
}

.row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.row__key {
    color: var(--ink-soft);
    white-space: nowrap;
}

.row__value {
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* Scope list ------------------------------------------------------------ */

.scopes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scope {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--sunken);
    padding: 12px;
    color: var(--ink-soft);
}

.scope--sensitive {
    border-color: var(--caution-line);
    background: var(--caution-fill);
}

.scope__title {
    display: block;
    color: var(--ink);
    font-weight: 500;
}

/* Controls -------------------------------------------------------------- */

.form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.btn--primary {
    background: var(--ink);
    color: var(--surface);
}

.btn--primary:hover {
    opacity: 0.9;
}

.btn--ghost {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--ink);
}

.btn--ghost:hover {
    background: var(--hover);
}

.btn__icon {
    height: 16px;
    width: 16px;
    flex: none;
}

.linkform {
    text-align: center;
}

.btn-link {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink-soft);
    text-decoration: underline;
    cursor: pointer;
}

.btn-link:hover {
    color: var(--ink);
}

.alert {
    margin: 0;
    border: 1px solid var(--warn-line);
    border-radius: var(--radius-sm);
    background: var(--warn-fill);
    padding: 12px 16px;
    color: var(--warn-ink);
}

/* Keyboard focus must stay visible on every control. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}