@font-face {
   font-family: 'MLMRoman12-Regular';
   src: url('/fonts/mlmr12.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'MLMSansDemiCond10-Regular';
   src: url('/fonts/mlmssdc10.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
}

body {
    font-family: 'MLMRoman12-Regular';
    font-size: 24pt;
    background-color: #fffff0;
}

div.textentry {
    position: relative;
    top: 0;
    right: 0; 
    bottom: 0;
    left: 0;
    user-select: none;
    margin-left: 20pt;
    white-space: pre;
    counter-reset: codelines;
    display: grid;
    grid-auto-rows: var(--codillon-line-spacing);
}

div.textentry:focus {
    outline: none;
    box-shadow: none;
}

.line {
    color: gray;
}

.meta-line {
    color: indigo;
    counter-increment: codelines;
}

.instr-line {
    color: black;
    counter-increment: codelines;
}

.invalid-line {
    counter-increment: codelines;
}

.line::before {
    font-size: 20pt;
    color: darkred;
    display: inline-block;
    width: 50px;
    text-align: right;
    content: " ";
}

.malformed-line::before {
    content: "\1d11e        ";
}

.invalid-line::before {
    content: "\2717        ";
}

.numbered-line::before {
    color: gray;
    content: counter(codelines) "        ";
}

.line:has(span.instr[data-synthetic-before])::before {
    color: darkred;
    content: "\1d160        ";
}

.animated .instr {
    transition: 0.2s;
}

span.comment {
    color: darkblue;
    font-family: 'MLMSansDemiCond10-Regular';
    font-size: 18pt;
    margin-left: 1px;
}

span.instr[data-synthetic-before]::before {
    border: 1px dashed darkred;
    color: darkred;
    position: absolute;
    left: 30px;
    padding: 3px;
    font-family: 'MLMSansDemiCond10-Regular';
    font-size: 12pt;
    transform: translateY(10px);
    content: attr(data-synthetic-before);
}

span.instr[data-debug]::before {
    font-family: 'MLMSansDemiCond10-Regular';
    font-size: 10pt;
    content: attr(data-debug);
    color: white;
    background-color: darkred;

    border-radius: 10px;
    padding: 4px;
    margin-right: 10px;
}

span.comment[data-commentary]::after {
    font-family: 'MLMRoman10-Regular';
    font-size: 12pt;
    color: darkred;
    float: right;
    border: 1px solid darkred;
    padding: 4px;
    margin-top: 10px;

    content: attr(data-commentary);
}

span.debug[data-debug]::after {
    font-family: 'MLMSansDemiCond10-Regular';
    font-size: 10pt;
    margin-left: 10px;
    content: attr(data-debug);
    color: white;
    background-color: darkblue;

    border-radius: 10px;
    padding: 4px;
}

.shake-a {
    animation: shake-a 0.25s;
}

.shake-b {
    animation: shake-b 0.25s;
}

@keyframes shake-a {
 0% { transform: translateX(0) }
 25% { transform: translateX(5px) }
 50% { transform: translateX(-5px) }
 75% { transform: translateX(5px) }
 100% { transform: translateX(0) }
}

@keyframes shake-b {
 0% { transform: translateX(0) }
 25% { transform: translateX(5px) }
 50% { transform: translateX(-5px) }
 75% { transform: translateX(5px) }
 100% { transform: translateX(0) }
}

.reveal-a {
    animation: reveal-a 0.25s;
}

.reveal-b {
    animation: reveal-b 0.25s;
}

@keyframes reveal-a {
    0% { transform: scaleY(0%) }
    100% { transform: scaleY(100%) }
}

@keyframes reveal-b {
    0% { transform: scaleY(0%) }
    100% { transform: scaleY(100%) }
}

.flyend-a .instr::before {
    display: inline-block;
    content: "end";
    animation: flyend-a 0.25s;
    transform: translateY(20px) scaleY(0%);
    width: 0px;
}

.flyend-b .instr::before {
    display: inline-block;
    content: "end";
    animation: flyend-b 0.25s;
    transform: translateY(20px) scaleY(0%);
    width: 0px;
}

@keyframes flyend-a {
    0% { transform: translateY(var(--codillon-line-spacing)) scaleY(100%) }
    100% { transform: translateY(calc(0.5 * var(--codillon-line-spacing))) scaleY(0%) }
}

@keyframes flyend-b {
    0% { transform: translateY(var(--codillon-line-spacing)) scaleY(100%) }
    100% { transform: translateY(calc(0.5 * var(--codillon-line-spacing))) scaleY(0%) }
}

.annotations {
    position: absolute;
}

.graph-canvas {
    background-color: #fff;
    display: block; 
    border: 1px solid darkred;
    margin-left: auto;
    margin-right: auto;
}

.step-slider {
    width: 100%;
    margin: 0;
    accent-color: darkred;
}

.slider-ticks {
    position: relative;
    height: 20px;
    margin: 0 8px;
}

@supports(-moz-appearance: none) {
    .slider-ticks{
        margin: 0 10px;
    }
}

.slider-tick {
    position: absolute;
    transform: translateX(-50%);
    color: darkred;
    font-size: 12pt;
}

.slider-container {
    margin: 10px 20px;
    display: flex;
    flex-direction: column;
}

.slider-hidden {
    visibility: hidden;
}

.autocomplete-hint-bar {
    background-color: #fffff0;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 40px;
    border-top: 2px solid burlywood;
    border-right: 2px solid burlywood;
    display: flex;
    overflow-x: scroll;
    max-width: 100%;
}

.autocomplete-item {
    padding: 0 15px;
    border-left: 1px solid burlywood;
    font-family: 'MLMSansDemiCond10-Regular';
    font-size: 12pt;
    color: darkred;
    cursor: pointer;
    height: 100%;
    align-items: center;
    display: flex;
}

.autocomplete-item:hover {
    background: linen;
}

.autocomplete-item:first-child {
    border-left: none;
}

.save-status{
    position: absolute;
    right: 20px;
    top: 0;
    visibility: hidden;
}

.save-status.dirty {
    color: darkred;
    visibility: visible;
}