.screen-checkin {
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
}

.checkin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--tap-target);
}

.checkin-bar-label {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.checkin-bar-spacer {
  width: var(--tap-target);
}

.round-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-round);
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: var(--glyph-close);
  color: var(--ink-body);
}

.round-control-large {
  width: var(--control-round);
  height: var(--control-round);
  font-size: var(--glyph-arrow);
  color: var(--ink);
}

.round-control:disabled {
  color: var(--disabled);
  cursor: default;
}

.date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-18px) 0 var(--space-22px);
}

.date-nav-current {
  text-align: center;
}

.date-nav-title {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-title);
}

.date-nav-subtitle {
  margin-top: var(--space-2px);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--muted);
}

.metric-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-10px);
  list-style: none;
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-14px) var(--space-14px) var(--space-14px) var(--space-18px);
  border-radius: var(--radius-card-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.metric-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.metric-row-name {
  font-size: var(--text-section);
  font-weight: var(--weight-bold);
}

.metric-row-hint {
  margin-top: var(--space-2px);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  color: var(--muted);
}

.thumbs {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
}

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--thumb-width);
  height: var(--thumb-height);
  border-radius: var(--radius-button);
  background: var(--fill-soft);
  color: var(--muted);
  transition: var(--transition-fill);
}

.thumb-good.is-selected {
  background: var(--good);
  color: var(--card);
}

.thumb-bad.is-selected {
  background: var(--bad);
  color: var(--card);
}

.thumb-icon-down {
  transform: rotate(180deg);
}

.note-card {
  margin-top: var(--space-14px);
  padding: var(--space-14px) var(--space-18px);
  border-radius: var(--radius-card-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.note-card:focus-within {
  box-shadow: var(--shadow-card), var(--ring-focus);
}

.note-card-label {
  display: block;
  margin-bottom: var(--space-6px);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.note-card-input {
  display: block;
  width: 100%;
  min-height: var(--note-min-height);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--text-metric);
  line-height: var(--leading-body);
}

.note-card-input::placeholder {
  color: var(--faint);
}

.note-card-submit {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}

.checkin-hint {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4) 0 calc(var(--space-10) + env(safe-area-inset-bottom));
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  color: var(--faint);
}

.checkin-hint.is-error {
  color: var(--bad);
}