/* FEZEY V12 prototypes · kit/v3e/tools.css: the tools frame (PLAN-SITE-D D1.7; kit/v3e/tools.js has the markup).
   One frame on the night glass; a still Labs row first; rows by use sliding slowly, every second row the other way,
   each row's label pinned at its left. Tiles 168 x 96 (phone 128 x 80), the mark 40 px tall (30 on a phone) with a
   quarter of its height clear round it, the name under it. Motion: transform only, linear, paused on hover, focus and
   off screen; reduced motion and the static variant: no motion, the rows wrap into a grid with each tool's line. */
.tf {
  --tf-gap: 12px; --tf-tile-w: 168px; --tf-tile-h: 96px; --tf-mark: 40px; --tf-pad: clamp(20px, 2.4vw, 36px);
  position: relative; isolation: isolate; box-sizing: border-box; display: grid;
  grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; row-gap: clamp(12px, 1.8vh, 20px);
  width: 100%; max-width: 1680px; padding: clamp(22px, 3.2vh, 38px) 0; color: var(--signal);
}
.tf::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: var(--gl-r, 16px); background: rgba(14, 10, 22, 0.72); border: 1px solid var(--gl-edge, rgba(255, 255, 255, 0.07)); box-shadow: inset 0 1px 0 var(--gl-hi, rgba(255, 255, 255, 0.06)), 0 18px 60px rgba(0, 0, 0, 0.32); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.gl-blur .tf::before { -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
}
.tf .tf__h { grid-column: 1 / -1; margin: 0 var(--tf-pad) 4px; font: 600 clamp(28px, 2.6vw, 44px)/0.92 var(--font-title, 'Bricolage Grotesque', system-ui, sans-serif); letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; }

/* a row: its label pinned at the left, its tiles to the right; every moving row's label in the frame's first
   column (a subgrid), so the rows' faded ends line up; the Labs row (still, its label longer) keeps its own */
.tf__row { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: minmax(132px, max-content) minmax(0, 1fr); grid-template-columns: subgrid; align-items: center; }
.tf__row[data-group="labs"] { grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; }
.tf .tf__label { position: relative; z-index: 2; justify-self: start; margin: 0 0 0 var(--tf-pad); display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill, 999px); background: rgba(10, 8, 16, 0.86); border: 1px solid rgba(201, 182, 234, 0.22); font: 400 11px/1.2 var(--font-mono, 'Martian Mono', ui-monospace, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--filament, #c9b6ea); white-space: nowrap; }
.tf__list { display: flex; gap: var(--tf-gap); margin: 0; padding: 0; list-style: none; }

/* a tile: the mark, the name under it (a name tile: the name alone, larger) */
.tf__tile { box-sizing: border-box; flex: none; width: var(--tf-tile-w); height: var(--tf-tile-h); display: grid; grid-template-rows: var(--tf-mark) auto; place-items: center; align-content: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: rgba(236, 233, 241, 0.045); border: 1px solid rgba(236, 233, 241, 0.09); }
.tf__logo { display: block; width: auto; height: var(--tf-mark); max-width: calc(var(--tf-tile-w) - 24px); object-fit: contain; }
.tf__logo--mono { filter: invert(0.93); opacity: 0.94; }
.tf__name { font: 400 13px/1.2 var(--font-body, 'Mona Sans', system-ui, sans-serif); color: rgba(236, 233, 241, 0.88); text-align: center; text-wrap: balance; }
.tf__tile--name { grid-template-rows: auto; }
/* a lockup tile (W1, 4 Nov 2026): the official mark already carries the name (Claude Code's press-kit lockup), so
   the lockup stands alone, as wide as the tile allows; the name stays in the HTML for screen readers (.fz-sr) */
.tf__tile--lockup { grid-template-rows: auto; }
.tf__tile--lockup .tf__logo { height: calc(var(--tf-mark) * 0.9); }
.tf__tile--name .tf__name { font: 600 17px/1.12 var(--font-title, 'Bricolage Grotesque', system-ui, sans-serif); letter-spacing: -0.01em; color: var(--signal, #ece9f1); }
.tf__line { display: none; }
.tf__row[data-group="labs"] .tf__list { flex-wrap: wrap; }
.tf__tile--labs { width: calc(var(--tf-tile-w) * 1.32); }
.tf__tile--labs .tf__logo { height: calc(var(--tf-mark) * 1.2); }

/* the moving rows: the view clips; both ends fade into the frame's night under two still shades (not a mask: a mask
   makes every row an offscreen pass each frame, measured on the fixture's phone run); the track slides by one list's
   width (--tf-shift); the running animation is its own layer, so no will-change (a paused row then holds no layer) */
.tf--rows .tf__view { position: relative; overflow: hidden; }
.tf--rows .tf__view::before, .tf--rows .tf__view::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 8%; pointer-events: none; background: linear-gradient(to right, rgba(14, 10, 22, 0.94), rgba(14, 10, 22, 0)); }
.tf--rows .tf__view::before { left: 0; }
.tf--rows .tf__view::after { right: 0; transform: scaleX(-1); }
.tf--rows .tf__track { display: flex; gap: var(--tf-gap); width: max-content; animation: tf-slide var(--tf-dur, 40s) linear infinite; }
.tf--rows .tf__row--rev .tf__track { animation-direction: reverse; }
.tf.is-off .tf__track, .tf.is-paused .tf__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .tf--rows .tf__row:hover .tf__track { animation-play-state: paused; } }
.tf--rows .tf__row:focus-within .tf__track { animation-play-state: paused; }
@keyframes tf-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--tf-shift, -50%), 0, 0); } }

/* the static variant (the discipline pages; reduced motion): the tiles wrap into a grid, each with its line */
.tf--static { grid-template-columns: minmax(0, 1fr); }
.tf--static .tf__row, .tf--static .tf__row[data-group="labs"] { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.tf--static .tf__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); margin: 0 var(--tf-pad); }
.tf--static .tf__tile { width: auto; height: auto; min-height: var(--tf-tile-h); grid-template-columns: calc(var(--tf-mark) * 1.5) minmax(0, 1fr); grid-template-rows: auto; place-items: center start; column-gap: 14px; row-gap: 4px; padding: 14px 16px; }
/* (the mark's column a mark and a half wide, W1: a wide official mark, n8n's or Make's, stays inside it) */
.tf--static .tf__logo { grid-row: 1 / span 2; justify-self: center; max-width: calc(var(--tf-mark) * 1.5); }
.tf--static .tf__name { text-align: left; font-size: 15px; font-weight: 600; }
.tf--static .tf__line { display: block; grid-column: 2; font: 400 14px/1.4 var(--font-body, 'Mona Sans', system-ui, sans-serif); color: rgba(236, 233, 241, 0.8); }
.tf--static .tf__tile--lockup { grid-template-columns: minmax(0, 1fr); }
.tf--static .tf__tile--lockup .tf__logo { grid-row: auto; justify-self: start; height: calc(var(--tf-mark) * 0.7); max-width: 100%; }
.tf--static .tf__tile--lockup .tf__line { grid-column: 1; }
/* (L1, W1 review D9) a name tile (HubSpot, until its permission is on file) keeps its list's mark column, empty, so its
   name and line start on the same edge as every sibling's */
.tf--static .tf__tile--name .tf__name, .tf--static .tf__tile--name .tf__line { grid-column: 2; }
.tf--static .tf__tile--labs { width: auto; }
/* (L1, W1 review C5) a wide official mark (n8n, 2.5:1) draws at least 24 px tall on every screen, with its owner's
   clear space (the symbol's height) to its name; its list shares the mark column and the gap, so the names keep one
   edge */
.tf--static .tf__list:has(> .tf__tile--wide) .tf__tile:not(.tf__tile--lockup) { grid-template-columns: max(calc(var(--tf-mark) * 1.5), 60px) minmax(0, 1fr); column-gap: 24px; }
.tf--static .tf__tile--wide .tf__logo { max-width: max(calc(var(--tf-mark) * 1.5), calc(24px * var(--tf-ar, 2.5))); }

/* phones */
@media (max-width: 767px) {
  .tf { --tf-tile-w: 128px; --tf-tile-h: 80px; --tf-mark: 30px; --tf-gap: 10px; --tf-pad: 16px; grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 16px 0; }
  .tf .tf__h { margin-bottom: 0; }
  .tf__row, .tf__row[data-group="labs"] { grid-template-columns: minmax(0, 1fr); row-gap: 5px; }
  .tf .tf__label { min-height: 24px; padding: 0 12px; }
  .tf__name { font-size: 12px; }
  .tf--rows .tf__row[data-group="labs"] .tf__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 var(--tf-pad); }
  .tf--rows .tf__tile--labs { width: auto; }
  .tf--rows .tf__tile--labs .tf__logo { height: var(--tf-mark); }
}
@media (prefers-reduced-motion: reduce) {
  .tf__track { animation: none !important; transform: none !important; }
  .tf__list--copy { display: none !important; }
}