/**
 * Favourites.
 *
 * Two small pieces: a star button that sits in the tool page hero, and a strip
 * that appears at the top of the home page. The strip is hidden outright when
 * the list is empty rather than collapsed to nothing, so a visitor with no
 * favourites sees no gap and no stray heading.
 */

.sk-fav-anchor { position: relative; }

/* Spans the whole anchor and pushes the star to the right with flexbox.
   Sizing this box by "right: 0" alone did not work: the theme applies its own
   width rules to children of .entry-content, so the box came out stretched
   with the star stranded at its left, 766px from where it belonged. Flex
   alignment does not care what width the theme decides this box has, which is
   why the star's position is expressed as justify-content rather than as an
   offset. Pointer events are off for the span and back on for its children, so
   the empty middle of the strip is not sitting over the page swallowing taps. */
.sk-fav-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

.sk-fav-wrap > * { pointer-events: auto; }

.sk-fav-star {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--sk-line);
  border-radius: 999px;
  background: var(--sk-surface);
  color: var(--sk-muted);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sk-fav-star:hover { border-color: var(--sk-accent); color: var(--sk-accent); background: var(--sk-accent-soft); }

.sk-fav-star:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }

.sk-fav-star.is-on {
  color: #b8860b;
  border-color: #e0c060;
  background: #fdf6e0;
}

html[data-sk-scheme="dark"] .sk-fav-star.is-on { color: #ffd970; border-color: #6b5a20; background: #2e2810; }

/* The label under the star is for a screen reader and for anyone who needs the
   reason stated; it takes no space when empty. */
.sk-fav-status {
  position: absolute;
  top: 100%;
  right: 0;
  width: 240px;
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--sk-muted);
  text-align: right;
}

.sk-fav-status:empty { display: none; }

/* ------------------------------------------------------------------ Strip */

.sk-fav-strip {
  margin: 0 0 30px;
  padding: 18px 20px;
  border: 1px solid var(--sk-line);
  border-radius: 20px;
  background: var(--sk-surface);
}

.sk-fav-strip[hidden] { display: none; }

.sk-fav-striphead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.sk-fav-striptitle { margin: 0; font-size: 1.15rem; color: var(--sk-ink); }
.sk-fav-striphint { margin: 0; color: var(--sk-muted); font-size: 0.82rem; }

.sk-fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sk-fav-item { position: relative; display: flex; }

.sk-fav-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 40px 13px 14px;
  border: 1px solid var(--sk-line);
  border-radius: 13px;
  background: var(--sk-soft);
  color: inherit !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sk-fav-link:hover { border-color: var(--sk-accent); background: var(--sk-accent-soft); }
.sk-fav-link:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }

.sk-fav-name { display: block; font-weight: 700; font-size: 0.95rem; color: var(--sk-ink); }

.sk-fav-blurb {
  display: block;
  margin-top: 3px;
  color: var(--sk-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.sk-fav-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.sk-fav-remove:hover { border-color: #b3261e; color: #b3261e; background: #fff6f5; }
.sk-fav-remove:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }

html[data-sk-scheme="dark"] .sk-fav-remove:hover { background: #2a1512; color: #ffb4a9; border-color: #6b2a24; }

/* ----------------------------------------------------------------- Narrow */

@media (max-width: 640px) {
  /* On a phone the star would land on top of the hero text at this size, so it
     drops below it and becomes a normal full-width control. */
  .sk-fav-anchor { padding-top: 0; }

  .sk-fav-wrap {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .sk-fav-star { min-width: 0; flex: 0 0 auto; padding: 8px 14px; }

  .sk-fav-status {
    position: static;
    width: auto;
    flex: 1 1 auto;
    margin: 0;
    text-align: left;
    font-size: 0.82rem;
  }

  .sk-fav-grid { grid-template-columns: minmax(0, 1fr); }
  .sk-fav-strip { padding: 16px 14px; border-radius: 16px; }
}