* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global select base — removes OS chrome, sets dark theme for box + popup list */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: none;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}

/* var() doesn't resolve inside <option> in most browsers — use hardcoded values */
select option {
    background-color: #111111;
    color: #e2e2ea;
}

select option:checked {
    background-color: #1e3a3a;
    color: #00d4ff;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    padding: calc(40px + 2.6rem + 2.5rem) 1rem 4rem;   /* the top clears the glass bar (.top-glass) */
}

/* Background elements with animations */
.background-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

.blob {
    display: none;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: var(--brand-orange);
}

.blob-2 {
    bottom: -15%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: var(--brand-cyan);
    animation-delay: -7s;
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -60px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}

.container {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    --stack-gap: 2.5rem;
    gap: var(--stack-gap);
    z-index: 1;
}

/* Frosted glass behind the name and the controls. It has no colour of its own, only a blur, so
   it shows nothing over the bare page and frosts whatever scrolls under it (owner, 2026-10-08).
   Its height is the buttons' plus their offset above and below. */
.top-glass {
    position: fixed;
    inset: 0 0 auto 0;
    height: calc(40px + 2.6rem);
    z-index: 899;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    /* fades out at the bottom, so there is no hard line where the frost ends */
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
    pointer-events: none;
}

/* The name, in the top bar opposite the controls (controls.css). Under the drawers, which cover it. */
.site-brand {
    position: fixed;
    top: 1.3rem;
    left: 1.3rem;
    z-index: 900;
    height: 40px;
    display: flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    /* wiped in from the left once the search is in use */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.searching .site-brand { clip-path: inset(0); transition-delay: 0.2s; }
.site-brand span, .hero-brand span { color: var(--brand-orange); }

/* The name on the page: large, narrower than the search under it. When the search is put to use
   the search captures it: the name's row closes, so the search rises to where the name stood,
   while the name shrinks towards that spot and ends up behind the search (which is drawn over
   it), then fades. The small name in the top bar takes over. The negative margin takes back the
   gap the empty row would leave. */
.hero {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-brand {
    min-height: 0;          /* lets its row close; the name then hangs below it, under the search */
    justify-self: center;
    transform-origin: 50% 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(3.4rem, 15vw, 6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s linear, visibility 0s;
}
.search-container { z-index: 2; }   /* over the name as it is taken in */
body.searching .hero { grid-template-rows: 0fr; margin-bottom: calc(-1 * var(--stack-gap)); }
body.searching .hero-brand { transform: scale(0.4); opacity: 0; visibility: hidden; transition-delay: 0s, 0.35s, 0.55s; }
@media (prefers-reduced-motion: reduce) {
    .hero, .hero-brand, body.searching .hero-brand, .site-brand, body.searching .site-brand { transition: none; }
}

/* The two things the app does, under the search until an item is shown */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.5rem; }   /* set apart from the search */
/* A signed-in person's projects (js/dashboard.js), in the cards' design */
.projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.5rem; }
.container:has(#resultCard:not(.hidden)) .projects { display: none; }
.projects:not(.hidden) + .ways { margin-top: 0; }
.projects-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.projects-head h2 { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800; }
.projects-count { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
.projects-head .way-go { padding: 0 1.4rem; }
.project-new, .project-rename { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.project-new { max-width: 30rem; }
.project-input { flex: 1; min-width: 0; min-height: 40px; padding: 0 0.8rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-deep); box-shadow: var(--neo-inset); color: var(--text-primary); font: inherit; }
.project-input:focus-visible { border-color: var(--border-hover); outline: none; }
.project-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.project-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-primary); box-shadow: var(--neo-raised); min-width: 0; }
.project-card.in-use { border-color: var(--brand-orange); }
.project-open { flex: 1; min-width: 0; display: grid; gap: 0.2rem; padding: 0.2rem; border: 0; background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.project-open:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.project-open strong { font-weight: 700; overflow-wrap: anywhere; }
.project-open span { color: var(--text-secondary); font-size: 0.82rem; }
.project-open em { justify-self: start; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(var(--brand-orange-rgb), 0.16); color: var(--brand-orange); font-size: 0.7rem; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.project-tools { display: grid; gap: 0.35rem; flex: none; }
.project-btn { min-height: 32px; padding: 0 0.7rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-secondary); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.project-btn:hover, .project-btn:focus-visible { border-color: var(--border-hover); color: var(--text-primary); outline: none; }
.project-new .project-btn, .project-rename .project-btn { min-height: 40px; }

/* The first card runs the full width: its button beside the title, its three lines side by side */
.way.way-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.way-wide ul { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, 1fr); gap: 0.6rem 1.4rem; }
.way-wide .way-go { padding: 0 1.4rem; }
.way-note { color: var(--text-muted); font-size: 0.85rem; line-height: 1.4; }
.way-go:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.container:has(#resultCard:not(.hidden)) .ways { display: none; }
/* Until an item is shown, the search and the cards sit in the middle of the screen; an item sends
   the search back to the top, with the item under it. */
.container:not(:has(#resultCard:not(.hidden))) { margin-block: auto; }
.way {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-primary);
    box-shadow: var(--neo-raised);
}
.way-head { display: flex; align-items: center; gap: 0.7rem; color: var(--brand-cyan); }
.way-main .way-head { color: var(--brand-orange); }
.way h2 { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
.way ul { list-style: none; display: grid; gap: 0.6rem; flex: 1; align-content: start; }
.way li { display: flex; gap: 0.6rem; align-items: baseline; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.45; }
.way li svg { flex: none; color: var(--text-muted); transform: translateY(2px); }
.way-go {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    box-shadow: var(--neo-btn);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
}
.way-go:hover, .way-go:focus-visible { border-color: var(--border-hover); outline: none; }
.way-go:active { box-shadow: var(--neo-pressed); }
.way-main .way-go { background: var(--brand-orange); border-color: transparent; color: #1a1a1a; }

.search-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

#searchInput {
    width: 100%;
    height: calc(46px + 1.2rem);
    padding: 0 1.75rem;
    padding-right: 7.5rem;
    font-size: 1.2rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: none;
    border-radius: 20px;
    outline: none;
    transition: box-shadow 0.25s ease;
    box-shadow: var(--neo-inset);
}

#searchInput:focus {
    box-shadow: inset 0 0 14px var(--neo-dark), 0 0 0 2px rgba(var(--brand-orange-rgb), 0.25);
}

#searchInput::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.clear-search-btn {
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
}

.clear-search-btn:hover {
    background: rgba(255, 80, 80, 0.15);
    color: #ff6060;
    border-color: rgba(255, 80, 80, 0.3);
}

#searchBtn {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    background: var(--brand-orange);
    color: #111111;
    border: none;
    border-radius: 14px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    box-shadow: 0 0 10px var(--neo-dark), 0 0 16px var(--brand-orange-glow);
}

#searchBtn:hover {
    background: #ff8c3a;
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 0 14px var(--neo-dark), 0 0 22px var(--brand-orange-glow);
}

#searchBtn:active {
    transform: translateY(-50%);
    box-shadow: var(--neo-pressed), 0 0 10px var(--brand-orange-glow);
}

/* Search results dropdown */
.search-results {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    width: 100%;
    background: var(--bg-primary);
    border: none;
    border-radius: 20px;
    box-shadow: var(--neo-float);
    max-height: 380px;
    overflow-y: auto;
    list-style: none;
    z-index: 10;
}

.search-results::-webkit-scrollbar {
    width: 8px;
}

.search-results::-webkit-scrollbar-track {
    background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.search-result-item {
    padding: 1.15rem 1.75rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(var(--brand-orange-rgb), 0.08);
}

.result-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.result-code {
    font-family: 'Space Mono', monospace;
    color: var(--brand-orange);
    font-weight: 600;
    background: rgba(var(--brand-orange-rgb), 0.12);
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px solid rgba(var(--brand-orange-rgb), 0.2);
}

.result-chapter {
    font-size: 0.78rem;
    color: var(--brand-cyan);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 500;
    margin-left: auto;
    white-space: nowrap;
}

.result-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}

.no-results {
    padding: 1.75rem;
    text-align: center;
    color: var(--text-muted);
}

/* Error message */
.error-message {
    text-align: center;
    color: var(--error);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 1.2rem;
    border-radius: 16px;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

/* Typed value that failed validation (not saved until fixed) */
.grid-cell-input.invalid,
.rate-input.invalid {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 1px var(--error);
}

/* Persistent data-load warning above the search box */
.data-warning { margin-bottom: 1.5rem; }

/* Toast notification */
.toast-notification {
    position: fixed;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--bg-deep);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 0.65rem 1.4rem;
    border-radius: 12px;
    font-size: 0.88rem;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.toast-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.hidden {
    display: none !important;
}