/* Вторая версия: панель «Задание», проверки и раскладка для телефона */
:root{ --side-w:min(420px, 34vw); }
/* высота колонок — ровно по экрану: иначе длинное условие растягивает страницу и она уезжает вверх */
#main{ grid-template-rows:minmax(0, 1fr); }
#side{ min-height:0; overflow:hidden; }

.side-tabs{ display:flex; border-bottom:1px solid var(--line); flex:none; }
.side-tab{ flex:1; background:none; border:0; border-bottom:2px solid transparent; padding:10px 0 8px; cursor:pointer;
  color:var(--gray); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.side-tab.on{ color:var(--ink); border-bottom-color:var(--gold); }
.side-tab:hover{ color:var(--ink); }
.pane{ display:flex; flex-direction:column; min-height:0; flex:1; }
.pane[hidden]{ display:none; }

.task-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); flex:none; }
#task-select{ flex:1; min-width:0; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:7px 8px; font:inherit; }
.badge{ font-size:12px; padding:3px 8px; border-radius:999px; background:#2a2f38; color:var(--gray); white-space:nowrap; }
.badge.done{ background:#1f3a24; color:var(--green); }
.badge.part{ background:#3a3212; color:var(--gold); }

/* условие */
.md{ overflow:auto; flex:1; padding:6px 18px 24px; font-size:14.5px; line-height:1.6; }
.md h1{ font-size:22px; margin:12px 0 6px; color:var(--gold); }
.md h2{ font-size:13px; margin:22px 0 6px; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; }
.md p{ margin:6px 0; }
.md ul{ margin:6px 0; padding-left:20px; } .md li{ margin:3px 0; }
.md code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; background:#1b222c; border-radius:5px; padding:1px 5px; }
.md pre{ background:#0b0f14; border:1px solid var(--line); border-radius:8px; padding:10px 12px; overflow:auto; margin:8px 0; line-height:1.45; }
.md pre code{ background:none; padding:0; font-size:13px; }
.md pre.terminal{ color:#c9d1d9; }
.md pre.terminal .pr{ color:var(--green); }
.md pre.terminal .cmd{ color:var(--ink); }
.md pre.terminal .in{ color:var(--gold); font-weight:600; }
.md table{ border-collapse:collapse; margin:8px 0; width:100%; font-size:13.5px; }
.md th, .md td{ border:1px solid var(--line); padding:5px 8px; text-align:left; }
.md th{ color:var(--gray); font-weight:500; background:var(--panel2); }
.md details{ border:1px solid var(--line); border-radius:8px; margin:8px 0; background:var(--panel2); }
.md summary{ cursor:pointer; padding:7px 12px; color:var(--gold); user-select:none; }
.md details[open] summary{ border-bottom:1px solid var(--line); }
.md details > :not(summary){ margin-left:12px; margin-right:12px; }
.md strong{ color:#fff; }

/* список задач (когда ничего не выбрано) */
.task-list h2{ margin-top:16px; }
.task-card{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin:6px 0; cursor:pointer; }
.task-card:hover{ border-color:var(--blue); }
.task-card .t{ flex:1; } .task-card .id{ color:var(--gray); font-family:ui-monospace,monospace; font-size:12px; }

/* проверка */
#task-foot{ flex:none; border-top:1px solid var(--line); background:var(--panel); padding:10px 12px 12px; }
#task-foot[hidden]{ display:none; }
.btn-check{ background:var(--gold); color:#10131a; border:0; border-radius:8px; padding:7px 14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.btn-check.big{ width:100%; padding:10px; font-size:15px; }
.btn-check:disabled{ opacity:.5; cursor:default; }
#check-top[hidden]{ display:none; }
#results{ max-height:38vh; overflow:auto; margin-bottom:10px; }
#results[hidden]{ display:none; }
.res-sum{ font-weight:600; margin:2px 0 8px; }
.res-sum.ok{ color:var(--green); }
.res{ display:flex; gap:8px; padding:4px 0; align-items:flex-start; }
.res .i{ width:18px; flex:none; text-align:center; font-weight:700; }
.res.pass .i{ color:var(--green); } .res.fail .i{ color:var(--red); } .res.skip, .res.wait{ color:var(--gray); }
.res.run .i{ color:var(--gold); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.res .why{ display:block; color:var(--gold); font-size:13px; }
.res .diff{ display:grid; grid-template-columns:auto 1fr; gap:2px 8px; margin-top:4px; font:12.5px ui-monospace,Menlo,monospace; }
.res .diff span:nth-child(odd){ color:var(--gray); }
.res .diff pre{ margin:0; white-space:pre-wrap; word-break:break-word; }

#mobile-nav{ display:none; }

@media (max-width:760px){
  :root{ --term-h:auto; }
  html,body{ overflow:hidden; }
  #main{ height:calc(100% - 46px - 56px); grid-template-columns:1fr; }
  #split-v, #split-h{ display:none; }
  body[data-view="task"] #work{ display:none; }
  body[data-view="code"] #side, body[data-view="term"] #side{ display:none; }
  body[data-view="code"] #term-wrap{ display:none; }
  body[data-view="term"] #tabs, body[data-view="term"] #editor-wrap{ display:none; }
  body[data-view="term"] #term-wrap{ flex:1; height:auto; }
  #mobile-nav{ display:flex; position:fixed; left:0; right:0; bottom:0; height:56px; background:var(--panel); border-top:1px solid var(--line); z-index:10; }
  #mobile-nav button{ flex:1; background:none; border:0; color:var(--gray); font-size:13px; cursor:pointer; border-top:2px solid transparent; }
  #mobile-nav button.on{ color:var(--ink); border-top-color:var(--gold); }
  #check-top{ padding:7px 10px; }
  .brand b{ font-size:14px; }
  #results{ max-height:30vh; }
}

@media (max-width:520px){
  #top{ gap:8px; padding:0 10px; }
  .brand b, #status{ display:none; }
  #run, #check-top{ padding:7px 11px; }
  #check-top{ margin-left:auto; }
}

#answer-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--gray); font-weight:600; }
#answer-row[hidden]{ display:none; }
#answer-row input{ flex:1; min-width:0; background:#0b0f14; border:1px solid var(--line); color:var(--ink); border-radius:8px;
  padding:9px 10px; font:16px ui-monospace,Menlo,monospace; }
#answer-row input:focus{ outline:none; border-color:var(--gold); }