/* ==========================================================================
   LUMA Explorer — Public sign-in / guest landing — Version 1.5
   Design tokens (one-way aliases to --luma-* with local fallbacks)
   ========================================================================== */
:root {
    --bg-body: var(--luma-surface-body, #0b1117);
    --bg-body-alt: #0c141f;
    --bg-card: var(--luma-surface-card, #151d28);
    --bg-card-soft: rgba(19, 28, 40, 0.72);
    --bg-input: var(--luma-surface-input, #1f2a38);
    --bg-input-focus: #1c2b3a;
    --text-main: var(--luma-text-main, #e0e0e0);
    --text-heading: var(--luma-text-heading, #ffffff);
    --text-muted: var(--luma-text-muted, #8b9bb4);
    --text-faint: var(--luma-text-faint, #6b7280);
    --border-color: var(--luma-border, #2e3d52);
    --border-soft: rgba(255, 255, 255, 0.06);
    --accent: var(--luma-color-accent, #00a3e0);
    --accent-2: var(--luma-color-accent-2, #5ce1ff);
    --accent-hover: #10b3f0;
    --accent-soft: var(--luma-color-accent-soft, rgba(0, 163, 224, 0.14));
    --danger: #ff5c72;
    --danger-bg: rgba(255, 92, 114, 0.12);
    --success: var(--luma-color-success, #2ecc71);
    --radius-sm: var(--luma-radius-sm, 8px);
    --radius-md: var(--luma-radius-md, 12px);
    --radius-lg: var(--luma-radius-lg, 18px);
    --shadow-card: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-soft) inset;
    --shadow-pop: 0 18px 40px -12px rgba(0, 163, 224, 0.35);
    --ease-snap: var(--luma-ease-snap, cubic-bezier(0.16, 1, 0.3, 1));
    --ease-out: var(--luma-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
    --focus-ring: var(--luma-shadow-focus, 0 0 0 3px rgba(0, 163, 224, 0.28));
}

@media (prefers-color-scheme: light) {
    /* Explorer is a dark-first product; keep dark theme for brand consistency
       but ensure focus/contrast tokens still meet AA on all surfaces below. */
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * , *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--luma-font-family);
    color: var(--text-main);
    background: var(--bg-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Page shell + ambient background
   ========================================================================== */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(clamp(24px, 5vw, 48px), env(safe-area-inset-top, 0px))
        max(20px, env(safe-area-inset-right, 0px))
        max(clamp(24px, 5vw, 48px), env(safe-area-inset-bottom, 0px))
        max(20px, env(safe-area-inset-left, 0px)); /* token-oneoff: off-scale spacing */
    position: relative;
    isolation: isolate;
    background: radial-gradient(ellipse 70% 55% at 18% -8%, rgba(0, 163, 224, 0.22), transparent 55%),
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(92, 225, 255, 0.10), transparent 50%),
        radial-gradient(ellipse 55% 45% at 85% 100%, rgba(0, 163, 224, 0.10), transparent 55%),
        linear-gradient(180deg, var(--bg-body-alt) 0%, var(--bg-body) 45%);
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2; /* token-oneoff: local stacking */
    background-image: linear-gradient(rgba(0, 163, 224, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 163, 224, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, #000 15%, transparent 72%);
    pointer-events: none;
}

.login-page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1; /* token-oneoff: local stacking */
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 0.6px, transparent 0.6px);
    background-size: 3px 3px;
    opacity: 0.025;
    pointer-events: none;
}

/* ==========================================================================
   Layout — single card (fallback / minimal mode)
   ========================================================================== */
.login-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
}

/* ==========================================================================
   Brand
   ========================================================================== */
.login-brand {
    text-align: center;
    margin-bottom: 28px; /* token-oneoff: off-scale spacing */
}

.login-brand-logo {
    display: block;
    width: min(200px, 62vw);
    height: auto;
    margin: 0 auto var(--luma-space-4);
    filter: drop-shadow(0 8px 24px rgba(0, 163, 224, 0.2));
}

.login-brand-title {
    margin: 0;
    font-size: var(--luma-font-md);
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-brand-tagline {
    margin: var(--luma-space-2) 0 0;
    font-size: 14px; /* token-oneoff: type */
    line-height: 1.5; /* token-oneoff: leading */
    color: var(--text-muted);
}

/* ==========================================================================
   Sign-in card
   ========================================================================== */
.login-card {
    position: relative;
    background: linear-gradient(160deg, rgba(24, 34, 46, 0.92), rgba(15, 22, 31, 0.92)); /* token-oneoff: gradient */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px 30px 26px; /* token-oneoff: off-scale spacing */
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px); /* token-oneoff: blur */
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: cardEnter 0.55s var(--ease-snap) both;
}

.login-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
    opacity: 0.9;
}

.login-card-header {
    margin-bottom: 26px; /* token-oneoff: off-scale spacing */
}

.login-card-header h1 {
    margin: 0 0 var(--luma-space-1);
    font-size: 23px; /* token-oneoff: type */
    font-weight: var(--luma-weight-bold);
    color: var(--text-heading);
    letter-spacing: -0.02em;
}

.login-card-header p {
    margin: 0;
    font-size: 13.5px; /* token-oneoff: type */
    color: var(--text-muted);
    line-height: 1.5; /* token-oneoff: leading */
}

/* ==========================================================================
   Form
   ========================================================================== */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px; /* token-oneoff: off-scale spacing */
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--luma-space-2);
}

.form-field label {
    font-size: var(--luma-font-sm);
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrap > i:first-child {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: 14px; /* token-oneoff: type */
    pointer-events: none;
    transition: color 0.2s var(--ease-out);
}

.input-wrap:focus-within > i:first-child {
    color: var(--accent);
}

.form-field input,
.form-field select {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px 12px 42px; /* token-oneoff: off-scale spacing */
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-heading);
    font-size: 14.5px; /* token-oneoff: type */
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}

.form-field select {
    cursor: pointer;
    appearance: none;
    padding-right: 40px; /* token-oneoff: off-scale spacing */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a9cb5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.form-field select option {
    color: #111; /* token-oneoff: status */
    background: #fff; /* token-oneoff: status */
}

.form-field input::placeholder {
    color: var(--text-faint);
}

.form-field input:focus-visible,
.form-field select:focus-visible {
    border-color: var(--accent);
    background: var(--bg-input-focus);
    box-shadow: var(--focus-ring);
}

.form-field.has-toggle input {
    padding-right: 46px; /* token-oneoff: off-scale spacing */
}

.input-visibility-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    border-radius: var(--luma-radius-pill);
    transition: color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}

@media (hover: hover) {
    .input-visibility-toggle:hover {
        color: var(--text-main);
        background: rgba(255, 255, 255, 0.05); /* token-oneoff: glass */
    }
}

.input-visibility-toggle:active {
    transform: translateY(-50%) scale(0.9);
}

/* ==========================================================================
   Primary action
   ========================================================================== */
.login-submit {
    margin-top: var(--luma-space-1);
    width: 100%;
    min-height: 48px;
    padding: 13px 18px; /* token-oneoff: off-scale spacing */
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 55%, #0089c4 100%);
    color: var(--text-heading);
    font-size: 14.5px; /* token-oneoff: type */
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--luma-space-2);
    position: relative;
    overflow: hidden;
    transition: transform 0.18s var(--ease-out), box-shadow 0.22s var(--ease-out), filter 0.18s var(--ease-out);
    box-shadow: var(--shadow-pop);
}

.login-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%); /* token-oneoff: gradient */
    transform: translateX(-120%);
    transition: transform 0.55s var(--ease-out);
}

@media (hover: hover) {
    .login-submit:hover {
        filter: brightness(1.06);
        box-shadow: 0 20px 44px -10px rgba(0, 163, 224, 0.5); /* token-oneoff: shadow */
        transform: translateY(-1px);
    }

    .login-submit:hover::after {
        transform: translateX(120%);
    }
}

.login-submit:active {
    transform: translateY(1px) scale(0.99);
}

.login-submit:focus-visible {
    box-shadow: var(--shadow-pop), 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.login-submit:disabled {
    opacity: 0.75;
    cursor: wait;
    transform: none;
}

/* Secondary / tertiary action — visually subordinate to the primary CTA */
.login-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--luma-space-2);
    margin-top: 14px; /* token-oneoff: off-scale spacing */
    width: 100%;
    min-height: 44px;
    padding: var(--luma-space-2) var(--luma-space-3);
    font-size: var(--luma-font-lg);
    font-weight: var(--luma-weight-semibold);
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.18s var(--ease-out), background-color 0.18s var(--ease-out), gap 0.18s var(--ease-out);
}

.login-secondary-link i {
    font-size: var(--luma-font-sm);
    transition: transform 0.18s var(--ease-out);
}

@media (hover: hover) {
    .login-secondary-link:hover {
        color: var(--accent-2);
        background: rgba(0, 163, 224, 0.08); /* token-oneoff: glass */
    }

    .login-secondary-link:hover i {
        transform: translateY(2px);
    }
}

.login-secondary-link:active {
    color: var(--accent-2);
    background: rgba(0, 163, 224, 0.12); /* token-oneoff: glass */
}

/* ==========================================================================
   Errors
   ========================================================================== */
.login-errors {
    min-height: 0;
}

.login-error {
    display: flex;
    align-items: flex-start;
    gap: var(--luma-space-2);
    margin-top: var(--luma-space-4);
    padding: 12px 14px; /* token-oneoff: off-scale spacing */
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    border: 1px solid rgba(255, 92, 114, 0.32); /* token-oneoff: glass */
    color: #ffd7dd; /* token-oneoff: status */
    font-size: var(--luma-font-lg);
    line-height: 1.45; /* token-oneoff: leading */
    animation: errorSlideIn 0.28s var(--ease-out) both;
}

@keyframes errorSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-error i {
    margin-top: 2px; /* token-oneoff: hairline */
    color: var(--danger);
    flex-shrink: 0;
}

.login-footer {
    margin-top: 22px; /* token-oneoff: off-scale spacing */
    text-align: center;
    font-size: var(--luma-font-sm);
    color: var(--text-faint);
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Splash layout — sign-in + public project gallery, side by side on desktop
   ========================================================================== */
.login-page-stack {
    align-items: flex-start;
    padding: max(clamp(28px, 6vw, 56px), env(safe-area-inset-top, 0px))
        max(20px, env(safe-area-inset-right, 0px))
        max(clamp(40px, 6vw, 64px), env(safe-area-inset-bottom, 0px))
        max(20px, env(safe-area-inset-left, 0px)); /* token-oneoff: off-scale spacing */
}

.login-layout {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto; /* token-oneoff: center */
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px; /* token-oneoff: off-scale spacing */
}

@media (min-width: 960px) {
    .login-layout {
        grid-template-columns: minmax(340px, 400px) 1fr;
        align-items: start;
        gap: 52px; /* token-oneoff: off-scale spacing */
    }
}

.login-hero {
    width: 100%;
    max-width: 420px;
    margin: 0 auto; /* token-oneoff: center */
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 960px) {
    .login-hero {
        margin: 0;
        position: sticky;
        top: clamp(28px, 6vw, 56px);
    }
}

.login-hero .login-brand {
    text-align: center;
    width: 100%;
    margin-bottom: 26px; /* token-oneoff: off-scale spacing */
}

.login-hero .login-card {
    width: 100%;
}

.login-hero .login-card-header {
    text-align: center;
}

.login-hero .login-footer {
    width: 100%;
    text-align: center;
}

.login-projects-section {
    width: 100%;
    min-width: 0;
}

.login-projects-section .guest-projects-card {
    background: var(--bg-card-soft);
    backdrop-filter: blur(14px); /* token-oneoff: blur */
    -webkit-backdrop-filter: blur(14px);
    animation: cardEnter 0.6s 0.08s var(--ease-snap) both;
}

.login-projects-section .guest-projects-header {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: var(--luma-space-1);
}

.login-projects-section .guest-projects-header p.guest-projects-subtitle {
    margin: 0;
    font-size: var(--luma-font-lg);
    color: var(--text-muted);
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Public project grid (login splash)
   ========================================================================== */
.public-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
    gap: var(--luma-space-4);
}

.public-project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-main);
    text-decoration: none;
    transition: border-color 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
    animation: cardEnter 0.5s var(--ease-snap) both;
}

.public-project-card:nth-child(1) { animation-delay: 0.02s; }
.public-project-card:nth-child(2) { animation-delay: 0.06s; }
.public-project-card:nth-child(3) { animation-delay: 0.10s; }
.public-project-card:nth-child(4) { animation-delay: 0.14s; }
.public-project-card:nth-child(n+5) { animation-delay: 0.16s; }

.public-project-card:focus-visible {
    border-color: var(--project-accent, var(--accent));
    box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--project-accent, var(--accent));
}

@media (hover: hover) {
    .public-project-card:hover {
        border-color: var(--project-accent, var(--accent));
        transform: translateY(-4px);
        box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--project-accent, var(--accent)) inset;
    }

    .public-project-card:hover .public-project-card-map-inner {
        transform: scale(1.06);
    }

    .public-project-card:hover .public-project-card-open {
        opacity: 1;
        transform: translateX(0);
        color: var(--project-accent, var(--accent));
    }
}

.public-project-card:focus-visible .public-project-card-open {
    opacity: 1;
    transform: translateX(0);
    color: var(--project-accent, var(--accent));
}

.public-project-card:active {
    transform: translateY(-1px) scale(0.995);
}

.public-project-card-map {
    position: relative;
    z-index: var(--luma-z-stage);
    height: 128px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
}

.public-project-card-map::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background: linear-gradient(180deg, transparent, rgba(7, 11, 18, 0.55)); /* token-oneoff: gradient */
    pointer-events: none;
    z-index: 2; /* token-oneoff: local stacking */
}

.public-project-card-map-inner {
    position: relative;
    z-index: var(--luma-z-stage);
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: transform 0.5s var(--ease-out);
}

.public-project-card-map-inner.is-loading {
    background: linear-gradient(100deg, #0d141d 30%, #17222f 50%, #0d141d 70%); /* token-oneoff: gradient */
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 140% 0; }
    100% { background-position: -40% 0; }
}

.public-project-card-map-inner .maplibregl-map {
    width: 100%;
    height: 100%;
    background: var(--bg-body);
    pointer-events: none;
    /* Avoid Firefox fingerprinting warning for MapLibre's Helvetica Neue. */
    font-family: var(--luma-font-family) !important;
}

.public-project-card-map-inner .maplibregl-ctrl-attrib,
.public-project-card-map-inner .maplibregl-ctrl-logo {
    display: none !important;
}

.public-project-card-logo {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 5; /* token-oneoff: local stacking */
    width: 32px;
    height: 32px;
    border-radius: var(--luma-radius-sm);
    object-fit: contain;
    background: rgba(11, 17, 23, 0.9); /* token-oneoff: glass */
    border: 1px solid rgba(255, 255, 255, 0.14); /* token-oneoff: glass */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* token-oneoff: shadow */
    padding: 3px; /* token-oneoff: hairline */
    pointer-events: none;
}

.public-project-card-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 5; /* token-oneoff: local stacking */
    display: inline-flex;
    align-items: center;
    gap: var(--luma-space-1);
    font-size: var(--luma-font-xs);
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #eafcff; /* token-oneoff: status */
    background: rgba(7, 11, 18, 0.72); /* token-oneoff: glass */
    border: 1px solid rgba(255, 255, 255, 0.14); /* token-oneoff: glass */
    border-radius: var(--luma-radius-pill);
    padding: var(--luma-space-1) var(--luma-space-2) var(--luma-space-1) var(--luma-space-1);
    pointer-events: none;
    backdrop-filter: blur(4px); /* token-oneoff: blur */
}

.public-project-card-badge i {
    font-size: 8px; /* token-oneoff: type */
    color: var(--success);
}

.public-project-card-blueprint {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--project-accent, var(--accent));
    font-size: 22px; /* token-oneoff: type */
    opacity: 0.35;
    background-image: linear-gradient(var(--project-accent, var(--accent)) 1px, transparent 1px),
        linear-gradient(90deg, var(--project-accent, var(--accent)) 1px, transparent 1px);
    background-size: 14px 14px;
    background-position: center;
}

.public-project-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--luma-space-1);
    padding: var(--luma-space-2) var(--luma-space-3);
}

.public-project-card-name {
    width: 100%;
    font-size: 13.5px; /* token-oneoff: type */
    font-weight: var(--luma-weight-bold);
    color: var(--text-heading);
    line-height: 1.3; /* token-oneoff: leading */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-project-card-open {
    flex-shrink: 0;
    font-size: var(--luma-font-sm);
    color: var(--text-faint);
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

@media (hover: none) {
    .public-project-card-open {
        opacity: 1;
        transform: none;
        color: var(--project-accent, var(--accent));
    }
}

@media (max-width: 600px) {
    .login-page-stack {
        padding: 28px 16px 40px; /* token-oneoff: off-scale spacing */
    }

    .login-layout {
        gap: 28px; /* token-oneoff: off-scale spacing */
    }

    .login-projects-section .guest-projects-header {
        align-items: center;
    }

    .public-project-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr));
        gap: var(--luma-space-3);
    }

    .public-project-card-map {
        height: 96px;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 26px 20px 20px; /* token-oneoff: off-scale spacing */
        border-radius: var(--radius-md);
    }

    .login-card-header h1 {
        font-size: 21px; /* token-oneoff: type */
    }
}

/* ==========================================================================
   Control panel guest landing (admin_dashboard.php) — list layout
   ========================================================================== */
.guest-page {
    align-items: flex-start;
    padding-top: 48px; /* token-oneoff: off-scale spacing */
    padding-bottom: 48px; /* token-oneoff: off-scale spacing */
}

.guest-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
}

.guest-actions {
    margin-bottom: 18px; /* token-oneoff: off-scale spacing */
}

.guest-signin-link {
    display: flex;
    width: 100%;
    min-height: 44px;
    text-decoration: none;
    justify-content: center;
}

.guest-projects-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--luma-space-5);
    box-shadow: var(--shadow-card);
}

.guest-projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--luma-space-3);
    margin-bottom: 18px; /* token-oneoff: off-scale spacing */
}

.guest-projects-header h2 {
    margin: 0;
    font-size: 19px; /* token-oneoff: type */
    font-weight: var(--luma-weight-bold);
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

.guest-projects-count {
    font-size: var(--luma-font-sm);
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-2);
    background: var(--accent-soft);
    border: 1px solid rgba(0, 163, 224, 0.3); /* token-oneoff: glass */
    border-radius: var(--luma-radius-pill);
    padding: 5px 11px; /* token-oneoff: off-scale spacing */
    white-space: nowrap;
}

.guest-project-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px; /* token-oneoff: off-scale spacing */
}

.guest-project-link {
    display: flex;
    align-items: center;
    gap: 14px; /* token-oneoff: off-scale spacing */
    min-height: 44px;
    padding: 14px 16px; /* token-oneoff: off-scale spacing */
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-main);
    text-decoration: none;
    transition: border-color 0.18s var(--ease-out), background-color 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.guest-project-link:focus-visible {
    border-color: var(--project-accent, var(--accent));
    background: #111822; /* token-oneoff: chrome-surface */
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--project-accent, var(--accent));
}

@media (hover: hover) {
    .guest-project-link:hover {
        border-color: var(--project-accent, var(--accent));
        background: #111822; /* token-oneoff: chrome-surface */
        transform: translateY(-1px);
        box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4); /* token-oneoff: shadow */
    }

    .guest-project-link:hover .guest-project-open {
        color: var(--project-accent, var(--accent));
    }
}

.guest-project-link:active {
    transform: translateY(0) scale(0.995);
}

.guest-project-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--luma-radius-sm);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.04); /* token-oneoff: glass */
    flex-shrink: 0;
}

.guest-project-copy {
    display: flex;
    flex-direction: column;
    gap: 3px; /* token-oneoff: hairline */
    min-width: 0;
    flex: 1;
}

.guest-project-name {
    font-size: 15px; /* token-oneoff: type */
    font-weight: var(--luma-weight-semibold);
    color: var(--text-heading);
}

.guest-project-org {
    font-size: var(--luma-font-md);
    color: var(--project-accent, var(--accent));
}

.guest-project-open {
    display: inline-flex;
    align-items: center;
    gap: var(--luma-space-1);
    font-size: var(--luma-font-md);
    font-weight: var(--luma-weight-semibold);
    color: var(--text-muted);
    flex-shrink: 0;
}

.guest-projects-empty {
    text-align: center;
    padding: 28px 16px 18px; /* token-oneoff: off-scale spacing */
    color: var(--text-muted);
}

.guest-projects-empty i {
    font-size: 28px; /* token-oneoff: type */
    color: var(--accent);
    margin-bottom: var(--luma-space-3);
}

.guest-projects-empty p {
    margin: 0 0 var(--luma-space-2);
    font-size: 14px; /* token-oneoff: type */
    color: var(--text-main);
}

.guest-projects-empty-sub {
    font-size: var(--luma-font-md) !important;
    color: var(--text-muted) !important;
}

@media (max-width: 560px) {
    .guest-project-link {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .guest-project-open {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   UI compliance retrofit — touch + hover backups
   ========================================================================== */
@media (max-width: 768px) {
    .login-page,
    .login-page-stack {
        padding-left: max(var(--luma-space-4), env(safe-area-inset-left, 0px));
        padding-right: max(var(--luma-space-4), env(safe-area-inset-right, 0px));
    }

    .input-visibility-toggle,
    .login-submit,
    .login-secondary-link,
    .public-project-card,
    .guest-project-link {
        min-height: 44px;
    }
}

@media (hover: hover) {
    .form-field input:hover,
    .form-field select:hover {
        border-color: #38495f; /* token-oneoff: chrome-surface */
    }
}

@media (hover: none) {
    .login-submit:hover,
    .public-project-card:hover,
    .guest-project-link:hover {
        transform: none;
        filter: none;
    }

    .public-project-card-open {
        opacity: 1;
        transform: none;
        color: var(--project-accent, var(--accent));
    }
}