@media (prefers-color-scheme: dark) {
    svg {
	background-color: #ddd;
	border-radius: 10px;
    }
}

/* override the simple.css body width to be a bit wider */
body {
    grid-template-columns: 1fr min(60rem, 90%) 1fr;
}

body > .navigation {
    grid-column: 1;
    position: sticky;
    align-self: start;
    inset: 1em;
    padding-top: 1em;
    color: var(--text-light);
    font-size: 80%;

    ul {
	padding-left: 1rem;
	margin-right: 1rem;
    }
}

@media only screen and (max-width: 1200px) {
    body > .navigation {
	grid-column: 2;
	position: static;
    }
}

/* Monospace is easier to read when entering lots of symbols */

input {
    font-family: monospace;
}

/* Displayed formulas are centred. */

.displayedformula {
    text-align: center;
    font-family: var(--mono-font);
    background-color: #fff;
}

.syn-connective { color: darkmagenta; }
.syn-relation   { color: blue; }
.syn-variable   { color: green; }
.syn-function   { color: red; }
.syn-quantifier { color: darkgoldenrod; }

/* Code entry stuff */

.defnsat {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: auto auto 1fr;
    grid-gap: 0.5em;
    padding: 0.5em;
    margin-bottom: 1em;
    border-radius: 0.5em;
    border: solid var(--text-light);
}

.defnsat-entry {
    grid-column: 1 / 3;
    grid-row: 2;
}
.defnsat-entry textarea {
    font-family: var(--mono-font);
    overflow:hidden;
    resize:none;
}
.defnsat-entry input {
    width: 100%
}

.defnsat-parseresult {
    grid-column: 1;
    grid-row: 3;
}

.defnsat-parseresult div {
    border-radius: 5px;
    padding: 0.3em;
}

.errormsg {
    background-color: var(--marked);
    color: black;
}
.successmessage {
    background-color: var(--bg);
}

.defnsat-button {
    grid-column: 2;
    grid-row: 2;
    text-align:right;
}

.defnsat-results {
    grid-column: 1 / 3;
    grid-row: 4;
    border-radius: 5px 5px 5px 5px;
    background-color: var(--bg);
    border: solid #ccc 1px;
}

.defnsat-results p:first-child {
    margin-top: 0em;
    color: var(--accent);
    background-color: var(--accent-bg);
    border-radius: 5px 5px 0px 0px;
    /* border: solid #ccc 1px; */
    border-bottom: none;
    padding: 0.2em;
    font-weight: bold;
    margin-bottom: 0em;
}

.defnsat-results pre {
    border-radius: 0px 0px 5px 5px;
    margin: 0em
}

/* Natural deduction stuff */

.vertical {
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: left;
    width: 100%;
}

/*
.horizontal {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}
*/
.casesplit {
    width: 100%;
    margin-top: 0em;
    padding-left: 0em;
    margin-bottom: 0em;
    margin-left: 1em;
}

.indent {
    padding-left: 1em
}

/* .grouped { */
/*     margin-left: 0.5em; */
/*     padding-left: 0.3em; */
/*     padding-right: 0.3em; */
/*     border-radius: 10px 10px 10px 10px; */
/*     border-left: 2px solid black; */
/*     border-right: 2px solid black; */
/*     flex-shrink: 0 */
/* } */

.initialformulaentry {
    width:100%
}

.hole {
    border-radius: 5px;
    background-color: #ddddff;
    padding: 0.3em;
}

.focushole {
    margin-left: 0.5em;
    flex: 1;
}

.cases {
    padding-left: 0em;
    flex: 1;
}

.focus {
    flex-shrink: 0;
}

.commandinput {
    margin-top: 0.4em;
    /* width: 25% */
}

.comment {
    color: #164;
    font-style: italic;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-size: 90%;
    /* white-space: nowrap; */
}

.statement {
    border: none;
    background: none;
    padding: 0;
    margin-left: 1em;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 0;
    font-family: var(--sans-font);
}

@media (prefers-color-scheme: dark) {
    .comment {
	color: #9cf0cf;
    }
    .hole {
	background-color: #55558c;
    }
}

.worksheet {
    display: flex;
    align-items: flex-start; width: 100%; height: 90%; justify-content: center
}

.assumpbutton {
    border: none;
    background-color: #dddddd;
    border-radius: 5px 5px 0 0;
    padding: 0.2em 1em 0em 1em;
    margin-top: 0.2em;
}

.assumpbutton:hover {
    background-color: #eeeeee;
}

.unfocusedgoal {
    border: 1px solid #777;
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 7px 7px 0px 0px;
    background-color: #ddd;
}

.unfocusedgoal:hover {
    background-color: #eeeeee;
}

.resetbutton {
    padding: 0;
    /*border: solid #ddd 1px;*/
    font-size: 60%;
    border-radius: 2px;
    margin-right: 0.3em;
    opacity: 0.5;
}

/* ------------------------ */
/* Proof tree display */

.proofbox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding-left: 0.5em;
    padding-right: 0.5em;
    justify-content: center
}

.premisebox {
    border-bottom: 2px solid;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end
}

.formulabox {
    text-align: center;
    white-space: nowrap;
    font-family: inherit;
    font-size: 100%;
    /* color: #000; */
    padding: 0.2em;
}

.rulename {
    white-space: nowrap;
    font-size: 75%;
    color: #333;
    align-self: flex-end;
}

.assumptionbox {
    border-radius: 0.4em 0.4em 0 0;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    margin-left: 0.5em; margin-right: 0.5em
}

.assumption {
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.2em;
    color: #555;
    font-style: italic;
    padding-left: 0.5em
}

/*----------------------------------------------------------------------*/
/* Animations */

@keyframes fade-in {
    from {
	opacity: 0%
    }
    to {
	opacity: 100%
    }
}

.hole {
    animation-duration: 0.4s;
    animation-name: fade-in;
}