@charset "utf-8";

/* цвета темной темы */
:root { --clr-back-code: #1e1e1e; }

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, button { font-family: inherit; font-size: inherit; }
textarea { font-family: inherit; font-size: inherit; line-height: 1; }

i, em { font-style: italic; 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; }
select.noborder { background-color: var(--clr-back-darker); }

button { background-color: var(--clr-back-light); border-radius: 2px; }

button:hover { color: var(--clr-text-light2); background-color: var(--clr-back-light2); }
input:where([type="radio"]) { --field-rim-width: 0px; }

.dframe:is(input, textarea, button) { border: none !important; outline: none !important; }
input, select, textarea, .dframe { margin: 1px; }
.dframe { transition: box-shadow 0.1s ease; }

button:hover:not(:disabled):not(:focus):not(:focus-within), 
.dframe:hover {
    box-shadow: 0 0 0 1px var(--clr-border-hover);
}
.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.dim-disabled:disabled { opacity:0.3; }
button { border-radius: 3px; }

a.btn, a.btn:visited { color: var(--clr-text-light); background-color: var(--clr-back-light); border-radius: 3px; }
a.btn { display: inline-flex; align-items: center; padding: 4px 8px; margin: 1px; box-shadow: 0 0 0 1px var(--clr-border); transition: box-shadow 0.1s ease; font-family: inherit; line-height: 1; text-decoration: none; box-sizing: border-box; }
a.btn:hover { color: var(--clr-text-light2); background-color: var(--clr-back-light2); text-decoration: none; }
a.btn:hover:not(.disabled):not(:focus):not(:focus-within) { box-shadow: 0 0 0 1px var(--clr-border-hover); }
a.btn:focus, a.btn:focus-within { box-shadow: 0 0 0 2px var(--clr-border-focus); border-radius: 2px; }
a.btn.disabled, a.btn.disabled:hover { pointer-events: none; opacity: 0.5; color: var(--clr-text-dark); background-color: var(--clr-back-darker); }
a.btn.tab, a.btn.tab:hover { box-shadow:none; }
a.btn.tab:hover:not(.disabled):not(:focus):not(:focus-within),
a.btn.tab:focus,
a.btn.tab:focus-within { box-shadow:none; }
a.btn.tab.selected { position: relative; }
a.btn.tab.selected::after { content:""; position:absolute; left:8px; right:8px; bottom:2px; height:2px; background:var(--clr-text-light2); pointer-events:none; }

a:not(.btn), a:not(.btn):visited {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a:not(.btn):hover {
    color: var(--clr-text-light2);
    text-decoration-style: solid;
}
/*******************************************************************/
/* стили кастомизации (библиотека) */

.top-nav-box {
    position: sticky;
    z-index: 500;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: var(--clr-back-dark);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--clr-border-light) 65%, transparent);
}

/* btncard — большая кликабельная плашка */
.btncard {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 200px;
    min-height: 100px;
    padding: 1rem !important;
    margin: 1px;
    color: var(--clr-text-light);
    background: var(--clr-back-light);
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--clr-border);
    box-sizing: border-box;
    font-size: x-large;
    font-weight: bold;
    line-height: 1;
    text-decoration: none !important;
}
.btncard:hover {
    color: var(--clr-text-light2);
    background: var(--clr-back-light2);
    box-shadow: 0 0 0 1px var(--clr-border-hover);
    text-decoration: none;
}
.btncard.disabled,
.btncard.disabled:hover {
    pointer-events: none;
    opacity: 0.5;
    color: var(--clr-text-dark);
    background-color: var(--clr-back-darker);
}
.bc-title { font-size: inherit; }
.bc-meta { color: var(--clr-text-mid); font-weight: normal; font-size: smaller; }

/* rowrec — строка объекта с действиями */
.rowrec {
    margin: 0;
    padding: 4px;
    border-radius: 5px;
    border: 0.5px dotted var(--clr-border);
    background-color: var(--clr-back-dark);
}
@media (min-width: 450px) {
    .rowrec { padding-left: 0.35rem; padding-right: 0.35rem; }
}
@media (min-width: 600px) {
    .rowrec { padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (min-width: 800px) {
    .rowrec { padding-left: 0.7rem; padding-right: 0.7rem; }
}

.rowrec + .rowrec {
    margin-top: 0.4rem;
}
.rowrec.open {
    border-left: 2px solid var(--clr-green);
}
.rr-cap { 
    background-color: var(--clr-back-dark2); 
    border-radius: 3px;
    padding: 0.1rem;
}
.rr-main { min-width: 0; }
.rr-main .rr-tags {
    margin: 0;
    padding: 0;
    color: steelblue;
    font-size: smaller;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.rr-flop {
    display: inline-flex; align-items: center;
    column-gap: 1rem;
}
.rr-flop.g02 {
    column-gap: 0.2rem;
    row-gap: 0.2rem;
    gap: 0.2rem;
}
.rr-side {
    min-width: 0;
    align-content: center;
    flex-wrap: nowrap;
}
/* .rr-actions {
    flex-shrink: 0;
} */
.rr-author {
    color: var(--clr-text-mid);
    font-size: smaller;
}
.rr-meta,
.rr-comment,
.rr-stat {
    color: var(--clr-text-mid);
    font-size: smaller;
    opacity: 0.8;
}
.rr-empty {
    display: inline-block;
    width: 1.35em;
    border-top: 1px solid currentColor;
    vertical-align: middle;
}

@media (max-width: 800px) {
    .rr-author {
        max-width: 20ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .rowrec {
        display: flex;
        /* align-items: center; */
    }

    .rr-main {
        flex: 1 1 auto;
        min-width: 0;
        align-self: stretch;
        overflow-wrap: anywhere;
    }

    .rr-side {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .rr-author,
    .rr-meta,
    .rr-comment,
    .rr-stat {
        white-space: nowrap;
    }

    .rr-author {
        max-width: 12ch;
    }

    .rr-flop {
        flex-direction: column;
        justify-content: space-evenly;
        row-gap: 0.2rem;
    }
    .rr-flop :is(button, a.btn) {
        padding-block: 2px;
    }

}

.rowgap1  > * + *  { margin-top: 1rem; }
.rowgap07 > * + *  { margin-top: 0.7rem; }
.rowgap05 > * + *  { margin-top: 0.5rem; }
.rowgap03 > * + *  { margin-top: 0.3rem; }
.rowgap02 > * + *  { margin-top: 0.2rem; }

.xbold      { font-weight:800; }

.semibold   { font-weight:600; }

.i, .italic, .em { font-style:italic; font-variation-settings:"ital" 1; }

.lightred   { color: tomato; }

.scroll60h { max-height: min(60vh, 30rem); overflow-y: auto; }
/* Ограничение высоты окном для страниц с внутренней прокруткой. */
.h100dvh { height: 100dvh; }

.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; }

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;
}
.col hr { width: 100%; }
hr.dotted.blue { border-color: steelblue; }
hr.dotted.orange { border-color: lightsalmon; }

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

img.block { display:block; }

/*******************************************************************/
/* общий 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; }
#topheader button { border-radius: 4px; font-size: large; }
#topheader button, header nav button { box-shadow:none; }
#topheader button:hover:not(:disabled):not(:focus):not(:focus-within),
header nav button:hover:not(:disabled):not(:focus):not(:focus-within) { box-shadow:none; }
/* Основная навигация помещается в одну строку с окружающими элементами управления. */
header nav { padding:3px; border:0; }
header nav { display:flex; flex-wrap:nowrap; justify-content:center; column-gap:1rem; white-space:nowrap; }
header nav button { font-weight:550; }

#pagenavline { margin:0 auto; padding:0; }
.pagemenu { border-top: var(--clr-border-focus) dotted 1px; padding: 2px; font-size: medium; }
#pagenavline .pagemenu button {
    background: var(--clr-back-light2);
    box-shadow: 0 0 0 1px var(--clr-border-light);
}
#pagenavline .pagemenu button:hover {
    background: var(--clr-back-light3);
}
span.sep { padding:0 0.3rem; color:var(--clr-text-dark)}

#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; border-radius: 3px; }
#notify > div { line-height: 1; font-weight: 600; }
/* #notify > div { background-color: var(--clr-back-light); } */
#notify > div { background-color: var(--clr-white); }
#notify > div.info { color:steelblue; }
#notify > div.ok { color:green; }
#notify > div.warning { color:goldenrod; }
#notify > div.error { color:red; }

/* 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 {
    min-height:100%;
    display:grid;
    grid-template-rows: min-content 1fr min-content;
                        /* шапка  основное содержимое  подвал */
}
#body_grid > header,
#body_grid > main,
#body_grid > footer {
    min-width: 0;
}

/* Логотип и действия, центральная навигация, управление учётной записью. */
#topheader { display: grid; grid-template-columns: min-content minmax(0, 1fr) min-content; }
#topheader > .col { min-width: 0; }
header h1 { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#right-prifile-btn { margin-right:1rem; }
/* Сохраняем прежнюю ширину промежутка у значка только при видимом имени. */
#right-prifile-btn [aria-haspopup="menu"] { column-gap:0.6em; }
#right-prifile-btn .ellipsis { max-width:8rem; }

@media (width < 800px) {
    .wide-only { display:none !important; }
    #right-prifile-btn {display:none;}
    #nav-menu-line {display:none;}
}
@media (min-width: 800px) {
    .narrow-only { display:none; }
    #nav-menu-btn {display:none;}
}
/* Плавно уменьшаем исходный промежуток при сужении экрана от 1000 до 800 пикселей. */
@media (800px <= width < 1000px) {
    #nav-menu-line { column-gap:clamp(0.3rem, calc(5.6vw - 40px), 1rem); }
    #right-prifile-btn .ellipsis { 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-line a.btn { font-size: large; }
header nav a.btn { font-weight:550; }
.pagemenu a.btn { font-size:medium; font-weight:normal; }
/* pa: общее всплывающее меню действий LivePython для учётной записи и проектов. */
/* Повторяет геометрию и подсветку chmenu Чатика; пространства CSS остаются независимыми. */
.pa-menu {
    min-width:max-content;
    gap:0;
    padding:0.25rem;
    border:1px solid var(--clr-border);
    background:var(--clr-back-dark);
    color:var(--clr-text);
}
.pa-menu :is(a.btn, button, summary) {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    box-sizing:border-box;
    margin:0;
    column-gap:0.45rem;
    padding:0.45rem 0.6rem;
    border-radius:3px;
    background:transparent;
    box-shadow:none;
    color:var(--clr-text-light);
    font:inherit;
    text-align:left;
    text-decoration:none;
}
.pa-menu:not(.nohover) :is(a.btn, button, summary):hover:not(:disabled):not(.disabled) {
    background:var(--clr-back-light2);
    box-shadow:none;
    color:var(--clr-text-light2);
}
.pa-menu :is(a.btn, button, summary):hover:not(:disabled):not(.disabled),
.pa-menu :is(a.btn, button, summary):focus,
.pa-menu :is(a.btn, button, summary):focus-within { box-shadow:none; }
.pa-menu :is(a.btn, button) > i {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 20px;
    width:20px;
    height:20px;
}
.pa-menu summary { display:list-item; }
.pa-menu > hr { width:100%; margin:0.2rem 0; border:0; border-top:1px solid var(--clr-border); }

#nav-menu-line a.btn.tab.selected, .nav-menu-popup a.btn.tab.selected { box-shadow:none; }
button.icon { padding: 4px 5px; }
a.btn.icon { padding: 4px 5px; }

main { min-height:0; height:100%; width:100%; }
/* Тонкая системная полоса с нативным всплывающим поведением, когда оно доступно. */
main { scrollbar-width: thin; }
main { max-width: 1200px !important; margin-left: auto; margin-right: auto; }
main.wide { max-width: 1400px !important; }

.table {
  margin: 0.75rem 0;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.25rem 0.4rem;
  border: 0 solid var(--clr-border-static);
  vertical-align: top;
}

.table.brd1 th, .table.brd1 td, .table.border1 th, .table.border1 td { border-width: 1px; }
.table.brd2 th, .table.brd2 td, .table.border2 th, .table.border2 td { border-width: 2px; }

.jg-sum-head { text-align:center; }
.jg-sum-scale { height:2px; margin-top:2px; background:linear-gradient(90deg, #8b1e1e, hsl(60 70% 30%), #1e7e34); }
.jg-sum-head.green .jg-sum-scale { background:linear-gradient(90deg, color-mix(in srgb, transparent, #1e7e34 25%), color-mix(in srgb, transparent, #1e7e34 62.5%), #1e7e34); }

/* Фиксированные плавающие блоки и модификаторы их оформления. */
.py-float-box {
    position: fixed;
    display: none;
    padding: 4px 6px;
    border-radius: 5px;
    border: steelblue solid 2px; 
    background: darkslategrey;
    color: lightsalmon;
    max-width: 80vw;
    max-height: 80vh;
    /* max-height: calc(50vh - 1rem); */
    min-width: 1rem;
    overflow: auto;
    white-space: pre;
    z-index: 2000;
}
.py-float-box.centered {
    left:50%;
    top:50%;
    width:max-content;
    transform:translate(-50%, -50%);
}
.py-float-box.dark, .dlg-frame {
    opacity: 100;
    color: var(--clr-text-menu);
    border-color: var(--clr-border-static); 
    background-color: var(--clr-back-menu);
}
.py-float-box.darker {
    opacity: 100;
    color: var(--clr-text-menu);
    border-color: var(--clr-back-dark); 
    background-color: var(--clr-back-dark);
}
.py-float-box.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;  */
}
.py-float-box.wrap {
    white-space: normal;
    word-break: break-word;
}
.py-float-box.wide {
    max-width: 95vw;
}
.py-float-box.flush {
    padding: 0;
}

/* dlg: диалоги в рамке с компактным заголовком и кнопкой закрытия. */
.dlg-frame { padding:0; border-width:1px; border-radius:5px; max-width:min(32rem, calc(100vw - 2rem)); }
.dlg-bar { padding:0.4rem 0.8rem; background:var(--clr-back); border-bottom:1px solid var(--clr-border); }
.dlg-bar h2 { font-size:inherit; font-weight:normal; }
.dlg-close { width:24px; height:24px; padding:0; flex-shrink:0; justify-content:center; background:transparent; }
.dlg-close:is(:hover, :focus-visible) { background:var(--clr-back-light2); }
.dlg-close svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.soft-action { padding:0.4rem 1rem; background:var(--clr-back-light2); }
/*******************************************************************/
/* отступы: внутренние и внешние */

.nomar { margin: 0 !important; }
.nopad { padding: 0 !important; }

/*******************************************************************/
/* РЕШАЛКА / 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";
    }
#task-area, #task-nav, #task-solution { min-width:0; }
#task-grid.scratch { gap:0; }
#task-tasks {
    display:flex;
    gap:0.2rem;
    overflow-x:auto;
    overflow-y:hidden;
    margin-bottom:0.3rem;
}
#task-tasks > .solver-nav-btn { flex:none; }
@media (max-width: 799.99px) {
    #task-grid:not(.scratch) {
        grid-template-rows:auto auto minmax(0, 1fr) auto auto auto;
        grid-template-areas:
            "header"
            "area"
            "editor"
            "tests"
            "controls"
            "panels";
    }
    #task-grid:not(.scratch) > #task-solution { display:contents; }
    #task-grid:not(.scratch) #task-solution > .code-editor { grid-area:editor; }
    #task-grid:not(.scratch) #task-solution > .code-buttons { grid-area:controls; }
    #task-grid:not(.scratch) #task-solution > .panels { grid-area:panels; }
    #task-tests { display:flex; gap:0.2rem; overflow-x:auto; overflow-y:hidden; }
    #task-tests > .solver-nav-btn { flex:none; }
    #task-tasks, #task-tests { scrollbar-width:none; }
    #task-tasks::-webkit-scrollbar,
    #task-tests::-webkit-scrollbar { display:none; }
}
@media (min-width: 800px) {
    #task-tasks { scrollbar-width:thin; }
    #task-tasks::-webkit-scrollbar { height:4px; }
    #body_grid:has(#task-grid) {
        height:100dvh;
        grid-template-rows:min-content minmax(0, 1fr) min-content;
    }
    #body_grid:has(#task-grid) > main { overflow:auto; }
    #task-grid { 
        height:100%;
        min-height:0;
        grid-template-columns: 30% max-content minmax(0, 1fr);
        grid-template-rows: min-content minmax(0, 1fr);
        grid-template-areas:
            "header header header"
            "area tests solution";
    }
    #task-grid.scratch { grid-template-columns: 0 0 1fr; }
    #task-area, #task-nav, #task-solution { min-height:0; }
    #task-area { overflow-y:auto; }
    #task-nav { width:max-content; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
    #task-nav::-webkit-scrollbar { display:none; }
    #task-tests { width:max-content; }
    #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-materials { margin-top: 1rem; }
#task-hints { display: none; color:lightsalmon; font-size: small; }
#task-hints { padding: 0.5rem 0.3rem; }
#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;
}
#task-grid.scratch #task-solution {
    grid-template-rows:minmax(0, 1fr) min-content auto;
}

/* Интерактивный холст LivePython */
#interactive-stage { min-width:0; min-height:0; display:grid; gap:0.3rem; }
#interactive-stage.active { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
#interactive-stage > .code-editor,
#canvas-panel { position:relative; min-width:0; min-height:0; }
#interactive-stage > .code-editor { grid-column:auto; }
#canvas-panel { overflow:hidden; background:white; }
#canvas-panel::after {
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    background:color-mix(in srgb, var(--clr-green) 30%, white);
    pointer-events:none;
}
#canvas-panel.finish-flash { animation:livepy-canvas-finish-glow 1.2s ease-out; }
#canvas-panel.finish-flash::after { animation:livepy-canvas-finish 1.2s ease-out; }
@keyframes livepy-canvas-finish {
    from { opacity:0.9; }
    to { opacity:0; }
}
@keyframes livepy-canvas-finish-glow {
    from { filter:drop-shadow(0 0 1rem var(--clr-green)); }
    to { filter:drop-shadow(0 0 1rem transparent); }
}
/* Размеры растрового изображения не должны определять высоту содержащей его сетки. */
#livepy-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; outline:none; touch-action:none; }
.selected-blue.selected:is(a, button) { color:var(--clr-text-light2); background:var(--clr-blue); }
.selected-light.selected:is(a, button) { background:var(--clr-back-light); }

.code-editor, .code-buttons, .panels, #interactive-stage { 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; }

/* Тонкие нативные полосы прокрутки; толщину выбирает браузер. */
.ace_editor .ace_scrollbar { scrollbar-width:thin; }

#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: steelblue; }
#runtime-status.interactive { color: mediumseagreen; }
#runtime-status.error { 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.interactive::after { content: "interactive 🐢"; }
#runtime-status.error::after { content: "ошибка загрузки"; }
#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;
}
.ro-panel .error {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.error .error-hint {
    display: inline-block;
    font-style: italic;
    font-variation-settings: "ital" 1;
}
.error .error-hint:not(:only-child) { padding-left:1rem; }

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.3rem; margin: 0; }
.panels > .panel:has(#input-panel),
.panels > .panel:has(#output-panel),
.panels > .panel:has(#expected-panel) { position:relative; }
.panels > .panel:has(#input-panel) > div,
.panels > .panel:has(#output-panel) > div,
.panels > .panel:has(#expected-panel) > div {
    position:absolute;
    top:0;
    right:0.7rem;
    z-index:1;
    padding:0 0.2rem;
    transform:translateY(-50%);
    color:var(--clr-text-dark);
    background:var(--clr-back);
    font-size:smaller;
    font-weight:lighter;
    line-height:1;
    pointer-events:none;
}
.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;
    --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;      /* чтобы не мешал кликам */    
}

/* Настраиваемый угловой знак поверх содержимого без изменения геометрии. */
.mark-invalid:has(> [data-mark])::after { content: none; }
.mark-invalid > [data-mark] {
    position: absolute;
    top: 1px;
    right: 1px;
    color: orange;
    line-height: 1;
    font-size: 0.7em;
    font-weight: bold;
}

/* история отправок */
.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; }

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