/* Unify Gateway UI — the UnifyAI standard.
 *
 * Every value here comes from tokens.css. No hex literal belongs in this file:
 * if something needs a colour the tokens do not have, that is a question for
 * the shared standard, not a local decision.
 *
 * Fonts are self-hosted. Loading them from Google would send every visitor's
 * IP to Google, which is not a trade a self-hosted product gets to make on its
 * operator's behalf.
 */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

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

/* An author `display` declaration beats the user-agent rule for [hidden], so a
   hidden nav item would keep showing. Everything that hides itself in this UI
   does it with the attribute, so the attribute has to win. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--u-bg);
  color: var(--u-ink);
  font-family: var(--u-font-body);
  font-size: var(--u-text-md);
  line-height: 1.55;
}

a { color: var(--u-ink); }

/* ---- app shell ---------------------------------------------------------- */

.u-header {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 24px;
  background: var(--u-white);
  border-bottom: var(--u-rule);
}
/* The five literal px font sizes in this file — button 15, header product
   name 17, mono labels 11, eyebrow 12, code 13 — are the standard's fixed
   component sizes. They are the only sanctioned exceptions to the token scale
   and every product uses exactly them, so they are literals on purpose. Do not
   move them onto the scale.
 *
 * v1.1: in a header the full equal-height clear space is relaxed to 12px on
   either side plus the divider rule. The full rule still governs marketing
   headlines, print and the OG image. */
/* 40px, not 33px. lockup.png is 264x79 with ~7px of transparent padding on
   every side, so the visible artwork is only 65 of those 79 rows. At
   height:33px the mark renders 27.2px tall and misses the standard's
   32-34px; at 40px it renders 32.9px. Measured on the asset's alpha
   channel, not eyeballed. width stays auto so nothing can letterbox it. */
.u-header__lockup { height: 40px; width: auto; display: block; margin-right: 12px; }
.u-header__divider { width: 1px; height: 22px; background: var(--u-stone); margin-right: 12px; }
.u-header__product { font-family: var(--u-font-display); font-weight: 500; font-size: 17px; }
.u-header__spacer { flex: 1; }
.u-avatar {
  width: 36px; height: 36px; border-radius: var(--u-radius-pill);
  background: var(--u-slate); color: var(--u-paper);
  display: grid; place-items: center;
  font-family: var(--u-font-body); font-weight: 600; font-size: var(--u-text-xs);
  border: 0; cursor: pointer; text-decoration: none;
}

.u-layout { display: flex; min-height: calc(100vh - 64px); align-items: stretch; }

.u-sidebar {
  width: 216px; flex: none;
  background: var(--u-paper);
  border-right: var(--u-rule);
  padding: 20px 12px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.u-nav { font-size: var(--u-text-sm); padding: 10px 12px; border-radius: var(--u-radius);
  text-decoration: none; color: var(--u-ink-2); display: block; }
.u-nav:hover { background: color-mix(in srgb, var(--u-ink) 5%, transparent); }
/* The active item is an ink fill. Amber is the one accent and is spent on the
   primary action, never on navigation. */
.u-nav[aria-current="page"] { background: var(--u-ink); color: var(--u-paper); font-weight: 500; }
.u-sidebar__foot { margin-top: auto; font-family: var(--u-font-mono); font-size: 11px;
  color: var(--u-muted); line-height: 1.5; }

.u-content { flex: 1; padding: 32px 36px; min-width: 0; }

.u-eyebrow { font-family: var(--u-font-mono); font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--u-muted); }
.u-metric { font-family: var(--u-font-display); font-weight: 700; font-size: var(--u-metric);
  line-height: 1.02; letter-spacing: -0.03em; margin: 8px 0 4px; }
.u-subline { color: var(--u-ink-2); margin: 0; }
.u-focal { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  flex-wrap: wrap; margin-bottom: 32px; }

h1, h2, h3 { font-family: var(--u-font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: var(--u-h1); }
h2 { font-size: var(--u-h2); }
h3 { font-size: var(--u-h3); }

/* ---- components --------------------------------------------------------- */

.u-btn {
  height: 44px; padding: 0 20px; border-radius: var(--u-radius);
  font-family: var(--u-font-body); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
/* Ink on amber, never white: white on amber is about 2:1 and fails contrast. */
.u-btn--primary { background: var(--u-btn-primary-bg); color: var(--u-btn-primary-fg); }
.u-btn--primary:hover { background: var(--u-amber-600); }
.u-btn--secondary { background: var(--u-slate); color: var(--u-paper); }
.u-btn--ghost { background: var(--u-white); color: var(--u-ink);
  border-color: color-mix(in srgb, var(--u-ink) 20%, transparent); }

.u-input {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--u-white); color: var(--u-ink);
  border: var(--u-rule); border-radius: var(--u-radius);
  font-family: var(--u-font-body); font-size: var(--u-text-md);
}
.u-input:focus { outline: none; border-color: var(--u-amber-500); box-shadow: var(--u-focus); }
.u-label { display: block; font-size: var(--u-text-sm); font-weight: 600; margin-bottom: 6px; }
.u-hint { display: block; margin-top: 6px; color: var(--u-muted); font-size: var(--u-text-xs); }

.u-card { background: var(--u-white); border: var(--u-rule); border-radius: var(--u-radius);
  padding: 22px 24px; }

.u-table { width: 100%; border-collapse: collapse; }
.u-table th { text-align: left; font-family: var(--u-font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--u-muted);
  padding: 10px 0; border-bottom: var(--u-rule); }
.u-table td { font-size: var(--u-text-sm); padding: 12px 0; border-bottom: var(--u-rule); }
/* Account ids, keys and model names are unbroken strings. Left alone they push
   the table past its card on a phone — measured at 375px: cell right edge 368
   against a card edge of 355. They wrap instead of escaping. */
.u-num, .u-id { font-family: var(--u-font-mono); overflow-wrap: anywhere; }
.u-table { table-layout: fixed; }
.u-table td { overflow-wrap: anywhere; }

.u-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--u-text-sm); }
.u-status::before { content: ""; width: 8px; height: 8px; border-radius: var(--u-radius-pill);
  background: var(--u-muted); }
.u-status--live::before { background: var(--u-amber-500); }
.u-status--ok::before { background: var(--u-success); }
.u-status--warn::before { background: var(--u-warning); }
.u-status--down::before { background: var(--u-danger); }

.u-badge { display: inline-block; background: var(--u-amber-100); color: var(--u-badge-fg);
  font-family: var(--u-font-mono); font-size: 11px; padding: 3px 8px;
  border-radius: var(--u-radius); }

.u-code { background: var(--u-code-bg); color: var(--u-code-fg); font-family: var(--u-font-mono);
  font-size: 13px; padding: 14px 16px; border-radius: var(--u-radius);
  overflow-x: auto; white-space: pre; }

.u-foot { border-top: var(--u-rule); margin-top: 40px; padding-top: 20px;
  color: var(--u-muted); font-size: var(--u-text-xs); }

/* ---- mobile shell, identical in every UnifyAI product ------------------- */

/* The menu button only exists below 768px. Above it the sidebar is the nav. */
.u-menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--u-radius);
  color: var(--u-ink); cursor: pointer; padding: 0;
}
.u-menu-btn:hover { background: color-mix(in srgb, var(--u-ink) 5%, transparent); }
.u-menu-btn svg { width: 22px; height: 22px; }

/* The panel drops straight down from the header: no overlay, no side drawer,
   and never a second row of links under the header. */
.u-mobile-nav {
  display: none;
  background: var(--u-paper);
  border-bottom: var(--u-rule);
}
.u-mobile-nav a {
  display: flex; align-items: center;
  height: 48px; padding: 0 24px;
  font-size: var(--u-text-sm); color: var(--u-ink-2); text-decoration: none;
}
.u-mobile-nav a[aria-current="page"] { background: var(--u-ink); color: var(--u-paper); font-weight: 500; }

@media (max-width: 767px) {
  .u-menu-btn { display: inline-flex; }
  .u-mobile-nav[data-open="true"] { display: block; }
  .u-sidebar { display: none; }
  .u-layout { display: block; min-height: 0; }
  .u-content { padding: 24px 20px; }
  .u-metric { font-size: var(--u-h1); }
  .u-focal { flex-direction: column; gap: 16px; }
}

/* Below 581px the lockup gives way to the mark alone at 32px. */
.u-header__mark { display: none; width: 32px; height: 32px; }
@media (max-width: 580px) {
  .u-header__lockup, .u-header__divider, .u-header__product { display: none; }
  .u-header__mark { display: block; }
  .u-header { padding: 0 16px; }
  .u-mobile-nav a { padding: 0 16px; }
}