/* Flow Math — styles on top of Bootstrap. */

/* ---------- day activities page ---------- */
/* Everything starts at the left edge, top down: instructions read like a
   page of text, and a task sits where the instructions were. */
.experiment-stage {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.experiment-stage .lead {
  max-width: 40rem;
}

/* One task, large, e.g.  14 + [  ] = 27 */
.task-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3em;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.task-input.form-control {
  width: 3.6ch;
  min-width: 3.6ch;
  padding: 0.05em 0.15em;
  font-size: inherit;
  font-weight: inherit;
  text-align: center;
  border-width: 2px;
}

.task-input.form-control[aria-readonly="true"] {
  background-color: var(--bs-body-bg);
}

/* A box that is not yet its turn, or already submitted: greyed out, but the
   number in it stays readable (Safari would dim it). */
.task-input.form-control:disabled {
  -webkit-text-fill-color: var(--bs-body-color);
}

/* An invisible box that only brings up the numeric keyboard on a phone
   (experiment.js); inside the screen so the page never scrolls to it. */
.keyboard-keeper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;   /* no zoom-in on iOS */
  pointer-events: none;
}

.task-hint {
  min-height: 1.5em;
  margin-top: 1rem;
  color: var(--bs-danger);
}

.task-feedback {
  min-height: 1.6em;
  font-size: 1.4rem;
}

.task-feedback.is-correct { color: var(--bs-success); }
.task-feedback.is-wrong { color: var(--bs-danger); }

.pause-countdown {
  min-height: 1.5em;
  font-size: 1.25rem;
}

.save-status {
  min-height: 1.5em;
  text-align: left;
}

/* ---------- participant dashboard ---------- */
.dashboard-table th,
.dashboard-table td {
  white-space: nowrap;
}

.dashboard-table .day-status-doable {
  font-weight: 600;
}

.dashboard-table .day-status-done td,
.dashboard-table .day-status-not_open td {
  color: var(--bs-secondary-color);
}

/* ---------- admin dashboard ---------- */
.admin-table td,
.admin-table th {
  white-space: nowrap;
}

.admin-table .text-end {
  padding-right: 1.25rem;
}

.status-in_progress { color: var(--bs-primary); }
.status-finished { color: var(--bs-success); }
.status-not_started,
.status-waiting { color: var(--bs-secondary-color); }

.username-placeholder {
  color: var(--bs-secondary-color);
  user-select: none;
}

.username-toggle {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

/* ---------- testers: the bug button (#14) ---------- */
/* Fixed at the bottom right of every page; under the feedback dialog's
   backdrop, which comes later in the page. */
.tester-feedback-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tester-feedback-details {
  max-height: 14rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- landing page proposals (#37) ---------- */
.landing-narrow {
  max-width: 40rem;
}

.landing-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 600;
}

.landing-hero {
  background: var(--bs-tertiary-bg);
}