/* obs-detail.css – detaljsida för en observation. */

/* Metarad under rubriken: datum och vem som genomförde */
.obs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.obs-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Uppgifter: tre rutor bredvid varandra, etikett ovanför värde */
.obs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.obs-fact {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 24px + var(--space-3));
  background: var(--color-bg);
}

/* Ikonen ligger i <dt> men placeras i en egen kolumn till vänster */
.obs-fact__icon {
  position: absolute;
  top: calc(var(--space-5) + 2px);
  left: var(--space-5);
  width: 24px;
  font-size: var(--font-size-md);
  text-align: center;
}

.obs-fact__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.obs-fact__value {
  margin-top: 2px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

/* Svarslista: fråga till vänster, svar till höger */
.obs-answers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.obs-answers li + li {
  border-top: 1px solid var(--color-field-border);
}

.answer {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 72px;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.answer--yes {
  background: var(--color-yes-bg);
  color: var(--color-yes);
}

.answer--no {
  background: var(--color-no-bg);
  color: var(--color-no);
}

.obs-comment {
  max-width: 65ch;
  line-height: 1.6;
}

/* Föregående / Nästa */
.obs-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.obs-pager__link {
  display: grid;
  gap: 2px;
  text-decoration: none;
}

.obs-pager__link--next {
  margin-left: auto;
  text-align: right;
}

.obs-pager__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.obs-pager__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}