/* Oz hub shell — the chrome shared by every hub and product wrapper.
   Consumes oz-tokens.css. Replaces the three hand-rolled copies that were in
   Oz.html, ai-in-our-dna-hub.html, and tribal-knowledge-graph.html. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

.oz-nav {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.oz-nav-main {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
}

.oz-brand {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink2);
  white-space: nowrap;
}
.oz-brand span { color: var(--accent); }

.oz-groups {
  display: flex;
  gap: 3px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.oz-groups::-webkit-scrollbar { display: none; }

.oz-group,
.oz-item {
  border: 0;
  background: none;
  color: var(--ink3);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.oz-group:hover,
.oz-item:hover { color: var(--ink); }

.oz-group {
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 700;
}
.oz-group.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.oz-link {
  font: 10px var(--mono);
  color: var(--ink3);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 9px;
  white-space: nowrap;
}
.oz-link:hover { color: var(--ink); border-color: var(--ink3); }

.oz-nav-sub {
  height: 35px;
  border-top: 1px solid var(--line2);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}

.oz-items { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.oz-items::-webkit-scrollbar { display: none; }

.oz-item {
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.oz-item.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

/* A product is a living visualization, not a static page. Mark it as such. */
.oz-item[data-kind="product"]::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.oz-item[data-kind="link"]::after {
  content: "↗";
  font-size: 10px;
  color: var(--ink3);
}

.oz-crumb {
  margin-left: auto;
  color: var(--ink3);
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.oz-frame { flex: 1; position: relative; min-height: 0; }
.oz-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: none;
  background: var(--bg);
}
.oz-frame iframe.is-active { display: block; }

.oz-link-pane {
  display: none;
  position: absolute;
  inset: 0;
  overflow: auto;
  background: var(--bg);
  color: var(--ink);
  padding: 40px 32px;
}
.oz-link-pane.is-active { display: block; }
.oz-link-pane .kicker {
  font: 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 10px;
}
.oz-link-pane h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}
.oz-link-pane .lede {
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink2);
  margin: 0 0 14px;
}
.oz-link-pane .url {
  font: 12px var(--mono);
  color: var(--ink3);
  margin: 0 0 18px;
  word-break: break-all;
}
.oz-link-pane .open {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
}
.oz-link-pane .open:hover { border-color: var(--accent); }

.oz-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.oz-warning {
  display: none;
  position: fixed;
  z-index: 20;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--gold) 16%, var(--bg));
  border: 1px solid var(--gold);
  color: var(--ink);
  padding: 12px 16px;
  border-radius: var(--r-md);
  font: 11px var(--mono);
  max-width: min(560px, 90vw);
}
.oz-warning.is-shown { display: block; }

@media (max-width: 850px) {
  .oz-nav-main { padding: 7px; flex-wrap: wrap; height: auto; }
  .oz-nav-sub { padding: 0 8px; }
}