/* Animal-shaped runs in the /garden/ sidebar.
   Every colour here is an --rs- token from reading-stats.css, which dark.css
   re-steps, so this file needs no dark-mode counterpart. */

.sk {
  /* Strava's own orange, not the site's darker one, since these are Strava
     tracks. It clears 3:1 against both the white card and the dark card
     (3.4:1 and 3.6:1), so unlike the other accents here it needs no dark-mode
     re-step. */
  --sk-trace: #fc4c02;

  background: var(--rs-surface);
  border: 1px solid var(--rs-grid);
  border-radius: 10px;
  padding: 0.85rem 0.9rem 0.9rem;
  margin-top: 1.25rem;
  /* Keeps the panel off the sketch cards in the column beside it, the same gap
     the /map/ sidebar panels use. */
  margin-right: 1.75rem;
}

/* Below the Bootstrap lg breakpoint the sidebar stacks above the cards instead
   of sitting beside them, so the gap becomes dead space on the right. */
@media (max-width: 991.98px) {
  .sk { margin-right: 0; }
}

.sk-heading {
  font-family: var(--summary, 'Frank Ruhl Libre'), serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--rs-ink);
  margin: 0 0 0.4rem;
}

.sk-intro {
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--rs-muted);
  margin: 0 0 0.7rem;
}

/* Two per row: the sidebar is a quarter of the page, so a third column would
   shrink the outlines past the point where the animal is readable. */
.sk-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem 0.6rem;
  margin: 0;
  padding: 0;
}

.sk-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* style.css sets a global `ul > li { font-size: large }`, so the size has to
     be restated on the item itself rather than inherited from the panel. */
  font-size: 0.62rem;
}

.sk-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* A square frame regardless of the run's proportions, so a long thin shape and
   a squat one still line up on a grid. The padded viewBox in the partial keeps
   the stroke off the edges. */
.sk-svg {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: var(--rs-surface-2, transparent);
  border: 1px solid var(--rs-grid);
  border-radius: 6px;
}

.sk-path {
  fill: none;
  stroke: var(--sk-trace);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sk-link:hover .sk-path { stroke-width: 2; }

.sk-name {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.66rem;
  line-height: 1.25;
  color: var(--rs-ink-2);
}

.sk-link:hover .sk-name { color: var(--sk-trace); }

.sk-meta {
  font-family: var(--rs-sans);
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  color: var(--rs-muted);
}

.sk-when::before { content: "\00b7\00a0"; }