/* ==========================================================================
   About · 05 Industries — "Find your sector" (Option 3, 21 Oct 2026)

   The picker on the left, the answer on the right. White ground between
   People (paper) and Proof (ink). Purple does one job here: the chosen chip.
   The answer panel sits on paper so the proof, not the fallback, is the
   loudest thing in the section. Tokens only, from site.built.css.
   ========================================================================== */

.e-fys__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: start;
}
.e-fys__pick { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.e-fys__title { max-width: 16ch; }
.e-fys__sub { margin: 0; font: var(--type-small); color: var(--text-muted); max-width: 58ch; }

.e-fys__tool { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.e-fys__prompt {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}

/* Search: only with JS, because without it there is nothing to filter. */
.e-fys__search { display: none; }
.js .e-fys__search {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-pill);
  padding: 4px 18px 4px 4px;
  background: var(--white);
  max-width: 560px;
}
.e-fys__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font: var(--type-small);
  font-size: 16px;            /* 16px stops iOS zooming into the field */
  color: var(--text-strong);
  border-radius: var(--radius-pill);
}
.e-fys__search input:focus { outline: none; }
.e-fys__search:focus-within { box-shadow: 0 0 0 3px var(--ink-200); }
.e-fys__search input::-webkit-search-cancel-button { cursor: pointer; }
.e-fys__matches {
  flex-shrink: 0;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Chips. Without JS they are a plain list of names; with it, buttons. */
.e-fys__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.e-fys__chips li[hidden] { display: none; }
.e-fys__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--text-strong);
  font: var(--weight-medium) 15px/1 var(--font-display);
  letter-spacing: var(--tracking-title);
  padding: 9px 14px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.e-fys__chip:hover { background: var(--ink-200); }
.e-fys__chip:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.e-fys__chip[aria-pressed="true"] { background: var(--ebr-purple); color: var(--white); }
html:not(.js) .e-fys__chip { cursor: default; }

.e-fys__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.e-fys__key { margin: 0; display: flex; align-items: center; gap: 8px; font: var(--type-small); color: var(--text-muted); }

/* "Show all" exists only to unfold the phone list. */
.e-fys__more { display: none; }

/* The answer. */
.e-fys__answer { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); min-width: 0; }
.e-fys__panel {
  background: var(--paper);
  border-radius: var(--radius-media);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.e-fys__panel p { margin: 0; }
.e-fys__label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.e-fys__fig {
  font: var(--weight-medium) clamp(64px, 7vw, 104px)/.9 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-strong);
}
.e-fys__figlabel { font: var(--type-lead); color: var(--text-body); }
.e-fys__project {
  font: var(--weight-medium) var(--size-body-l)/1.3 var(--font-display);
  letter-spacing: var(--tracking-title);
  color: var(--text-strong);
}
.e-fys__line { font: var(--type-lead); color: var(--text-strong); max-width: 34ch; }
.e-fys__go, .e-fys__talk { margin-top: var(--space-3); }
.e-fys__panel [hidden] { display: none !important; }

@media (max-width: 1080px) {
  .e-fys__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
}

/* Phones: one column, answer under the chips, chips folded to eleven. */
@media (max-width: 860px) {
  .e-fys__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .e-fys__answer { position: static; }
  .e-fys__panel { padding: var(--space-6); }
  .js .e-fys__chips.is-folded li:nth-child(n+12) { display: none; }
  .js .e-fys__more {
    display: inline-flex;
    align-self: flex-start;
    gap: 6px;
    border: 1.5px solid var(--ink-900);
    background: transparent;
    color: var(--text-strong);
    border-radius: var(--radius-pill);
    padding: 9px 14px;
    font: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
  }
  .js .e-fys__more[hidden] { display: none; }
  .e-fys__chip { font-size: 14px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .e-fys__chip { transition: none; }
}

/* Without JS the chips are a plain list; the one with proof keeps its colour. */
html:not(.js) .e-fys__chip[data-case] { background: var(--ebr-purple); color: var(--white); }