/* The entry form is one of the surfaces both clients share, so it is drawn in
   the Race Control palette the APK's own theme uses - byte for byte the same
   values, not an approximation of them. The form used to carry its own greys
   and an amber action, which read as a different product beside the APK. */
.tt-manual-shell {
  --tt-surface: #141a22;
  --tt-surface-raised: #10151b;
  --tt-text: #edf2f7;
  --tt-muted: #8793a0;
  --tt-border: #394553;
  --tt-mode-150: #2185e5;
  --tt-mode-200: #e4382c;
  --tt-action: #39dfd0;
  --tt-action-ink: #061513;
  box-sizing: border-box;
  width: min(100%, 44rem);
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--tt-border);
  border-radius: 0.5rem;
  color: var(--tt-text);
  background: var(--tt-surface-raised);
  font-family: system-ui, sans-serif;
}

.tt-manual-shell > h1 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  line-height: 1.1;
  text-align: center;
}

.tt-manual-shell__status {
  min-height: 1.5em;
  margin: 0.75rem 0;
  color: var(--tt-muted);
  text-align: center;
}

/* What the time meant, told once, right under the status line. */
.tt-manual-shell__feedback {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--tt-border, #3b4252);
  border-left-width: 4px;
  border-radius: 0.5rem;
  background: var(--tt-panel, rgba(255, 255, 255, 0.04));
  text-align: left;
}
.tt-manual-shell__feedback[data-outcome="improved"],
.tt-manual-shell__feedback[data-outcome="first"] { border-left-color: #4ade80; }
.tt-manual-shell__feedback[data-outcome="slower"] { border-left-color: #f59e0b; }
.tt-manual-shell__feedback[data-outcome="equal"] { border-left-color: #38bdf8; }
.tt-manual-shell__feedback p { margin: 0 0 0.35rem; }
.tt-manual-shell__feedback p:last-child { margin-bottom: 0; }
.tt-manual-shell__feedback-headline { font-weight: 700; }
.tt-manual-shell__feedback-rank,
.tt-manual-shell__feedback-passed { color: var(--tt-muted); }
.tt-manual-shell__feedback-passed a { color: inherit; font-weight: 600; }
.tt-manual-shell__feedback-rival { text-decoration-style: double; }

.tt-manual-shell__entry {
  width: 100%;
}

.tt-manual-shell__details {
  width: 100%;
  margin-top: 0.75rem;
}

.tt-manual-details {
  padding: 0.75rem;
  border: 1px solid var(--tt-border);
  border-radius: 0.5rem;
  background: var(--tt-surface);
}

/* The section is open, and its heading names the thing rather than listing
   the fields, exactly as the APK does. */
.tt-manual-details__title {
  margin: 0.25rem 0 0.15rem;
  color: var(--tt-text);
  font-size: 1rem;
  font-weight: 800;
}

.tt-manual-details__note {
  margin: 0 0 0.35rem;
  color: var(--tt-muted);
  font-size: 0.875rem;
}

/* The APK sets the rules line in its blue; this is the same sentence. */
.tt-manual-details__rules {
  margin: 0 0 0.75rem;
  color: var(--engine-150, #42a5f5);
  font-size: 0.78rem;
}

.tt-manual-details__laps,
.tt-manual-details__setup {
  display: grid;
  gap: 0.75rem;
}

.tt-manual-details__lap {
  display: grid;
  grid-template-areas:
    "time time"
    "coins mushrooms";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #222a34;
  border-radius: 0.5rem;
}

.tt-manual-details__lap > label:nth-child(1) { grid-area: time; }
.tt-manual-details__lap > label:nth-child(2) { grid-area: coins; }
.tt-manual-details__lap > label:nth-child(3) { grid-area: mushrooms; }

.tt-manual-details__time-display {
  padding-inline: 0;
}

.tt-manual-details__time-display .tt-manual-entry__time-cell {
  width: clamp(1.55rem, 8vw, 2.4rem);
  height: clamp(2.5rem, 11vw, 3.5rem);
}

.tt-manual-details__icon-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tt-manual-details__icon-label img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}

.tt-manual-details__lap label,
.tt-manual-details__coins,
.tt-manual-details__field {
  display: grid;
  gap: 0.25rem;
  color: var(--tt-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

/* The mark sits inside the field, the way the APK draws a leading icon. */
.tt-manual-details__field {
  position: relative;
  display: block;
}

.tt-manual-details__field-mark {
  position: absolute;
  top: 50%;
  left: 0.6rem;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
}

.tt-manual-details__field .tt-manual-details__input {
  padding-left: 2.4rem;
}

/* The word beside a field's mark: 'Used' next to the mushroom, so the row
   reads as a sentence rather than an icon with a number after it. */
.tt-manual-details__field-title {
  color: var(--tt-text);
  font-size: 0.8rem;
  font-weight: 700;
}

.tt-manual-details__hint {
  color: var(--tt-muted);
  font-size: 0.72rem;
  font-weight: 400;
}

/* Four one-tap targets instead of a dropdown, as on the APK. */
.tt-manual-details__mushrooms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  align-content: start;
  color: var(--tt-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.tt-manual-details__mushrooms .tt-manual-details__field-mark {
  position: static;
  transform: none;
}

.tt-manual-details__count {
  flex: 0 0 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--tt-border);
  border-radius: 0.25rem;
  color: var(--tt-text);
  background: var(--tt-surface-raised);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tt-manual-details__count--active {
  border-color: var(--tt-action);
  color: var(--tt-action-ink);
  background: var(--tt-action);
}

.tt-manual-details__count:focus-visible {
  outline: 3px solid var(--tt-action);
  outline-offset: 2px;
}

.tt-manual-details__setup {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.tt-manual-details__input,
.tt-manual-details__select {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--tt-border) 55%, transparent);
  border-radius: 0.5rem;
  color: var(--tt-text);
  background: #18181b;
  font: inherit;
}

.tt-manual-details__input:focus-visible,
.tt-manual-details__select:focus-visible {
  outline: 3px solid var(--tt-action);
  outline-offset: 2px;
}

.tt-manual-shell__output {
  box-sizing: border-box;
  width: 100%;
  max-height: 18rem;
  margin: 1rem 0 0;
  padding: 0.75rem;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--tt-border) 45%, transparent);
  border-radius: 0.5rem;
  color: var(--tt-muted);
  background: #121214;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tt-manual-entry {
  position: relative;
  box-sizing: border-box;
  display: grid;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--tt-border);
  border-radius: 0.75rem;
  background: var(--tt-surface);
}

.tt-manual-entry__modes,
.tt-manual-entry__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.tt-manual-entry__mode,
.tt-manual-entry__clear,
.tt-manual-entry__submit,
.tt-manual-entry__time-display {
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--tt-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tt-manual-entry__mode:first-child {
  border-color: var(--tt-border);
  background: var(--tt-surface);
  color: var(--tt-muted);
}

.tt-manual-entry__mode:last-child {
  border-color: var(--tt-border);
  background: var(--tt-surface);
  color: var(--tt-muted);
}

.tt-manual-entry__mode:first-child[aria-pressed="true"] {
  border-color: var(--tt-mode-150);
  background: var(--tt-mode-150);
  color: #fff;
}

.tt-manual-entry__mode:last-child[aria-pressed="true"] {
  border-color: var(--tt-mode-200);
  background: var(--tt-mode-200);
  color: #fff;
}

.tt-manual-entry__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tt-manual-entry__time-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2rem, 1.5vw, 0.4rem);
  width: 100%;
  padding: 0.25rem;
  border-color: transparent;
  background: transparent;
  cursor: text;
}

.tt-manual-entry__time-cell {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: clamp(1.8rem, 9vw, 2.4rem);
  height: clamp(2.75rem, 13vw, 3.5rem);
  border: 1px solid #8793a0;
  border-radius: 0.25rem;
  background: var(--tt-surface);
  font-size: clamp(1.25rem, 6vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.tt-manual-entry__time-cell:nth-child(2),
.tt-manual-entry__time-cell:nth-child(5) {
  width: 0.75rem;
  border-color: transparent;
  background: transparent;
}

.tt-manual-entry__clear,
.tt-manual-entry__submit {
  color: var(--tt-action-ink);
  background: var(--tt-action);
}

.tt-manual-entry__mode:disabled,
.tt-manual-entry__clear:disabled,
.tt-manual-entry__submit:disabled,
.tt-manual-entry__time-display:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tt-manual-entry__mode:focus-visible,
.tt-manual-entry__clear:focus-visible,
.tt-manual-entry__submit:focus-visible,
.tt-manual-entry__time-display:focus-visible,
.tt-manual-entry__input:focus-visible + .tt-manual-entry__time-display {
  outline: 3px solid var(--tt-action);
  outline-offset: 3px;
}

@media (max-width: 24rem) {
  .tt-manual-shell {
    padding-inline: 0.5rem;
    border-inline: 0;
    border-radius: 0;
  }

  .tt-manual-entry {
    padding-inline: 0.5rem;
  }

  .tt-manual-entry__modes,
  .tt-manual-entry__actions {
    gap: 0.5rem;
  }

  .tt-manual-details__setup {
    grid-template-columns: 1fr;
  }

  .tt-manual-details__lap { gap: 0.5rem; padding-inline: 0.4rem; }
}

/* On a phone the lap stacks the way the APK does: the time, then the coin
   field across the full width, then the four mushroom targets on one row.
   Side by side, the mushroom column was too narrow and broke 0/1/2/3 over
   three lines. */
@media (max-width: 34rem) {
  .tt-manual-details__lap {
    grid-template-areas:
      "time"
      "coins"
      "mushrooms";
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  /* Four equal targets on one row under their label, as the APK draws them.
     Inline, the fourth wrapped onto a line of its own. */
  .tt-manual-details__mushrooms {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .tt-manual-details__mushrooms .tt-manual-details__field-mark { grid-area: 1 / 1 / 2 / 2; }
  .tt-manual-details__mushrooms > span { grid-area: 1 / 2 / 2 / 5; justify-self: start; margin-left: -0.6rem; }
  .tt-manual-details__mushrooms .tt-manual-details__count { grid-row: 2; min-width: 0; }
}