body { --scroll-space: 95dvh; }

.double-spaced {
    --pad-blank: 0.5em;
    --pad-right: var(--pad-blank);
    --pad-left: var(--pad-blank);
/*     --line-space: 1.5; */
/* } */
/**/
/* .metered.double-spaced { */
    --line-space: 2.5;
}

.counted {
    --pad-left: calc(var(--pad-blank) * 2 + var(--gutter-chars) * 0.5em);
}

.foreground, .background, .reference, .container > .line-ref, .word-ref {
    line-height: var(--line-space);
    margin: 0;
    font-family: monospace;
    white-space: pre-wrap;
    padding-left: var(--pad-left);
    padding-right: var(--pad-right);
}

.foreground {
    font-size: inherit;
    padding-top: 1em;
    padding-bottom: 0;
    outline: 0;
    width: calc(100% - var(--pad-left) - var(--pad-right));
    border-width: 0;
    resize: none;
    overflow: hidden;
    background: transparent;
    display: block;
    height: var(--input-height);
}

.background::before {
    content: attr(data-meter)
}

.background-case {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.background {
    visibility: hidden;
}

.metered .background {
    visibility: initial;
}

.double-spaced:focus-within {
    border-color: blue;
}

.double-spaced {
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    padding-bottom: calc(var(--input-height) + 1em);
}

.container {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

#load-dict {
    display: none;
    padding: 1px 0.5em;
}

#debug-clear {
    display: none;
}

#directions {
    max-width: 40em;
    margin: 2em auto;
}

#options {
    text-align: right;
    margin: 1.5em 0 0.5em 1em;
    float: right;
}

#options input {
    margin: 0 0 0 0.25em;
    vertical-align: middle;
}

#collapsed {
    display: none;
}

#help {
    padding: 0;
    float: right;
    margin-left: -100%;
}

#help > label::before {
    content: "help";
    margin-top: 1px;
}

#help > label::after {
    content: "collapse";
    margin-bottom: 1px;
}

#help > label::before, #help > label::after {
    display: block;
    overflow: hidden;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

#collapsed:not(:checked) + #help > label::before {
    height: 1px;
    margin-bottom: -1px;
}

#collapsed:checked + #help > label::after {
    height: 1px;
    margin-top: -1px;
}

#collapsed:checked ~ #directions {
    display: none;
}

body {
    font-size: 1rem;
    margin-bottom: var(--scroll-space);
}

.double-spaced {
    --offset: 0px;
}

.splittable.split .container {
    visibility: initial;
    height: initial;
    margin-top: calc(1em + var(--offset));
    position: absolute;
    width: 100%;
}

.splittable.split .foreground-case {
    height: var(--offset) !important;
    overflow: hidden;
    padding-bottom: calc(var(--line-space) * 1em);
}

.foreground-case {
    position: absolute;
    top: 0;
    width: 100%;
}

.splittable.split .reference {
    position: relative;
    margin-top: calc(-1 * var(--offset));
}

.fold {
    height: 0;
    overflow: hidden
}

.splittable.split .fold {
    height: initial;
    overflow: initial;
    background: #eee;
    transform: translateY(var(--offset));
    position: relative;
    z-index: 2;
    min-height: calc(var(--line-space) * 1em); /* covers extra line of input */
}

.splittable.split .background::before {
    position: absolute;
    overflow: hidden;
    height: var(--offset);
    top: 0;
    right: var(--pad-right);
    left: var(--pad-left);
}

.splittable.split .background::after {
    content: attr(data-meter);
    display: block;
    margin-top: calc(-1 * var(--offset));
    pointer-events: none;
}

.splittable.split .background-case {
    position: initial;
    height: 0;
    margin-top: var(--offset);
    margin-bottom: calc(-1 * var(--offset));
}

.splittable.split .background {
    overflow: hidden;
}

#page-status a {
    color: #444;
}

.long-break {
    display: inline;
}

.below-fold + br {
    display: none;
}

.splittable.split .below-fold {
    position: relative;
    margin-top: var(--fold-hides);
}

.below-init {
    display: none;
}

.splittable.split.selecting .long-break {
    display: block;
    height: var(--fold-height);
}

.splittable.split.selecting .reference {
    padding-top: 1em;
    transform: translateY(calc(-1em - var(--fold-height)));
}

.splittable.split.selecting .container {
    overflow: visible;
    z-index: 1;
}

.splittable.split.selecting .foreground {
    visibility: hidden;
}

.line-ref::before {
    content: '\200B'
}

.line-ref {
    visibility: hidden;
    position: absolute;
    display: inline;
}

.reference > .line-ref {
    left: var(--pad-left);
    right: var(--pad-right);
}

.word-ref {
    visibility: hidden;
    position: absolute;
    padding: 0;
}

.splittable.split.selecting .reference > .line-ref {
    visibility: visible;
}

@media not (any-pointer: fine) {
    .double-spaced {
        border-width: 0 0 1px 0;
        border-color: #000 !important;
    }
}

@media not (any-pointer: fine) { /* should be based on screen size */
    .fold > span > span > span {
        transform: rotate(90deg) translateX(-0.5em) !important;
        margin-bottom: 100% !important;
    }
}

@media print {
    .double-spaced {
        border-width: 0 !important;
        padding-bottom: 0;
        --offset: 0 !important;
        --fold-height: 0 !important;
        --pad-left: var(--pad-blank) !important;
    }

    .foreground {
        display: none;
    }

    .container {
        height: initial;
        visibility: initial;
        position: relative !important;
    }

    .background, .reference {
        padding: 0;
    }

    .background-case {
        position: absolute !important;
    }

    .reference {
        transform: translateY(1em);
        padding-bottom: 1em;
    }

    .fold {
        display: none;
    }

    #page-status {
        display: none;
    }

    body {
        --scroll-space: 0 !important;
    }
}

.fold {
    font-family: monospace;
}

.fold > span {
    user-select: none;
    display: inline-block;
    white-space: nowrap;
    margin-left: var(--left-pad);
    transform: translateX(-0.7071em);
    width: 0;
}

.fold > span > span {
    position: relative;
    display: inline-block;
}

.fold > span > span > span {
    display: inline-block;
    margin-bottom: 70.71%; /* sqrt(2) / 2 */
    transform-origin: bottom left;
    transform: rotate(45deg) translateY(-0.2929em); /* 1 - sqrt(2) / 2 */
}

.unclear > span > span::before {
    content: '[' var(--versions) ' versions]';
    color: #444;
}

.active > span > span, .active > span > span::before {
    color: red;
}

.fold::before {
    content: '';
    width: var(--pad-left);
    display: inline-block;
}

.splittable.split .fold::after {
    content: '';
    width: var(--word-width);
    display: block;
    height: 2px;
    position: absolute;
    left: calc(var(--word-offset) + var(--pad-left));
    top: 0;
    background: #000;
}

.suggestions {
    color: red;
    padding-left: var(--pad-left);
    padding-right: var(--pad-right);
}

.sep::before {
    content: '\2003\2022\2003';
}

.gutter {
    position: absolute;
    top: 0;
}

.gutter div {
    height: calc(var(--line-space) * 1em);
    width: calc(var(--pad-left) - var(--pad-blank));
    page-break-inside: avoid;
    font-family: monospace;
    line-height: var(--line-space);
    text-align: right;
    overflow: hidden;
}

.gutter div::before {
    content: attr(data-count);
}

.gutter div[data-count="0"]::before {
    content: '';
}

.splittable.split .fold-spacer {
    margin-top: var(--fold-height);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #0d1117;
        color: #f0f6fc;
    }

    .splittable.split .fold {
        background: #444;
    }

    .unclear > span > span::before {
        color: #888;
    }

    .foreground {
        color: #f0f6fc;
    }

    #page-status a {
        color: #888;
    }

    .double-spaced {
        border-color: #fff;
    }

    .splittable.split .fold::after {
        background: #fff;
    }
}