/* page-directory.css — rules that belong to directory.html and nothing else.
   Shared styling lives in subpage.css, sections.css and parts.css; treat those as read only.
   The hero, info bar and filter labels are the stock subpage blocks. This file carries:

   1. the search field, which sits on the filter row and reads as one more label
   2. the segment groups, one per stage of the value chain
   3. the company rows: a dense four column ledger, because three hundred rows of the
      showcase list's display type would be a page of names and nothing else

   Colours and rules come from the bridge variables, easing and duration from the motion
   tokens. Radius is 0 throughout. */

/* ── 1. Filter row: search ─────────────────────────────────────────────────── */
.sy-dir-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(28px, 4vw, 44px);
}
.sy-dir-tools .vy-groups { margin-top: 0; flex: 1 1 100%; }   /* Twelve segments: the tabs take their own row and the search sits under them */
.vy-groups button { min-height: 44px; display: inline-flex; align-items: center; }
.vy-groups button:focus-visible { outline: 1px solid var(--vy-text-primary); outline-offset: 4px; }

.sy-dir-search {
  flex: 0 1 320px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--vy-dur-micro) var(--vy-ease);
}
.sy-dir-search:focus-within { border-bottom-color: var(--vy-text-primary); }
.sy-dir-search label {
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}
.sy-dir-search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 0;
  outline: none;
  color: var(--vy-text-primary);
  font-family: var(--vy-font-body);
  font-size: var(--text-sm);
}
.sy-dir-search input::placeholder { color: var(--vy-text-secondary); opacity: 0.6; }
.sy-dir-search input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }

/* ── 2. Segment groups ─────────────────────────────────────────────────────── */
.sy-dir { padding-top: clamp(40px, 6vh, 72px); }
.sy-dir-group + .sy-dir-group { margin-top: clamp(72px, 10vh, 120px); }
.sy-dir-group__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}
.sy-dir-group__head .vy-leaf-h2 { margin: 0; }
.sy-dir-group__blurb {
  max-width: 62ch;                     /* Matches the locked body measure */
  margin-top: 14px;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
}
.sy-dir-group__count {
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--vy-text-secondary);
  white-space: nowrap;
}

/* ── 3. Company rows ───────────────────────────────────────────────────────── */
.sy-dir-list { list-style: none; margin: 0; padding: 0; }
.sy-co {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 0.5fr) minmax(0, 0.7fr);
  gap: clamp(12px, 2vw, 32px);
  align-items: baseline;
  padding: clamp(18px, 2.4vh, 26px) 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.sy-co__name {
  font-family: var(--vy-font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--vy-text-primary);
  text-decoration: none;
  transition: color var(--vy-dur-micro) var(--vy-ease);
}
a.sy-co__name::after {
  content: "\2197";                    /* North-east arrow: this link leaves the site */
  margin-left: 0.4em;
  font-size: 0.7em;
  color: var(--vy-text-secondary);
}
a.sy-co__name:hover { color: var(--vy-text-secondary); }
a.sy-co__name:focus-visible { outline: 1px solid var(--vy-text-primary); outline-offset: 4px; }
.sy-co__desc {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
}
.sy-co__src {
  margin: 8px 0 0;
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-ui);
  color: var(--vy-ink-55);
}
.sy-co__src a {
  color: var(--vy-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
  transition: color var(--vy-dur-micro) var(--vy-ease);
}
.sy-co__src a:hover { color: var(--vy-text-primary); }
.sy-co__src a:focus-visible { outline: 1px solid var(--vy-text-primary); outline-offset: 2px; }

.sy-co__sub,
.sy-co__geo,
.sy-co__mkt {
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}
.sy-co__mkt { text-align: right; }
.sy-co__mkt span { display: block; }
.sy-co__mkt span + span { margin-top: 6px; color: var(--vy-ink-55); }

.sy-dir-empty {
  padding: clamp(48px, 8vh, 96px) 0;
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}

.sy-dir-note {
  margin-top: clamp(72px, 10vh, 120px);
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  max-width: 62ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sy-co { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .sy-co__main { grid-column: 1 / -1; }
  .sy-co__sub { grid-column: 1 / -1; }
  .sy-co__geo { grid-column: 1; }
  .sy-co__mkt { grid-column: 2; }
  .sy-co__mkt span + span { display: none; }
  .vy-leaf-statbar[data-section-id="directory-summary"] { grid-template-columns: 1fr; gap: 10px; }
  .vy-leaf-statbar[data-section-id="directory-summary"] span:nth-child(2),
  .vy-leaf-statbar[data-section-id="directory-summary"] span:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .sy-dir-search,
  .sy-co__name { transition: none; }
}