/**
 * The page around the tool.
 *
 * The tool itself lives in a shadow root and is styled by `src/packages/ui/src/tokens.ts`,
 * which nothing here can reach and which reaches nothing here. This file is for the other
 * three quarters of a tool page: the sentence explaining what it does, the steps, the
 * questions, and the links to the neighbouring tools — all of it ordinary block markup that
 * the active theme styles, or does not.
 *
 * Two rules keep it from being the kind of plugin CSS that ruins a site.
 *
 * **It never sets a colour.** Every border, tint and muted shade is `color-mix` against
 * `currentColor`, so the same file reads correctly on a white page and on the near-black one
 * this plugin was built against, without knowing which it is on and without a dark-mode block
 * that would have to be kept in step with a theme it cannot see.
 *
 * **It never sets the content width.** That is the theme's decision and a plugin overriding it
 * is how a page ends up with two disagreeing columns. The single exception is `.waafaa-tool`
 * itself, which belongs to this plugin: it is capped so that a theme with no constrained
 * layout at all does not stretch a file picker across a 2000px monitor.
 */

/*
 * A card has to be *raised* in both themes, and `currentColor` cannot do that.
 *
 * Every tint here used to be `color-mix` against `currentColor`, so that one file would read
 * correctly on a white page and on a near-black one without knowing which it was on. For text
 * and rules that works. For a **surface** it inverts: `currentColor` is the text colour, so a
 * 5% mix lightens a card on a dark page — raised, correct — and *darkens* it on a light one.
 * On `#f4f7fb` that produced `#e7ebf0` slabs: not a card, a disabled control. Which is exactly
 * what light mode looked like.
 *
 * `light-dark()` resolves against the element's `color-scheme`, which is the page's own
 * declaration of what it is — this theme sets `dark` at `:root` and `light` under
 * `[data-theme="light"]`, and a light theme sets nothing and gets light. That is a better
 * signal than `prefers-color-scheme`, which describes the operating system and not the page,
 * and it is the same mistake `host.ts` was written to undo on the tool itself.
 *
 * Each token is declared twice on purpose. The first is the old `currentColor` derivation and
 * is what a browser without `light-dark()` keeps, since it drops the second as invalid: a
 * washed-out card, which is where this started, rather than no card at all.
 */
.waafaa-tool-page {
  --wtp-brand: var(--waafaa-blue, #0b5fee);
  --wtp-brand: var(--waafaa-blue, light-dark(#0b5fee, #00a6ff));
  --wtp-brand-art: var(--waafaa-gradient, linear-gradient(135deg, #0a68ff 0%, #7c2dff 100%));

  --wtp-line: color-mix(in srgb, currentColor 16%, transparent);
  --wtp-line: light-dark(rgba(24, 48, 86, .20), rgba(140, 160, 208, .32));

  --wtp-line-strong: color-mix(in srgb, currentColor 34%, transparent);
  --wtp-line-strong: light-dark(rgba(24, 48, 86, .34), rgba(150, 170, 220, .48));

  --wtp-muted: color-mix(in srgb, currentColor 70%, transparent);
  --wtp-muted: light-dark(#47546d, #b9c3d8);

  /* A tint of the page, for things that sit *in* it — a code block, a quiet inset. */
  --wtp-soft: color-mix(in srgb, currentColor 5%, transparent);

  /* A surface that sits *on* it. Lighter than the page in both themes, which is the whole
     point: a card reads as raised, never as recessed. */
  --wtp-card: color-mix(in srgb, currentColor 5%, transparent);
  --wtp-card: light-dark(#ffffff, #0d1526);

  /* Light mode gets the shadow that makes "raised" literal; on a near-black page a shadow is
     invisible, and the border does the work instead. */
  --wtp-lift: none;
  --wtp-lift: light-dark(0 1px 2px rgba(7, 17, 31, .05), none);

  --wtp-tool-max: 54rem;
}

/* The mount. Capped and centred; margin above and below so it reads as a distinct object
   rather than as a paragraph that grew. */
.waafaa-tool-page .waafaa-tool {
  max-width: var(--wtp-tool-max);
  margin-block: 2.25rem;
  margin-inline: auto;
}

/*
 * `.wp-block-post-content` is emitted by core's post-content block on every block theme, and
 * `.entry-content` by essentially every classic one. Naming both is what makes this work
 * without knowing which kind of theme is active.
 */
.waafaa-tool-page :is(.wp-block-post-content, .entry-content) {
  line-height: 1.7;
}

/* Vertical rhythm, set once on the flow rather than per element. */
.waafaa-tool-page :is(.wp-block-post-content, .entry-content) > * + * {
  margin-block-start: 1.15em;
}

/* The opening sentence is the page's answer to "is this the right page?" — so it is given
   the size that question deserves. */
.waafaa-tool-page :is(.wp-block-post-content, .entry-content) > p:first-child {
  font-size: 1.075em;
  line-height: 1.65;
  color: var(--wtp-muted);
}

.waafaa-tool-page :is(.wp-block-post-content, .entry-content) h2 {
  margin-block-start: 2.75rem;
  margin-block-end: .9rem;
  font-size: clamp(1.3rem, 1.08rem + .8vw, 1.55rem);
  font-weight: 650;
  letter-spacing: -.018em;
  line-height: 1.25;
}

/* A question in the FAQ. Distinct from the section heading above it without shouting. */
.waafaa-tool-page :is(.wp-block-post-content, .entry-content) h3 {
  margin-block-start: 1.9rem;
  margin-block-end: .45rem;
  font-size: 1.06rem;
  font-weight: 620;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.waafaa-tool-page :is(.wp-block-post-content, .entry-content) :is(ul, ol) {
  padding-inline-start: 1.35em;
  margin-block: .9em;
}

.waafaa-tool-page :is(.wp-block-post-content, .entry-content) li + li {
  margin-block-start: .45em;
}

.waafaa-tool-page :is(.wp-block-post-content, .entry-content) li::marker {
  color: var(--wtp-muted);
}

/*
 * Related tools.
 *
 * The last thing on every page, and the reason somebody visits a second one. Three things had
 * to change before it worked.
 *
 * **It is a rack of cards, not a bulleted list.** As underlined links it reads as a footnote;
 * as cards it reads as an offer, which is what it is.
 *
 * **Every card carries an icon and a line.** "EXIF Viewer" next to "Comment Formatter" next to
 * "JSON Formatter" is a wall of titles that only makes sense to somebody who already knows
 * what those are — which is nobody who has just arrived. The icon says what *kind* of job it
 * is at a glance and the line says what it does; both come from `tools.json`, so the rack
 * cannot describe a page differently from the page itself. `G-07` checks that every icon a
 * page names is drawn down at the bottom of this file.
 *
 * **The selector carries its ancestors.** `.waafaa-tool-page .waafaa-related` is two classes;
 * the generic list rule above is two classes and an element, so it won a specificity contest
 * nobody had noticed and put `padding-inline-start: 1.35em` back on the rack — which is why
 * the cards sat inset from the left of the column and stopped short on the right. Written
 * with the same prefix as the rule it has to beat, the tie goes to source order and the rack
 * lines up with the prose above it.
 */
/*
 * These components own their box model.
 *
 * Nothing else here needed it, because nothing else here has a padded box with a height. The
 * cards do, and without this they are `content-box`: `block-size: 100%` resolves to the grid
 * cell, and then the padding and the border are *added* to it, so every card overflowed its own
 * cell by 29px and the two rows fused into one grey slab with the borders doubled along the
 * seam. A theme reset is not something to rely on — this site's sets `border-box` inside
 * `.waafaa-inner`, which a tool page is not inside.
 */
.waafaa-tool-page :is(.waafaa-tools-grid, .waafaa-tools-index, .waafaa-upgrade, .waafaa-licence-key),
.waafaa-tool-page :is(.waafaa-tools-grid, .waafaa-tools-index, .waafaa-upgrade, .waafaa-licence-key) *,
.waafaa-tool-page :is(.waafaa-tools-grid, .waafaa-tools-index, .waafaa-upgrade, .waafaa-licence-key) *::before {
  box-sizing: border-box;
}

/*
 * The grid of cards, wherever it appears.
 *
 * Two places use it: the rack at the foot of a tool page, and the index at `/tools/`. They are
 * the same object doing the same job — a set of tools offered as cards — so they are one grid
 * and one card, not two that have to be kept looking alike.
 *
 * The selector is written twice for one reason: the rack's `ul` sits directly in the post
 * content, where the generic list rule above — two classes and an element — outranks a plain
 * two-class selector and puts `padding-inline-start` back. The index's `ul` sits inside a
 * `section` of ours and needs no such ancestry. One declaration, two ways in.
 */
.waafaa-tool-page :is(.wp-block-post-content, .entry-content) .waafaa-tools-grid,
.waafaa-tool-page .waafaa-tools-grid {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}

.waafaa-tool-page :is(.wp-block-post-content, .entry-content) .waafaa-tools-grid li,
.waafaa-tool-page .waafaa-tools-grid li {
  margin: 0;
  list-style: none;
}

.waafaa-tool-card {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  block-size: 100%;
  padding: .85rem .95rem;
  border: 1px solid var(--wtp-line);
  border-radius: 14px;
  background: var(--wtp-card);
  box-shadow: var(--wtp-lift);
  text-decoration: none;
  /* Body colour, not link colour. The card is the affordance — a themed blue on top of it
     reads as an unstyled list that happens to have boxes round it. */
  color: inherit;
  transition: border-color 150ms cubic-bezier(.4, 0, .2, 1),
    transform 150ms cubic-bezier(.4, 0, .2, 1),
    background 150ms cubic-bezier(.4, 0, .2, 1);
}

.waafaa-tool-card:hover {
  border-color: color-mix(in srgb, var(--wtp-brand) 45%, transparent);
  background: color-mix(in srgb, var(--wtp-brand) 7%, transparent);
  transform: translateY(-1px);
}

.waafaa-tool-card:focus-visible {
  outline: 2px solid var(--wtp-brand);
  outline-offset: 2px;
}

/*
 * The icon, drawn as a mask rather than an image.
 *
 * A mask takes its colour from what is behind it, so one file of paths serves the light page
 * and the dark one, and the artwork can wear the brand gradient without seventeen coloured
 * SVGs to keep in step. `aria-hidden` on the span in the markup is the other half: the title
 * and the line beneath it already name the link, and a screen reader announcing "image" here
 * would be noise.
 */
.waafaa-tool-card__icon {
  flex: none;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--wtp-brand) 13%, transparent);
}

.waafaa-tool-card__icon::before {
  content: "";
  inline-size: 1.3rem;
  block-size: 1.3rem;
  background: var(--wtp-brand-art);
  -webkit-mask: var(--wtp-ico) center / contain no-repeat;
  mask: var(--wtp-ico) center / contain no-repeat;
}

.waafaa-tool-card__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.waafaa-tool-card__title {
  font-weight: 650;
  letter-spacing: -.012em;
  line-height: 1.3;
}

.waafaa-tool-card__note {
  font-size: .875em;
  line-height: 1.45;
  color: var(--wtp-muted);
}

@media (prefers-reduced-motion: reduce) {
  .waafaa-tool-card { transition: none; }
  .waafaa-tool-card:hover { transform: none; }
}

/*
 * The index at `/tools/`.
 *
 * Grouped rather than listed. Twenty-seven cards in one grid is a wall; four families of five
 * to nine is something a person can scan and stop reading once they have found their thing.
 * The count beside each heading is there so the size of a family is legible before the eye
 * reaches the bottom of it.
 */
.waafaa-tool-page .waafaa-tools-index {
  margin-block-start: 1.5rem;
}

.waafaa-tool-page .waafaa-tools-index__group + .waafaa-tools-index__group {
  margin-block-start: 2.75rem;
}

.waafaa-tool-page .waafaa-tools-index__heading {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin: 0;
  font-size: clamp(1.15rem, 1rem + .55vw, 1.35rem);
  font-weight: 680;
  letter-spacing: -.021em;
  line-height: 1.25;
}

/* A count, not a heading. Set as a label so it reads as metadata beside the name rather than
   as part of it. */
.waafaa-tool-page .waafaa-tools-index__count {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wtp-muted);
  font-variant-numeric: tabular-nums;
}

/* A tier, marked on the card rather than explained in a legend nobody reads. Only Pro pages
   carry it: "free" on twenty-four cards is noise, and free is the assumption anyway. */
.waafaa-tool-card__tier {
  display: inline-block;
  margin-left: .45rem;
  padding: .1rem .4rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--wtp-brand) 16%, transparent);
  color: var(--wtp-brand);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: .1em;
}

/* The artwork. One rule per icon name in `tools.json`; `G-07` fails if a page names one that
   is not here. Paths are 24x24, stroked, so they stay legible at 20px. */
.waafaa-tool-page [data-icon="bold"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5h5.5a3.5 3.5 0 0 1 0 7H7z'/%3E%3Cpath d='M7 12h6.5a3.5 3.5 0 0 1 0 7H7z'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="check"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M8.4 12.3l2.5 2.5 4.7-4.9'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="comment"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3v4l4.5-4H20a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="compress"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v6'/%3E%3Cpath d='M9 6l3 3 3-3'/%3E%3Cpath d='M12 21v-6'/%3E%3Cpath d='M9 18l3-3 3 3'/%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="convert"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13'/%3E%3Cpath d='M14 5l3 3-3 3'/%3E%3Cpath d='M20 16H7'/%3E%3Cpath d='M10 13l-3 3 3 3'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="edit"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.4 3.6a2.1 2.1 0 0 1 3 3L7.5 18.5 3 20l1.5-4.5z'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="erase"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M4.5 19.5L19.5 4.5'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="format"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4a3 3 0 0 0-3 3v2a2 2 0 0 1-2 2 2 2 0 0 1 2 2v2a3 3 0 0 0 3 3'/%3E%3Cpath d='M16 4a3 3 0 0 1 3 3v2a2 2 0 0 0 2 2 2 2 0 0 0-2 2v2a3 3 0 0 1-3 3'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="italic"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h5'/%3E%3Cpath d='M9 20h5'/%3E%3Cpath d='M15 4l-4 16'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="location"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Cpath d='M12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="merge"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v6a3 3 0 0 0 3 3h9'/%3E%3Cpath d='M6 21v-6a3 3 0 0 1 3-3'/%3E%3Cpath d='M15 9l3 3-3 3'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="metadata"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M12 7.4h.01'/%3E%3Cpath d='M12 11v6'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="preview"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="split"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h5'/%3E%3Cpath d='M9 12a3 3 0 0 0 3-3V6h5'/%3E%3Cpath d='M17 3l3 3-3 3'/%3E%3Cpath d='M9 12a3 3 0 0 1 3 3v3h5'/%3E%3Cpath d='M17 15l3 3-3 3'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="text-style"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7V5h9v2'/%3E%3Cpath d='M9.5 5v14'/%3E%3Cpath d='M7.5 19h4'/%3E%3Cpath d='M18 3.5l.8 2.7 2.7.8-2.7.8-.8 2.7-.8-2.7-2.7-.8 2.7-.8z'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="to-pdf"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 11.5v5'/%3E%3Cpath d='M9.8 14.3l2.2 2.2 2.2-2.2'/%3E%3C/svg%3E"); }

/* Text Studio icons — TOOL-026/027/028/029/030, added 2026-09-17. */
.waafaa-tool-page [data-icon="count"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L7 20'/%3E%3Cpath d='M17 4l-2 16'/%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M3 15h16'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="case"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18L7.5 6l4.5 12'/%3E%3Cpath d='M4.4 14.5h6.2'/%3E%3Cpath d='M20.5 12.6v5.4'/%3E%3Cpath d='M20.5 14.2a2.6 2.6 0 1 0 0 3.2'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="clean"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 3.5l-8 8'/%3E%3Cpath d='M9 10l5 5'/%3E%3Cpath d='M12.5 13.5L7 19a2.8 2.8 0 0 1-4-4l5.5-5.5z'/%3E%3Cpath d='M5 21h6'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="lines"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M4 9h10'/%3E%3Cpath d='M4 15h16'/%3E%3Cpath d='M4 19h10'/%3E%3Cpath d='M18 11.5v1'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="list"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11'/%3E%3Cpath d='M9 12h11'/%3E%3Cpath d='M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1.1'/%3E%3Ccircle cx='4.5' cy='12' r='1.1'/%3E%3Ccircle cx='4.5' cy='18' r='1.1'/%3E%3C/svg%3E"); }

/* Encode & Hash icons — TOOL-021/036/037/040/041, added 2026-09-17. */
.waafaa-tool-page [data-icon="code"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8L4 12l4.5 4'/%3E%3Cpath d='M15.5 8L20 12l-4.5 4'/%3E%3Cpath d='M13.5 5.5l-3 13'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="link"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a4 4 0 0 0 5.7.4l3-3A4 4 0 0 0 13 4.7l-1.7 1.7'/%3E%3Cpath d='M14 11a4 4 0 0 0-5.7-.4l-3 3A4 4 0 0 0 11 19.3l1.7-1.7'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="key"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='12' r='3.5'/%3E%3Cpath d='M11.5 12H21'/%3E%3Cpath d='M17.5 12v3'/%3E%3Cpath d='M20.5 12v2'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="hash"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M4 15h16'/%3E%3Cpath d='M10 4l-1.5 16'/%3E%3Cpath d='M17 4l-1.5 16'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="id"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.6-1.6 1.7-2.4 3-2.4s2.4.8 3 2.4'/%3E%3Cpath d='M15 10.5h3.5'/%3E%3Cpath d='M15 13.5h3.5'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="tree"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v13a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M5 10.5h5'/%3E%3Cpath d='M10 4h9'/%3E%3Cpath d='M10 10.5h9'/%3E%3Cpath d='M10 19h9'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="table"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 9v11'/%3E%3Cpath d='M3 14.5h18'/%3E%3C/svg%3E"); }
.waafaa-tool-page [data-icon="diff"] { --wtp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v12'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Cpath d='M4 6h4'/%3E%3Cpath d='M6 4v4'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M18 9v6'/%3E%3Cpath d='M16 18h4'/%3E%3C/svg%3E"); }

/*
 * The upgrade panel — `[waafaa_upgrade]`, on the Pro and Account pages.
 *
 * A card rather than loose paragraphs, and a real button rather than the theme's default
 * element style, because this is the one thing on the site anybody is asked to pay for and it
 * was going out as unstyled text with a grey rectangle under it.
 *
 * The button is the brand gradient, matching the primary action inside every tool — a visitor
 * who has just pressed "Compress" meets the same shape here. White clears 4.5:1 along the
 * whole ramp, which is what allows a gradient to carry a label.
 */
.waafaa-tool-page :is(.waafaa-upgrade, .waafaa-licence-key) {
  margin-block-start: 1.75rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--wtp-line);
  border-radius: 18px;
  background: var(--wtp-card);
  box-shadow: var(--wtp-lift);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
}

.waafaa-tool-page :is(.waafaa-upgrade, .waafaa-licence-key) > * {
  margin: 0;
}

/* The tint says "this is the offer" without a second colour; the Pro card says "you already
   bought this" the same way, so the two never look like the same invitation. */
.waafaa-tool-page :is(.waafaa-upgrade--pro, .waafaa-licence-key--has-key) {
  border-color: color-mix(in srgb, var(--wtp-brand) 34%, transparent);
  background: color-mix(in srgb, var(--wtp-brand) 7%, transparent);
}

.waafaa-tool-page :is(.waafaa-upgrade, .waafaa-licence-key) a:not(.wp-element-button) {
  color: var(--wtp-brand);
  text-underline-offset: 2px;
}

.waafaa-tool-page :is(.waafaa-upgrade, .waafaa-licence-key) .wp-element-button {
  display: inline-block;
  padding: .8rem 1.5rem;
  border: 0;
  border-radius: 12px;
  background: var(--wtp-brand-art);
  color: #fff;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  /* A gradient does not interpolate between two values, so hover is a filter and a shadow —
     both of which animate — rather than a background swap that would snap. */
  transition: filter 150ms cubic-bezier(.4, 0, .2, 1),
    box-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}

.waafaa-tool-page :is(.waafaa-upgrade, .waafaa-licence-key) .wp-element-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--wtp-brand) 70%, transparent);
}

.waafaa-tool-page :is(.waafaa-upgrade, .waafaa-licence-key) .wp-element-button:focus-visible {
  outline: 2px solid var(--wtp-brand);
  outline-offset: 3px;
}

/* The key is a value to be selected and pasted, so it is set like one — wide enough to hold a
   long key, wrapping rather than overflowing the card on a phone. */
.waafaa-tool-page .waafaa-licence-key code {
  display: block;
  padding: .7rem .85rem;
  border: 1px solid var(--wtp-line);
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9375rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* The line about who takes the payment. Present tense, small, and never the first thing read. */
.waafaa-tool-page :is(.waafaa-upgrade, .waafaa-licence-key) small {
  display: block;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--wtp-muted);
  max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
  .waafaa-tool-page :is(.waafaa-upgrade, .waafaa-licence-key) .wp-element-button { transition: none; }
}

/* An editor-only notice from the block, when a slug is no longer declared. */
.waafaa-toolkit-notice {
  padding: .75rem 1rem;
  border: 1px dashed var(--wtp-line-strong, currentColor);
  border-radius: 8px;
  font-size: .9em;
}



/*
 * The `/tools/` hub: hero, category jump links, and a calmer card grid.
 *
 * The hero is rendered by `[waafaa_tools]` itself (see class-tools-index.php), so the page's
 * own leading heading and paragraph, written once at creation, are hidden while it is there.
 * `:has()` keeps that conditional: a page using the shortcode without the hero keeps its copy.
 */
.waafaa-tool-page main:has(> .waafaa-tools-index > .waafaa-tools-hero) > h1:first-child,
.waafaa-tool-page main:has(> .waafaa-tools-index > .waafaa-tools-hero) > h1:first-child + p {
  display: none;
}

.waafaa-tool-page .waafaa-tools-index {
  margin-block-start: 0;
}

.waafaa-tools-hero {
  position: relative;
  isolation: isolate;
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--wtp-line);
  border-radius: 28px;
  background: var(--wtp-card);
  text-align: center;
  overflow: hidden;
}

/* Two soft brand glows behind the copy: colour without an image to download. */
.waafaa-tools-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 18rem at 50% -10%, color-mix(in srgb, var(--wtp-brand) 22%, transparent), transparent 70%),
    radial-gradient(22rem 14rem at 100% 100%, color-mix(in srgb, #7c2dff 16%, transparent), transparent 70%);
  pointer-events: none;
}

.waafaa-tools-hero__eyebrow {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .35rem .8rem;
  border: 1px solid color-mix(in srgb, var(--wtp-brand) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wtp-brand) 10%, transparent);
  color: var(--wtp-brand);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.waafaa-tool-page .waafaa-tools-hero__title {
  max-inline-size: 18ch;
  margin: 0 auto;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}

.waafaa-tools-hero__title span {
  background: var(--wtp-brand-art);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.waafaa-tools-hero__lede {
  max-inline-size: 38rem;
  margin: 1.1rem auto 0;
  color: var(--wtp-muted);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.waafaa-tool-page .waafaa-tools-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 2rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--wtp-muted);
  font-size: .9rem;
}

.waafaa-tool-page .waafaa-tools-hero__stats li {
  margin: 0;
}

.waafaa-tools-hero__stats strong {
  margin-inline-end: .3rem;
  color: var(--wtp-brand);
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.waafaa-tools-hero__jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-block-start: 1.75rem;
}

.waafaa-tools-hero__jump a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-block-size: 2.5rem;
  padding: .45rem .95rem;
  border: 1px solid var(--wtp-line);
  border-radius: 999px;
  background: var(--wtp-card);
  color: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.waafaa-tools-hero__jump a:hover {
  border-color: color-mix(in srgb, var(--wtp-brand) 50%, transparent);
  background: color-mix(in srgb, var(--wtp-brand) 8%, transparent);
}

.waafaa-tools-hero__jump a:focus-visible {
  outline: 2px solid var(--wtp-brand);
  outline-offset: 2px;
}

.waafaa-tools-hero__jump span {
  color: var(--wtp-muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

/* Group headings: name, count pill, and a rule running to the edge. The fixed site header is
   74px, so a jump link must not land the heading underneath it. */
.waafaa-tool-page .waafaa-tools-index__group {
  scroll-margin-top: 100px;
}

.waafaa-tool-page .waafaa-tools-index__group + .waafaa-tools-index__group {
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

.waafaa-tool-page .waafaa-tools-index__heading {
  align-items: center;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  font-weight: 750;
}

.waafaa-tool-page .waafaa-tools-index__heading::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--wtp-line);
}

.waafaa-tool-page .waafaa-tools-index__count {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wtp-brand) 10%, transparent);
  color: var(--wtp-brand);
  letter-spacing: .03em;
}

.waafaa-tool-page .waafaa-tools-index .waafaa-tools-grid {
  gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}

.waafaa-tools-index .waafaa-tool-card {
  gap: .9rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
}

.waafaa-tools-index .waafaa-tool-card:hover {
  border-color: color-mix(in srgb, var(--wtp-brand) 50%, transparent);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--wtp-brand) 70%, transparent);
  transform: translateY(-2px);
}

.waafaa-tools-index .waafaa-tool-card__icon {
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 12px;
}

@media (max-width: 600px) {
  .waafaa-tools-hero {
    border-radius: 20px;
  }

  .waafaa-tool-page .waafaa-tools-hero__stats {
    gap: .5rem 1.1rem;
  }

  .waafaa-tools-hero__jump a {
    font-size: .85rem;
    padding-inline: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .waafaa-tools-index .waafaa-tool-card:hover { transform: none; }
}