@media (max-width: 767px) {
  .editor-layout { grid-template-columns: 1fr; }
}

body>main.wide {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  height: calc(100vh - 2 * var(--pico-block-spacing-vertical));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.toolbar button {
  height: 2.1rem;
  padding: 0 .9rem;
}

.grade-box {
  display: inline-flex;
  align-items: center;
  height: 2.1rem;
  padding: 0 .75rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  font-size: .85rem;
  background: var(--pico-card-background-color);
}

.grade-box.graded {
  border-color: var(--pico-primary);
  color: var(--pico-primary);
}


td.row-actions,
th.row-actions {
  text-align: right;
  white-space: nowrap;
}

td.row-actions form {
  margin: 0;
  display: inline-block;
}

td.row-actions form + form {
  margin-left: .5rem;
}

#student-table {
  width: 100%;
  table-layout: fixed;
}

#student-table th:first-of-type,
#student-table td:first-of-type,
#student-table th:nth-of-type(2),
#student-table td:nth-of-type(2) {
  width: 300px;
}

#student-table td,
#student-table th {
  padding: .25rem .25rem;
}

#student-table th:first-of-type {
  padding-left: 21px;
}

#student-table th:nth-of-type(2) {
  padding-left: 21px;
}

h1 {
  font-size: 1.75rem;
}

.dashboard-footer summary {
  color: var(--pico-primary);
  text-decoration: underline;
  cursor: pointer;
}

.status-popup {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: .75rem 1rem;
  border-radius: var(--pico-border-radius);
  font-size: .875rem;
  pointer-events: none;
  animation: popup-fade 3s ease forwards;
}

@keyframes popup-fade {
  0% { opacity: 0; transform: translateY(-.5rem); }
  10%, 70% { opacity: 1; transform: none; }
  100% { opacity: 0; visibility: hidden; }
}

.editor-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  margin-top: 1rem;
}

.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pane label {
  font-size: .8rem;
  margin: 0 0 .25rem;
  color: var(--pico-muted-color);
}

.pane > #run-output {
  flex: 1;
  min-height: 0;
}

#code-editor,
#run-output {
  scrollbar-width: none;
}

#run-output,
.test-output {
  background: #1e1e1e;
  color: #d4d4d4;
  font-size: .85rem;
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  margin: 0;
  height: 100%;
  overflow: auto;
  white-space: pre-wrap;
}

.test-output {
  height: auto;
  max-height: 24rem;
}

#code-editor {
  font-family: var(--pico-font-family-monospace, monospace);
  font-size: .85rem;
  line-height: 1.5;
  white-space: pre !important;
  position: relative;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem 1rem 1rem 2.25rem;
  height: 100%;
  overflow: auto;
  background: var(--pico-card-background-color);
}

#code-editor .gutter {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  pointer-events: none;
  user-select: none;
  margin: 0;
  padding: 1rem .375rem 1rem .75rem;
  text-align: right;
  font-family: var(--pico-font-family-monospace, monospace);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--pico-muted-color);
  background: var(--pico-card-background-color);
  border-right: 1px solid var(--pico-muted-border-color);
  white-space: pre;
}

#code-editor .gutter::before {
  content: attr(data-lines);
}

#code-editor:focus {
  outline: none;
}

#code-editor::-webkit-scrollbar,
#run-output::-webkit-scrollbar {
  display: none;
}

.ansi-bold { font-weight: bold; }
.ansi-black { color: #666666; }
.ansi-red { color: #f14c4c; }
.ansi-green { color: #23d18b; }
.ansi-yellow { color: #f5a623; }
.ansi-blue { color: #569cd6; }
.ansi-magenta { color: #c586c0; }
.ansi-cyan { color: #29b8db; }
.ansi-white { color: #d4d4d4; }
.ansi-gray { color: #8e908c; }
.ansi-bright-red { color: #ff6e67; }
.ansi-bright-green { color: #5af78e; }
.ansi-bright-yellow { color: #f4f528; }
.ansi-bright-blue { color: #97cafd; }
.ansi-bright-magenta { color: #e48bff; }
.ansi-bright-cyan { color: #9fedfb; }
.ansi-bright-white { color: #ffffff; }

.token.keyword { color: #8959a8; }
.token.function { color: #4271ae; }
.token.string { color: #718c00; }
.token.number { color: #f5871f; }
.token.operator { color: #3e999f; }
.token.boolean { color: #c82829; }
.token.comment { color: #8e908c; font-style: italic; }
.token.builtin { color: #4271ae; }
.token.class-name { color: #eab700; }

@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-v31-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-v31-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --pico-font-family-sans-serif: "Rubik", system-ui, sans-serif;
}