/* Entropix website — shared styles.
   The page layouts carry their own inline styles (exported from the design
   canvas); this file holds the fonts, the page basics and the interactive
   controls whose look depends on state. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-sans-600.woff2") format("woff2"); }
/* Space Grotesk ships 600 only; a 700 in the markup renders as 600. */
@font-face { font-family: "Space Grotesk"; font-weight: 500 700; font-style: normal; font-display: swap; src: url("fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root {
  --accent: #2f4bf5;
  --ink: #0e1015;
  --ground: #f5f6f8;
  --line: #dfe2e8;
  --muted: #4a5160;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
code { font-family: "IBM Plex Mono", ui-monospace, monospace; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The Governance page opens on the dark ground. */
body.page-dark { background: var(--ink); color: #e7e9ee; }
body.page-dark a { color: #e7e9ee; }
body.page-dark a:hover { color: #a9b6ff; }

/* With JavaScript, only the chosen tab's panel shows; without it, every
   panel shows, one after another. */
.js [data-panel]:not(.is-on) { display: none !important; }
.js [data-kind].is-hidden { display: none !important; }

/* Pill buttons: tabs, filters and toggles. */
.pill {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: 600 15px "IBM Plex Sans", sans-serif;
  background: #fff; color: var(--ink); border: 1px solid #c9cdd6;
}
.pill-sm { font-weight: 500; font-size: 14px; padding: 0 16px; }
.pill[aria-selected="true"], .pill[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill-dark {
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: 500 13px "IBM Plex Sans", sans-serif;
  background: transparent; color: #e7e9ee; border: 1px solid #3a3f4b;
}
.pill-dark[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }

/* The review angles on the PRDs page. */
.angle-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 0 18px; border-radius: 12px; cursor: pointer;
  font: 500 16px "IBM Plex Sans", sans-serif;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}
.angle-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* The setup steps on the Agents page. */
.step-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px;
  padding: 14px 18px; border-radius: 14px; cursor: pointer;
  font-family: "IBM Plex Sans", sans-serif;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}
.step-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.step-badge {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", monospace; font-size: 14px;
  background: #f0f1f4; color: var(--muted);
}
.step-btn[aria-pressed="true"] .step-badge { background: var(--accent); color: #fff; }

/* The contact form's note after Send. */
.form-note { margin: 0; font-size: 14px; color: #135f38; background: #e8f5ee; border-radius: 12px; padding: 12px 14px; }
.form-note[hidden] { display: none; }

/* Phones: the header's links take less room. */
@media (max-width: 640px) {
  nav[aria-label="Main"] > div:nth-child(2) { gap: 6px 18px !important; font-size: 14px !important; }
  nav[aria-label="Main"] { padding-top: 14px !important; padding-bottom: 14px !important; gap: 10px !important; }
}