/*
 * app.css — WhichTool styles, built strictly on Codex tokens (codex-tokens.css).
 * No hard-coded colors; everything references --codex custom properties so light/dark
 * and any future theme swap "just work". Accessibility: visible focus rings, 44px
 * touch targets, prefers-reduced-motion respected, logical properties for RTL.
 */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
  color: var(--color-base);
  background: var(--background-color-base);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-progressive); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--color-visited); }

:focus-visible {
  outline: 2px solid var(--color-progressive);
  outline-offset: 1px;
  border-radius: var(--border-radius-base);
}

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  background: var(--background-color-base);
  padding: var(--spacing-100) var(--spacing-200);
  border: 1px solid var(--border-color-progressive);
  z-index: 100;
}
.skip-link:focus { inset-inline-start: var(--spacing-100); top: var(--spacing-100); }

/* ---- layout ---- */
.wt-container { max-width: 960px; margin-inline: auto; padding: 0 var(--spacing-200); }

.wt-header {
  border-block-end: 1px solid var(--border-color-muted);
  background: var(--background-color-neutral-subtle);
}
.wt-header__inner {
  display: flex; align-items: center; gap: var(--spacing-150);
  padding-block: var(--spacing-150); max-width: 960px; margin-inline: auto;
  padding-inline: var(--spacing-200);
}
.wt-logo {
  font-weight: var(--font-weight-bold); font-size: var(--font-size-large);
  color: var(--color-base); display: flex; align-items: center; gap: var(--spacing-75);
}
.wt-logo:hover { text-decoration: none; }
.wt-logo .mark { color: var(--color-progressive); }

/* ---- hero / search ---- */
.wt-hero { padding-block: var(--spacing-600) var(--spacing-400); text-align: center; }
.wt-hero h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xx-large); font-weight: var(--font-weight-normal);
  margin: 0 0 var(--spacing-100); color: var(--color-emphasized);
}
.wt-hero p { color: var(--color-subtle); margin: 0 auto var(--spacing-300); max-width: 36rem; }

.wt-searchbar { display: flex; gap: var(--spacing-100); max-width: 40rem; margin-inline: auto; }
.wt-input {
  flex: 1; min-height: var(--min-size-interactive-pointer);
  padding: var(--spacing-100) var(--spacing-150);
  font-size: var(--font-size-medium); color: var(--color-base);
  background: var(--background-color-base);
  border: 1px solid var(--border-color-interactive);
  border-radius: var(--border-radius-base);
}
.wt-input::placeholder { color: var(--color-placeholder); }
.wt-input:focus { border-color: var(--border-color-progressive); box-shadow: var(--box-shadow-outset-progressive); outline: none; }

/* ---- Codex CSS-only button ---- */
.cdx-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-75); min-height: var(--min-size-interactive-pointer);
  padding: var(--spacing-75) var(--spacing-150);
  font-family: inherit; font-size: var(--font-size-medium); font-weight: var(--font-weight-bold);
  color: var(--color-base); background: var(--background-color-interactive-subtle);
  border: 1px solid var(--border-color-base); border-radius: var(--border-radius-base);
  cursor: pointer; transition: background var(--transition-duration-base);
}
.cdx-button:hover { background: var(--background-color-interactive); }
.cdx-button--action-progressive.cdx-button--weight-primary {
  color: var(--color-inverted); background: var(--color-progressive); border-color: var(--color-progressive);
}
.cdx-button--action-progressive.cdx-button--weight-primary:hover {
  background: var(--color-progressive--hover); border-color: var(--color-progressive--hover);
}

/* ---- bundle chips ---- */
.wt-bundles { margin-block: var(--spacing-300); }
.wt-bundles__label { color: var(--color-subtle); font-size: var(--font-size-small); margin-block-end: var(--spacing-100); text-align: center; }
.wt-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-100); justify-content: center; }
.wt-chip {
  display: inline-flex; align-items: center; gap: var(--spacing-50);
  padding: var(--spacing-50) var(--spacing-150); min-height: 36px;
  font-size: var(--font-size-small); color: var(--color-progressive);
  background: var(--background-color-progressive-subtle);
  border: 1px solid var(--border-color-subtle); border-radius: var(--border-radius-pill);
  cursor: pointer;
}
.wt-chip:hover { text-decoration: none; border-color: var(--border-color-progressive); }

/* ---- results ---- */
.wt-results { padding-block: var(--spacing-300); }
.wt-results__meta { color: var(--color-subtle); font-size: var(--font-size-small); margin-block-end: var(--spacing-200); }
.wt-section-title { font-family: var(--font-family-heading); font-weight: var(--font-weight-normal);
  font-size: var(--font-size-large); margin-block: var(--spacing-300) var(--spacing-150);
  padding-block-end: var(--spacing-75); border-block-end: 1px solid var(--border-color-muted); }

.wt-card {
  display: block; padding: var(--spacing-200);
  border: 1px solid var(--border-color-subtle); border-radius: var(--border-radius-base);
  margin-block-end: var(--spacing-150); background: var(--background-color-base);
}
.wt-card:hover { border-color: var(--border-color-base); text-decoration: none; }
.wt-card__head { display: flex; align-items: baseline; gap: var(--spacing-100); flex-wrap: wrap; }
.wt-card__title { font-size: var(--font-size-large); font-weight: var(--font-weight-bold); color: var(--color-progressive); }
.wt-card__type { font-size: var(--font-size-small); color: var(--color-placeholder); }
.wt-card__desc { color: var(--color-base); margin-block: var(--spacing-75); }
.wt-card__foot { display: flex; flex-wrap: wrap; gap: var(--spacing-150); align-items: center;
  font-size: var(--font-size-small); color: var(--color-subtle); margin-block-start: var(--spacing-100); }
.wt-card__authors { color: var(--color-subtle); }

/* liveness badges */
.wt-badge { display: inline-flex; align-items: center; gap: var(--spacing-50);
  padding: 1px var(--spacing-75); border-radius: var(--border-radius-base);
  font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }
.wt-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wt-badge--active { color: var(--color-success); background: var(--background-color-success-subtle); }
.wt-badge--quiet { color: var(--color-warning); background: var(--background-color-warning-subtle); }
.wt-badge--dormant { color: var(--color-subtle); background: var(--background-color-neutral); }
.wt-badge--unknown { color: var(--color-placeholder); background: var(--background-color-neutral-subtle); }

.wt-match { font-size: var(--font-size-small); color: var(--color-placeholder); }
.wt-tag { display: inline-block; padding: 0 var(--spacing-75); margin-inline-end: var(--spacing-50);
  background: var(--background-color-neutral); border-radius: var(--border-radius-base);
  font-size: var(--font-size-small); color: var(--color-subtle); }

/* ---- detail ---- */
.wt-detail { padding-block: var(--spacing-300); }
.wt-detail h1 { font-family: var(--font-family-heading); font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xx-large); margin-block: 0 var(--spacing-100); }
.wt-meta-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-75) var(--spacing-200);
  margin-block: var(--spacing-200); }
.wt-meta-grid dt { color: var(--color-subtle); font-weight: var(--font-weight-bold); }
.wt-meta-grid dd { margin: 0; }

.wt-notice { padding: var(--spacing-150); border-radius: var(--border-radius-base);
  background: var(--background-color-progressive-subtle); border: 1px solid var(--border-color-subtle);
  margin-block: var(--spacing-200); font-size: var(--font-size-small); }

/* ---- footer ---- */
.wt-footer { margin-block-start: var(--spacing-600); padding-block: var(--spacing-300);
  border-block-start: 1px solid var(--border-color-muted); background: var(--background-color-neutral-subtle);
  color: var(--color-subtle); font-size: var(--font-size-small); }
.wt-footer__inner { max-width: 960px; margin-inline: auto; padding-inline: var(--spacing-200);
  display: flex; flex-wrap: wrap; gap: var(--spacing-150) var(--spacing-300); justify-content: space-between; }

/* loading + empty */
.wt-loading { text-align: center; color: var(--color-subtle); padding-block: var(--spacing-400); }
.wt-spinner { width: 24px; height: 24px; margin: 0 auto var(--spacing-100);
  border: 2px solid var(--border-color-subtle); border-block-start-color: var(--color-progressive);
  border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wt-empty { text-align: center; color: var(--color-subtle); padding-block: var(--spacing-400); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media (max-width: 600px) {
  .wt-hero { padding-block: var(--spacing-400) var(--spacing-300); }
}

/* ============================================================ BROWSE v2 */
.wt-browse-intro { text-align: center; padding-block: var(--spacing-400) var(--spacing-300); }
.wt-browse-intro h1 { font-family: var(--font-family-heading); font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xxx-large, 1.75rem); margin: 0 0 var(--spacing-100); }
.wt-browse-intro p { color: var(--color-subtle); max-width: 46rem; margin-inline: auto; }

/* project landing grid — big logo cards */
.wt-project-grid { list-style: none; margin: var(--spacing-200) 0 0; padding: 0;
  display: grid; gap: var(--spacing-150);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wt-project-card { display: flex; align-items: center; gap: var(--spacing-150);
  padding: var(--spacing-150); border: 1px solid var(--border-color-subtle);
  border-radius: var(--border-radius-base); background: var(--background-color-base);
  text-decoration: none; color: var(--color-base); transition: border-color .15s, transform .15s, box-shadow .15s;
  border-block-start: 3px solid var(--accent, var(--border-color-base)); }
.wt-project-card:hover { transform: translateY(-2px); border-color: var(--border-color-progressive);
  box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.wt-project-card__logo { width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.wt-project-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wt-project-card__body { display: flex; flex-direction: column; gap: 2px; }
.wt-project-card__name { font-weight: var(--font-weight-bold); }
.wt-project-card__count { color: var(--color-subtle); font-size: var(--font-size-small); }

/* per-project explorer */
.wt-crumbs { padding-block: var(--spacing-150); }
.wt-crumbs a { color: var(--color-progressive); text-decoration: none; }
.wt-proj-head { display: flex; align-items: center; gap: var(--spacing-150);
  padding-block: var(--spacing-100) var(--spacing-200); border-bottom: 1px solid var(--border-color-subtle); }
.wt-proj-head__logo { width: 56px; height: 56px; object-fit: contain; }
.wt-proj-head h1 { font-family: var(--font-family-heading); font-weight: var(--font-weight-normal); margin: 0; }
.wt-proj-head__count { color: var(--color-subtle); margin: 2px 0 0; }

.wt-cat-rail { display: flex; flex-wrap: wrap; gap: var(--spacing-50);
  padding-block: var(--spacing-150); }
.wt-chip { border: 1px solid var(--border-color-base); background: var(--background-color-base);
  color: var(--color-base); border-radius: var(--border-radius-pill);
  padding: 4px 12px; font-size: var(--font-size-small); cursor: pointer; transition: background .12s, border-color .12s; }
.wt-chip:hover { background: var(--background-color-interactive-subtle); }
.wt-chip.is-active { background: var(--color-progressive); color: var(--color-inverted); border-color: var(--color-progressive); }
.wt-chip__n { opacity: .7; margin-inline-start: 4px; }

.wt-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--spacing-150); padding-block: var(--spacing-100) var(--spacing-200); }
.wt-toolbar__filters { display: flex; gap: var(--spacing-200); flex-wrap: wrap; }
.wt-toolbar label { font-size: var(--font-size-small); color: var(--color-subtle); display: inline-flex; gap: 6px; align-items: center; }
.wt-toolbar select { padding: 4px 8px; border: 1px solid var(--border-color-base);
  border-radius: var(--border-radius-base); background: var(--background-color-base); color: var(--color-base); }
.wt-viewbtn { border: 1px solid var(--border-color-base); background: var(--background-color-base);
  color: var(--color-base); padding: 5px 12px; cursor: pointer; font-size: var(--font-size-small); }
.wt-viewbtn:first-child { border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); }
.wt-viewbtn:last-child { border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; border-inline-start: none; }
.wt-viewbtn.is-active { background: var(--color-progressive); color: var(--color-inverted); border-color: var(--color-progressive); }

/* tool card grid (explorer) */
.wt-tool-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-150);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wt-tool-card { display: flex; flex-direction: column; gap: var(--spacing-75); height: 100%;
  padding: var(--spacing-150); border: 1px solid var(--border-color-subtle);
  border-radius: var(--border-radius-base); background: var(--background-color-base); }
.wt-tool-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-75); }
.wt-tool-card__title { margin: 0; font-size: var(--font-size-medium); }
.wt-tool-card__title a { text-decoration: none; color: var(--color-progressive); }
.wt-tool-card__desc { margin: 0; color: var(--color-subtle); font-size: var(--font-size-small); flex: 1; }
.wt-tool-card__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-50); }
.wt-tool-card__actions { display: flex; gap: var(--spacing-75); margin-block-start: var(--spacing-75); }

.wt-tag { font-size: var(--font-size-x-small, .75rem); padding: 2px 8px; border-radius: var(--border-radius-pill);
  background: var(--background-color-progressive-subtle); color: var(--color-progressive); }
.wt-tag--muted { background: var(--background-color-neutral-subtle); color: var(--color-subtle); }

.wt-badge { font-size: var(--font-size-x-small, .75rem); white-space: nowrap; }
.wt-badge--active { color: var(--color-success); }
.wt-badge--quiet, .wt-badge--unknown { color: var(--color-subtle); }
.wt-badge--dormant { color: var(--color-warning); }

.wt-btn { display: inline-block; padding: 5px 12px; border-radius: var(--border-radius-base);
  border: 1px solid var(--border-color-base); background: var(--background-color-base);
  color: var(--color-base); text-decoration: none; font-size: var(--font-size-small); cursor: pointer; }
.wt-btn:hover { background: var(--background-color-interactive-subtle); }
.wt-btn--primary { background: var(--color-progressive); color: var(--color-inverted); border-color: var(--color-progressive); }
.wt-btn--primary:hover { background: var(--color-progressive--hover); }
.wt-btn--sm { padding: 3px 8px; font-size: var(--font-size-x-small, .75rem); }

/* table view */
.wt-table-wrap { overflow-x: auto; }
.wt-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
.wt-table th, .wt-table td { text-align: start; padding: var(--spacing-75) var(--spacing-100);
  border-bottom: 1px solid var(--border-color-subtle); vertical-align: top; }
.wt-table th { color: var(--color-subtle); font-weight: var(--font-weight-bold); white-space: nowrap; }
.wt-table a { color: var(--color-progressive); text-decoration: none; font-weight: var(--font-weight-bold); }
.wt-table__desc { color: var(--color-subtle); font-size: var(--font-size-x-small, .75rem); margin-block-start: 2px; }

.wt-pager { display: flex; justify-content: center; align-items: center; gap: var(--spacing-200);
  padding-block: var(--spacing-300); }
.wt-pager button { padding: 6px 16px; border: 1px solid var(--border-color-base);
  border-radius: var(--border-radius-base); background: var(--background-color-base); color: var(--color-base); cursor: pointer; }
.wt-pager button:disabled { opacity: .4; cursor: default; }
.wt-pager #wt-pageinfo { color: var(--color-subtle); font-size: var(--font-size-small); }

@media (max-width: 600px) {
  .wt-toolbar { flex-direction: column; align-items: stretch; }
  .wt-tool-grid { grid-template-columns: 1fr; }
}

/* --- verified (curated) layer ------------------------------------------- */
.wt-verified{display:inline-block;color:var(--wt-accent,#36c);font-weight:700;
  margin-left:.25rem;font-size:.9em}
.wt-tasklist{margin:.5rem 0 0;padding-left:1.1rem;list-style:disc}
.wt-tasklist li{font-size:.86rem;color:var(--wt-text-muted,#54595d);margin:.15rem 0;line-height:1.35}
.wt-tag--muted{opacity:.7;font-size:.72rem}
.wt-live--dead{opacity:.55}

/* --- admin inspector ---------------------------------------------------- */
.wt-admin-stats{display:flex;gap:1rem;flex-wrap:wrap;list-style:none;padding:0;margin:1rem 0}
.wt-admin-stats li{background:var(--wt-surface,#f8f9fa);border:1px solid var(--wt-border,#eaecf0);
  border-radius:8px;padding:.75rem 1rem;min-width:7rem;text-align:center}
.wt-admin-stats strong{display:block;font-size:1.4rem;color:var(--wt-accent,#36c)}
.wt-admin-stats span{font-size:.75rem;color:var(--wt-text-muted,#54595d)}
.wt-admin-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.85rem}
.wt-admin-table th,.wt-admin-table td{text-align:left;padding:.5rem;border-bottom:1px solid var(--wt-border,#eaecf0);vertical-align:top}
.wt-admin-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-top:1rem}
@media(max-width:720px){.wt-admin-grid{grid-template-columns:1fr}}
.wt-pre{background:#1b1b1b;color:#e6e6e6;padding:1rem;border-radius:8px;overflow:auto;
  font-size:.78rem;line-height:1.4;max-height:30rem}
.wt-pre--raw{max-height:40rem}
.wt-linklist,.wt-pager{list-style:none;padding:0}
.wt-pager{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1.5rem 0}

/* ===================================================================== */
/* v2 — mobile-first polish: hero search, table, back nav, minimal footer */
/* ===================================================================== */

/* prevent any long URL/token from blowing out the layout */
.wt-detail a, .wt-table a, .wt-card__desc, .wt-detail__lede { overflow-wrap: anywhere; word-break: break-word; }

/* header: logo | nav | language, wraps cleanly on phones */
.wt-header__inner { flex-wrap: wrap; row-gap: var(--spacing-100); }
.wt-back {
  display: inline-flex; align-items: center; gap: var(--spacing-50);
  font-weight: var(--font-weight-bold); color: var(--color-base);
  min-height: var(--min-size-interactive-pointer);
}
.wt-back:hover { text-decoration: none; color: var(--color-progressive); }
.wt-lang { display: inline-flex; align-items: center; gap: var(--spacing-50); }
.wt-lang__icon { font-size: var(--size-icon-medium); }
.wt-lang select {
  font-family: inherit; font-size: var(--font-size-small); color: var(--color-base);
  background: var(--background-color-base); border: 1px solid var(--border-color-subtle);
  border-radius: var(--border-radius-base); padding: var(--spacing-50) var(--spacing-100);
  min-height: 36px; cursor: pointer;
}

/* hero search bar — big, rounded, Google-ish, with leading icon */
.wt-hero { padding-block: var(--spacing-400) var(--spacing-300); }
.wt-searchbar--hero {
  position: relative; max-width: 44rem; gap: 0;
  border: 1px solid var(--border-color-interactive);
  border-radius: var(--border-radius-pill);
  background: var(--background-color-base);
  box-shadow: var(--box-shadow-drop-small);
  transition: box-shadow var(--transition-duration-base), border-color var(--transition-duration-base);
  align-items: center; overflow: hidden;
}
.wt-searchbar--hero:focus-within {
  border-color: var(--border-color-progressive);
  box-shadow: 0 1px 6px rgba(51,102,204,.28);
}
.wt-searchbar__icon { padding-inline-start: var(--spacing-200); font-size: var(--size-icon-medium); color: var(--color-subtle); }
.wt-input--hero {
  border: none; box-shadow: none; background: transparent;
  min-height: 56px; font-size: var(--font-size-large); padding-inline: var(--spacing-150);
}
.wt-input--hero:focus { border: none; box-shadow: none; outline: none; }
.wt-searchbar__go {
  border-radius: var(--border-radius-pill); margin: var(--spacing-50);
  min-height: 48px; padding-inline: var(--spacing-300); white-space: nowrap;
}

/* tool detail */
.wt-detail { padding-block: var(--spacing-300); max-width: 48rem; }
.wt-detail__head { display: flex; align-items: center; gap: var(--spacing-150); flex-wrap: wrap; margin-block-end: var(--spacing-150); }
.wt-detail__head h1 { font-family: var(--font-family-heading); font-weight: var(--font-weight-normal); margin: 0; }
.wt-detail__lede { font-size: var(--font-size-large); color: var(--color-base); margin-block-end: var(--spacing-300); }

/* clean data table replacing the old <dl> */
.wt-table { width: 100%; border-collapse: collapse; margin-block-end: var(--spacing-300); }
.wt-table th, .wt-table td {
  text-align: start; vertical-align: top; padding: var(--spacing-100) var(--spacing-150);
  border-block-end: 1px solid var(--border-color-muted); font-size: var(--font-size-small);
}
.wt-table th {
  width: 30%; min-width: 7.5rem; color: var(--color-subtle);
  font-weight: var(--font-weight-bold); white-space: nowrap;
}
.wt-table tr:hover { background: var(--background-color-neutral-subtle); }

.wt-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-50); margin-block: var(--spacing-150); }

/* minimal footer */
.wt-footer {
  margin-block-start: var(--spacing-600); padding-block: var(--spacing-200);
  border-block-start: 1px solid var(--border-color-muted);
  text-align: center; font-size: var(--font-size-small); color: var(--color-subtle);
}
.wt-footer a { color: var(--color-subtle); }
.wt-footer a:hover { color: var(--color-progressive); }
.wt-footer__sep { margin-inline: var(--spacing-100); color: var(--border-color-subtle); }

/* phones first → widen at ≥640px */
@media (max-width: 640px) {
  .wt-hero h1 { font-size: var(--font-size-large); }
  .wt-searchbar--hero { flex-wrap: nowrap; }
  .wt-input--hero { min-height: 48px; font-size: var(--font-size-medium); }
  .wt-searchbar__go { padding-inline: var(--spacing-150); }
  .wt-searchbar__go .wt-go-label { display: none; }   /* icon-only on tiny screens */
  .wt-table th { width: 40%; white-space: normal; }
  .wt-nav { gap: var(--spacing-150); font-size: var(--font-size-small); }
}

/* clamp card descriptions so one long entry can't dominate the results list */
.wt-card__desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

/* visually-hidden utility (was referenced but never defined → labels leaked on screen) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* ensure the search icon leads the input visually */
.wt-searchbar--hero { display: flex; }
.wt-searchbar--hero .wt-searchbar__icon { order: -1; }

/* ===================================================================== */
/* v2.1 — Codex icons, sticky footer, localized chip grid                 */
/* ===================================================================== */

/* sticky footer: body is a column at least viewport-tall, main grows */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.wt-container { flex: 1 0 auto; width: 100%; max-width: 960px; margin-inline: auto; padding: 0 var(--spacing-200); }
.wt-footer { flex-shrink: 0; margin-block-start: 0; }

/* inline Codex icons inherit text color, align with text */
.wt-ic { vertical-align: middle; }
.wt-logo-ic { color: var(--color-progressive); }
.wt-back svg, .wt-lang__icon svg { display: block; }
.wt-footer a { display: inline-flex; align-items: center; gap: var(--spacing-50); }
.wt-searchbar__icon svg { color: var(--color-subtle); display: block; }

/* localized chip grid — wraps neatly for 18+ chips, centered, capped width */
.wt-chips {
  display: flex; flex-wrap: wrap; gap: var(--spacing-100);
  justify-content: center; max-width: 52rem; margin-inline: auto;
}
.wt-chip {
  display: inline-flex; align-items: center; gap: var(--spacing-50);
  padding: var(--spacing-50) var(--spacing-150); min-height: 34px;
  font-size: var(--font-size-small); color: var(--color-progressive);
  background: var(--background-color-progressive-subtle);
  border: 1px solid var(--border-color-subtle);
  border-radius: var(--border-radius-pill);
}
.wt-chip svg { color: var(--color-progressive); flex-shrink: 0; }
.wt-chip:hover { text-decoration: none; border-color: var(--border-color-progressive);
  background: var(--background-color-base); }

[dir="rtl"] .wt-back svg, [dir="rtl"] .wt-searchbar__icon svg { transform: scaleX(-1); }

/* ===================================================================== */
/* v2.2 — retrieval-quality + trust UI (features 1–10)                    */
/* ===================================================================== */

/* (6) per-result explanation */
.wt-why { display:flex; align-items:center; gap:var(--spacing-50);
  font-size:var(--font-size-small); color:var(--color-success);
  margin:var(--spacing-50) 0 0; }
.wt-why svg { color:var(--color-success); flex-shrink:0; }

/* (10) duplicate/fork note on a card */
.wt-dup { display:flex; align-items:center; gap:var(--spacing-50);
  font-size:var(--font-size-small); color:var(--color-warning); margin:var(--spacing-50) 0 0; }

/* (9) verified badge */
.wt-vbadge { display:inline-flex; align-items:center; gap:3px;
  font-size:.75rem; font-weight:var(--font-weight-bold);
  color:var(--color-success); background:var(--background-color-success-subtle);
  border:1px solid var(--color-success); border-radius:var(--border-radius-pill);
  padding:1px var(--spacing-75); }
.wt-vbadge svg { color:var(--color-success); }

/* (2) did-you-mean banner */
.wt-dym { font-size:var(--font-size-medium); color:var(--color-subtle);
  background:var(--background-color-progressive-subtle);
  border:1px solid var(--border-color-subtle); border-radius:var(--border-radius-base);
  padding:var(--spacing-100) var(--spacing-150); margin-block-end:var(--spacing-200); }

/* (4)(5) filter bar */
.wt-results__bar { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--spacing-150); margin-block-end:var(--spacing-200); }
.wt-filters { display:flex; flex-wrap:wrap; gap:var(--spacing-75); }
.wt-filter { display:inline-flex; align-items:center; gap:4px;
  font-size:var(--font-size-small); color:var(--color-subtle);
  background:var(--background-color-neutral-subtle);
  border:1px solid var(--border-color-subtle); border-radius:var(--border-radius-pill);
  padding:3px var(--spacing-100); }
.wt-filter:hover { text-decoration:none; border-color:var(--border-color-interactive); }
.wt-filter.is-on { color:var(--color-inverted); background:var(--color-progressive);
  border-color:var(--color-progressive); }
.wt-filter span { opacity:.7; font-variant-numeric:tabular-nums; }
.wt-filter svg { flex-shrink:0; }

/* (8) feedback widget */
.wt-feedback { display:flex; flex-wrap:wrap; align-items:center; gap:var(--spacing-100);
  margin-block:var(--spacing-200); padding:var(--spacing-150);
  background:var(--background-color-neutral-subtle);
  border:1px solid var(--border-color-muted); border-radius:var(--border-radius-base);
  font-size:var(--font-size-small); }
.wt-feedback__label { display:inline-flex; align-items:center; gap:var(--spacing-50);
  color:var(--color-subtle); font-weight:var(--font-weight-bold); }
.wt-fbtn { font:inherit; cursor:pointer; color:var(--color-base);
  background:var(--background-color-base); border:1px solid var(--border-color-base);
  border-radius:var(--border-radius-base); padding:3px var(--spacing-100);
  min-height:32px; }
.wt-fbtn:hover:not(:disabled) { border-color:var(--color-destructive); color:var(--color-destructive); }
.wt-feedback__thanks { color:var(--color-success); font-weight:var(--font-weight-bold); }
.wt-feedback__counts { color:var(--color-placeholder); margin-inline-start:auto; }

.wt-notice--info { background:var(--background-color-progressive-subtle);
  display:flex; align-items:center; gap:var(--spacing-75); }

/* ===================================================================== */
/* pass 2 — discovery + reach UI (11,12,13,14,15,17,20)                   */
/* ===================================================================== */

/* (12) collections grid */
.wt-coll-grid { display:grid; grid-template-columns:1fr; gap:var(--spacing-150); margin-block:var(--spacing-200); }
@media (min-width:640px){ .wt-coll-grid { grid-template-columns:1fr 1fr; } }
.wt-coll { display:flex; flex-direction:column; gap:var(--spacing-50);
  padding:var(--spacing-200); border:1px solid var(--border-color-subtle);
  border-radius:var(--border-radius-base); background:var(--background-color-base); }
.wt-coll:hover { text-decoration:none; border-color:var(--border-color-progressive);
  box-shadow:var(--box-shadow-drop-small); }
.wt-coll__title { font-weight:var(--font-weight-bold); color:var(--color-emphasized); }
.wt-coll__blurb { font-size:var(--font-size-small); color:var(--color-subtle); }
.wt-coll__n { font-size:var(--font-size-small); color:var(--color-placeholder);
  display:inline-flex; align-items:center; gap:4px; }

/* (20) dashboard stat grid */
.wt-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-150);
  margin-block:var(--spacing-200); }
@media (min-width:640px){ .wt-stat-grid { grid-template-columns:repeat(4,1fr); } }
.wt-stat { padding:var(--spacing-200); border:1px solid var(--border-color-muted);
  border-radius:var(--border-radius-base); background:var(--background-color-neutral-subtle); }
.wt-stat__n { font-size:1.6rem; font-weight:var(--font-weight-bold); color:var(--color-emphasized);
  font-variant-numeric:tabular-nums; }
.wt-stat__l { font-size:var(--font-size-small); color:var(--color-subtle); margin-block-start:var(--spacing-50); }

/* (14) keyboard-focused card */
.wt-card.is-kbd { outline:2px solid var(--color-progressive); outline-offset:2px; }

/* (13) trending */
.wt-trending { margin-block:var(--spacing-300); }

/* (15)(17) code blocks */
.wt-pre { background:var(--background-color-neutral-subtle); border:1px solid var(--border-color-muted);
  border-radius:var(--border-radius-base); padding:var(--spacing-150); overflow-x:auto;
  font-family:var(--font-family-monospace); font-size:var(--font-size-small); }
code { font-family:var(--font-family-monospace); }

/* ===================================================================== */
/* Recipes — the curated knowledge layer (Pillar 2)                      */
/* ===================================================================== */
.wt-tasks { margin-block:var(--spacing-400) var(--spacing-200); }

/* project + audience tags */
.wt-projtag { display:inline-block; font-size:.72rem; font-weight:var(--font-weight-bold);
  text-transform:lowercase; color:var(--color-progressive);
  background:var(--background-color-progressive-subtle);
  border-radius:var(--border-radius-pill); padding:1px var(--spacing-75); margin-inline-start:4px; }
.wt-projtag--sm { font-size:.66rem; }
.wt-audtag { display:inline-block; font-size:.72rem; color:var(--color-subtle);
  background:var(--background-color-neutral-subtle); border-radius:var(--border-radius-pill);
  padding:1px var(--spacing-75); margin-inline-start:4px; }
.wt-recipe-proj { display:inline-flex; gap:2px; }

/* recipe detail */
.wt-recipe-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  margin-block:var(--spacing-150); font-size:var(--font-size-small); }
.wt-recipe-meta__label { color:var(--color-subtle); font-weight:var(--font-weight-bold); }
.wt-recipe-intro { font-size:var(--font-size-medium); color:var(--color-base);
  line-height:var(--line-height-medium); margin-block:var(--spacing-150) var(--spacing-250);
  padding-inline-start:var(--spacing-150); border-inline-start:3px solid var(--border-color-progressive); }

/* numbered steps */
.wt-steps { list-style:none; counter-reset:none; padding:0; margin:var(--spacing-200) 0; }
.wt-step { display:flex; gap:var(--spacing-150); padding-block:var(--spacing-150);
  border-block-end:1px solid var(--border-color-subtle); align-items:flex-start; }
.wt-step:last-child { border-block-end:0; }
.wt-step__num { flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:var(--color-progressive); color:var(--color-inverted);
  display:flex; align-items:center; justify-content:center;
  font-weight:var(--font-weight-bold); font-size:var(--font-size-small); }
.wt-step__body { flex:1; min-width:0; }
.wt-step__head { display:flex; align-items:center; gap:var(--spacing-75); flex-wrap:wrap; }
.wt-step__action { font-weight:var(--font-weight-bold); color:var(--color-emphasized);
  font-size:var(--font-size-medium); }
.wt-step__tool { display:flex; align-items:center; gap:6px; margin-block:var(--spacing-50);
  font-size:var(--font-size-small); }
.wt-step__toolname { color:var(--color-subtle); font-weight:var(--font-weight-bold); }
.wt-step__why { font-size:var(--font-size-small); color:var(--color-subtle);
  line-height:var(--line-height-medium); margin:2px 0 0; }

/* good-to-know */
.wt-gtk { margin:var(--spacing-100) 0; padding-inline-start:var(--spacing-200);
  font-size:var(--font-size-small); color:var(--color-base); }
.wt-gtk li { margin-block:var(--spacing-75); line-height:var(--line-height-medium); }

/* search → recipe intercept banner */
.wt-recipe-intercept { display:block; padding:var(--spacing-200);
  background:var(--background-color-progressive-subtle);
  border:1px solid var(--border-color-progressive); border-radius:var(--border-radius-base);
  margin-block-end:var(--spacing-250); }
.wt-recipe-intercept:hover { text-decoration:none; box-shadow:var(--box-shadow-drop-small); }
.wt-recipe-intercept__tag { display:inline-flex; align-items:center; gap:4px;
  font-size:var(--font-size-x-small); font-weight:var(--font-weight-bold);
  text-transform:uppercase; letter-spacing:.04em; color:var(--color-progressive); }
.wt-recipe-intercept__title { display:block; font-size:var(--font-size-large);
  font-weight:var(--font-weight-bold); color:var(--color-emphasized); margin-block:4px; }
.wt-recipe-intercept__goal { display:block; font-size:var(--font-size-small);
  color:var(--color-subtle); }
.wt-recipe-intercept__cta { display:inline-block; margin-block-start:var(--spacing-75);
  font-size:var(--font-size-small); font-weight:var(--font-weight-bold); color:var(--color-progressive); }

/* Pillar 3 — developer build-guide */
.wt-guide-sec { margin-block:var(--spacing-250); padding-block-end:var(--spacing-200);
  border-block-end:1px solid var(--border-color-subtle); }
.wt-guide-sec:last-of-type { border-block-end:0; }
.wt-guide-body { font-size:var(--font-size-medium); color:var(--color-base);
  line-height:var(--line-height-medium); margin-block:var(--spacing-100) var(--spacing-150); }

/* improved recipe cards on category pages */
.wt-recipe-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--spacing-100);
  margin-block-start:var(--spacing-75); }
.wt-recipe-card__steps { display:inline-flex; align-items:center; gap:4px;
  font-size:var(--font-size-small); color:var(--color-progressive); font-weight:var(--font-weight-bold); }
.wt-recipe-card__proj, .wt-recipe-card__aud { display:inline-flex; gap:2px; flex-wrap:wrap; }
.wt-recipe-card__aud { margin-inline-start:auto; }
@media (max-width: 480px) {
  .wt-recipe-card__aud { margin-inline-start: 0; }
}

/* ===================================================================== */
/* POLISH LAYER (final pass) — Montserrat, square wiki aesthetic, proper  */
/* buttons, header nav, dark-mode toggle, mobile, clean footer.          */
/* This layer is authoritative; it intentionally overrides earlier rules. */
/* ===================================================================== */

/* headings: Montserrat semibold, tighter, not serif */
.wt-hero h1, .wt-detail h1, .wt-detail__head h1, .wt-section-title,
.wt-browse-intro h1, .wt-proj-head h1 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
.wt-hero h1 { font-size: 1.875rem; }

/* fix link colour bleed: links inside any button/chip inherit, never go blue/purple */
.wt-btn, .wt-btn:visited, .cdx-button, .cdx-button:visited,
.wt-chip, .wt-chip:visited, .wt-nav__link, .wt-nav__link:visited,
.wt-coll:visited, .wt-card:visited, .wt-recipe-intercept:visited {
  color: inherit;
}
.cdx-button--action-progressive.cdx-button--weight-primary,
.cdx-button--action-progressive.cdx-button--weight-primary:visited,
.wt-btn--primary, .wt-btn--primary:visited { color: var(--color-inverted); }

/* ---- header ---- */
.wt-header { background: var(--background-color-neutral-subtle); border-block-end: 1px solid var(--border-color-subtle); }
.wt-header__inner { gap: var(--spacing-200); flex-wrap: nowrap; }
.wt-logo { font-weight: var(--font-weight-bold); font-size: var(--font-size-large);
  letter-spacing: -0.01em; gap: var(--spacing-75); flex: none; }
.wt-logo-ic { color: var(--color-progressive); }

.wt-nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--spacing-50); flex-wrap: nowrap; }
.wt-nav__link {
  display: inline-flex; align-items: center; gap: var(--spacing-50);
  padding: var(--spacing-75) var(--spacing-100); min-height: 36px;
  font-size: var(--font-size-small); font-weight: var(--font-weight-medium);
  color: var(--color-base); border-radius: 0; border: 1px solid transparent;
}
.wt-nav__link:hover { background: var(--background-color-interactive); text-decoration: none; }
.wt-nav__link.is-active { color: var(--color-progressive); border-block-end: 2px solid var(--color-progressive); }
.wt-nav__link .wt-ic { opacity: .7; }
.wt-nav__tools { display: inline-flex; align-items: center; gap: var(--spacing-75); margin-inline-start: var(--spacing-100);
  padding-inline-start: var(--spacing-100); border-inline-start: 1px solid var(--border-color-subtle); }

.wt-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  color: var(--color-base); background: var(--background-color-base);
  border: 1px solid var(--border-color-base); border-radius: 0;
}
.wt-iconbtn:hover { background: var(--background-color-interactive); border-color: var(--border-color-interactive); }

.wt-navtoggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: var(--background-color-base); border: 1px solid var(--border-color-base); color: var(--color-base); cursor: pointer; }

.wt-lang select { border-radius: 0; min-height: 36px; }
.wt-lang__icon { display: inline-flex; color: var(--color-subtle); }

/* ---- sub-bar (proper Back button) ---- */
.wt-subbar { border-block-end: 1px solid var(--border-color-muted); background: var(--background-color-base); }
.wt-subbar__inner { max-width: 960px; margin-inline: auto; padding: var(--spacing-100) var(--spacing-200); }

/* ---- buttons: square, real ---- */
.wt-btn, .cdx-button { border-radius: 0; font-weight: var(--font-weight-semibold); }
.wt-btn--quiet { background: var(--background-color-base); border-color: var(--border-color-base); }
.wt-btn--quiet:hover { background: var(--background-color-interactive); }
.wt-back { gap: var(--spacing-50); }

/* ---- search bar: square Codex, not pill ---- */
.wt-searchbar--hero { border-radius: 0; box-shadow: none; border: 1px solid var(--border-color-interactive); }
.wt-searchbar--hero:focus-within { border-color: var(--color-progressive); box-shadow: inset 0 0 0 1px var(--color-progressive); }
.wt-searchbar__go { border-radius: 0; margin: 0; min-height: 58px; }
@media (max-width: 640px){ .wt-searchbar__go { min-height: 50px; } }
.wt-input--hero { min-height: 58px; }

/* ---- chips: square, no blue-on-blue ---- */
.wt-chip {
  border-radius: 0; min-height: 34px; gap: var(--spacing-50);
  color: var(--color-base); background: var(--background-color-base);
  border: 1px solid var(--border-color-base); font-weight: var(--font-weight-medium);
}
.wt-chip .wt-ic { color: var(--color-progressive); opacity: .85; }
.wt-chip:hover { background: var(--background-color-progressive-subtle); border-color: var(--color-progressive); color: var(--color-progressive); text-decoration: none; }
.wt-chip:hover .wt-ic { color: var(--color-progressive); }
.wt-chip.is-active { background: var(--color-progressive); color: var(--color-inverted); border-color: var(--color-progressive); }
.wt-chip.is-active .wt-ic { color: var(--color-inverted); }

/* ---- cards / collections: square ---- */
.wt-card, .wt-coll, .wt-tool-card, .wt-project-card, .wt-recipe-intercept,
.wt-notice, .wt-admin-stats li, .wt-pre { border-radius: 0; }
.wt-project-card { border-block-start-width: 3px; }
.wt-coll { border-radius: 0; }

/* projtag / audtag squared */
.wt-projtag, .wt-audtag, .wt-tag, .wt-badge { border-radius: 0; }

/* ---- footer: clean, single line, no clutter ---- */
.wt-footer { margin-block-start: var(--spacing-600); padding-block: var(--spacing-300);
  border-block-start: 1px solid var(--border-color-subtle); background: var(--background-color-neutral-subtle);
  text-align: start; }
.wt-footer__inner { max-width: 960px; margin-inline: auto; padding-inline: var(--spacing-200);
  display: flex; align-items: baseline; gap: var(--spacing-150); flex-wrap: wrap; }
.wt-footer__brand { font-weight: var(--font-weight-bold); color: var(--color-base); }
.wt-footer__brand .mark { color: var(--color-progressive); }
.wt-footer__tag { color: var(--color-subtle); font-size: var(--font-size-small); }
.wt-footer__links { display: inline-flex; gap: var(--spacing-200); flex-wrap: wrap;
  margin-inline-start: auto; font-size: var(--font-size-small); }
.wt-footer__links a { color: var(--color-subtle); font-weight: var(--font-weight-medium); }
.wt-footer__links a:hover { color: var(--color-progressive); }
@media (max-width: 600px) { .wt-footer__links { margin-inline-start: 0; width: 100%; } }

/* ---- mobile nav ---- */
@media (max-width: 820px) {
  .wt-navtoggle { display: inline-flex; }
  .wt-nav {
    position: absolute; inset-inline: 0; top: 100%; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--background-color-base); border-block-end: 1px solid var(--border-color-subtle);
    margin: 0; padding: var(--spacing-100); display: none;
    box-shadow: var(--box-shadow-drop-medium);
  }
  .wt-nav.is-open { display: flex; }
  .wt-header { position: relative; }
  .wt-nav__link { min-height: 44px; border-block-end: 1px solid var(--border-color-muted); }
  .wt-nav__link.is-active { border-block-end: 1px solid var(--border-color-muted); background: var(--background-color-progressive-subtle); }
  .wt-nav__tools { margin: var(--spacing-100) 0 0; padding: var(--spacing-100) 0 0;
    border-inline-start: 0; border-block-start: 1px solid var(--border-color-subtle); justify-content: space-between; }
}

/* dark-mode aware moon/sun swap via attribute */
[data-theme="dark"] #wtTheme .wt-ic { opacity: .95; }

/* selection + scrollbar niceties */
::selection { background: var(--background-color-progressive-subtle); }

/* about resources list */
.wt-reslist { list-style: none; margin: var(--spacing-100) 0; padding: 0; }
.wt-reslist li { padding-block: var(--spacing-75); border-block-end: 1px solid var(--border-color-muted);
  font-size: var(--font-size-small); color: var(--color-subtle); }
.wt-reslist a { font-weight: var(--font-weight-semibold); }