/* The result shell shared by the ONS simulators: the result tab (a tab on a phone, an overlay on a wide screen),
   the journal code and the buttons under the result. Source of truth: /Volumes/CodeFactory/ons-sim-core (tools/sync.sh).
   Needs the app tokens: --bg, --panel2, --line, --muted, --accent, --red. Markup: #resultTab (.panel-head, #resultClose, .result-body#debrief), #resultTabBtn, #resultBtn. */
#resultTab .result-body { padding: 14px; overflow-y: auto; }
#resultTabBtn[hidden], #resultBtn[hidden] { display: none; }
#resultTab { display: none; }
@media (min-width: 901px) {
  body.result-open #resultTab { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow: hidden; }
  body.result-open #resultTab .result-body { width: min(900px, 100%); margin: 0 auto; flex: 1; }
  #resultTab .panel-head { max-width: 900px; width: 100%; margin: 0 auto; }
}
@media (max-width: 900px) { #resultClose { display: none; } #resultBtn { display: none !important; } }
.runcode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--muted); font-size: 13px; }
.runcode b { color: var(--accent); font-size: 20px; letter-spacing: .18em; font-family: ui-monospace, Menlo, monospace; }
.runcode.bad { border-color: var(--red); color: #ffb3b0; }
.codebox { margin-top: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.codebox input { text-transform: uppercase; letter-spacing: .2em; font-family: ui-monospace, Menlo, monospace; }
.codebox .btn { margin-top: 6px; }
.codemsg { margin-top: 6px; font-size: 13px; color: var(--muted); min-height: 1em; } .codemsg.bad { color: #ffb3b0; }
/* the buttons under the result stay at the bottom edge of the panel, however long the report is */
#resultTab .debrief-actions { position: sticky; bottom: 0; z-index: 2; background: var(--bg); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); margin-top: 8px; border-top: 1px solid var(--line); }
.debrief-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.debrief-actions .btn { width: 100%; min-width: 0; text-align: center; white-space: normal; line-height: 1.2; padding: 9px 10px; }
@media (max-width: 340px) { .debrief-actions { grid-template-columns: 1fr; } }