/* plektron.ai apex app (C-845).

   Self-contained: the apex is its own Fly app and ships none of the
   Clerestory frontend. The tokens below are a small subset of
   frontend/static/css/base.css (same lightness ladder, hues and accent), so
   the page reads as the same product as the workspaces. Body text matches
   the Universal Login page template: Inter where installed, the platform UI
   face otherwise. The
   one downloaded face is Sackers Gothic for the "Plektron" wordmark beside
   the mark, the same file and treatment as plektron.com's header lockup.

   No JavaScript anywhere on the apex, so theme follows the system setting
   only. */

@font-face {
    font-family: "Sackers Gothic";
    src: url("/static/fonts/SackersGothicStd-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    --hue-neutral: 80;
    --hue-accent: 230;
    --hue-error: 15;

    --bg: oklch(0.96 0.0005 var(--hue-neutral));
    --surface: oklch(0.985 0.0005 var(--hue-neutral));
    --border: oklch(0.85 0.005 var(--hue-neutral));
    --border-strong: oklch(0.6 0.005 var(--hue-neutral));
    --text: oklch(0.15 0.0005 var(--hue-neutral));
    --text-muted: oklch(0.45 0.005 var(--hue-neutral));
    --accent: oklch(0.6 0.18 var(--hue-accent));
    --accent-hover: oklch(0.55 0.18 var(--hue-accent));
    --accent-text: oklch(0.5 0.18 var(--hue-accent));
    --focus-ring: oklch(0.6 0.18 var(--hue-accent) / 0.45);
    --error: oklch(0.58 0.22 var(--hue-error));

    --font-family:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --display-family: "Sackers Gothic", var(--font-family);
    --radius: 5px;
    --panel-width: 360px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hue-neutral: 250;
        --bg: oklch(0.18 0.0005 var(--hue-neutral));
        --surface: oklch(0.22 0.005 var(--hue-neutral));
        --border: oklch(0.3 0.005 var(--hue-neutral));
        --border-strong: oklch(0.42 0.005 var(--hue-neutral));
        --text: oklch(0.95 0.0005 var(--hue-neutral));
        --text-muted: oklch(0.7 0.005 var(--hue-neutral));
        --accent-text: oklch(0.75 0.14 var(--hue-accent));
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-family);
    font-weight: 450;
    line-height: 1.5;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
}

p {
    margin: 0;
}

a {
    color: inherit;
}

.muted {
    color: var(--text-muted);
}

.muted strong {
    color: var(--text);
    font-weight: 550;
    overflow-wrap: anywhere;
}

/* ---- Buttons and links ---- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    /* Enumerated, not `all`: Safari jitters a row's layout when a shorthand
       transition catches a form control's intrinsic metrics. */
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.button-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.button-primary:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---- Landing ---- */

.landing {
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
}

.wordmark {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    text-decoration: none;
}

/* plektron.com's header lockup: Sackers Gothic Medium in capitals. Only the
   500 face ships, so synthesis stays off rather than faking a bold. The top
   pad sets the cap height on the mark's centre line: capitals have no
   descenders, so centring the line box alone rides them high. */
.wordmark span {
    padding-top: 0.2em;
    font-family: var(--display-family);
    font-size: 1.125rem;
    font-weight: 500;
    font-synthesis: none;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.wordmark-mark img {
    display: block;
    width: 2rem;
    height: 2rem;
}

.hero {
    align-self: center;
    max-width: 40rem;
    padding: clamp(3rem, 10vh, 7rem) 0;
}

.hero h1 {
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
}

.lede {
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    text-wrap: pretty;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2.5rem;
}

.site-footer {
    display: flex;
    gap: 1.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--text);
}

/* ---- Sign-in and message panels ---- */

.panel-page {
    display: grid;
    place-items: center;
    padding: 28px 16px;
}

.panel {
    width: 100%;
    max-width: var(--panel-width);
}

.panel-mark img {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 2rem;
}

.panel h1 {
    font-size: 1.5rem;
    text-align: center;
}

.panel h1 + .muted {
    margin-top: 0.75rem;
    text-align: center;
    text-wrap: pretty;
}

.panel-footer {
    margin-top: 2rem;
    text-align: center;
}

.button-quiet {
    min-height: 2.25rem;
    padding: 0 1rem;
    border-color: var(--border);
    background: transparent;
    color: var(--text);
}

.button-quiet:hover {
    border-color: var(--border-strong);
}

.email-form {
    margin-top: 2rem;
}

.email-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.email-row {
    display: flex;
    gap: 0.5rem;
}

.email-row input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    transition: border-color 0.15s ease;
}

.email-row input:focus-visible {
    border-color: var(--accent);
    outline-offset: 0;
}

.email-row input[aria-invalid="true"] {
    border-color: var(--error);
}

.form-error {
    margin-top: 0.75rem;
    color: var(--error);
    font-size: 0.875rem;
}

/* The footer's two lines, and the side-by-side input and button, stack at
   phone width. */
@media (max-width: 480px) {
    .email-row {
        flex-direction: column;
    }

    .site-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
}