/* Dynamically size text and controls to browser size */
:root {
    --min-font-size: 10px;
    --control-size: clamp(16px, 6vw, 40px);
    --problem-size: min(16vw, 16vh);
    --top-ratio: 1;
}

/* Mobile: Bigger toolbar icons, smaller text, less spacing around problem. */
@media screen and (max-width: 600px),
       screen and (max-height: 600px) {
    :root {
        --min-font-size: 8px;
        --problem-size: min(14vw, 14vh);
        --control-size: clamp(12px, min(10vh, 20vw), 40px);
        --top-ratio: 0.1;
    }
}

* {
    font-family: Arial, Helvetica, sans-serif;
}

html,
body {
    font-size: var(--min-font-size);
    margin: 0;
    padding: 0;
    height: 100%;
    z-index: 0;
}

input, select, label {
    font-size: var(--min-font-size);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spacer {
    flex-grow: 1;
}

#top-spacer {
    flex-grow: var(--top-ratio);
    min-height: 3px;
}

.hidden {
    display: none !important;
}

/* --- Popup Message --- */
#temp-message {
    z-index: 20;
    position: absolute;
    top: max(4px, 0.20vh);

    font-size: clamp(12px, 4vw, 24px);
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.2em 1em;
    vertical-align: middle;
    
    border: thin solid black;
    border-radius: 1em;
    background-color: white;

    opacity: 0;
}

.show-message {
    animation: show-briefly 4s ease-in-out;
}

@keyframes show-briefly {
    0% { opacity: 0; }
    20% { opacity: 1; }
    60% { opacity: 1;}
    100% { opacity: 0; }
}

/* --- Math Problem Box --- */ 

#problem {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 1fr 0.3fr 1fr;
    font-size: var(--problem-size);

    width: 2.5em;

    /* Avoid weird Safari + iOS stretching */
    max-height: 5em;

    margin: auto auto;
    padding: 0.25em;

    border: thin solid #888;
}

#upper {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
}

#op {
    grid-column: 1;
    grid-row: 2;
    cursor: pointer;
}

#lower {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
}

#line {
    grid-column: 1 / -1;
    grid-row: 3;

    height: 1px;
    border-top: 0.08em solid black;
}

#answer-box {
    grid-column: 1 / -1;
    grid-row: 4;
}

#answer {
    font-size: var(--problem-size);
    text-align: right;
    box-sizing: border-box;
    width: 100%;
}

/* --- Correct Answer Checkmark -- */
#correct-check {
    grid-column: 1;
    grid-row: 1;
    width: 1em;
    height: 1em;
    fill: green;
    transform: scale(0);

    /* Firefox: Fix animations sometimes low quality (like low res raster scaled up)
       https://stackoverflow.com/questions/60796102/css-animation-scale-transform-starts-blurry-in-firefox
    */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#correct-check.correct {
    animation: correct 500ms ease-in-out;
    transform: scale(1);
}

#correct-check.correct-instant {
    transform: scale(1);
}

@keyframes correct {
    0% { transform: scale(0); }
    75% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* --- Controls --- */

#control-bar {
    border-bottom: thin solid #888;
    width: calc(100% - 4px);
    padding: 0em 0.1em;
    flex-grow: 0;

    display: flex;
    flex-direction: row;
}

.center {
    flex-grow: 1;
    text-align: center;
    vertical-align: middle;
    font-size: var(--control-size);
}

.icon {
    margin: 0.2em;
    display: inline-block;
}

.icon svg {
    width: var(--control-size);
    height: var(--control-size);
    cursor: pointer;

    /* To get SVG not to be weirdly positioned vertically */
    display: inline-block;

    /* Set 'viewBox="0 0 40 40"' for 40px-intended-size to get runtime scaling */
}

#progress-outer {
    background-repeat: no-repeat;
    background-size: 100%;
    
    min-height: var(--control-size);
    width: 100vw;
    flex-grow: 0;
}

#progress {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 0%;
}

/* https://uigradients.com/; https://cssgradient.io/ */
.bronze { background-image: linear-gradient(to right, #ca7345, #732100); }
.silver { background-image: linear-gradient(to right, #d7dde8, #757f9a);  }
.gold { background-image: linear-gradient(to right, #eecd3f, #99771f); }

/* ---- Overlays ---- */
.overlay {
    z-index: 10;
    background-color: rgba(96, 96, 96, 0.9);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.close-button {
    z-index: 11;
    position: absolute;
    top: -50px;
    right: -5px;    
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.contents {
    position: relative;

    width: -moz-fit-content;
    width: fit-content;

    font-size: clamp(10px, 2vw, 20px);
    background-color: white;
    padding: 1em;
    border: thin solid black;
    border-radius: 1em;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- Analytics Tables ---- */
.contents #days-select {
    max-width: 8em;    
    margin-bottom: 4px;
}

.contents table, #days-select {
    font-size: clamp(var(--min-font-size), min(2vw, 2vh), 20px);
    border-collapse: collapse;
}

.contents table th, td {
    border: thin solid #888;
    width: 2.5em;
    height: 2.5em;
    text-align: center;
}

.contents table.subtraction {
    font-size: clamp(var(--min-font-size), min(1.6vw, 1.6vh), 20px);
}

.contents table.subtraction th, td {
    width: 2em;
    height: 2em;
}

.contents table.stats th:first-child {
    font-size: 200%;
    width: 1em;
    height: 1em;
    cursor: pointer;
}

.contents table.stats th, td:first-child { 
    color: #888;
}

/* https://observablehq.com/@d3/color-schemes; Discrete (8), 4th to 5th usually. */

.great {
    background-image: linear-gradient(to right, #74c476, #41ab5d);
}

.good {
    background-image: linear-gradient(to right, #f7fcb9, #addd8e);
}

.ok {
    background-image: linear-gradient(to right, #fdd0a2, #fdae6b);
}

.bad {
    background-image: linear-gradient(to right, #fc9272, #fb6a4a);
}

/* ---- Calendar History ---- */
.fill-bronze { fill: #ca7345;}
.fill-silver { fill: #d7dde8;}
.fill-gold { fill: #eecd3f; }

.calendar th, .calendar td {
    font-size: clamp(var(--min-font-size), min(3vw, 3vh), 30px);
}

.calendar th {
    font-weight: normal;
    color: #888;
}

.calendar svg {
    width: 3em;
    height: 3em;
}

.calendar td {
    text-align: left;
    vertical-align: top;
    padding: 0.2em;

    width: 3em;
    height: 4em;
}

.calendar .date {
    font-size: 60%;
    color: #888;
}

/* ---- Help and Share ---- */
.help, .share {
    max-width: min(80vw, 40em);
    white-space: pre-line;
}

.help-links {
    padding-top: 1em;
}

.attribution {
    margin: 1.5em 0em;
    padding: 1em;
    font-size: 80%;

    border: thin solid silver;
    border-radius: 6px;
}

#share-text {
    font-size: clamp(10px, 4vw, 30px);
}

.share-links {
    text-align: right;
    margin-top: 1em;
    white-space: initial;
}

/* ---- Settings ---- */
.settings label, .settings input, .settings select, .settings td {
    font-size: clamp(12px, 3.5vw, 20px);
}

.settings label {
    text-align: right;
}

.settings input {
    width: 3em;
}

.settings td {
    border: none;
    text-align: left;
    height: 1.75em;
}

.settings tr td:first-child {
    text-align: right;
    width: -moz-fit-content;
    width: fit-content;
    padding-right: 0.75em;
}