/* ==========================================================================
   Simple CRM SaaS - the pages the single-team CRM did not have
   ==========================================================================
   Sign-up, the billing wall, the plan banner, the Workspace page and the
   Connect Claude consent screen. Built on the tokens of design.css; loaded
   after it. Nothing here restyles the CRM itself.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Public pages (sign in, sign up, wall, consent) - extras on the login box
   -------------------------------------------------------------------------- */

.login-box--wide {
    max-width: 460px;
}

.signup-pitch {
    margin: -6px 0 18px;
    text-align: center;
    font-size: var(--t-sm);
    color: var(--c-ink-3);
    line-height: 1.5;
}

.login-signup {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line-2);
}

/* A hint that follows a form (sign-up, consent) needs room below the button;
   inside a form the hint sits under its input and has none. */
.login-form + .login-hint {
    margin-top: 16px;
    text-align: center;
}

.login-hint + .login-alt {
    margin-top: 10px;
}

.signup-terms {
    align-items: flex-start;
    line-height: 1.45;
}

.signup-terms a {
    color: var(--c-accent);
}

.login-code-input {
    text-align: center;
    font-size: var(--t-xl);
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
}

.legal-footer {
    margin: 18px 0 0;
    text-align: center;
    font-size: var(--t-xs);
    color: var(--c-ink-4);
}

.legal-footer a {
    color: var(--c-ink-3);
    text-decoration: none;
    margin: 0 6px;
}

.legal-footer a:hover {
    text-decoration: underline;
}

/* The billing wall */

.wall-lead {
    margin: 0 0 18px;
    font-size: var(--t-base);
    line-height: 1.55;
    color: var(--c-ink-2);
}

.wall-plan {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-sunken);
    text-align: center;
}

.wall-price {
    font-size: var(--t-2xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}

.wall-plan-sub {
    margin-top: 4px;
    font-size: var(--t-sm);
    color: var(--c-ink-3);
}

/* Connect Claude */

.connect-lead {
    margin: 0 0 12px;
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--c-ink);
}

.connect-note {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--c-tint-3);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--c-ink-2);
}

.connect-actions {
    display: grid;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   Plan banner above the CRM (trial days left, payment failed)
   -------------------------------------------------------------------------- */

.plan-banner {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    color: var(--c-ink);
}

/* Lined up with the page content below it: same left padding, button at the
   far right. */
.plan-banner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px var(--page-pad);
    min-height: 50px;
    box-sizing: border-box;
}

.plan-banner-icon {
    flex-shrink: 0;
    color: var(--c-accent);
}

.plan-banner-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--t-base);
    line-height: 1.4;
}

.plan-banner-text strong {
    font-weight: 600;
}

.plan-banner-sub {
    color: var(--c-ink-3);
    margin-left: 4px;
}

.plan-banner-btn {
    flex-shrink: 0;
    text-decoration: none;
}

/* The last three days: the same line, in the warning colour. */
.plan-banner--soon {
    background: var(--c-warning-soft);
    border-bottom-color: transparent;
}

.plan-banner--soon .plan-banner-icon {
    color: var(--c-warning-ink);
}

/* A failed payment. */
.plan-banner--warn {
    background: var(--c-danger-soft);
    border-bottom-color: transparent;
}

.plan-banner--warn .plan-banner-icon,
.plan-banner--warn .plan-banner-text strong {
    color: var(--c-danger-ink);
}

@media (max-width: 760px) {
    .plan-banner-inner {
        padding: 8px 16px;
        min-height: 48px;
    }

    .plan-banner-text {
        font-size: var(--t-sm);
    }

    /* On a phone the line stays one line: the reassurance goes, the button stays. */
    .plan-banner-sub {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Workspace page
   -------------------------------------------------------------------------- */

.workspace-page {
    display: grid;
    gap: 18px;
    max-width: 760px;
}

.workspace-loading {
    color: var(--c-ink-3);
    font-size: var(--t-sm);
}

.ws-card {
    padding: 18px 20px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
}

.ws-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ws-card-title {
    margin: 0;
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--c-ink);
}

.ws-card-sub {
    margin: 0 0 12px;
    font-size: var(--t-sm);
    color: var(--c-ink-3);
    line-height: 1.5;
}

.ws-state {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 600;
    background: var(--c-tint-2);
    color: var(--c-ink-2);
}

.ws-state--active {
    background: var(--c-success-soft, #DDEEE2);
    color: var(--c-success-ink, #2F6B43);
}

.ws-state--warn {
    background: var(--c-danger-soft, #F6DCDC);
    color: var(--c-danger-ink, #8C2F2F);
}

.ws-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ws-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--c-line-2);
    font-size: var(--t-sm);
}

.ws-row:first-of-type {
    border-top: 0;
}

.ws-row-label {
    color: var(--c-ink-3);
}

.ws-row-value {
    color: var(--c-ink);
    text-align: right;
}

.ws-row-muted {
    color: var(--c-ink-3);
}

/* "Refresh": a link-looking button next to the real ones */
.ws-quiet {
    appearance: none;
    border: 0;
    background: none;
    padding: 8px 4px;
    font: inherit;
    font-size: var(--t-sm);
    color: var(--c-ink-3);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ws-quiet:hover:not(:disabled) {
    color: var(--c-ink);
}

.ws-quiet:disabled {
    opacity: 0.5;
    cursor: default;
}

.ws-member-note {
    margin: 12px 0 0;
    font-size: var(--t-sm);
    color: var(--c-ink-3);
}

.ws-url {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ws-url .form-input {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--t-sm);
}

.ws-steps {
    margin: 10px 0 0;
    padding-left: 20px;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--c-ink-2);
}

.ws-subtitle {
    margin: 16px 0 2px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-ink-2);
}

.ws-connection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--c-line-2);
    font-size: var(--t-sm);
}

.ws-connection-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ws-connection-name {
    font-weight: 600;
    color: var(--c-ink);
}

.ws-connection-meta {
    font-size: var(--t-xs);
    color: var(--c-ink-3);
}

.ws-danger {
    border-color: var(--c-danger-soft, #F6DCDC);
}

.ws-danger .ws-card-title {
    color: var(--c-danger-ink, #8C2F2F);
}

.ws-delete-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    max-width: 440px;
}

.ws-delete-form .ws-card-sub {
    margin: 0;
}

.ws-delete-form .ws-actions {
    margin-top: 2px;
}

.ws-notice {
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    line-height: 1.5;
    background: var(--c-tint-3);
    color: var(--c-ink-2);
}

.ws-notice--error {
    background: var(--c-danger-soft, #F6DCDC);
    color: var(--c-danger-ink, #8C2F2F);
}

.ws-notice--success {
    background: var(--c-success-soft, #DDEEE2);
    color: var(--c-success-ink, #2F6B43);
}

@media (max-width: 600px) {
    .ws-row {
        flex-direction: column;
        gap: 2px;
    }

    .ws-row-value {
        text-align: left;
    }

    .ws-url {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stacked, the input's flex: 1 would become its height; it keeps its own. */
    .ws-url .form-input {
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   Users page: the plan's seats
   -------------------------------------------------------------------------- */

.users-seats {
    margin: 0 0 12px;
    font-size: var(--t-sm);
    color: var(--c-ink-3);
}

.users-seats.is-full {
    color: var(--c-danger-ink, #8C2F2F);
}

/* "Sign out" under the billing wall: a POST button that reads like the link
   it replaces, inline in the sentence. */
.login-alt .btn-link {
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* A reset link for an account in use is only mailed, never shown: the row
   with the link and its copy button steps aside (display:flex would
   otherwise win over the hidden attribute). */
.users-link-row[hidden] {
    display: none;
}