/* Shared design tokens, font, theme toggle, tooltips and sign-in page. Loaded by both pages. */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-variable.ttf") format("truetype");
}
:root {
    color-scheme: light dark;
    --color-background: light-dark(hsl(240 20% 98%), hsl(240 10% 6%));
    --color-surface: light-dark(hsl(0 0% 100%), hsl(240 8% 9.5%));
    --color-surface-raised: light-dark(hsl(0 0% 100%), hsl(240 7% 12.5%));
    --color-surface-subtle: light-dark(hsl(240 16% 96.5%), hsl(240 8% 11%));
    --color-surface-hover: light-dark(hsl(240 16% 94%), hsl(240 7% 15%));
    --color-text: light-dark(hsl(240 12% 9%), hsl(240 10% 95%));
    --color-muted: light-dark(hsl(240 5% 38%), hsl(240 6% 68%));
    --color-secondary: light-dark(hsl(240 8% 24%), hsl(240 8% 84%));
    --color-border: light-dark(hsl(240 10% 90%), hsl(240 6% 19%));
    --color-border-strong: light-dark(hsl(240 6% 70%), hsl(240 6% 34%));
    --color-primary: light-dark(hsl(250 82% 54%), hsl(252 95% 72%));
    --color-primary-hover: light-dark(hsl(250 80% 47%), hsl(252 100% 79%));
    --color-primary-soft: light-dark(hsl(250 90% 96.5%), hsl(252 38% 17%));
    --color-primary-text: light-dark(hsl(250 74% 44%), hsl(252 100% 83%));
    --color-on-primary: light-dark(hsl(0 0% 100%), hsl(252 50% 8%));
    --color-success: light-dark(hsl(152 62% 28%), hsl(152 55% 62%));
    --color-success-soft: light-dark(hsl(152 55% 95%), hsl(152 35% 14%));
    --color-warning: light-dark(hsl(32 90% 26%), hsl(40 90% 72%));
    --color-warning-soft: light-dark(hsl(40 100% 95%), hsl(36 40% 13%));
    --color-warning-border: light-dark(hsl(38 85% 80%), hsl(36 45% 26%));
    --color-error: light-dark(hsl(354 70% 41%), hsl(354 90% 74%));
    --color-error-soft: light-dark(hsl(354 100% 97%), hsl(354 35% 14%));
    --color-error-border: light-dark(hsl(354 80% 86%), hsl(354 40% 28%));
    --color-danger-fill: light-dark(hsl(354 72% 44%), hsl(354 72% 52%));
    --color-on-danger: hsl(0 0% 100%);
    --color-focus: light-dark(hsl(250 90% 60%), hsl(252 100% 76%));
    --color-focus-glow: light-dark(hsl(250 90% 60% / .2), hsl(252 100% 76% / .25));
    --gradient-primary: linear-gradient(180deg, light-dark(hsl(250 85% 58%), hsl(252 95% 76%)), light-dark(hsl(250 82% 51%), hsl(252 92% 68%)));
    --gradient-brand: linear-gradient(140deg, hsl(255 90% 62%), hsl(232 85% 52%));
    --gradient-page: radial-gradient(60% 40% at 15% -10%, light-dark(hsl(250 100% 94% / .9), hsl(252 60% 20% / .35)), transparent), radial-gradient(50% 40% at 100% 0%, light-dark(hsl(200 100% 94% / .7), hsl(210 60% 20% / .22)), transparent);
    --tip-bg: light-dark(hsl(240 12% 12%), hsl(240 10% 94%));
    --tip-fg: light-dark(hsl(0 0% 100%), hsl(240 12% 10%));
    --font-body: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-md: .875rem;
    --fs-lg: 1rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.75rem;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 48px;
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
    --shadow-sm: 0 1px 2px hsl(240 30% 10% / .05);
    --shadow-md: 0 6px 20px hsl(240 30% 10% / .08);
    --shadow-lg: 0 24px 60px hsl(240 30% 10% / .16);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-enter: cubic-bezier(.16, 1, .3, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-enter: 450ms;
    font-family: var(--font-body);
    font-synthesis: none;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --shadow-md: 0 6px 20px hsl(0 0% 0% / .35); --shadow-lg: 0 24px 60px hsl(0 0% 0% / .5); }
* { box-sizing: border-box; }
.theme-toggle {
    display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px;
    padding: 0; margin: 0; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background: var(--color-surface-raised);
    color: var(--color-secondary); cursor: pointer; touch-action: manipulation;
    transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.theme-toggle svg { grid-area: 1 / 1; }
.theme-toggle .theme-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
.theme-toggle:active { transform: scale(.94); }
@media (hover: hover) {
    .theme-toggle:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle .theme-sun { display: block; }
    :root:not([data-theme]) .theme-toggle .theme-moon { display: none; }
}

/* Tooltips: CSS-only, shown on hover (after a short delay) and keyboard focus. */
[data-tip] { position: relative; }
[data-tip]::after { pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms var(--ease-standard), transform 120ms var(--ease-standard), visibility 0s linear 120ms; }
[data-tip]::after {
    content: attr(data-tip); position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px);
    transform: translate(-50%, 3px); padding: 5px 9px; border-radius: var(--radius-sm);
    background: var(--tip-bg); color: var(--tip-fg); font-size: var(--fs-xs); font-weight: var(--weight-semibold);
    line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow-md);
}
[data-tip-end]::after { left: auto; right: 0; transform: translate(0, 3px); }
[data-tip-below]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -3px); }
[data-tip-below][data-tip-end]::after { transform: translate(0, -3px); }
[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
[data-tip-end]:focus-visible::after, [data-tip-below][data-tip-end]:focus-visible::after { transform: none; }
[data-tip-below]:focus-visible::after { transform: translate(-50%, 0); }
[data-tip-below][data-tip-end]:focus-visible::after { transform: none; }
@media (hover: hover) {
    [data-tip]:hover::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 350ms, 350ms, 350ms; }
    [data-tip-end]:hover::after { transform: none; }
    [data-tip-below]:hover::after { transform: translate(-50%, 0); }
    [data-tip-below][data-tip-end]:hover::after { transform: none; }
}

/* Sign-in page */
.login-page {
    min-height: 100dvh; margin: 0; padding: var(--space-6);
    display: grid; place-items: center; color: var(--color-text);
    background: var(--gradient-page), var(--color-background);
    font: 400 var(--fs-md)/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
.login-page .login-shell { width: min(100%, 960px); display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-lg); animation: rise var(--duration-enter) var(--ease-enter) both; }
.login-page .login-story { padding: var(--space-8); color: hsl(0 0% 100%); background: radial-gradient(70% 55% at 0% 0%, hsl(262 95% 66% / .55), transparent 70%), radial-gradient(60% 50% at 100% 100%, hsl(215 95% 55% / .45), transparent 70%), linear-gradient(160deg, hsl(250 45% 16%), hsl(240 50% 8%)); display: flex; flex-direction: column; min-height: 560px; position: relative; overflow: hidden; }
.login-page .login-story::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(hsl(0 0% 100% / .05) 1px, transparent 1px), linear-gradient(90deg, hsl(0 0% 100% / .05) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(70% 70% at 30% 20%, #000, transparent); pointer-events: none; }
.login-page .login-story > * { position: relative; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-lg); font-weight: var(--weight-bold); letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--gradient-brand); color: #fff; box-shadow: 0 4px 14px hsl(250 90% 55% / .4), inset 0 1px 0 hsl(0 0% 100% / .25); flex-shrink: 0; }
.brand-mark svg { width: 18px; height: 18px; }
.login-page .story-copy { margin-top: auto; }
.login-page .eyebrow { display: block; font-size: var(--fs-xs); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.login-page .story-copy .eyebrow { color: hsl(255 100% 86%); }
.login-page .story-copy h2 { font-size: clamp(1.75rem, 3.4vw, 2.3rem); letter-spacing: -.035em; line-height: 1.12; font-weight: 700; margin: var(--space-3) 0 var(--space-4); }
.login-page .story-copy h2 span { color: hsl(255 100% 82%); }
.login-page .story-copy p { color: hsl(240 20% 86%); font-size: var(--fs-md); line-height: 1.65; max-width: 34ch; margin: 0; }
.login-page .directory-art { margin-top: var(--space-6); display: grid; gap: var(--space-2); }
.login-page .art-line { padding: var(--space-3) var(--space-4); border: 1px solid hsl(0 0% 100% / .14); background: hsl(0 0% 100% / .06); border-radius: var(--radius-lg); display: flex; gap: var(--space-3); align-items: center; color: hsl(240 20% 92%); font-size: var(--fs-sm); font-weight: var(--weight-medium); backdrop-filter: blur(6px); }
.login-page .art-line > span:first-child { color: hsl(255 100% 84%); font-size: var(--fs-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.login-page .art-line > span:last-child { margin-left: auto; color: hsl(255 100% 84%); }
.login-page .story-footer { font-size: var(--fs-xs); letter-spacing: .08em; color: hsl(240 15% 72%); margin: var(--space-6) 0 0; }
.login-page .login-card { padding: var(--space-10) var(--space-10) var(--space-6); display: flex; flex-direction: column; min-width: 0; }
.login-page .login-card-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-8); }
.login-page h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 var(--space-2); }
.login-page h1 span { color: var(--color-primary); }
.login-page .login-card > p { margin: 0; color: var(--color-muted); }
.login-page form { display: grid; gap: var(--space-1); margin-top: var(--space-6); }
.login-page label { font-size: var(--fs-sm); font-weight: var(--weight-semibold); color: var(--color-secondary); margin-top: var(--space-3); }
.login-page input, .login-page #loginBtn { width: 100%; height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md); font: inherit; }
.login-page input { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.login-page input:hover { border-color: var(--color-muted); }
.login-page input:focus { border-color: var(--color-focus); outline: 2px solid transparent; box-shadow: 0 0 0 4px var(--color-focus-glow); }
.login-page input:user-invalid { border-color: var(--color-error); animation: nudge var(--duration-fast) var(--ease-standard); }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-reveal { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); cursor: pointer; transition: color var(--duration-fast), background-color var(--duration-fast); }
.password-reveal svg { width: 18px; height: 18px; }
.password-reveal:hover { color: var(--color-text); background: var(--color-surface-hover); }
.password-reveal[aria-pressed="true"] { color: var(--color-primary-text); }
.login-page #loginBtn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--gradient-primary); color: var(--color-on-primary); border: 0; font-size: var(--fs-md); font-weight: var(--weight-bold); margin-top: var(--space-5); cursor: pointer; box-shadow: inset 0 1px 0 hsl(0 0% 100% / .22), 0 1px 2px hsl(250 60% 30% / .35); transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), filter var(--duration-fast); }
.login-page #loginBtn:active:not(:disabled) { transform: scale(.985); }
.login-page #loginBtn:disabled { opacity: .7; cursor: wait; }
.login-page #loginBtn:disabled::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation: spin .7s linear infinite; }
.login-page :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.login-page .login-card .status { color: var(--color-error); font-size: var(--fs-sm); font-weight: var(--weight-medium); margin: var(--space-3) 0 0; min-height: 20px; overflow-wrap: anywhere; }
.login-page .login-card .status:not(:empty) { animation: fade-up var(--duration-fast) var(--ease-enter) both; }
.login-page .login-card .status.success { color: var(--color-success); }
.login-page .login-card .default-warning { font-size: var(--fs-sm); background: var(--color-warning-soft); border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-top: var(--space-2); color: var(--color-warning); }
.login-page code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; font-weight: 600; }
.login-page .login-card .login-footer { font-size: var(--fs-xs); margin-top: auto; padding-top: var(--space-6); color: var(--color-muted); }
.login-page .login-footer span { padding-inline: var(--space-1); }
@media (hover: hover) {
    .login-page #loginBtn:hover:not(:disabled) { filter: brightness(1.06); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .22), 0 6px 18px var(--color-focus-glow); }
}
@media (max-width: 760px) {
    .login-page { padding: var(--space-4); }
    .login-page .login-shell { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
    .login-page .login-story { min-height: auto; padding: var(--space-5) var(--space-6); }
    .login-page .story-copy, .login-page .directory-art, .login-page .story-footer { display: none; }
    .login-page .login-card { padding: var(--space-6); }
    .login-page h1 { font-size: var(--fs-xl); }
    .login-page .login-card-toolbar { margin-bottom: var(--space-5); }
    .login-page input { font-size: var(--fs-lg); }
    .theme-toggle { width: 44px; height: 44px; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes nudge { 25%, 75% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}