/* FastTool front door: home page (/), tool directory (/tools/) and updates (/updates/), 2026-11-06, reworked 2026-11-12.
   Load after /css/ft-shell-20261106.css: every colour, font size and space here is one of its tokens.
   The lists inside these pages are written by scripts/value_expansion_directory_20261106.mjs; this file names no tool.
   /tools/ and /updates/ use the shell's text-page head (.ft-pagehead) and /updates/ its prose (.ft-prose): nothing here
   resets margins inside .ft-prose. Every fd-* element sets its own margin instead of a page-wide reset.
   Builder's manual for the frame: work/shell/STYLEGUIDE.md */

/* 1. Page base ---------------------------------------------------------------------------- */
.fd-main { display: block; padding-bottom: var(--ft-space-8); }
.fd-chips, .fd-grid, .fd-quick, .fd-index__list, .fd-pop__list { margin: 0; padding: 0; list-style: none; }

/* 2. Home hero: promise, search and task links; the category list beside it on wide screens -- */
.fd-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-space-6); padding-block: var(--ft-space-6) var(--ft-space-2); }
.fd-hero__main { min-width: 0; }
.fd-hero__title {
  max-width: 18em;
  margin: 0;
  color: var(--ft-ink);
  font-size: var(--ft-text-h1);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.fd-hero__lede {
  max-width: 44rem;
  margin: var(--ft-space-3) 0 0;
  color: var(--ft-ink-2);
  font-size: var(--ft-text-lg);
  line-height: 1.5;
}
.fd-trust {
  display: flex;
  align-items: flex-start;
  gap: var(--ft-space-2);
  margin: var(--ft-space-3) 0 0;
  color: var(--ft-ink-2);
  font-size: var(--ft-text-sm);
  font-weight: 500;
  line-height: 1.45;
}
.fd-trust__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--ft-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 62rem) {
  .fd-hero { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); gap: var(--ft-space-7); align-items: start; }
}

/* Category list (home): one row per category with what is in it and how many tools. */
.fd-index {
  min-width: 0;
  padding: var(--ft-space-4) var(--ft-space-4) var(--ft-space-2);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-l);
  background: var(--ft-surface);
}
.fd-index__title { margin: 0 0 var(--ft-space-2); padding-inline: var(--ft-space-2); color: var(--ft-ink); font-size: var(--ft-text-md); font-weight: 700; line-height: 1.3; }
.fd-index__list > li + li { border-top: 1px solid var(--ft-line); }
.fd-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ft-space-3);
  min-height: var(--ft-target);
  padding: var(--ft-space-2);
  border-radius: var(--ft-radius);
  color: var(--ft-ink);
  text-decoration: none;
}
.fd-index__link:hover { background: var(--ft-accent-soft); }
.fd-index__link .fd-icon { width: 2rem; height: 2rem; padding: var(--ft-space-1); }
.fd-index__body { display: block; min-width: 0; }
.fd-index__name { display: block; color: var(--ft-link); font-weight: 650; line-height: 1.3; }
.fd-index__link:hover .fd-index__name { text-decoration: underline; text-underline-offset: 0.18em; }
.fd-index__tags { display: block; color: var(--ft-ink-2); font-size: var(--ft-text-sm); line-height: 1.4; }
.fd-index__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 var(--ft-space-2);
  border-radius: 999px;
  background: var(--ft-surface-2);
  color: var(--ft-ink-2);
  font-size: var(--ft-text-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}
.fd-index__all { margin: 0; padding: var(--ft-space-1) var(--ft-space-2) 0; border-top: 1px solid var(--ft-line); }
.fd-index__all .fd-more { min-height: var(--ft-target); }

/* 3. Search box (home) and filter box (directory) ---------------------------------------- */
.fd-search,
.fd-filter { position: relative; max-width: 42rem; scroll-margin-top: var(--ft-space-3); }
.fd-search { margin-top: var(--ft-space-5); }
.fd-search__label {
  display: block;
  margin: 0 0 var(--ft-space-2);
  color: var(--ft-ink);
  font-size: var(--ft-text-md);
  font-weight: 650;
  line-height: 1.35;
}
.fd-search__field { position: relative; }
.fd-search__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  fill: none;
  stroke: var(--ft-ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.fd-search__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: var(--ft-space-2) var(--ft-space-4) var(--ft-space-2) 2.75rem;
  border: 1px solid var(--ft-line-strong);
  border-radius: var(--ft-radius-l);
  background: var(--ft-surface);
  color: var(--ft-ink);
  font: inherit;
  font-size: var(--ft-text-lg);
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}
.fd-search__input::placeholder { color: var(--ft-ink-3); opacity: 1; }
.fd-search__input::-webkit-search-cancel-button,
.fd-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fd-search__input:hover { border-color: var(--ft-ink-2); }
.fd-search__input:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 1px; border-color: var(--ft-focus); }
@media (pointer: coarse), (max-width: 40rem) {
  .fd-search__input { font-size: var(--ft-text-md); }
}

/* Results (home). On wide screens they open over the page, so nothing below moves. */
.fd-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--ft-space-2));
  left: 0;
  right: 0;
  max-height: min(30rem, 66vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ft-space-2);
  border: 1px solid var(--ft-line-strong);
  border-radius: var(--ft-radius-l);
  background: var(--ft-surface);
  box-shadow: var(--ft-shadow);
}
.fd-pop[hidden] { display: none; }
.fd-pop__note { margin: 0; padding: var(--ft-space-2) var(--ft-space-3); color: var(--ft-ink); font-size: var(--ft-text-sm); font-weight: 650; line-height: 1.45; }
.fd-pop__note[hidden], .fd-pop__list[hidden], .fd-pop__empty[hidden] { display: none; }
.fd-option__link {
  display: block;
  padding: var(--ft-space-2) var(--ft-space-3);
  border-left: 3px solid transparent;
  border-radius: var(--ft-radius);
  color: var(--ft-ink);
  text-decoration: none;
}
.fd-option__name { display: block; color: var(--ft-link); font-weight: 650; line-height: 1.35; }
.fd-option__text { display: block; margin-top: 0.125rem; color: var(--ft-ink-2); font-size: var(--ft-text-sm); line-height: 1.4; }
.fd-option__link:hover,
.fd-option[aria-selected="true"] > .fd-option__link { background: var(--ft-accent-soft); }
.fd-option[aria-selected="true"] > .fd-option__link { border-left-color: var(--ft-accent); }
/* "See all N matches" stays in view at the bottom of the list. */
.fd-option--all { position: sticky; bottom: calc(-1 * var(--ft-space-2)); margin-top: var(--ft-space-1); padding-block: var(--ft-space-1); border-top: 1px solid var(--ft-line); background: var(--ft-surface); }
.fd-option--all .fd-option__name { text-decoration: underline; text-underline-offset: 0.2em; }
.fd-pop__empty { margin: 0; padding: var(--ft-space-1) var(--ft-space-3) var(--ft-space-2); color: var(--ft-ink-2); font-size: var(--ft-text-sm); line-height: 1.5; }
.fd-pop__empty a { display: inline-block; padding-block: var(--ft-space-1); color: var(--ft-link); }
/* On phones the keyboard takes half the screen: results sit in the page under the box (no box inside a box to
   scroll), and the script brings the box to the top of the screen. */
@media (max-width: 40rem) {
  .fd-pop { position: static; max-height: none; margin-top: var(--ft-space-2); overflow: visible; box-shadow: none; }
  .fd-option--all { position: static; }
}
@media (forced-colors: active) {
  .fd-option[aria-selected="true"] > .fd-option__link { outline: 2px solid Highlight; outline-offset: -2px; border-left-color: Highlight; }
  .fd-new { border: 1px solid CanvasText; }
}

/* Filter (directory): clear button inside the box, status line below. */
.fd-filter .fd-search__input { padding-right: 5.5rem; }
.fd-filter .fd-search__input:placeholder-shown { padding-right: var(--ft-space-4); }
.fd-filter__clear {
  position: absolute;
  right: var(--ft-space-1);
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ft-target);
  min-height: var(--ft-target);
  margin: -1.375rem 0 0;
  padding: 0 var(--ft-space-3);
  border: 0;
  border-radius: var(--ft-radius);
  background: transparent;
  color: var(--ft-link);
  font: inherit;
  font-size: var(--ft-text-sm);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.fd-filter__clear:hover { background: var(--ft-accent-soft); }
.fd-filter__clear:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: -2px; }
.fd-filter__clear[hidden] { display: none; }
.fd-filter__status { min-height: 1.5em; margin: var(--ft-space-2) 0 0; color: var(--ft-ink-2); font-size: var(--ft-text-sm); line-height: 1.5; }
/* Arriving from the home search (#search=words): the list waits, hidden, for the page script to filter it. */
.fd-pending [data-fd-results] { visibility: hidden; min-height: 100vh; }
.fd-results.is-filtering { min-height: 100vh; }

/* 4. Chips: task links (home) and category links (directory) ----------------------------- */
.fd-chips { display: flex; flex-wrap: wrap; gap: var(--ft-space-2); margin-top: var(--ft-space-4); }
.fd-chips > li { display: flex; }
.fd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ft-space-2);
  min-height: var(--ft-target);
  padding: var(--ft-space-1) var(--ft-space-4);
  border: 1px solid var(--ft-line-strong);
  border-radius: 999px;
  background: var(--ft-surface);
  color: var(--ft-link);
  font-size: var(--ft-text-sm);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
.fd-chip:hover { border-color: var(--ft-accent); background: var(--ft-accent-soft); }
.fd-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 var(--ft-space-2);
  border-radius: 999px;
  background: var(--ft-surface-2);
  color: var(--ft-ink-2);
  font-size: var(--ft-text-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.fd-hero .fd-chips { max-width: 44rem; }
.fd-jump { margin-top: var(--ft-space-4); }
.fd-jump[hidden] { display: none; }
.fd-jump .fd-chips { margin-top: 0; }

/* 5. Sections ------------------------------------------------------------------------------ */
.fd-section { margin-top: var(--ft-space-8); scroll-margin-top: var(--ft-space-4); }
.fd-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ft-space-2) var(--ft-space-5);
  margin-bottom: var(--ft-space-4);
}
.fd-section__title { margin: 0; color: var(--ft-ink); font-size: var(--ft-text-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.fd-section > .fd-section__title { margin-bottom: var(--ft-space-4); }
.fd-more { display: inline-flex; align-items: center; min-height: 2rem; color: var(--ft-link); font-weight: 650; }

/* 6. Cards ---------------------------------------------------------------------------------- */
.fd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
  gap: var(--ft-space-4);
}
.fd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-2);
  min-width: 0;
  padding: var(--ft-space-4) var(--ft-space-5) var(--ft-space-5);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-l);
  background: var(--ft-surface);
}
.fd-card:hover,
.fd-card:focus-within { border-color: var(--ft-accent); }
.fd-card[hidden] { display: none; }
.fd-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ft-space-1) var(--ft-space-2); margin: 0; color: var(--ft-ink-3); font-size: var(--ft-text-xs); font-weight: 650; letter-spacing: 0.02em; }
.fd-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ft-space-1) var(--ft-space-2); }
.fd-card__title { margin: 0; color: var(--ft-ink); font-size: var(--ft-text-lg); font-weight: 650; line-height: 1.3; }
.fd-card__link { color: var(--ft-link); text-decoration: none; }
.fd-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fd-card:hover .fd-card__link { text-decoration: underline; text-underline-offset: 0.18em; }
.fd-card__text { margin: 0; color: var(--ft-ink-2); font-size: var(--ft-text-sm); line-height: 1.55; }
/* The whole card (or row) is the link's target, so the focus ring goes around all of it. */
@supports selector(:has(a)) {
  .fd-card:has(.fd-card__link:focus-visible),
  .fd-quick__item:has(.fd-quick__link:focus-visible) { outline: 3px solid var(--ft-focus); outline-offset: 2px; }
  .fd-card .fd-card__link:focus-visible,
  .fd-quick__item .fd-quick__link:focus-visible { outline: none; }
  .fd-quick__item:has(.fd-quick__link:focus-visible) { border-radius: var(--ft-radius-s); }
}
.fd-new {
  display: inline-block;
  padding: 0 var(--ft-space-2);
  border-radius: 999px;
  background: var(--ft-accent-soft);
  color: var(--ft-accent);
  font-size: var(--ft-text-xs);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Everyday file tools (home): compact rows. */
.fd-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); gap: 0 var(--ft-space-5); border-top: 1px solid var(--ft-line); }
.fd-quick__item { position: relative; display: flex; flex-direction: column; gap: 0.125rem; padding: var(--ft-space-3) 0; border-bottom: 1px solid var(--ft-line); }
.fd-quick__link { align-self: flex-start; color: var(--ft-link); font-weight: 650; }
.fd-quick__link::after { content: ""; position: absolute; inset: 0; }
.fd-quick__text { color: var(--ft-ink-2); font-size: var(--ft-text-sm); line-height: 1.5; }

.fd-icon {
  flex: none;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  padding: var(--ft-space-2);
  border-radius: var(--ft-radius);
  background: var(--ft-accent-soft);
  fill: none;
  stroke: var(--ft-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* What's new (home): one dated line. */
.fd-section--line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ft-space-1) var(--ft-space-4);
  padding: var(--ft-space-4) var(--ft-space-5);
  border: 1px solid var(--ft-line);
  border-left: 4px solid var(--ft-accent);
  border-radius: var(--ft-radius);
  background: var(--ft-surface);
}
.fd-section--line > .fd-section__title { margin: 0; font-size: var(--ft-text-lg); letter-spacing: 0; }
.fd-news { flex: 1 1 24rem; margin: 0; color: var(--ft-ink); line-height: 1.5; }
.fd-news time { font-weight: 650; }
.fd-news .fd-more { display: inline; min-height: 0; margin-left: var(--ft-space-2); white-space: nowrap; }

/* Short prose blocks and questions (home). */
.fd-prose { max-width: var(--ft-measure); color: var(--ft-ink); font-size: var(--ft-text-md); line-height: 1.65; }
.fd-prose > p { margin: 0; }
.fd-prose > p + p { margin-top: var(--ft-space-3); }
.fd-prose a { color: var(--ft-link); font-weight: 650; }
.fd-faq { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--ft-space-5) var(--ft-space-6); }
.fd-faq__q { margin: 0; color: var(--ft-ink); font-size: var(--ft-text-lg); font-weight: 650; line-height: 1.3; }
.fd-faq__a { margin: var(--ft-space-2) 0 0; color: var(--ft-ink-2); line-height: 1.55; }
.fd-faq__a a, .fd-help__a a { color: var(--ft-link); }
.fd-updated { margin: var(--ft-space-7) 0 0; padding-top: var(--ft-space-4); border-top: 1px solid var(--ft-line); color: var(--ft-ink-3); font-size: var(--ft-text-sm); }

/* 7. Directory sections -------------------------------------------------------------------- */
.fd-catsec, .fd-flat { margin-top: var(--ft-space-7); scroll-margin-top: var(--ft-space-4); }
.fd-catsec[hidden], .fd-flat[hidden] { display: none; }
.fd-catsec__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ft-space-2) var(--ft-space-3); }
.fd-catsec__title, .fd-flat__title { margin: 0; color: var(--ft-ink); font-size: var(--ft-text-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.fd-flat__title { margin-bottom: var(--ft-space-4); }
.fd-catsec__count { margin: 0; color: var(--ft-ink-3); font-size: var(--ft-text-sm); font-weight: 600; }
.fd-catsec__intro { max-width: var(--ft-measure); margin: var(--ft-space-3) 0 var(--ft-space-4); color: var(--ft-ink-2); line-height: 1.55; }
.fd-catsec__head + .fd-grid { margin-top: var(--ft-space-4); }
.fd-results.is-filtering > .fd-flat { margin-top: var(--ft-space-5); }
.fd-empty {
  max-width: var(--ft-measure);
  margin-top: var(--ft-space-5);
  padding: var(--ft-space-4) var(--ft-space-5);
  border: 1px solid var(--ft-line);
  border-left: 4px solid var(--ft-info);
  border-radius: var(--ft-radius);
  background: var(--ft-info-soft);
  color: var(--ft-ink);
}
.fd-empty[hidden] { display: none; }
.fd-empty__title { margin: 0; font-weight: 650; }
.fd-empty__text { margin: var(--ft-space-1) 0 0; }
.fd-empty__text a { color: var(--ft-link); }
.fd-help { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--ft-space-4) var(--ft-space-5); }
.fd-help__item { padding-top: var(--ft-space-3); border-top: 1px solid var(--ft-line); }
.fd-help__q { margin: 0; color: var(--ft-ink); font-size: var(--ft-text-md); font-weight: 650; line-height: 1.35; }
.fd-help__a { margin: var(--ft-space-1) 0 0; color: var(--ft-ink-2); font-size: var(--ft-text-sm); line-height: 1.55; }

/* 8. Updates: dated entries; the text inside is the shell's .ft-prose ------------------------ */
.fd-entry { margin-top: var(--ft-space-2); padding-top: var(--ft-space-5); border-top: 1px solid var(--ft-line); }
.fd-entry + .fd-entry { margin-top: var(--ft-space-6); }
.fd-entry__title { max-width: 40rem; margin: 0 0 var(--ft-space-4); color: var(--ft-ink); font-size: var(--ft-text-2xl); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.fd-entry__title time { color: var(--ft-accent); }
.fd-entry .ft-prose :where(h4) { margin: 1.2em 0 0.3em; color: var(--ft-ink-2); font-size: var(--ft-text-sm); font-weight: 700; letter-spacing: 0.02em; }
.fd-entry .ft-prose :where(h3 + h4) { margin-top: 0.6em; }

/* 9. Small screens, motion, print ----------------------------------------------------------- */
@media (max-width: 40rem) {
  .fd-hero { padding-top: var(--ft-space-5); gap: var(--ft-space-5); }
  .fd-section { margin-top: var(--ft-space-7); }
  .fd-catsec, .fd-flat { margin-top: var(--ft-space-6); }
  .fd-section__title, .fd-catsec__title, .fd-flat__title, .fd-entry__title { font-size: var(--ft-text-xl); }
  .fd-section--line > .fd-section__title { font-size: var(--ft-text-lg); }
  .fd-section--line { padding: var(--ft-space-4); }
  .fd-card { padding: var(--ft-space-4); }
  .fd-chip { padding-inline: var(--ft-space-3); }
  .fd-news .fd-more { display: inline-flex; min-height: var(--ft-target); margin-left: 0; }
}
@media (pointer: coarse) {
  .fd-more { min-height: var(--ft-target); }
}
@media (prefers-reduced-motion: reduce) {
  .fd-main *, .fd-main *::before, .fd-main *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .fd-search, .fd-filter, .fd-chips, .fd-jump, .fd-pop, .fd-filter__status { display: none !important; }
  .fd-card, .fd-index { break-inside: avoid; border-color: var(--ft-line-strong); }
  .fd-pending [data-fd-results] { visibility: visible; }
}