@import url('app.css');
@import url('login-flow.css');
@import url('assessments.css');

#question-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  width: min(60em, 95%);
  margin: 20px auto 20px;
  padding: 20px;
  border: 1px solid grey;
  background: #ddaadd;
}

input[type='radio'] {
  display: inline-block;
  margin-top: 4px; /* push it down a bit from the top we get with flex-start */
}

input[type='text'] {
  width: 100%;
  padding: 0.5em;
  margin-top: 4px; /* push it down a bit from the top we get with flex-start */
}

textarea {
  width: 100%;
  height: 10em;
  padding: 0.5em;
}


.save-notice {
  padding: 0;
  text-align: right;
  font-style: italic;
}

/* The server refused this answer (quiz-answers.ts's 'error' state): still
   buffered and retrying, but the student has to see it. */
.save-notice.error {
  color: #b00020;
  font-weight: bold;
}

p {
  padding: 0 0 0.5em;
}

.questions {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#questions .choices > p,
#questions .mchoices > p
{
  padding: 0.5em 0;
}

.correct {
  border: 2px solid green;
  margin: 3px 0;
}

.range-control {
  margin-top: 4px;
}

.range-slider {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75em;
}

.range-slider input[type='range'] {
  flex: 1;
  min-width: 0;
  padding: 0;
}

.range-label {
  flex: 0 1 auto;
}

.range-label-low {
  text-align: right;
}

.range-label-high {
  text-align: left;
}

.range-value {
  display: block;
  text-align: center;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

#show-answers {
  display: none;
  font-weight: 300;
}

label {
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 0.5em;
  margin-left: 1em;
  align-items: flex-start;
}

#questions p.gloss {
  margin: 1em;
  font-style: italic;
}

div.codeanswer {
  margin-top: 0.5em;
}

div.codeanswer > div.editor {
  background: white;
}

div.canonical {
  margin-top: 1em;
}

div.canonical p {
  padding: 3px;
}

div.codeStatusBar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 0;
  text-align: right;
}

/* The Format/Reset button group (Reset only on questions with starter code). */
div.codeStatusBar > .buttons {
  display: flex;
  gap: 8px;
}

div.codeStatusBar button {
  padding: 3px;
}

/* Transient "Can't format" flash after the buttons (form-assessment.ts). */
div.codeStatusBar .format-notice {
  align-self: center;
  font-style: italic;
  color: #b02a37;
}

label > span:has(pre) {
  flex: 1;
}

span.gap {
  display: inline-block;
  width: 5em;
  border-bottom: 1px solid black;
}

table.uml-diagram {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: monospace;
  margin: 0.5em 0;
}

table.uml-diagram th {
  border-bottom: 1px solid black;
  padding: 2px 8px;
  text-align: center;
  font-weight: bold;
}

table.uml-diagram td {
  padding: 1px 4px;
}

table.uml-diagram .uml-separator td {
  border-top: 1px solid black;
}

/* The not-saving banner (logged out / family view / quiz closed —
   form-assessment.ts showQuizNotice). Sticky so a student scrolled deep
   into the quiz still sees it the moment saving stops working. */
#quiz-notice {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff3cd;
  border: 1px solid #e0c060;
  border-radius: 4px;
  padding: 0.6em 1em;
  font-weight: bold;
}

#quiz-notice a {
  font-weight: bold;
}

/* The /m/ material preview (data-preview on #questions): nothing is saved,
   so the per-question save-state notices are noise. The banner above
   explains once. */
#questions[data-preview] .save-notice {
  display: none;
}

/* Preview-only: a question the material references but the overlay has no
   bank payload for (incomplete content push). Rendered with the
   instructions, outside #questions. */
.preview-missing {
  background: #f8d7da;
  border: 1px solid #d9838d;
  border-radius: 4px;
  padding: 0.6em 1em;
  font-weight: bold;
}

/* The viewer's frozen-grade notice (plans/grade-state-machine.md). */
.grade-finalized-note {
  background: #eef4fb;
  border-left: 3px solid #1565c0;
  color: #1565c0;
  padding: 0.4em 0.8em;
}