/* The problem page (question.html): a desk with the problem on the left and
   the work on the right. The two halves scroll on their own and the line
   between them can be dragged. Nothing decorative here: the squares under the
   verdict are the tests. */

.solve { min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 901px) { .solve { height: 100vh; overflow: hidden; } }

.crumbs { border-bottom: 1px solid var(--border); background: var(--bg); }
.crumbs-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 0 clamp(16px, 2.4vw, 32px); }
.crumbs nav { display: flex; gap: 0.6rem; align-items: center; font-size: 0.92rem; color: var(--text3); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs nav a { color: var(--text2); }
.crumbs nav a:hover { color: var(--text); }
.crumbs .sep { color: var(--border2); }
.crumbs .back-to-tree { padding: 0.15rem 0.55rem; font-size: 0.86rem; }
.crumbs-go { display: flex; gap: 8px; flex: none; }

.desk {
  --left: 46%;
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(320px, var(--left)) 9px minmax(380px, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.pane { min-width: 0; min-height: 0; }
.statement { display: flex; flex-direction: column; }
.st-body { flex: 1; min-height: 0; overflow: auto; padding: 1.8rem clamp(18px, 2.6vw, 40px) 4rem; }
.split { position: relative; cursor: col-resize; background: var(--bg); border-inline: 1px solid var(--border); touch-action: none; }
.split::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 36px; translate: -50% -50%; background: repeating-linear-gradient(var(--text3) 0 3px, transparent 3px 6px); opacity: 0.7; }
.split:hover, .split.drag, .split:focus-visible { background: var(--bg3); }

/* the problem's own bar, level with the editor's: the text size (zoom on
   .st-text, so the title, the examples and the pictures grow with it) and the
   problem alone on the screen */
.st-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 51px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.st-size { display: inline-flex; align-items: center; gap: 2px; }
.st-size-now { min-width: 3.3em; text-align: center; font-size: 0.84rem; color: var(--text2); }
.st-size .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }

/* ⛶ in that bar. Not the browser's Fullscreen API, like the compiler's focus
   mode: a locked-down exam holds the browser in full screen itself. */
.read-full .navbar, .read-full .crumbs, .read-full .split, .read-full .work,
.read-full #chat-widget { display: none !important; }
.read-full .desk { grid-template-columns: minmax(0, 1fr); }
.read-full .st-text { max-width: 60rem; margin-inline: auto; }

/* statement */
.p-head { display: flex; gap: 1rem; align-items: center; }
.p-head h1 { font-size: clamp(1.8rem, 2.4vw, 2.4rem); line-height: 1.05; letter-spacing: -0.04em; }
.p-meta { color: var(--text3); font-size: 0.92rem; margin-top: 0.3rem; }
.limits { display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem; margin: 1.3rem 0 0; padding: 0.85rem 0; border-block: 1px solid var(--border); }
.limits > div { display: flex; flex-direction: column; }
.limits dt { font-size: 0.8rem; color: var(--text3); }
.limits dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.limits .rating { margin-top: 2px; }
.langs { display: inline-flex; margin-top: 1.2rem; border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 2px; gap: 2px; flex-wrap: wrap; }
.langs .stmt-lang-btn { border: 0; background: none; padding: 0.35rem 0.75rem; border-radius: 2px; font-size: 0.9rem; color: var(--text2); cursor: pointer; }
.langs .stmt-lang-btn:hover { color: var(--text); }
.langs .stmt-lang-btn.active { background: var(--text); color: var(--bg); font-weight: 600; }
#qDescription { margin-top: 1.4rem; max-width: 70ch; }
#qImage img { max-width: 100%; border-radius: var(--radius); margin-top: 1rem; }
.ex-title { font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 2.2rem 0 0.75rem; }
.example { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.75rem; background: var(--bg2); }
.example > div + div { border-left: 1px solid var(--border); }
.ex-head { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.5rem 0.4rem 0.8rem; background: var(--bg3); font-size: 0.84rem; color: var(--text3); border-bottom: 1px solid var(--border); }
.example pre { margin: 0; padding: 0.75rem 0.85rem; font: 0.93rem/1.6 var(--mono); font-variant-ligatures: none; white-space: pre-wrap; word-break: break-all; }
.subs-wrap td { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* work */
.work { display: flex; flex-direction: column; background: var(--bg2); }
.ed-bar, .act-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.ed-bar { border-bottom: 1px solid var(--border); }
.ed-bar select { min-height: 34px; padding: 0 2rem 0 0.7rem; border: 1px solid var(--border2); border-radius: var(--radius-sm); background-color: var(--bg); font-size: 0.9rem; font-weight: 600; }
.saved { font-size: 0.84rem; color: var(--text3); transition: opacity 0.5s; white-space: nowrap; }
.ed-tools { display: flex; gap: 6px; margin-left: auto; }
.work #editor-container { flex: 1; min-height: 260px; border: 0; }
.work #editor { height: 100%; min-height: 260px; }
#runSection { border-top: 1px solid var(--border); padding: 10px 12px 6px; }
.run-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.run-head label { font-size: 0.88rem; font-weight: 600; color: var(--text2); }
#customInput { min-height: 64px; font-family: var(--mono); font-size: 0.9rem; }
#runOutput { margin-top: 8px; }
#runOutput .example-box { max-height: 180px; overflow-y: auto; margin: 4px 0 0; }
#resultArea { padding: 0 12px; max-height: 44%; overflow: auto; }
#resultArea:not(:empty) { border-top: 1px solid var(--border); padding-top: 12px; padding-bottom: 8px; }
#resultArea .tests { margin: 0.7rem 0 0.4rem; }
#resultArea .result-line { color: var(--text2); font-size: 0.94rem; }
.act-bar { border-top: 1px solid var(--border); justify-content: flex-end; }
.act-bar #submitBtn { min-width: 120px; }
.act-bar .judge-mode { margin-right: auto; display: flex; gap: 6px; align-items: center; }

@media (max-width: 900px) {
  .desk { display: block; }
  .split { display: none; }
  .statement { display: block; }
  .st-body { overflow: visible; padding-bottom: 2rem; }
  .read-full .st-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); }
  .work { border-top: 1px solid var(--border); }
  .work #editor-container { flex: none; height: 380px; }
  #resultArea { max-height: none; }
}
@media (max-width: 520px) {
  .example { grid-template-columns: 1fr; }
  .example > div + div { border-left: 0; border-top: 1px solid var(--border); }
}

/* toasts and the chat button keep clear of Run and Submit */
.solve .toast { bottom: 72px; }
.solve #chat-widget { left: 1rem; right: auto; bottom: 1rem; }
.solve #chat-panel { left: 0; right: auto; }