/* Palette: #629677 green, #F4F6F5 on it, #84AEC2 blue, #B2BD7E olive,
   #6A7DA5 slate. Body copy is #333333. */

/* Body copy is #333333, not Bootstrap's near-black. Overriding the variables
   rather than just `body` catches headings, tables, and form controls, which
   read their colour from these rather than inheriting it. */
:root {
  /* Cards breathe: Bootstrap's 1rem is tight for survey questions. */
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-cap-padding-y: 0.75rem;
  --bs-card-cap-padding-x: 1.5rem;

  --bs-body-color: #333333;
  --bs-body-color-rgb: 51, 51, 51;
  --bs-emphasis-color: #333333;
  --bs-emphasis-color-rgb: 51, 51, 51;
  --bs-heading-color: #333333;
}
body { color: #333333; }

/* Nothing on the page may force the document wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }
.navbar .container { flex-wrap: wrap; row-gap: 0.5rem; }

.nav-link-light {
  color: #F4F6F5;
  text-decoration: none;
  font-size: 0.95rem;
}
.nav-link-light:hover { color: #fff; text-decoration: underline; }

/* Card headers carry the same deep blue as the welcome line; #84AEC2 moved
   up to the "Activities" heading. */
.card-header-accent { background-color: #495D63; color: #F4F6F5; font-weight: 600; }

.activities-heading {
  background-color: #84AEC2;
  color: #333333;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 0.375rem;
}

/* The student greeting sits above "My activities" and outranks it. */
.welcome {
  color: #495D63;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Where an activity is in its life, as a border colour.
   soon = not available yet, live = open or scheduled, past = finished. */
.activity-chip {
  border-left: 5px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fbfcfc;
  padding: 0.75rem 0.9rem;
}
.activity-chip.state-soon { border-left-color: #D9AEBC; }
.activity-chip.state-live { border-left-color: #ADCFDB; }
.activity-chip.state-past { border-left-color: #CBD59F; }

.state-key {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.2rem;
  vertical-align: -1px;
}
.state-key.state-soon { background-color: #D9AEBC; }
.state-key.state-live { background-color: #ADCFDB; }
.state-key.state-past { background-color: #CBD59F; }

/* A question's picture: big enough to read from the back, never taller than
   the room's screen. */
.question-image {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 0.375rem;
}
.present-image { max-height: 220px; }

/* Projector chart: plain flexed columns, readable from the back row. */
.present-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 260px;
  padding-bottom: 2px;
  border-bottom: 2px solid #dee2e6;
}
.present-bar {
  flex: 1 1 0;
  min-height: 0;
  background-color: #84AEC2;
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}
.present-bar.is-answer { background-color: #629677; }

/* Horizontal bars for choice questions. */
.present-row {
  height: 18px;
  background-color: #eef1f3;
  border-radius: 3px;
  overflow: hidden;
}
.present-row-fill {
  height: 100%;
  background-color: #84AEC2;
  transition: width 0.4s ease;
}

/* Section instruction + example: a quiet box, not another alert colour. */
.section-note {
  background-color: #F4F7F5;
  border-left: 4px solid #629677;
  border-radius: 0.25rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
}

/* Two number fields read as one interval, and stay narrow on a wide screen. */
.interval-pair { max-width: 460px; }

.q-number {
  display: inline-block;
  min-width: 1.9rem;
  color: #6A7DA5;
  font-weight: 700;
}

.q-card.is-unanswered { border-left: 4px solid #dee2e6; }
.q-card.is-answered   { border-left: 4px solid #B2BD7E; }
.q-card.is-invalid    { border-left: 4px solid #dc3545; }

/* --- placement slider -------------------------------------------------- */

.placement {
  --track: #e3e6ea;
  --fill: #B2BD7E;
  padding-top: 0.25rem;
  /* Keep the track and its end labels clear of the card edge. */
  padding-right: 1.25rem;
  padding-left: 0.25rem;
}

.placement input[type="range"] {
  width: 100%;
  height: 2.2rem;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}

.placement input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
}
.placement input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
}

.placement input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border-radius: 50%;
  background: #6A7DA5;
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.placement input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6A7DA5;
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Until the student actually moves the slider there is no answer: the thumb
   is hidden so the midpoint cannot be mistaken for a pre-filled response. */
.placement.is-unset input[type="range"]::-webkit-slider-thumb { opacity: 0; }
.placement.is-unset input[type="range"]::-moz-range-thumb { opacity: 0; }

.placement-readout {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6A7DA5;
  margin-top: 0.15rem;
}
.placement.is-unset .placement-readout { color: #6c757d; font-weight: 500; }

.placement-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #adb5bd;
  margin-top: -0.35rem;
}

/* Anchor labels sit at the two ends and wrap internally. Keeping the readout
   on its own line below means three items never fight for one narrow row,
   which is what pushed the page wider than a phone viewport. */
.placement-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 0.1rem;
}
.placement-labels span {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Question body indent: generous on desktop, nearly flush on a phone. */
.q-indent { margin-left: 1.5rem; }
@media (max-width: 576px) {
  .q-indent { margin-left: 0.25rem; }
  .q-card { padding-left: 0.75rem !important; }
  .card-body { padding: 1.15rem; }
}

.likert-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

@media (max-width: 576px) {
  .placement input[type="range"] { height: 2.75rem; }
}