.projects:empty {
    display: none !important;
}

.project {
    position: relative;
    box-sizing: border-box;
    background: var(--bg-primary);
    width: 100%;
    border: 1px solid var(--border-primary);
    border-radius: .4rem;
}

.project-header {
    box-sizing: border-box;
    padding: .8rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 1ch;
    user-select: none;
    position: relative;
    overflow: hidden;
    border-radius: .4rem;
}

.project:has(.project-header:focus-visible) {
    outline: 1px solid var(--accent);
}

.project-header:focus {
    outline: none;
}

.project-document,
.project-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-document {
    cursor: pointer;
}

.project-document + .project-title {
    color: var(--text-muted);
}

.project-status {
    box-sizing: border-box;
    width: 1.8rem;
    overflow: hidden;
    text-overflow: "";
    flex-shrink: 0;
}

.project-badge {
    font-size: small;
    padding: .1rem .2rem;
    border-radius: .2rem;
    background: var(--bg-secondary);
    cursor: pointer;
}

.project-badge.done {
    color: var(--text-dark);
    background-color: var(--success);
}

.project-badge.empty {
    color: var(--text-muted);
}

.project-body {
    padding: 0 .8rem;
    overflow-y: hidden;
    transition: .2s ease;
    background: var(--bg-secondary);
    border-radius: .4rem;
    min-height: 0;
}

.project-checklist {
    line-height: 1.6;
    margin: .8rem 0;
}

.project-checklist-item {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}

.project-checklist-item input[type="checkbox"] {
    width: fit-content;
    margin-right: .2rem;
}

.project-checklist-item-checked label {
    text-decoration: line-through;
    opacity: .5;
}

.project-title-input,
.project-checklist-item-input {
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    color: inherit;
    border-radius: 0;
}

.project-title-input {
    flex-shrink: 1;
    width: unset;
    flex-grow: 1;
}

.project-checklist-item-input {
    font-family: "Fira Code", monospace;
}

.project-title-input:focus,
.project-checklist-item-input:focus {
    outline: none;
}

.project-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-top: .2rem;
}

.project-button {
    font-size: small;
    background: var(--bg-secondary-alt);
    color: inherit;
    border: 1px solid var(--border-secondary);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    padding: .2rem;
    border-radius: .2rem;
    transition: none;
    cursor: pointer;
    margin-top: .2rem;
}

.project-button:hover {
    background: var(--bg-secondary-hover);
}

.glimpse {
    min-height: .8rem;
}
