/* Defaults: these values only apply if you do not override them
   with a session-specific CSS */

html {
    --header-logo-image: url('/data-saturdays.png');
    --header-logo-width: 150px;
    --header-logo-height: 150px;

    --theme-black: rgb(0, 0, 0);
    --theme-white: rgb(255, 255, 255);
    --theme-color-1: rgb(0, 147, 221);
    --theme-border: rgb(50, 65, 71);

    --header-background: rgb(255, 255, 255, 0.5);

    --answer-panel: rgb(236, 236, 236);
    --answer-border: rgb(192, 192, 192);

    --border-color: rgb(0, 0, 0, 0.5);

    /* Fancy diamond-style background */
    --size: max(18vw, 18vh);
    --bg-art-1: rgba(200, 200, 200, 0.5);
    --bg-art-2: rgba(230, 230, 230, 0.7);
    --bg-art-3: rgba(180, 180, 180, 0.3);
    --bg-art-4: rgba(255, 255, 255, 0.35);
  
    .background-pattern {
        display: block;
        border-top-width: var(--size);
        border-right-width: var(--size);
        border-bottom-width: var(--size);
        border-left-width: var(--size);
        width: 0; height: 0;
        top: calc(var(--size) * 0.5);
        left: calc(var(--size) * 1);
        position: fixed;
        border-style: solid;
        border-top-color: var(--bg-art-1);
        border-right-color: var(--bg-art-2);
        border-bottom-color: var(--bg-art-3);
        border-left-color: var(--bg-art-4);
        transform: rotate(30deg) scale(3, 2.5);
        z-index: -100;
    }
      
    .background-pattern::after {
        content: "";
        border-top-width: var(--size);
        border-right-width: var(--size);
        border-bottom-width: var(--size);
        border-left-width: var(--size);
        width: 0; height: 0;
        top: calc(var(--size) * -0.75);
        left: calc(var(--size) * -1.5);
        position: fixed;
        border-style: solid;
        border-top-color: var(--bg-art-2);
        border-right-color: var(--bg-art-3);
        border-bottom-color: var(--bg-art-4);
        border-left-color: var(--bg-art-1);
        transform: rotate(230deg) scale(1, 1.75);
        z-index: -100;
    }
}


/* Page style */

    body {
        background-color: rgb(224, 224, 224);
        font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
        margin: 0;
    }

    body.sessions-page,
    body.speaker-page,
    body.admin-page {
        padding-top: 4rem;
        padding-bottom: 1rem;
        text-align: center;
    }

/* Text selection */

    ::selection {
        background: var(--theme-color-1); /* WebKit/Blink Browsers */
        color: var(--theme-white);
    }
    ::-moz-selection {
        background: var(--theme-color-1); /* Gecko Browsers */
        color: var(--theme-white);
    }

/* Header image */

    img.header-logo {
        display: block;
        margin: auto;
    }

    body.speaker-page img.header-logo {
        margin-top: -2rem;
        margin-bottom: 2rem;
    }

/* Popup status messages that appear and fade out automatically */

    .statusbar {
        background-color: rgb(255, 220, 128);
        color: rgb(0, 0, 0);
        border-style: solid;
        border-width: 1px 1px 1px 1rem;
        border-color: rgb(255, 200, 0);
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        font-size: 0.85rem;
        position: fixed;
        margin: auto;
        padding: 1rem 4rem 1rem 4rem;
        top: 0.5rem;
        z-index: 100;
        opacity: 1.0;
    }

    .statusbar.hidden {
        opacity: 0;
        transition: opacity 0.5s ease-in;
    }

    .statusbar.bad.hidden {
        opacity: 0;
        transition-duration: 5.0s;
    }

    .statusbar.good {
        background-color: rgb(192, 255, 192, 0.75);
        border-color: rgb(128, 220, 128, 0.75);
    }

    .statusbar.bad {
        background-color: rgb(255, 192, 192, 0.75);
        border-color: rgb(220, 128, 128, 0.75);
    }

/* Standard "box" for the header, a question card, the footer,
   and session cards in the overview. */

    .header, .question, .footer, .session, .fineprint, .report {
        padding: 2rem 1rem;
        max-width: 30rem;
        min-height: 2rem;
        margin: 0 auto; /* center div horizontally */
        border-style: none solid dashed solid;
        border-width: 1px;
        border-color: var(--border-color);
    }

    /* On small screens, don't bother centering the divs - instead,
       make sure they don't go all the way out to the edge */

    @media (max-width: 600px) {
        .header, .question, .footer, .session, .fineprint {
            margin: 0 1rem;
        }
    }

    .question, .session, .report {
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(0.25rem);
        border-bottom-color: rgb(200, 200, 200);
        border-bottom-width: 1px;
    }

/* Feedback form header */

    .header {
        background-color: var(--header-background);
        backdrop-filter: blur(0.5rem);
        margin-top: 1em;
        border-top-style: solid;
    }

    .header ul.speakers {
        padding-inline-start: 0;
    }

    .header ul.speakers li {
        display: block;
    }

    .header .title {
        font-size: 150%;
        font-weight: bold;
    }

/* Presenter report */

    .report-legend {
        background-color: rgba(255, 255, 255, 0.25);
        border-style: none;
    }

    .report-legend img {
        display: block;
        margin: 0.5em auto;
        width: 100%;
        border-style: none;
    }

    .report .title {
        font-weight: bold;
    }

    .report .text-response {
        border-color: transparent transparent transparent var(--answer-border);
        border-width: 2px 0 2px 8px;
        border-style: solid;
        margin-top: 4px;
        padding: 2px 0 2px 4px;
    }

    .report .text-response:hover {
        background-color: var(--answer-panel);
    }

    .report .response-count {
        font-size: 0.8em;
    }

    .report .annotations {
        padding-bottom: 1em;
    }

    .report .annotations .annotation {
        font-size: 0.8em;
    }







/* Page footer, including the "Done" button. */

    .footer {
        text-align: center;
        border-style: none;
    }

    .footer button.done {
        padding: 1rem 4rem;
    }

    /* Gray out the button when it's disabled. */

    .footer button.done:disabled,
    .footer button.done:hover,
    .footer button.done:active {
        filter: saturate(0.0);
    }

    /* A disabled "done" button gets a spinning wheel next to it,
       signifying that work is in progress. */

    .footer button.done:disabled::after {
        position: absolute;
        display: block;
        content: "";
        width: 0.75rem;
        height: 0.75rem;
        margin-left: 8rem;
        margin-top: -1.75rem;

        z-index: 100;
        animation: rotating 1.0s linear infinite;

        background-color: transparent;
        filter: saturate(1.0);

        border-style: solid;
        border-width: 1rem;
        border-color: rgb(0, 147, 221, 1.0) rgb(0, 147, 221, 0.8) rgb(0, 147, 221, 0.6) rgb(0, 147, 221, 0.4);
        border-radius: 2rem;

        outline-style: dashed;
        outline-color: rgb(0, 147, 221, 1.0);
        outline-width: 2px;
        outline-offset: 2px;
    }
    @keyframes rotating {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

/* Questions */

    .question.indented {
        position: relative;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-left-radius: 0.5rem;
        filter: drop-shadow(-0.1rem 0.25rem 0.5rem rgb(64, 64, 64, 0.25));
    }

    .question.hidden, .session.hidden {
        display: none;
    }

    .question:first-child {
        border-top-style: solid;
        border-top-color: var(--border-color);
    }

/* Text blocks in the question cards */

    .question .question-text {
        display: block;
        font-weight: bold;
        padding: 1rem 0 0.5rem 0;
    }

    .question.required .question-text::after {
        content: "*";
        color: rgb(255, 0, 0);
        margin-left: 0.25rem;
    }

    .question span {
        display: block;
        padding-bottom: 1rem;
    }

    .question .question-description {
        font-style: italic;
        padding: 0.25rem 0 0.75rem 0;
    }

/* Answers on question cards. */

    input:focus,
    select:focus {
        outline-style: solid;
        outline-color: var(--theme-color-1);
        outline-offset: 0.5rem;
    }

    input[type="radio"]:focus {
        border-radius: 1rem;
    }

    .answers {
        max-width: 30rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        row-gap: 0.5rem;
        margin-top: 1rem;
    }

    .answers .answer {
        flex-grow: 1;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-radius: inherit;
    }

    .answers.checkboxes {
        display: block;
        background-color: transparent;
        border-style: none;
        padding-bottom: 1rem;
        border-radius: 0;
    }

    .answers.checkboxes .answer {
        width: 100%;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .answers.checkboxes .answer span {
        padding: 0 0 0 0.5rem;
    }

    .answers .answer:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }

/*
    .answers .input[†ype="radio"] {
        TBD
    }

    .answers .input[†ype="checkbox"] {
        TBD
    }
*/

    .answers .answer label {
        display: flex;
    }

    .answers.checkboxes label {
        padding-left: 0.5rem;
    }

    .answers .answer label span {
        font-weight: normal;
    }

/* Help texts under the horizontal answer bar; contains one
   or more annotations from left to right */

    .annotations {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.5rem 0.5rem 0 0.5rem;
    }

    .annotations .annotation {
        flex-grow: 1;
        text-align: center;
    }

    .annotations .annotation:first-of-type {
        text-align: left;
    }

/* Add a left-arrow before the first annotation text, provided
   the answers are on a scale, i.e. the question has percentage options */

    .question.has-percentages .annotations .annotation:first-of-type::before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        margin-left: -1.25rem;
        margin-top: 0.1rem;
        border-color: transparent var(--answer-border) transparent transparent;
        border-width: 0.5rem;
        border-style: solid;
    }

    .annotations .annotation:last-of-type {
        text-align: right;
    }

/* .. and a right-arrow after the last annotation */

    .question.has-percentages .annotations .annotation:last-of-type::after {
        content: "";
        width: 0;
        height: 0;
        margin-left: 0.25rem;
        margin-top: 0.1rem;
        position: absolute;
        border-color: transparent transparent transparent var(--answer-border);
        border-width: 0.5rem;
        border-style: solid;
    }

/* Free-form text entry fields */

    .question textarea {
        width: calc(100% - 0.5rem);
        min-width: calc(100% - 0.5rem);
        max-width: calc(100% - 0.5rem);
        min-height: 1rem;
        padding: 0.5rem;
        margin: 0.5rem 0 0 -0.5rem;
        height: 2rem;
        transition: height 0.1s ease-out;
    }

    .question textarea:focus {
        height: 7rem;
        transition: height 0.1s ease-in;
        outline: solid var(--theme-color-1);
    }

    .question input:not([type]),
    .question input[type="text"],
    .question input[type="password"],
    .question select {
        width: calc(100% - 0.5rem);
        min-width: calc(100% - 0.5rem);
        max-width: calc(100% - 0.5rem);
        padding: 0.5rem;
        margin: 0.5rem 0 0 -0.5rem;
    }
    
/* The search field at the top of the session list page,
   but also the "secret key" entry field on the admin page. */

    body.sessions-page .search,
    body.admin-page .secret-key {
        margin: 2rem 0;
        max-width: 30rem;
        width: 75%;
        padding: 0.5rem 1rem 0.5rem 1rem;
    }

    body.sessions-page .search:focus,
    body.admin-page .secret-key:focus {
        outline-width: 3px;
        outline-offset: 2px;
    }

    /* Title of a session in the session list page: */

    .session .title,
    .header .title {
        display: block;
    }

/* Admin page: list of sessions */

    body.admin-page .session {
        text-align: center;
    }

    body.admin-page .session a {
        cursor: copy;
    }

    img.qr {
        display: block;
        padding-top: 1rem;
        padding-bottom: 2rem;
        width: 16rem;
        height: 16rem;
        margin: auto;
        cursor: copy;
    }

    body.admin-page .session span,
    body.admin-page .session a,
    body.speaker-page .session span,
    body.speaker-page .session a {
        display: block;
        margin-top: 0.5rem;
    }

/* The fine print footer */

    .fineprint {
        display: block;
        text-align: center;
        border-style: none;
        background-color:rgb(255, 255, 255, 0.80);
        border-radius: 0.5rem;
        font-size: 9pt;
    }

    .fineprint.template {
        display: none;
    }

    .fineprint a:link,
    .fineprint a:visited {
        color: rgb(0, 0, 64);
    }

    .fineprint a:hover {
        color: rgb(0, 0, 255);
    }



/* Graph stuff */

    graph {
        display: block;
        position: relative;
        width: 100%;
        height: 200px;
        margin: 10px;
    }

    graph axis {
        display: block;
        position: absolute;
        content: "";
        border-style: none;
        background-color: black;
    }

    graph bar {
        display: block;
        position: absolute;
        content: "";
        background-color: rgb(200, 200, 200);
        border-style: solid;
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.25);
        margin: 0;
    }

    /* The value label on the bar */
    graph bar::before {
        position: relative;
        top: 2px;
        left: 5px;
        font-size: 0.75em;
        font-weight: bold;
        background-color: rgb(255, 255, 255, 0.5);
        color: black;
        padding: 2px 10px;
        border-radius: 4px;
        content: attr(data-value);
    }

    graph bar[data-value="0"]::before {
        content: unset;
    }

    /* Tooltip when hovering over the bar */
    graph bar:hover::after {
        position: absolute;
        display: block;
        background-color: white;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(0, 0, 0, 0.5);
        box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.2);
        color: black;
        content: attr(data-tooltip);
        border-radius: 5px;
        z-index: 100;
        margin: 5px;
        padding: 10px;
        min-width: 100px;
        overflow: visible;
    }

    graph bar[data-tooltip=""]::after {
        display: none;
    }

    graph point {
        display: block;
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        margin-left: -2px;
        border-radius: 100%;
        background-color: black;
        border-style: none;
        z-index: 2;
    }

    graph .bad {
        background-color: rgb(200, 0, 0);
    }
    
    graph .avg {
        background-color: rgb(255, 200, 0);
    }

    graph .good {
        background-color: rgb(0, 160, 0);
    }

    graph .event-average {
        opacity: 0.2;
        border-color: rgba(0, 0, 0, 0.75);
        border-style: solid;
        border-width: 1px;
        --border-style: none;
    }

    graph bar.event-average::before {
        display: none;
    }