/*! Latch · (c) 2026 Antichaos — antichaosdata.com. All rights reserved. Proprietary. */
/* Page shell + setup states for the runtime surface. The control itself lives in
   control.css (shared with the config dialog's preview). */

html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    overflow: hidden;
    background: #ffffff;
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
}
.hidden { display: none !important; }

/* The control fills the zone and is aligned per config (justify set inline by JS). */
#latch {
    position: fixed; inset: 0;
    display: flex; align-items: center;
    padding: 10px 16px; box-sizing: border-box;
}

/* ---- setup / empty states (house style) ----------------------------- */
.state {
    position: fixed; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box;
    background: var(--ac-bg, #fbfcfe);
}
.state.hidden { display: none !important; }
.setup-card {
    width: 100%; max-width: 340px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
    padding: 26px 24px 22px;
    background: var(--ac-surface, #fff);
    border: 1px solid var(--ac-line, #e7ecf3);
    border-radius: var(--ac-radius, 16px);
    box-shadow: var(--ac-shadow, 0 4px 14px rgba(20, 28, 42, .08), 0 14px 34px rgba(20, 28, 42, .08));
}
.setup-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center; border-radius: 18px;
    background: color-mix(in srgb, #4f7cf0 12%, transparent); color: #4f7cf0;
}
.setup-card h2 { margin: 2px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ac-ink, #151b26); }
.setup-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ac-ink-soft, #5d6878); }
.setup-btn {
    margin-top: 6px; padding: 10px 22px; border: 0; border-radius: 999px; cursor: pointer;
    background: #4f7cf0; color: #fff; font: 700 13px "Inter", sans-serif;
    box-shadow: 0 2px 10px color-mix(in srgb, #4f7cf0 30%, transparent);
    transition: filter .15s ease, transform .15s ease;
}
.setup-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.compact .state { padding: 6px; }
.compact .setup-card { max-width: none; width: auto; gap: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.compact .setup-icon, .compact .setup-card h2, .compact .setup-card p, .compact .setup-brand { display: none; }
.compact .setup-btn { margin-top: 0; padding: 8px 18px; }

.credit {
    position: fixed; bottom: 6px; right: 10px; z-index: 1;
    font-size: 10px; color: color-mix(in srgb, var(--text, #151b26) 45%, transparent);
    display: flex; align-items: center; gap: 6px;
}
.credit img { height: 16px; opacity: .7; }
#latch:not(.hidden) ~ .credit { display: none; }