.skp-target-filter {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #30251f;
}

.skp-target-filter > small {
  display: block;
  color: #a68c7d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.skp-target-filter .skp-filter-row {
  padding: 9px 0 0;
}

.skp-target-filter .skp-filter-row button {
  min-height: 34px;
  padding: 8px 14px;
  color: #cfc7c2;
  border-color: #51372a;
  font-weight: 700;
}

.skp-target-filter .skp-filter-row button.active {
  color: #fff4ee;
  border-color: #ff6427;
  background: #742d12;
  box-shadow: 0 0 0 1px #ff642733 inset;
}

/* Exercise art comes from both individual files and sprite sheets. Give every
   source the same protected frame so figures are centred and never cropped. */
.skp-exercise-visual {
  background: #070708;
}

.skp-exercise-visual > img {
  box-sizing: border-box;
  padding: 9px;
  object-fit: contain !important;
  object-position: center !important;
  background: #070708;
  transform: scale(calc(var(--sticker-scale, 1) * .9));
  transform-origin: center;
}

.skp-exercise-visual > .skp-sticker-sprite {
  width: calc(100% - 18px) !important;
  height: calc(100% - 18px) !important;
  margin: 9px;
  background-color: #070708;
  transform: scale(calc(var(--sticker-scale, 1) * .9));
  transform-origin: center;
}

/* Today dashboard: keep the current-day marker readable and distinguish the
   real Healthy Facts preview from the training mission beside it. */
.skp-mission-day {
  color: #e8d8cf;
  font-weight: 800;
  letter-spacing: .12em;
}

.skp-fact-title {
  margin: 24px 0 10px;
  color: #f8f3ef;
  font: 800 clamp(1.35rem, 2.6vw, 1.8rem)/1.08 system-ui, sans-serif;
  letter-spacing: -.035em;
}

.skp-fact-copy {
  max-width: 48rem;
  margin: 0 0 22px;
  color: #c5bcb6;
  font-size: 13px;
  line-height: 1.55;
}

/* Keep the vault browsable on phones: compact two-card grid, with a
   one-column fallback only for exceptionally narrow screens. */
@media (min-width: 360px) and (max-width: 760px) {
  .skp-fact-title {
    margin-top: 20px;
    font-size: 1.32rem;
  }

  .skp-fact-copy {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .skp-target-filter .skp-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 10px 0 0;
  }

  .skp-target-filter .skp-filter-row button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    padding: 7px 5px;
    font-size: 8px;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
  }

  .skp-exercise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 0 14px;
  }

  .skp-exercise-grid > button {
    min-width: 0;
    padding: 0 11px 12px;
    border-radius: 10px;
  }

  .skp-exercise-grid .skp-exercise-visual {
    height: 128px;
    margin: 0 -11px 12px;
  }

  .skp-exercise-grid .skp-exercise-visual > img {
    padding: 6px;
  }

  .skp-exercise-grid .skp-exercise-visual > .skp-sticker-sprite {
    width: calc(100% - 12px) !important;
    height: calc(100% - 12px) !important;
    margin: 6px;
  }

  .skp-exercise-grid .skp-exercise-visual > span:not(.skp-sticker-sprite) {
    top: 8px;
    left: 8px;
    padding: 4px 5px;
    font-size: 8px;
  }

  .skp-exercise-grid small {
    font-size: 6px;
    letter-spacing: .06em;
  }

  .skp-exercise-grid h3 {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.18;
  }

  .skp-exercise-grid p {
    min-height: 42px;
    font-size: 10px;
    line-height: 1.38;
    -webkit-line-clamp: 3;
  }

  .skp-exercise-grid .skp-text-button {
    margin-top: 9px;
    font-size: 8px;
  }
}