/*******************************************************************/
/* Browser                                                         */
/*******************************************************************/

:root {
    --bg-color: #FFF;
    --text-color: #000;
    --link-color: #440;

    --tapis-color: #FFE;
    --border-color: #DDB;
    --box-color: #EED;

    --var-color: #088;
    --const-color: #C08;
    --rem-color: #555;
    --key-color: #008;

    --err-color: #FDD;
    --warn-color: #FFD;

    --xlog-banner: url('../../images/background/banner_olive.png')
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #222;
        --text-color: #EEE;
        --link-color: #EEB;

        --tapis-color: #332;
        --border-color: #776;
        --box-color: #443;

        --var-color: #6E6;
        --const-color: #D19;
        --rem-color: #AAA;
        --key-color: #77F;

        --err-color: #533;
        --warn-color: #553;

        --xlog-banner: url('../../images/background/banner_steel.png')
    }
}

.doccell {
    background: var(--bg-color);
    color: var(--text-color)
}

.lightbody {
    background: var(--tapis-color);
    color: var(--text-color)
}

.homebody {
    background: var(--border-color);
    color: var(--text-color)
}

iframe {
    border: none
}

.showbody {
    font-family: verdana, sans-serif;
    font-size: 2vw;
    line-height: 1.4em
}

.landbody {
    font-family: verdana, sans-serif;
    font-size: 1.6vw;
    line-height: 1.4em
}

/*******************************************************************/
/* Menu                                                            */
/*******************************************************************/

.framebody {
    font-family: verdana, sans-serif;
    font-size: 1.2vw;
    line-height: 1.4em
}

a {
    text-decoration: none;
    color: var(--link-color)
}

a:hover {
    text-decoration: underline
}

.banner {
    background-image: var(--xlog-banner);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

/*******************************************************************/
/* Headings                                                        */
/*******************************************************************/

h1 {
    color: var(--link-color);
    font-variant: small-caps;
    line-height: 1.4em
}

h2 {
    color: var(--link-color);
    font-variant: small-caps;
    line-height: 1.4em
}

h3 {
    color: var(--link-color);
    font-variant: small-caps;
    line-height: 1.4em
}

h4 {
    color: var(--link-color);
    font-variant: small-caps;
    line-height: 1.4em
}

ul {
    margin-left: 1em;
    padding-left: 1em;
}

ol {
    margin-left: 1em;
    padding-left: 1em;
}

dd {
    margin-left: 3em;
}

/*******************************************************************/
/* Tables                                                          */
/*******************************************************************/

table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: inherit;
}

tr {
    background-repeat: no-repeat;
}

td {
    padding: 0
}

th {
    padding: 0
}

.rowtable {
    border-top: solid 1px var(--border-color);
    border-left: solid 1px var(--border-color);
    border-right: solid 1px var(--border-color)
}

.oddrow {
    background-color: var(--box-color)
}

.headrow {
    background-color: var(--border-color)
}

.normrow {
    background-color: var(--tapis-color)
}

.oddrow td {
    padding: 2px;
    border-bottom: solid 1px var(--border-color)
}

.headrow td {
    padding: 2px;
    border-bottom: solid 1px var(--border-color)
}

.normrow td {
    padding: 2px;
    border-bottom: solid 1px var(--border-color)
}

.oddrow th {
    padding: 2px;
    border-bottom: solid 1px var(--border-color)
}

.headrow th {
    padding: 2px;
    border-bottom: solid 1px var(--border-color)
}

.normrow th {
    padding: 2px;
    border-bottom: solid 1px var(--border-color)
}

/*******************************************************************/
/* Code                                                            */
/*******************************************************************/

pre {
    font-family: monaco, monospace;
    font-size: inherit;
    line-height: inherit;
    margin: 0
}

.code {
    border: solid 1px var(--border-color);
    padding: 0.5em;
    white-space: pre-wrap;
    word-break: break-all;
    background-color: var(--box-color)
}

.code[contenteditable="plaintext-only"] {
    overflow: auto;
    resize: vertical
}

.error {
    background-color: var(--err-color)
}

.warning {
    background-color: var(--warn-color)
}

textarea {
    font-size: inherit;
    line-height: inherit;
    color: inherit
}

button {
    font-size: inherit;
    line-height: inherit;
    color: inherit
}

input {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/*******************************************************************/
/* Blog Formatting                                                 */
/*******************************************************************/

.blog {
    font-family: verdana, sans-serif;
    white-space: pre-wrap
}

.blog h1 {
    display: inline
}

.blog h2 {
    display: inline
}

.blog h3 {
    display: inline
}

.blog h4 {
    display: inline
}

.blog dl {
    display: inline
}

.blog dt {
    display: inline
}

.blog dd {
    display: inline
}

.blog ul {
    display: inline
}

.blog ol {
    counter-reset: section;
    display: inline
}

.blog li {
    display: inline;
    margin-left: 1em
}

.blog ul li::before {
    content: "• ";
}

.blog ol li::before {
    counter-increment: section;
    content: counter(section) ". ";
}

/*******************************************************************/
/* Code Formatting                                                 */
/*******************************************************************/

/* comment */
.cm {
    color: var(--rem-color)
}

/* variable */
.vr {
    color: var(--var-color)
}

/* const */
.cs {
    color: var(--const-color)
}

/* keywords */
.kw {
    color: var(--key-color)
}

/* background */
.code2 {
    white-space: normal
}

/* line counter */
.ln {
    counter-increment: lc;
    background-color: var(--tapis-color);
    white-space: pre
}

.ln:before {
    content: counter(lc);
    width: 2.5em;
    display: inline-block;
    border-right: 1px solid #555;
    text-align: right;
    margin-right: 0.5em;
    padding-right: 0.5em;
    background-color: var(--box-color)
}

/*******************************************************************/
/* Vector Graphics                                                 */
/*******************************************************************/

.pen {
    stroke: black
}

.brush {
    fill: white
}

.label {
    font-size: 12px;
    stroke: none;
    fill: black
}

/*******************************************************************/
/* Graph Plotting                                                  */
/*******************************************************************/

.line {
    stroke: red
}

.line2 {
    stroke: blue
}

.mark {
    fill: red
}

.mark2 {
    fill: blue
}

.x-axis {
    text-anchor: middle
}

.y-axis {
    text-anchor: end
}

/*******************************************************************/
/* Notebooks                                                       */
/*******************************************************************/

.nb_flex {
    display: flex;
    align-items: flex-end
}

.nb_btn {
    border: solid 1px var(--border-color);
    background-color: var(--box-color);
    padding: 0.5em
}

.nb_box {
    white-space: pre-wrap;
    word-break: break-all;
    border: solid 1px var(--border-color);
    background-color: var(--box-color);
    padding: 0.5em;
    margin-block: 0;
    flex: 1
}

.nb_txt {
    outline-offset: 0.5em
}

/*******************************************************************/
/* Unicode Cludge                                                  */
/*******************************************************************/

.hack_arrow {
    width: 0;
    height: 0;
    border-top: 0.5em solid transparent;
    border-left: 0.5em solid var(--text-color);
    border-bottom: 0.5em solid transparent;
    border-right: none;
    margin: 0.125em 0.375em
}

button:disabled .hack_arrow {
    border-left: 0.5em solid grey;
}

.hack_box {
    width: 0;
    height: 0;
    border: 0.375em solid red;
    margin: 0.25em
}