@charset "utf-8";

/* цвета темной темы */
:root { 
    color-scheme: dark;

    --clr-white: #e0e0e0;
    --clr-black: #1e1e1e;
    --clr-blue: steelblue;

    --clr-text-light2: #e0e0e0;
    --clr-text-light: #d0d0d0;
    --clr-text: #c0c0c0;
    /* --clr-text-mid: #999; */
    --clr-text-dark: #808080;
    --clr-text-menu: var(--clr-text);

    --clr-back-light3: #6b6b6b;
    --clr-back-light2: #4b4b4b;
    --clr-back-light: #3b3b3b;
    --clr-back-menu: var(--clr-back-light);
    --clr-back: #2b2b2b;
    --clr-back-darker: #282828;
    --clr-back-dark: #222222;
    --clr-back-code: #1e1e1e;   /* для ACE как в VSCode */

    --clr-border-static: #4e4e4e;
    --clr-border: #4e4e4e;
    --clr-border-light: #666;
    --clr-border-hover: #6e6e6e;
    --clr-border-focus: #808080;

}

html, body { height:100%; margin:0; padding:0; }
html, body { background: var(--clr-back); color: var(--clr-text); }
@font-face {
    font-family: "Nunito";
    src: url("/static/lib/fonts/Nunito-all.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
html, body { 
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; 
    font-synthesis: none;
}
input, select, textarea, button {
    font-family: inherit;
    line-height: 1;
}
/* "затычка" для курсива... пока так */
i, em { font-style: normal; font-variation-settings: "ital" 1; }

/* стандартные элементы */
h1, h2, h3, h4 { margin-top: 1rem; margin-bottom: 0.5rem; }
p { margin-top: 0.5rem; margin-bottom: 0.5rem; }
ol, ul { margin-top: 0; margin-bottom: 0; }
label { margin: 0; }

input[type="number"] { outline: none; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Для Firefox -- современный стандарт */

/*******************************************************************/
/*    кастомизация цветов и внешнего вида стандартных элементов    */

/* скроллеры: бегунок #555, дорожка #222 */
html { scrollbar-color: #555 #222; }

input, select, textarea { color: var(--clr-text-light); background-color: var(--clr-back-dark); }
button { color: var(--clr-text-light); background-color: var(--clr-back-light); border-radius: 2px; }
button { display: inline-flex; align-items: center; padding: 4px 8px; }
button:hover { color: var(--clr-text-light2); background-color: var(--clr-back-light2); }
input[type="checkbox"] { width: 16px; height: 16px; appearance: none; -webkit-appearance: none; }
input[type="checkbox"] { background: var(--clr-back-dark); }
input[type="checkbox"] { transform: translateY(3px); } /* подровняем по строке */
input[type="checkbox"]:checked { position: relative; }
input[type="checkbox"]:checked::before { 
    content: "✔";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--clr-text-light);
    font-size: 16px;
    font-weight: 900;
}
input[type="radio"] { border: none; box-shadow: none; }

input, select, textarea, button { border: none !important; outline: none !important; }
.dframe:is(input, select, textarea, button) { border: none !important; outline: none !important; }
input, select, textarea, button, 
.dframe { 
    margin: 1px;
    box-shadow: 0 0 0 1px var(--clr-border); 
    transition: box-shadow 0.1s ease; 
}
input:hover:not(:disabled):not(:focus):not(:focus-within), 
select:hover:not(:disabled):not(:focus):not(:focus-within), 
textarea:hover:not(:disabled):not(:focus):not(:focus-within), 
button:hover:not(:disabled):not(:focus):not(:focus-within), 
.dframe:hover {
    box-shadow: 0 0 0 1px var(--clr-border-hover);
}
input:focus, select:focus, textarea:focus, 
.dframe:focus, .dframe:focus-within {
    box-shadow: 0 0 0 2px var(--clr-border-focus);
    border-radius: 2px;
}
button:disabled, button:disabled:hover { 
    opacity: 0.5;
    color: var(--clr-text-dark); 
    background-color: var(--clr-back-darker); 
}

button { border-radius: 3px; }


/*******************************************************************/
/* стили кастомизации (библиотека) */
.hidden { display:none; }
.noborder { border: none !important; outline: none !important; box-shadow: none !important; }
.boxborder, .boxsize { box-sizing: border-box; }
.vcenter-items { display: inline-flex; align-items: center; }
.nowrap, .nobreak { white-space: nowrap; }
.wrap { white-space: normal; }
.pointer { cursor: pointer; }


.row { display: flex; align-items: center; }
.row.left    { justify-content: flex-start; }
.row.right   { justify-content: flex-end; }
.row.center  { justify-content: center; }
.row.justify { justify-content: space-between; }
.row.evenly  { justify-content: space-evenly; }        
.row.gap3   { gap: 3rem; }
.row.gap25  { gap: 2.5rem; }
.row.gap2   { gap: 2rem; }
.row.gap15  { gap: 1.5rem; }
.row.gap1   { gap: 1rem; }
.row.gap05  { gap: 0.5rem; }
.row.gap03  { gap: 0.3rem; }
.row.gap02  { gap: 0.2rem; }
.row.gap01  { gap: 0.1rem; }
.rowgap1  > * + *  { margin-top: 1rem; }
.rowgap07 > * + *  { margin-top: 0.7rem; }
.rowgap05 > * + *  { margin-top: 0.5rem; }

.huge    { font-size: xx-large; }
.xxlarge { font-size: xx-large; }
.xlarge  { font-size: x-large; }
.large   { font-size: large; }
.larger  { font-size: larger; }
.medium  { font-size: medium; }
.small   { font-size: small; }
.xsmall  { font-size: x-small; }
.xxsmall { font-size: xx-small; }
.xbold      { font-weight:800; }
.bold       { font-weight:bold; }
.bolder     { font-weight:bolder; }
.semibold   { font-weight:600; }
.normal     { font-weight:normal; }
.nobold     { font-weight:initial; }
.thin       { font-weight:lighter; }

.orange     { color: orange; }
.red        { color: darkred; }
.blue       { color: steelblue; }
.green      { color: green; }
.darkgreen  { color: darkgreen; }
.gray       { color: darkgray; }
.black      { color: black; }
.bkdarker   { background: var(--clr-back-darker); }
.bklight    { background: var(--clr-back-light); }

.line1  { line-height: 1; }
.line09 { line-height: 0.9; }
.line08 { line-height: 0.8; }
.left       { text-align: left; }
.right      { text-align: right; }
.hcenter    { text-align: center; }
.hcenter2 > * { margin-left:auto; margin-right:auto; }
.hcenterflex  { display:flex; flex-direction:column; align-items:center; }
.hcenterdiv   { display:flex; flex-direction:column; align-items:center; }

.tmar1  { margin-top:   1rem; }
.tmar07 { margin-top: 0.7rem; }
.tmar05 { margin-top: 0.5rem; }
.tmar03 { margin-top: 0.3rem; }
.tmar02 { margin-top: 0.2rem; }
.tmar01 { margin-top: 0.1rem; }


hr.thin { margin-top: 2px; margin-bottom: 2px; padding: 0; }
hr.dotted {
    border: none;
    border-top: 1px dotted var(--clr-border-static);
    background-color: transparent;
    color: transparent;
    height: 0px;
}
hr.dotted.blue { border-color: steelblue; }
hr.dotted.orange { border-color: lightsalmon; }

pre.tags { margin:0; padding:0; font-size:smaller; color:steelblue; }

/*******************************************************************/
/* общий layout */

header { padding:0; margin:0; background-color: var(--clr-back-menu); color: var(--clr-text-menu); }
header h1 { padding:0; margin:0; line-height:1; font-size:large; }
header button { border-radius: 4px; font-size: large; }
header button { box-shadow:none; }
header button:hover:not(:disabled):not(:focus):not(:focus-within) { box-shadow:none; }
/* вторая строка верхнего меню */
header nav { padding:3px; border-top: var(--clr-border-focus) dotted 1px; }
header nav { display:flex; flex-wrap:wrap; justify-content:center; column-gap:1rem; row-gap:2px; }
header nav button { font-weight:550; }

#notify-area { margin:0; padding:0px; }
#notify-area { display: flex; justify-content: center; }
#notify-area { background-color: var(--clr-back-light2); }
#notify { margin:0; padding:0px; }
#notify > div { margin: 3px; padding:3px 7px; line-height: 1; }
#notify > div { border-radius: 3px; background-color: var(--clr-back-light); }
#notify > div.info { color:steelblue; }
#notify > div.ok { color:green; }
#notify > div.warning { color:goldenrod; }
#notify > div.error { color:darkred; }

/* relative для размещения абсолюных элементов, типа волны */
header { position:relative; position:sticky; top:0; z-index:1000; }

.load-lane {
    width: 100%;
    height: 2px;
    background-color: var(--bkclr-header);
    position: absolute; 
    bottom: 0;
    overflow: hidden;
}
.load-wave {
    position: absolute; 
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, 
        #4b4b4b, white, #4b4b4b, white, #4b4b4b
    );
    animation: load-animation 1s infinite linear;
    -webkit-animation: load-animation 1s infinite linear;
}
@keyframes load-animation {
    0%   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    100% { -webkit-transform: translateX(0%); transform: translateX(0%); }
}
@-webkit-keyframes load-animation {
    0%   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    100% { -webkit-transform: translateX(0%); transform: translateX(0%); }
}

#body_grid {
    height:100%;
    display:grid;
    grid-template-rows: min-content 1fr min-content;
                        /* header  main  footer */
}

/*  logo+кнопки   title  */ 
#topheader { display: grid; grid-template-columns: min-content 1fr min-content; }

@media (max-width: 799.99px) {
    #right-prifile-btn {display:none;}
    #nav-menu-line {display:none;}
}
@media (min-width: 800px) {
    #nav-menu-btn {display:none;}
}
.nav-menu-popup {
    width: fit-content;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 10px;
}
#nav-menu-btn   { margin: 0 0.5rem; }
#nav-menu-btn   button { font-size:x-large; }
.nav-menu-popup button { font-size:x-large; }
.nav-menu-popup button { width:100%; padding: 6px 8px; }
.nav-menu-popup button { background-color: var(--clr-back-menu); }
.nav-menu-popup button { box-shadow:none; }

main { min-height:0; height:100%; width:100%; _overflow: auto; }
main { max-width: 1200px !important; margin-left: auto; margin-right: auto; }

#pypopup {
    position: fixed;
    display: none;
    padding: 4px 6px;
    border-radius: 5px;
    border: steelblue solid 2px; 
    background: darkslategrey;
    color: lightsalmon;
    max-width: 80vw;
    max-height: 80vh;
    min-width: 1rem;
    overflow: auto;
    white-space: pre;
    z-index: 2000;
}
#pypopup.dark {
    opacity: 100;
    color: var(--clr-text-menu);
    border-color: var(--clr-border-static); 
    background-color: var(--clr-back-menu);
}
#pypopup.darker {
    opacity: 100;
    color: var(--clr-text-menu);
    border-color: var(--clr-back-dark); 
    background-color: var(--clr-back-dark);
}
#pypopup.code {
    white-space: pre;
    font-family: monospace !important;
    padding: 0.5rem;
    color: var(--clr-text);
    border-color: var(--clr-border-static); 
    background-color: var(--clr-back-code);
    /* border-width: 1px;  */
}
#pypopup.wrap {
    white-space: normal;
    word-break: break-word;
}


/*******************************************************************/
/* РЕШАЛКА / solver */

#task-grid { 
    display: grid;
    box-sizing: border-box;
    padding: 0.3rem;
    min-height: 100%;
    gap: 0.3rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
        "header"
        "area"
        "tests"
        "solution";
    /* border: red dotted 1px; */
    }
@media (max-width: 799.99px) {
    #task-nav { width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
    #task-nav { height: min-content; }
    #task-tasks, #task-tests { display: flex; }
    #task-tasks > * + * { margin-left: 3px; }
    #task-tests > * + * { margin-left: 3px; }
}
@media (min-width: 800px) {
    #task-grid { 
        /* grid-template-columns: fit-content(30%) auto 1fr; */
        grid-template-columns: 30% auto 1fr;
        grid-template-rows: min-content 1fr;
        grid-template-areas:
            "header header header"
            "area tests solution";
    }
    #task-grid.scratch { grid-template-columns: 0 0 1fr; gap: 0; }
    #task-nav { height:100%; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
    #task-tasks, #task-tests { display: block; }
    #task-tasks > * + * { margin-top: 3px; }
    #task-tests > * + * { margin-top: 3px; }
}
#task-header   { grid-area: header; }
#task-area     { grid-area: area; }
#task-solution { grid-area: solution; }
#task-nav      { grid-area: tests; }

#task-title { color: #999; font-size: large; font-weight: bold; margin: 3px; }
#task-description { border-radius: 5px; border: var(--clr-border-static) solid 2px; }
#task-description { color: var(--clr-text); margin: 0; padding: 0.3rem; }
#task-description { height: max-content; }
#task-description p { margin: 0; }
#task-description > p + p { margin-top: 0.3rem; }

#task-hints { display: none; margin-top: 1rem; color:lightsalmon; font-size: small; }
#task-hints { padding: 0.5rem 0.3rem; }
#task-hints { background-color: var(--clr-back-darker); }
#task-hints { background-color: var(--clr-back-dark); }
#task-hints { border-radius: 1rem; }
#task-hints::before { content: "? ► "; }
#task-hints > button {
    display: inline-block;
    white-space: nowrap;
    font-size: smaller;
    padding: 4px;
    margin: 0.2rem;
}

#task-solution { 
    display: grid;
    box-sizing: border-box;
    height: 100%;
    max-height: 100%;
    gap: 0.3rem;
    grid-template-rows: 1fr min-content min-content;
    /* border: yellow dotted 1px; */
}

.code-editor, .code-buttons, .panels { grid-column: 1 / -1; } 
.code-editor { position: relative; }
.code-buttons { padding: 0; }
.ace_editor { background:#1e1e1e; font-family: monospace !important; line-height: 1.3 !important; }
.ace_editor .ace_gutter { background:#181818; }
.ace_editor.initializing { visibility: hidden; }

.techinfo { 
    font-size: small;
    font-weight: lighter;
    color: var(--clr-text-dark);
    opacity: 0.9;
}

#runtime-status {
    position: absolute;
    right: 20px;
    bottom: 6px;
    font-size: smaller;
    font-family: monospace;
    color: var(--clr-text-dark);
    pointer-events: none;
    z-index: 99;
}
@keyframes status-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0.3; }
    100% { opacity: 1; }
}
#runtime-status.loading { color: yellow; }
#runtime-status.ready { color: mediumseagreen; }
#runtime-status.running { color: red; }
#runtime-status.loading::after { content: "reloading..."; }
#runtime-status.loading.start::after { content: "инициализация (до 1 минуты)..."; }
#runtime-status.ready::after { content: "ready 🐍"; }
#runtime-status.running::after { content: "running..."; }
#runtime-status.running, #runtime-status.loading { animation: status-blink 2s infinite; }

.ro-panel { /* ??? привести к стандарту !!! */
    margin: 0;
    padding: 3px;
    height: 8rem;
    color: silver;
    background-color: var(--clr-back-darker);
    box-shadow: inset 0 0 0 1px var(--clr-border-static);
    box-sizing: border-box;
    overflow: auto;
}

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.3rem; margin: 0; }
.input-panel { width: 100%; box-sizing: border-box; padding: 2px; }
.input-panel { resize: vertical; height: 8rem; overflow-y: auto; }
.error { color: orangered; }

.solver-nav-btn { text-align: center; align-items: center; user-select: none; cursor: pointer; }
/* .solver-nav-btn { border-radius: 5px; border: var(--clr-border-static) solid 1px; box-sizing: border-box; } */
.solver-nav-btn { 
    --box-width: 1px;
    --box-color: var(--clr-border-static);
    border-radius: 5px; 
    box-shadow: inset 0 0 0 var(--box-width) var(--box-color); 
    padding: 3px 6px;
    min-width: 1rem; 
}
.solver-nav-btn.selected { background: #444; color: white; --box-width: 2px; font-weight: bold; }
.solver-nav-btn.active { background: #444; color: white; --box-width: 2px; font-weight: bold; }
.solver-nav-btn:hover { --box-color: var(--clr-white) !important; }
.solver-nav-btn:hover.test-hidden { --box-color: var(--clr-border-static); }
#task-tests > .solver-nav-btn { border-radius: 50%; }

.test-hidden { background: #1f1f1f; cursor: default; }

/* для элементов output-потока */
span.test-ok { color: green; }
span.test-empty { color: #3c75e7; }
span.test-wrong { color: #e74c3c; }
span.test-aborted { color: yellow; }
span.test-timeout { color: #f39c12; }
span.test-output_limit { color: #e67e22; }
span.test-runtime_error { color: #9b59b6; }

/* для тест-кнопок и панелей output редактора задач */
.test-ok { --box-color: green !important; }
/* .test-empty { --box-color: #eb857a !important; } */
/* .test-empty { --box-color:  !important; } */ /* оставим цвет по умолчанию */
.test-wrong { --box-color: #e74c3c !important; }
.test-aborted { --box-color: yellow !important; }
.test-timeout { --box-color: #f39c12 !important; }
.test-output_limit { --box-color: #e67e22 !important; }
.test-runtime_error { --box-color: #9b59b6 !important; }

/* для task-кнопок */
.mark-passed { --box-color: green !important; }
.mark-failed { --box-color: #e74c3c !important; }
.mark-error { --box-color: #9b59b6 !important; }
.mark-empty { --box-color: initial !important; }
.mark-invalid { position: relative; }
.mark-invalid::after {
    content: "!";
    position: absolute;
    color: orange;
    font-size: 12px;
    font-weight:900;
    line-height: 1;
    top: 2px;
    right: 4px;
    pointer-events: none;      /* чтобы не мешал кликам */    
}


/* история отправок */
.static-box { color: var(--clr-text); background-color: var(--clr-back-darker); }
.subs-item { white-space:nowrap; cursor: pointer; font-size: smaller; }
.subs-item { border-top: var(--clr-border-static) dotted 1px; padding: 2px; }

/*******************************************************************/
/* редактор задач */