/* Theme */
:root {
    color-scheme: light;

    --background: white;
    --surface: white;
    --foreground: black;
    --muted: grey;
    --faint: grey;
    --accent: red;
    --border: grey;
    --line-height: 1.4;
    --public-row-height: 1.4em;
    --secondary-row-height: 4.2em;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --background: black;
        --surface: black;
        --foreground: white;
        --muted: grey;
        --faint: grey;
        --accent: red;
        --border: grey;
    }
}


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

html {
    min-height: 100%;
}

body {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.5rem;

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;
    padding: 0.75rem 1rem 0;

    overflow-x: hidden;

    background: var(--background);
    color: var(--foreground);

    font-family:
        monospace,
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas;
    font-size: 0.8125rem;
    line-height: var(--line-height);
}

button,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    border: 0 !important;

    white-space: nowrap !important;
}


/* Application shell */
main {
    display: grid;

    width: min(100%, 93.75rem);
    min-width: 0;
    margin: 0 auto;
}

.introduction {
    display: grid;
    place-self: center;
    justify-items: center;
    gap: 0.75rem;

    width: min(100%, 60ch);

    text-align: center;
}

.introduction > p {
    margin: 0;

    color: var(--muted);

    line-height: 1.55;
}

.dashboard {
    align-self: start;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;

    min-width: 0;
}

.panel {
    min-width: 0;
    padding: 0.6rem;

    overflow: hidden;

    border: 1px solid var(--border);

    background: var(--surface);
}

.panel-title {
    margin: 0 0 0.35rem;
    padding: 0 0 0.4rem;

    border-bottom: 1px solid var(--border);

    color: var(--faint);

    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: var(--line-height);
    text-align: center;
    text-transform: uppercase;
}


/* Status */
.status {
    margin: 0;

    color: var(--muted);

    overflow-wrap: anywhere;
}

.status-error {
    color: var(--accent);
}

.refresh-status {
    grid-column: 1 / -1;

    padding: 0.35rem 0.5rem;

    border: 1px solid var(--border);

    background: var(--surface);

    text-align: center;
}


/* Submission */
.submission {
    grid-column: 1 / -1;

    display: grid;
    gap: 0.4rem;
}

.submission .panel-title {
    text-align: left;
}

.submission-form {
    display: grid;
    gap: 0.35rem;

    min-width: 0;
}

.submission-form textarea {
    width: 100%;
    max-height: 4rem;

    margin: 0;
    padding: 0.5rem 0.6rem;

    resize: vertical;

    border: 1px solid var(--border);
    border-radius: 0;

    background: var(--background);
    color: var(--accent);

    line-height: var(--line-height);
}

.submission-form textarea::placeholder {
    color: var(--faint);
    opacity: 1;
}

.submission-form textarea:disabled {
    opacity: 0.55;
}

.submission-note {
    margin: 0;

    color: var(--muted);

    font-size: 0.75rem;
}

.submission-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;

    min-width: 0;
}

.submission-counter {
    color: var(--faint);

    font-size: 0.75rem;
}

/* Datasets */
.dataset-primary {
    grid-column: 1 / -1;
}

.dataset-primary .panel-title {
    color: var(--foreground);
}

.dataset-rows {
    margin: 0;
    padding: 0;

    list-style: none;
}

.dataset-row {
    min-width: 0;

    margin: 0;
    padding: 0.3rem 0.4rem;

    border-top: 1px solid var(--border);
}

.dataset-row:first-child {
    border-top: 0;
}

.dataset-row p {
    margin: 0;

    line-height: var(--line-height);

    overflow-wrap: anywhere;
}

.dataset-primary .dataset-row p {
    height: var(--public-row-height);

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.dataset:not(.dataset-primary) .dataset-row p {
    display: -webkit-box;

    height: var(--secondary-row-height);

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.dataset-empty {
    color: var(--faint);

    font-style: italic;
}

.author-user {
    color: var(--accent);
}

.author-other {
    color: var(--muted);
}


/* Controls */
button {
    display: inline-grid;
    place-items: center;

    width: fit-content;
    min-height: 2rem;

    margin: 0;
    padding: 0.35rem 0.7rem;

    border: 1px solid var(--accent);
    border-radius: 0;

    background: var(--surface);
    color: var(--accent);

    cursor: pointer;
}

#view-button {
    min-width: 6rem;
    min-height: 2.75rem;

    background: var(--background);

    font-weight: 600;
    letter-spacing: 0.04em;
}

button:hover:not(:disabled) {
    border-color: var(--foreground);

    color: var(--foreground);
}

button:active:not(:disabled) {
    transform: translateY(1px);
}

button:disabled {
    border-color: var(--faint);

    color: var(--faint);

    cursor: default;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--foreground);
}

a:focus-visible,
button:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
}


/* Footer */
footer {
    width: min(100%, 93.75rem);
    margin: 0 auto;
    padding: 0.4rem 0 0.75rem;

    border-top: 1px solid var(--border);

    color: var(--muted);

    text-align: center;
}

footer a {
    display: inline-grid;
    place-items: center;

    min-width: 2rem;
    min-height: 2rem;
}


/* Responsive */
@media (width <= 48rem) {
    .dashboard {
        grid-template-columns: minmax(0, 1fr);
    }

    .submission,
    .dataset-primary,
    .refresh-status {
        grid-column: 1;
    }
}

@media (width <= 30rem) {
    body {
        padding-inline: 0.625rem;
    }

    .panel {
        padding: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    button:active:not(:disabled) {
        transform: none;
    }
}