:root {
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 100%;
    background-color: #fdfdfd;
    color: #242424;
}

#app {
    max-width: 100ch;
    margin: auto;
    padding: 1rem;
}

.project-preview {
    display: grid;
    grid-template-areas: "id createdAt timeline"
        "versions versions timeline";
    grid-template-columns: 1fr 1fr auto;
}

.project-id {
    grid-area: id;
}

.project-created-at {
    grid-area: createdAt;
}

/* .project-timeline {
    grid-area: timeline;
    list-style: none;
    position: sticky;
    top: 1em;
    height: fit-content;
} */

.project-versions {
    grid-area: versions;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.project-version-preview {
    border-top: 0.125em solid #299fff;
    border-left: 0.125em solid #299fff;
    padding-top: 0.5em;
    padding-left: 0.5em;
    display: grid;
    grid-template-areas: "delete delete"
        "id version"
        "stage createdAt"
        "name title"
        "subtitle shortDesc"
        "longDesc longDesc"
        "links links"
        "factSheet factSheet"
        "gallery gallery";
}

.project-version-preview .delete-btn {
    grid-area: delete;
    font-size: 0.75em;
}

.project-version-id {
    grid-area: id;
}

.project-version-created-at {
    grid-area: createdAt;
}

.project-version-name {
    grid-area: name;
}

.project-version-title {
    grid-area: title;
}

.projcet-version-subtitle {
    grid-area: subtitle;
}

.project-version-short-description {
    grid-area: shortDesc;
}

.project-version-long-description {
    grid-area: longDesc;
}

.project-version-links,
.project-version-fact-sheet,
.project-version-gallery {
    margin: 0.5em 1em;
}

.project-version-links {
    grid-area: links;
}

.project-version-fact-sheet {
    grid-area: factSheet;
}

.project-version-gallery {
    grid-area: gallery;
}

.project-version-version {
    grid-area: version;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.project-version-stage {
    grid-area: stage;
}

/* .project-version-timeline-item {
    margin-bottom: 1em;
}

.project-version-timeline-item h3 {
    margin: 0;
    font-size: 1em;
}

.project-version-timeline-item p {
    margin: 0;
    font-size: 0.875em;
    opacity: 0.75;
} */

.fact-preview,
.gallery-item-preview,
.link-preview {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.fact-preview>*,
.gallery-item-preview>*,
.link-preview>* {
    flex: 1 1 auto;
}

.add-btn {
    width: 100%;
    background: none;
    border: 0.2em dashed #299fff;
    border-radius: 0.5em;
    color: #299fff;
    cursor: pointer;
    padding: 0.5em;
    margin: 0.5em 0;
    font-weight: bold;
    transition: background-color 0.25s, color 0.25s;
}

.add-btn:hover {
    background-color: #299fff;
    color: white;
}

.add-btn:active {
    background-color: #054aaa;
    border: 0.2em solid #054aaa;
}

.delete-btn {
    background: none;
    border: 0.125em solid #e60000;
    border-radius: 0.5em;
    color: #e60000;
    cursor: pointer;
    font-weight: bold;
    padding: 0.2em 0.5em;
    margin: 0.2em;
    font-size: 1.25em;
    transition: background-color 0.25s;
    flex-grow: 0;
}

.delete-btn:hover {
    background-color: #e60000;
    color: white;
}

.delete-btn:active {
    background-color: #a30000;
    border: 0.125em solid #a30000;
}

.field {
    height: fit-content;
}

textarea {
    resize: vertical;
}

.toolbar {
    display: flex;
    justify-content: center;
    background-color: #299fff;
    flex-wrap: wrap;
}

.tool-btn {
    background: none;
    color: white;
    font-weight: bold;
    padding: 1em;
    border: none;
    font-size: 1.125em;
}

.tool-btn:hover {
    background-color: #054aaa;
    cursor: pointer;
}

.dialog {
    display: grid;
    gap: 1em;
    grid-template-areas: "close"
        "content";
    grid-template-rows: auto 1fr;
    padding: 1em;
    border: none;
    max-width: 80vw;
}

.dialog .close-btn {
    grid-area: close;
    justify-self: end;
    background: none;
    border: 0.125em solid #e60000;
    border-radius: 0.5em;
    color: #e60000;
    cursor: pointer;
    font-weight: bold;
    padding: 0.2em 0.5em;
    margin: 0.2em;
    font-size: 1em;
    transition: background-color 0.25s;
}

.import-btn {
    background: none;
    border: 0.2em solid #299fff;
    border-radius: 0.5em;
    color: #299fff;
    cursor: pointer;
    padding: 0.5em 1em;
    font-weight: bold;
    transition: background-color 0.25s, color 0.25s;
}

.import-btn:hover {
    background-color: #299fff;
    color: white;
}

.import-btn:active {
    background-color: #054aaa;
    border: 0.2em solid #054aaa;
}

.json-output-container {
    max-width: 90vw;
    height: 20em;
    overflow: auto;
}

.anchor {
    color: #299fff;
    text-decoration: none;
}

.anchor:hover {
    text-decoration: underline;
}

@media screen and (max-width: 900px) {
    .project-preview {
        grid-template-areas: "id" "createdAt" "timeline" "versions";
        grid-template-columns: 1fr;
    }

    .project-version-preview {
        grid-template-areas: "delete" "id" "version" "stage" "createdAt" "name" "title" "subtitle" "shortDesc" "longDesc" "links" "factSheet" "gallery";
    }
    
    .project-timeline {
        position: static;
        height: auto;
    }
}

.kw-footer{box-sizing: border-box;background-color:var(--bg-90);color:var(--text-10);padding:.5em;display:grid;grid-template-areas:"strapline strapline strapline" "info links links" "notices notices notices";grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr auto;grid-gap:1em;width:100%;padding-left:max(0.75rem, calc((100% - 80ch) / 2));padding-right:max(0.75rem, calc((100% - 80ch) / 2));font-size:.9em}.kw-footer .strapline{grid-area:strapline;text-align:center}.kw-footer .info{grid-area:info}.kw-footer .links{grid-area:links;display:flex;flex-direction:row;flex-wrap:wrap;gap:1em;height:fit-content}.kw-footer .links a{color:var(--text-10);text-decoration:none}.kw-footer .links a:hover{color:var(--text-20);text-decoration:underline}.kw-footer .notices{grid-area:notices}