:root {
    /* brand identity colors */
    --gray: #888;
    --dark-gray: #333;
    --bronze: #753;
    --light-bronze: #cb6;
    --brand-color-1: var(--gray);
    --brand-color-2: var(--bronze);
    --brand-color-3: var(--dark-gray);
    --brand-color-4: var(--light-bronze);
    /* colors for UI */
    --text-color: #000;
    --text-color-secondary: #555;
    --text-color-avatar: #fff;
    --border-color: #aaa;
    --background-color: #eee;
    --background-color-secondary: #fff;
    --background-color-avatar: #000;
    --button-text-color: #fff;
    --button-text-color-disabled: #eee;
    --button-text-color-unselected: #000;
    --button-text-color-cancel: #000;
    --button-background: var(--brand-color-3);
    --button-background-hover: #000;
    --button-background-disabled: #888;
    --button-background-unselected: #ddd;
    --button-background-cancel: #ddd;
    --comment-border-radius: 10px;
    --background-comment-body: #eee;
    --border-radius: 10px;
    --input-border-radius: 10px;
    --button-shadow: 0px 0px 10px #888;
    --success-text-color: #080;
    --success-border-color: #080;
    --success-background-color: #8f8;
    --warning-text-color: #840;
    --warning-border-color: #840;
    --warning-background-color: #fd0;
    --error-text-color: #800;
    --error-border-color: #800;
    --error-background-color: #f88;
    --info-text-color: #222;
    --info-border-color: #888;
    --info-background-color: #ddd;
    --danger-color: #fff;
    --danger-background-color: #f00;
    --danger-disabled-background-color: #f88;
    --info-block-text-color: var(--text-color);
    --info-block-border-color: #378;
    --info-block-background-color: #def;
    --toggle-width: 40px;
    --toggle-height: 20px;
    --toggle-border: 4px;
    --toggle-slider-size: calc(var(--toggle-height) - 2*var(--toggle-border));
    --toggle-transition: .4s;
    --radio-size: 20px;
    --radio-border: 4px;
    --radio-dot-size: calc(var(--radio-size) - 2*var(--radio-border));
    --input-enabled: #47f;
    --input-background: #aaa;
    --input-background-hover: #888;
    --nav-highlight: var(--brand-color-2);
    --link-hover-color: #22f;
    --profile-summary-field-text-color: var(--text-color);
    --profile-summary-field-background-color: var(--text-color);
    --profile-summary-field-text-color-admin: var(--text-color);
    --profile-summary-field-background-color-admin: var(--brand-color-4);
    --profile-summary-field-text-color-private: #fff;
    --profile-summary-field-background-color-private: var(--brand-color-3);
    --profile-summary-field-text-color-public: #fff;
    --profile-summary-field-background-color-public: var(--success-text-color);
}

body {
    margin: 0px;
    padding: 0px;
    color: var(--text-color);
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 11pt;
    background-color: var(--background-color);
}

#logo-banner {
    padding: 10px;
    margin: 10px 20px;
    display: flex;
    flex-direction: row;

    .logo {
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }

    .logo-wordmark {
        max-height: 50px;
    }

    h1, h2 {
        margin: 0px;
        font-size: 20pt;

        a {
            color: var(--text-color);
        }
    }

    .top-nav {
        margin: 18px 0 0 20px;
        flex-grow: 1;

        a {
            margin-right: 10px;
            padding-bottom: 4px;

            &:hover, &.hover {
                border-bottom: 2px solid var(--nav-highlight);
            }
        }
    }

    .login-bar {
        margin-top: 18px;
    }
}

#install-cta-banner {
    text-align: center;
}

footer {
    text-align: center;
    margin: 20px 0;

    a {
        display: inline-block;
    }

    a + a::before {
        content: " | ";
    }
}

.message-banner {
    margin: 10px 20px;
}

.content-header {
    text-align: center;

    h2 {
        font-size: 24px;
        margin: 0;
    }
}

.top-level-section {
    background-color: var(--background-color-secondary);
    border-radius: var(--border-radius);
    padding: 10px;
    margin: 10px 20px;

    .username {
        font-weight: bold;
    }

    .trophy-shelf {
        font-size: 10px;
    }

    .site {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }
}

.article-pod {
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    box-shadow: var(--button-shadow);
    height: 90px;
    max-width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    text-align: left;
    display: flex;
    flex-direction: row;

    .image-container {
        width: 120px;
        height: 100%;
        flex: none;

        img {
            border-radius: var(--border-radius);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .image-placeholder {
        display: none;
    }

    &.no-image {
        .image-container {
            display: none;
        }

        .image-placeholder {
            color: var(--text-color-secondary);
            width: 120px;
            height: 100%;
            display: block;
            text-align: center;
            align-content: center;
            flex: none;
            font-size: 60px;
        }
    }

    .summary {
        margin-left: 10px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .domain {
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;

            .favicon {
                height: 1em;
                padding-right: 5px;
            }
        }

        [data-role="url"] {
            color: var(--text-color);
            font-size: 18px;
            font-weight: bold;
            text-decoration: underline;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 4px;

            &:hover {
                color: var(--link-hover-color);
            }
        }

        .comment-summary {
            color: var(--text-color-secondary);
        }
    }
}

.avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: var(--text-color-avatar);
    background-color: var(--background-color-avatar);
    display: grid;
    place-items: center;
    margin-right: 10px;
    flex: none;
}

#top-pages-area {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
}

#top-comments-area {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
}

.comment {
    padding: 5px 0px;
    border-bottom: 1px solid var(--border-color);

    .username {
        color: var(--text-color);
        font-weight: bold;

        &:hover {
            text-decoration: underline;
        }
    }

    .trophy-shelf {
        font-size: 10px;
        display: none;
    }

    .body {
        background-color: var(--background-comment-body);
        border-radius: var(--comment-border-radius);
        padding: 5px 10px;
        margin: 5px 0px;
    }

    .reply-control-container {
        color: var(--text-color-secondary);
    }

    .comments {
        .label {
            margin: 10px 0;
            font-weight: bold;
        }
    }
}

.reaction-container {
    margin-right: 20px;

    .reaction-summary {
        font-size: smaller;
    }
}

.qa-section {
    margin: 15px 0;

    .question {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .answer {
        display: flex;

        & > * {
            padding: 10px;
        }

        .answer-icon {
            color: var(--brand-color-2);
            font-size: 24px;
            flex: none;
        }

        .answer-text {
            background-color: var(--background-color);
            border-radius: var(--border-radius);
            flex-grow: 1;
        }
    }
}

a {
    color: var(--text-color-secondary);
    cursor: pointer;
    text-decoration: none;

    &:hover {
        color: var(--text-color);
    }
}

.control {
    color: var(--text-color-secondary);
    cursor: pointer;
    margin-right: 10px;
    text-decoration: none;

    &:hover {
        color: var(--text-color);
    }

    &.login-link {
        margin: 0px;
        text-decoration: underline;
    }
}

.status {
    padding: 5px;
    border-radius: var(--input-border-radius);
    text-align: center;

    &.success {
        border: 2px solid var(--success-border-color);
        background-color: var(--success-background-color);
        color: var(--success-text-color);
    }

    &.warning {
        border: 2px solid var(--warning-border-color);
        background-color: var(--warning-background-color);
        color: var(--warning-text-color);
    }

    &.error {
        border: 2px solid var(--error-border-color);
        background-color: var(--error-background-color);
        color: var(--error-text-color);
    }

    &.info {
        border: 2px solid var(--info-border-color);
        background-color: var(--info-background-color);
        color: var(--info-text-color);
    }
}

.agreements-warning-banner {
    margin: 10px 20px;
    padding: 5px;
    border-radius: var(--input-border-radius);
    text-align: center;
    border: 2px solid var(--error-border-color);
    background-color: var(--error-background-color);
    color: var(--error-text-color);
    
    a {
        font-weight: bold;
    }
}

.cta-button-link-container {
    padding: 10px;

    .cta-button-link {
        padding: 5px;
        border-radius: var(--input-border-radius);
        text-align: center;
        border: 2px solid var(--success-border-color);
        background-color: var(--success-background-color);
        color: var(--text-color);

        &:hover {
            box-shadow: var(--button-shadow);
        }
    }
}

input[type="text"],
input[type="password"],
input[type="email"] {
    border: 1px solid var(--border-color);
    border-radius: var(--input-border-radius);
    padding: 10px;

    &:focus {
        box-shadow: 0px 0px 10px #000;
    }

    &:disabled {
        background-color: var(--input-background-disabled);
        cursor: not-allowed;
    }
}

button {
    color: var(--button-text-color);
    background-color: var(--button-background);
    border: none;
    border-radius: var(--input-border-radius);
    padding: 10px 20px;
    
    &:disabled {
        color: var(--button-text-color-disabled);
        background-color: var(--button-background-disabled);
        cursor: not-allowed;
    }

    &:hover:not(:disabled) {
        box-shadow: var(--button-shadow);
        background-color: var(--button-background-hover);
        cursor: pointer;
    }
}

button[type="reset"] {
    color: var(--button-text-color-cancel);
    background-color: var(--button-background-cancel);
    border: none;
    border-radius: var(--input-border-radius);
    padding: 10px 20px;

    &:disabled {
        color: var(--button-text-color-disabled);
        background-color: var(--button-background-disabled);
        cursor: not-allowed;
    }

    &:hover:not(:disabled) {
        box-shadow: var(--button-shadow);
        color: var(--button-text-color);
        background-color: var(--button-background-hover);
        cursor: pointer;
    }
}

.flex-col {
    display: flex;
    flex-direction: column;

    .flex-grow {
        flex-grow: 1;
    }
}

.flex-row {
    display: flex;
    flex-direction: row;

    .flex-grow {
        flex-grow: 1;
    }
}

.hidden {
    display: none !important;
}

.agreement {
    .version {
        text-align: center;
    }

    .summary {
        text-align: center;
    }

    pre {
        white-space: pre-wrap;
        overflow-wrap: break-word;
    }
}