/* The home page tool sections: Popular Tools, and the category browser.
 *
 * Layered on top of the existing colour scheme rather than replacing it. Colours
 * come from the same custom properties the rest of the site uses, so the accent a
 * visitor picks in the Appearance control reaches these cards without a second
 * rule.
 *
 * The one thing this file does define for itself is its own surface and ink
 * tokens, because the variables it would otherwise borrow are scoped to the tool
 * pages. --sk-surface is declared on .sk-media-page and .sk-rewrite-wrap, and the
 * home page is neither, so a rule reading var(--sk-surface, #fff) silently fell
 * back to white: in dark mode that painted white cards, and a white search box,
 * on a near-black page, with text inherited from the page so light text landed
 * on a white card and vanished. Scoping the tokens here is what makes the dark
 * scheme work on this page at all.
 *
 * Layout is mobile first. The chips become a horizontal strip on a phone because
 * a phone has one column, and the same markup becomes a sidebar beside the grid
 * from 1024px up. The order of the categories is never re-sorted by a media
 * query, so a visitor who learns "Images is third" on a phone finds it third on
 * a desktop.
 */

:root {
  --sk-tb-surface: #ffffff;
  --sk-tb-ink: #22303a;
  --sk-tb-muted: #5f7180;
  --sk-tb-line: #dce4ea;
  /* The home page names its accent --sk-purple, and the appearance tint
     re-points that at whatever the visitor chose. The Appearance control's own
     --sk-accent is the fallback for anywhere else this block is used. */
  --sk-tb-accent: var(--sk-purple, var(--sk-accent, #3b6ea5));
  --sk-tb-accent-soft: var(--sk-accent-soft, rgba(104, 67, 139, 0.12));
  --sk-tb-accent-line: var(--sk-accent-line, rgba(104, 67, 139, 0.3));
}

html[data-sk-scheme="dark"] {
  --sk-tb-surface: #1f1b2b;
  --sk-tb-ink: #e6edf3;
  --sk-tb-muted: #9fb0be;
  --sk-tb-line: #33414d;
}

/* -------------------------------------------------------------- shared bits */

.sk-tb-section {
  margin: 34px 0 0;
}

.sk-tb-section-head {
  margin: 0 0 14px;
}

.sk-tb-section-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--sk-tb-ink);
}

.sk-tb-section-sub {
  margin: 3px 0 0;
  font-size: 0.95rem;
  color: var(--sk-tb-muted);
}

.sk-tb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One card, used by both sections. The whole card is the link, so there is no
   nested interactive element to tab through twice.

   height:100% is insurance, not a fix. It is inert against the blurbs as they
   stand: across 1440, 1024, 768 and 390 the number of rows whose cards differ
   in height is zero, with or without this line, because a row takes the height
   of its tallest card and the blurbs in any one row happen to wrap alike. It
   matters the moment a row mixes a long blurb with a short one, which the
   catalogue data allows at any time, and costs one declaration.

   What it does not do is even out the rows. They currently run 130, 90 x 8,
   110 on a desktop catalogue, and 236, 140, 159, 140, 121 in the mobile popular
   grid, and no per-row rule can change that. Making every card identical means
   either a fixed height for all of them or a line clamp on the blurb, and the
   clamp hides the end of the longer blurbs -- for some tools the blurb is the
   only description there is. That trade is a content decision, not a styling
   one, so it has not been made here. */
.sk-tb-card {
  display: flex;
  align-items: flex-start;
  height: 100%;
  gap: 11px;
  min-height: 44px;
  padding: 13px 14px;
  text-decoration: none;
  color: var(--sk-tb-ink);
  border: 1px solid var(--sk-tb-accent-line);
  border-radius: 12px;
  background: var(--sk-tb-surface);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sk-tb-card:hover,
.sk-tb-card:focus-visible {
  border-color: var(--sk-tb-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 30, 40, 0.08);
}

html[data-sk-scheme="dark"] .sk-tb-card:hover,
html[data-sk-scheme="dark"] .sk-tb-card:focus-visible {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* The focus ring is the site's own accent, set once in the tint file. This rule
   only makes sure the card does not suppress it. */
.sk-tb-card:focus-visible {
  outline: 2px solid var(--sk-tb-accent);
  outline-offset: 2px;
}

.sk-tb-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--sk-tb-accent);
  background: var(--sk-tb-accent-soft);
}

.sk-tb-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.sk-tb-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sk-tb-card-name {
  font-weight: 650;
  line-height: 1.3;
  font-size: 0.98rem;
  color: var(--sk-tb-ink);
}

.sk-tb-card-desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--sk-tb-muted);
}/* ------------------------------------------------------------- popular tools */

.sk-tb-popular-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ------------------------------------------------------------------- search */

.sk-tb-search-row {
  margin: 0 0 14px;
}

/* Visible to a screen reader, not to the eye. The placeholder says "Search the
   tools" and the visible label says "Search tools", which is the difference
   between a labelled control and a grey box. */
.sk-tb-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sk-tb-search {
  position: relative;
  display: flex;
  align-items: center;
}

.sk-tb-search-icon {
  position: absolute;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--sk-tb-accent);
  opacity: 0.8;
  pointer-events: none;
}

/* The extra class on the selector is deliberate. The theme styles form controls
   through input[type="search"], which is more specific than a single class, so a
   plain .sk-tb-search-input rule lost the padding and the magnifier icon ended up
   sitting on top of the placeholder text. Two classes beats the attribute
   selector without needing !important, which would then also have to beat the
   dark scheme's own input rules. */
.sk-tb-search input.sk-tb-search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px 10px 38px;
  font: inherit;
  font-size: 1rem;
  color: var(--sk-tb-ink);
  background: var(--sk-tb-surface);
  border: 1px solid var(--sk-tb-line);
  border-radius: 11px;
  -webkit-appearance: none;
  appearance: none;
}

.sk-tb-search input.sk-tb-search-input::placeholder {
  color: var(--sk-tb-muted);
  opacity: 1;
}

.sk-tb-search input.sk-tb-search-input:focus-visible {
  outline: 2px solid var(--sk-tb-accent);
  outline-offset: 1px;
  border-color: var(--sk-tb-accent);
}

.sk-tb-status {
  margin: 7px 0 0;
  font-size: 0.85rem;
  min-height: 1.3em;
  color: var(--sk-tb-muted);
}

.sk-tb-empty {
  margin: 16px 0 0;
  padding: 18px;
  text-align: center;
  border: 1px dashed var(--sk-tb-line);
  border-radius: 12px;
  color: var(--sk-tb-muted);
}

/* ---------------------------------------------------------------- categories */

.sk-tb-layout {
  display: block;
}

.sk-tb-cats {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  /* Scrolls sideways on a phone so eight categories do not eat the whole
     screen. The row is the navigation, and a navigation that needs a second row
     to be usable is a navigation that hides half its items. */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  /* Bleed to the edge so a chip can be scrolled fully into view rather than
     clipped by the container's padding. */
  margin-inline: -4px;
  padding-inline: 4px;
  scrollbar-width: thin;
}

.sk-tb-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 12px;
  text-align: left;
  font: inherit;
  color: var(--sk-tb-ink);
  background: var(--sk-tb-surface);
  border: 1px solid var(--sk-tb-line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sk-tb-chip:hover {
  border-color: var(--sk-tb-accent);
}

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

.sk-tb-chip.is-active {
  background: var(--sk-tb-accent-soft);
  border-color: var(--sk-tb-accent);
}

.sk-tb-chip-icon {
  display: grid;
  place-items: center;
  color: var(--sk-tb-accent);
  flex: 0 0 auto;
}

.sk-tb-chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.sk-tb-chip-name {
  font-weight: 650;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* The hint is what tells a first-time visitor what a category contains, so it
   is shown on a phone where there is room for it. */
.sk-tb-chip-hint {
  font-size: 0.78rem;
  color: var(--sk-tb-muted);
  white-space: nowrap;
}

.sk-tb-chip-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  border-radius: 999px;
  color: var(--sk-tb-accent);
  background: var(--sk-tb-accent-soft);
}

.sk-tb-item[hidden] {
  display: none;
}

/* -------------------------------------------------------------- 768px and up */

@media (min-width: 768px) {
  .sk-tb-grid,
  .sk-tb-popular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------- 1024px and up */

@media (min-width: 1024px) {
  /* Three columns, not four.
   *
   * This grid holds nine cards, because the AI Prompt Optimizer joined the
   * featured set. At four columns that is 4 + 4 + 1, and a last row holding a
   * single card against an otherwise full grid reads as a mistake rather than
   * as a grid. Three columns divides nine exactly, so the block is 3 x 3 and
   * needs no special-casing for the last row. The full browser list below it
   * keeps four columns at this width, because 36 items divide into nine full
   * rows of four. */
  .sk-tb-popular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Sidebar beside the grid. Same buttons, same order, laid out vertically. */
  .sk-tb-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }

  .sk-tb-cats {
    flex-direction: column;
    overflow-x: visible;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 80px;
  }

  .sk-tb-chip {
    width: 100%;
  }

  .sk-tb-chip-hint {
    white-space: normal;
  }

  .sk-tb-results .sk-tb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ accessibility */

@media (prefers-reduced-motion: reduce) {
  .sk-tb-card,
  .sk-tb-chip {
    transition: none;
  }
  .sk-tb-card:hover,
  .sk-tb-card:focus-visible {
    transform: none;
  }
}

/* Narrow cards.
 *
 * At 360px a two column card leaves about 83px for the name after the icon and
 * the padding. "Background" is wider than that, and the theme sets
 * overflow-wrap: break-word, so the word was split mid-letter as
 * "Backgroun / d Remover". Tightening the icon and the padding gives the name
 * enough room to break between words, which is where a reader expects it, and
 * the name only steps down a little so the two columns still look even.
 *
 * The two column grid stays. It was asked for, and it fits: a single column here
 * would push the second row of Popular Tools another 130px down the page. */
@media (max-width: 430px) {
  .sk-tb-card {
    gap: 9px;
    padding: 11px 12px;
  }

  .sk-tb-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .sk-tb-card-icon .sk-tb-icon {
    width: 16px;
    height: 16px;
  }

  .sk-tb-card-name {
    font-size: 0.92rem;
  }

  .sk-tb-card-desc {
    font-size: 0.82rem;
  }
}

/* Phones: every card the same height, with an ellipsis where the blurb is cut.
 *
 * At 390px the catalogue is one column, so each card is its own row and the
 * heights run 83 / 102 / 64px with nothing to even them out. A one column grid
 * cannot stretch to a common height, so the text is held to a fixed number of
 * lines instead: -webkit-line-clamp cuts it and adds the ellipsis, and the
 * min-height on the same element reserves those lines so a short blurb is padded
 * up rather than making its card shorter.
 *
 * The two grids are given different budgets because they are different widths at
 * this breakpoint. The catalogue is one column, so a name fits on one line and
 * the blurb gets two. The popular grid is two columns of about 169px, where
 * "Punctuation Fixer" already wraps, so the name gets two lines and the blurb
 * three. Measured line boxes: the name is 1.3em, the blurb 1.45em.
 *
 * Above this width the cards sit three or four to a row and already match within
 * each row, so clamping there would only hide blurb text. */
@media (max-width: 767px) {
  .sk-tb-grid:not(.sk-tb-popular-grid) .sk-tb-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.3em;
  }

  .sk-tb-grid:not(.sk-tb-popular-grid) .sk-tb-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
  }

  .sk-tb-popular-grid .sk-tb-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
  }

  .sk-tb-popular-grid .sk-tb-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.35em;
  }
}