/* Base styles. */
@layer pulse {
    a, a:visited {
        color: var(--color-plus-2);
    }
    a:hover {
        color: var(--color-plus-3);
    }

    header a, footer a {
        color: var(--color-minus-1);
    }

    header a:hover, footer a:hover {
        color: var(--color-plus-3);
    }

    main {
        padding: calc(var(--spacing) * 2);
    }

    #assume_user_notice {
        background-color: var(--color-baseline);
        color: firebrick;
        padding: 0 calc(var(--spacing) * 5);
        display: flex;
        gap: calc(var(--spacing) * 4);
        align-items: center;
    }

    #assume_user_notice em { font-style: normal; font-weight: bold; }

    #assume_user_notice button {
        background-color: #cdcdcd;
        color: firebrick;
        font-weight: bold;
        border-color: black;
        margin: calc(var(--spacing) * 1);
    }

    h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); }
    h1 { font-size: 200%; margin-top: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4); }
    h2 { font-size: 175%; margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);  }
    h3 { font-size: 150%; margin-top: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);  }
    h4 { font-size: 125%; margin-top: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);  }
    h5 { font-size: 100%; margin-top: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 0.75);  }
    h6 { font-size: 90%; margin-top: calc(var(--spacing) * 0.55); margin-bottom: calc(var(--spacing) * 0.55);  }

    /* Form elements */
    input, select {
        border: 2px solid var(--color-baseline);
        padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
        background-color: var(--layout-baseline);
    }
    button, input[type=submit] {
        border: 2px solid var(--color-baseline);
        border-radius: calc(var(--spacing) * 1.5);
        padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
        cursor: pointer;
        font-weight: bold;
    }
    input[disabled] {
        color: var(--color-minus-2);
        border-color: var(--color-minus-2) !important;
    }
    button:hover, input[type=submit]:hover {
        background-color: var(--layout-plus-3);
        transition-duration: 0.25;
    }
    form div { margin: var(--spacing); }
}

body { background-color: var(--layout-baseline); color: var(--color-baseline); }
figcaption { display: none; }

/* Page header & footer */
header, footer {
    background-color: #00000088;
    border-bottom: 1px solid #FFFFFF66;
    display: flex;
    height: calc(var(--spacing) * 16);
    justify-content: center;
}

header h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
    @media (width > 640px) {
        font-size: var(--text-5xl);
    }
}

header .fixed-size, footer .fixed-size {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 0 calc(var(--spacing) * 4);
    width: 80rem;
}

nav, .nav {
    align-items: center;
    display: flex;
    gap: calc(var(--spacing) * 3);
    height: 100%;
}

nav.middle {
    font-size: var(--text-xl);
    justify-content: space-evenly;
    gap: calc(var(--spacing) * 16);
    @media (max-width: 640px) {
        display: none;
    }
}

nav.middle a, nav.middle a:visited {
    color: var(--color-plus-2);
}

nav.middle a:hover {
    color: var(--color-plus-3);
}

footer {
    color: var(--color-minus-2);
}

/* end page header & footer */

/* Error pages */
#error_page {
    display: flex;
    margin: 0px auto;
    min-height: calc(100vh - (var(--spacing) * 32));
    max-width: 80rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* end Error pages */

/* Index layout */
div.teaser {
    align-content: center;
}

.teaser section {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0 auto;
    max-width: 80rem;
    padding: calc(var(--spacing) * 4);
    position: relative;
    text-align: center;
}

.teaser h2 {
    font-size: var(--text-3xl);
    line-height: 1;
    @media (min-width: 640px) {
        font-size: var(--text-5xl);
    }
}

.teaser h2 p:last-child {
    color: var(--color-plus-2);
}

.teaser h3 {
    line-height: 1;
}

.teaser ul {
    margin-top: calc(var(--spacing) * 12);
}

div.imgbox {
    background-color: #000000;
    border-radius: calc(var(--spacing) * 6);
    display: flex;
    padding: calc(var(--spacing) * 6);
}

#focus, #optimize {
    gap: calc(var(--spacing) * 6);
}

#focus img.hero {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
    border-radius: 1.5rem;

    @media (width > 640px) {
        width: calc(var(--spacing) * 96);
        height: calc(var(--spacing) * 96);
        border-radius: 1.5rem;
    }
}

#optimize {
    flex-direction: column;
}

#optimize li {
    align-items: center;
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    margin: calc(var(--spacing) * 8) 0;
}

#optimize li img {
    height: calc(var(--spacing) * 18);
    width: calc(var(--spacing) * 18);
    border-radius: 1.5rem;
}

#optimize li p {
    color: var(--color-minus-1);
}

#optimize ul {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media (width >= 48rem) {
        flex-direction: row;
    }
}

.buttons {
    align-items: center;
    display: flex;
    gap: calc(var(--spacing) * 3);
    justify-content: center;
}

#connect {
    display: flex;
    gap: calc(var(--spacing) * 6);
}

.card.testimonial .person {
    background-color: #00000000;
}
/* end Index layout */

/* auth layout */
#auth h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-bold);
    margin: calc(var(--spacing) * 6) 0;
    color: var(--color-plus-3);
}

#auth h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    margin: calc(var(--spacing) * 4) 0;
}

section#auth {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0 auto;
    max-width: 80rem;
    padding: calc(var(--spacing) * 4);
    position: relative;
    text-align: center;
}

section#auth form {
    background-color: var(--layout-minus-1);
    color: var(--color-baseline);
    margin: calc(var(--spacing) * 4) auto calc(var(--spacing) * 8) auto;
    padding: calc(var(--spacing) * 12) calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 2);
    text-align: left;
    max-width: calc(var(--spacing) * 132);
}

section#auth form div.field {
    display: flex;
    flex-direction: column;
    margin: calc(var(--spacing) * 6) 0;
}

#auth div.label {
    font-size: 1rem;
    margin: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
}

#auth button {
    background-color: #000;
    margin-top: calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 4);
}

#auth button:hover {
    background-color: #FFF3;
}

#auth .wrapper {
    min-width: calc(var(--spacing) * 140);

    @media (width < 640px) {
        min-width: 1px;
        width: 100%;
    }
}

div.help_text ul {
    background-color: var(--layout-minus-2);
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 2);
    font-weight: 600;
    color: var(--color-minus-1);
}

section#auth div.field:has(div.label):has(label[for="id_remember"]) {
    flex-direction: row;
    gap: calc(var(--spacing) * 3);
}

div.has-help-text {
    align-items: baseline;
    display: flex;
    gap: calc(var(--spacing) * 2);
}
div.has-help-text img {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
}

.providers {
    display: flex;
    gap: calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 12) calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 2);
}

.providers li {
    display: flex;
    flex: 1 1 calc(var(--spacing) * 42);
}

.providers li a {
    display: flex;
    flex: 1 1 0px;
    justify-content: center;
}

/* end auth layout */

/* profile layout */
section#setup_step {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: calc(var(--spacing) * 150);
    min-height: calc(100vh - (var(--spacing) * 16));
    padding: calc(var(--spacing) * 4);
    text-align: left;
}

#setup_step h2 {
    color: var(--color-plus-3);
    font-size: var(--text-2xl);
    margin: 0.75rem;
    text-align: center;
    line-height: 1;

    @media (width >= 48rem) {
        font-size: var(--text-5xl);
    }
}

#setup_step form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#setup_step table {
    min-width: calc(var(--spacing) * 64);
    width: fit-content;
}

#setup_step .provider_select img {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
}

table.provider_select {
    border: 1px solid var(--layout-plus-3);
    border-bottom: 0px solid;
    background-color: var(--layout-baseline);
    margin: 0;
}

.provider_select label {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
}

.provider_select tr {
    border-bottom: 1px solid var(--layout-plus-3);
}

.provider_select tr:hover {
    background-color: var(--layout-plus-2);
    scale: 102.5% 100%;
}

.provider_select td {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
}

.provider_select td:nth-child(2) {
    padding-bottom: calc(var(--spacing) * 3);
}

.provider_select td:last-child {
    padding-bottom: 0;
}

#setup_step p {
    margin: calc(var(--spacing) * 2) 0;
    align-self: flex-start;
}

.wizard.buttons {
    display: flex;
    justify-content: space-between;
    margin: calc(var(--spacing) * 4) 0 0 0;
    padding: 0;
    width: 100%;
}

#setup_step input[type=checkbox] {
    width: var(--text-xl);
    height: var(--text-xl);
}


main#profile, section#profile, section#connections {
    margin: 0 auto;
    max-width: 80rem;
    min-height: 100vh;
    padding: calc(var(--spacing) * 4);
}

.profile_options {
    display: flex;
    justify-content: end;
}

.profile_options form {
    display: flex;
    gap: calc(var(--spacing) * 3.5);
    margin-bottom: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 2);
}

.profile_options select {
    background-color: var(--layout-minus-2);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2.5);
    font-size: calc(var(--spacing) * 4.5);
    border: 2px solid var(--layout-plus-2);
}

section.totals {
    display: flex;
    gap: calc(var(--spacing) * 2.5);
    flex-direction: row;
    @media (max-width: 640px) {
        flex-direction: column;
    }
}

.totals .stat-card {
    flex: 1;
    min-height: 10rem;
    min-width: 0;
}

section.totals h2, .engagement_stats h3, section.totals h3 {
    font-size: var(--text-base);
    margin-bottom: calc(var(--spacing) * 2);
}

span.delta {
    font-weight: var(--font-weight-bold);
    margin-left: calc(var(--spacing) * 4);
}

.delta.positive {
    color: green;
}

.delta.negative {
    color: firebrick;
}

.engagement_stats .wrapper {
    display: flex;
    gap: calc(var(--spacing) * 3);
    flex-direction: row;
    @media (max-width: 640px) {
        flex-direction: column;
    }
}

.engagement_stats .stat-card {
    flex: 1;
    height: 20rem;
    min-width: 0;
    background-color: var(--layout-minus-3);
}

.engagement_stats h2 {
    margin: calc(var(--spacing) * 3) 0;
    padding: var(--spacing) calc(var(--spacing) * 3);
    background-color: var(--layout-plus-1);
    border: 1px solid var(--layout-plus-2);
    box-shadow: 0 5px 8px 1px var(--layout-minus-3);
}

.engagement_stats .stat-card h3 {
    border-bottom: 1px solid var(--layout-plus-2);
}

.engagement_stats .uplot, section.totals .uplot {
    display: flex;
    flex-direction: column;
}

.engagement_stats .u-legend, section.totals .u-legend {
    order: -1;
}

/* uPlot: Remove the time-series value from the legend. */
.engagement_stats .u-series:first-child, section.totals .u-series:first-child {
    display: none;
}

.stat-card {
    background-color: #080808;
    padding: calc(var(--spacing) * 2);
}

span.kpi {
    font-size: var(--text-4xl);
}


.section_nav {
    margin-bottom: calc(var(--spacing) * 4);
}

.card.social {
    width: fit-content;
    background: #00000055;
}

.social div.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    border: 2px solid var(--color-taupe-gray);
    border-radius: var(--radius-lg);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);

    background-color: var(--layout-plus-1);
    padding: calc(var(--spacing) * 2);
}

.social div.body {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 16);
    padding: calc(var(--spacing) * 2);

    border: 2px solid var(--color-taupe-gray);
    border-radius: var(--radius-lg);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.kpi {
    min-width: 250px;
}

.kpi .numeric {
    font-size: calc(var(--spacing) * 24);
}

.kpi .positive {
    color: green;
}

.kpi .negative {
    color: red;
}

.kpi .graph {
    width: 300px;
    height: 150px;
    border: 1px solid var(--color-antiflash-white);
    background: #000;
}

.social div.body ul {
    display: flex;
    gap: calc(var(--spacing) * 2);
}

.social div.body li {
    min-height: calc(var(--spacing) * 16);
    min-width: calc(var(--spacing) * 32);
}

.social div.body table {
    margin: calc(var(--spacing) * 6);
}
.social div.body tr.odd {
    background-color: var(--layout-plus-1);
}

.social div.body tr.even {
    background-color: var(--layout-minus-1);
}

.social div.body td {
    padding: calc(var(--spacing) * 2);
}

#connections td form {
    margin: calc(var(--spacing) * 2);
}

#connections td {
    padding: 0 calc(var(--spacing) * 2);
}

#connections tr.odd {
    background-color: var(--layout-plus-1);
}

#connections tr.even {
    background-color: var(--layout-minus-1);
}

#facebook_account_confirm {
    width: 25rem;
    margin: calc(var(--spacing) * 8) auto;
}

#facebook_account_confirm td {
    border: 2px solid var(--layout-plus-1);
    padding: calc(var(--spacing) * 2);
    align-items: center;
}

tr.even {
    background-color: var(--layout-minus-1);
}

/* end profile layout */


/* elements */
.errorlist {
    color: var(--color-plus-3);
}

.fancy_btn {
    border-radius: calc(infinity * 1px);
    border: 2px solid;
    padding: calc(var(--spacing) * 2);
    position: relative;
}

.fancy_btn[disabled="disabled"] {
    opacity: 25%;
}

.fancy_btn span {
    font-weight: var(--font-weight-bold);
    margin: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    position: relative;
    z-index: 10;
}

.fancy_btn div {
    border-radius: calc(infinity * 1px);
    inset: 0;
    position: absolute;
}

.fancy_btn.recommended {
    border: 0px solid;
}

.fancy_btn {
    color: inherit;
}

.icon {
    width: calc(var(--spacing) * 10);
    @media (width >= 48rem) {
        width: calc(var(--spacing) * 12);
    }
}

.subtitle {
    color: var(--color-minus-2);
    margin: calc(var(--spacing) * 6);
}

section.even {
    background-color: var(--layout-minus-1);
}

section.odd {
    background-color: var(--layout-plus-1);
}

.card {
    background-color: #00000055;
    border: 1px solid #FFFFFF33;
    border-radius: .75rem;
    padding: calc(var(--spacing) * 6);
    text-align: left;
}

.card.testimonial {
    width: calc(var(--spacing) * 96);
    height: calc(var(--spacing) * 52);
    flex-direction: column;
    display: flex;
    justify-content: space-between;
}

.card.person {
    border-radius: 0;
    border: 0px solid;
    display: flex;
    gap: calc(var(--spacing) * 6);
    padding: 0;
    width: calc(var(--spacing) * 64);
}


.card.person img {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
}

.person div.name_and_title {
    display: flex;
    flex-direction: column;
}

.person .title {
    color: var(--color-minus-2);
}

/* end elements */

/* messages area */
ul.messages {
    position: absolute;
    display: flex;
    width: 100%;
    margin-top: -0.5rem;
    justify-content: center;
    font-weight: bold;
    opacity: 0;
    animation: fadeout 5s;
}

@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

ul.messages li {
    width: fit-content;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    background-color: #FFF9;
    color: #000;
}

ul.messages .info { color: black; }
ul.messages .debug { color: darkblue; }
ul.messages .success { color: green; }
ul.messages .warning { color: firebrick; }
ul.messages .error { color: red; text-decoration: underline; }
/* end messages area */

/* provider branding */
a.facebook, button.facebook, #auth button.facebook {
    background-color: var(--facebook-blue);
    border: 0px solid;
    color: white;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
}

/* end provider branding */