/* AI Role Registry Report — North Star Labs
   instrument grammar: Geist Mono Light, white, black ink, single #2222ff
   accent, hairlines #d9d9d9, corner brackets, dim-label / blue-value.
   Screen: paged full-viewport deck. Print: flattened sequential doc. */

:root {
  --accent: #2222ff;
}

.report-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 96px var(--pad) 0;
  font-size: 12px;
}

/* boot line while the JSON is in flight */
.report-loading {
  font-size: 12px;
}

.rl-dim { color: var(--ink-dim); }
.rl-val { color: var(--accent); }

/* ---------- error block (fetch 404) ---------- */

.report-error {
  position: relative;
  max-width: 560px;
  margin: 48px auto;
  padding: 32px 28px;
}

.report-error .err-head {
  color: var(--ink-dim);
  margin-bottom: 16px;
}

.report-error .err-line {
  line-height: 1.7;
}

.report-error .err-line .val { color: var(--accent); }
.report-error .err-line .dim { color: var(--ink-dim); }

.report-error .err-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--accent);
}

.report-error .err-link:hover { color: var(--ink); }

/* ---------- corner brackets (home .corner grammar, self-contained) ---------- */

.bracketed { position: relative; }

.bracketed .corner {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 1;
  pointer-events: none;
}

/* ---------- deck — paged full-viewport slideshow ---------- */

body.deck-mode { overflow: hidden; }

body.deck-mode .report-main {
  max-width: none;
  padding: 0;
}

/* the deck owns the viewport; the injected footer sits out */
body.deck-mode .site-footer { display: none; }

.deck-page {
  display: none;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 88px var(--pad) 104px;
  background: #fff;
  z-index: 10; /* under .site-header (20) and the menu overlay (30) */
}

/* fast clean swap: incoming page snaps in with a short opacity ramp */
.deck-page.active {
  display: block;
  animation: deck-in 120ms linear;
}

@keyframes deck-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* counter bottom-left — `03 / 08` current blue + dim section readout */
.deck-counter {
  position: fixed;
  left: var(--pad);
  bottom: 18px;
  z-index: 25;
  font-size: 12px;
  pointer-events: none;
}

.deck-counter .dc-cur { color: var(--accent); }
.deck-counter .dc-rest { color: var(--ink-dim); }
.deck-counter .dc-label { color: var(--ink-dim); margin-left: 16px; }

/* [←][→] bottom-right, bracket affordance grammar */
.deck-arrows {
  position: fixed;
  right: calc(var(--pad) - 6px);
  bottom: 12px;
  z-index: 25;
  display: flex;
  gap: 8px;
}

.deck-btn {
  font-family: inherit;
  font-weight: inherit;
  font-size: 12px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.deck-btn:hover { color: var(--accent); }

.deck-btn[disabled] {
  color: var(--ink-dim);
  cursor: default;
}

/* dark statement page: header + deck chrome flip to white ink */
.deck-page.p-dark { background: #000; }

body.on-dark .site-header .logo { color: #fff; }
body.on-dark .menu-toggle { color: #fff; }
body.on-dark .menu-toggle:hover { color: rgba(255, 255, 255, 0.6); }
body.on-dark .deck-btn { color: #fff; }
body.on-dark .deck-btn:hover { color: var(--accent); }
body.on-dark .deck-btn[disabled] { color: rgba(255, 255, 255, 0.4); }
body.on-dark .deck-counter .dc-rest,
body.on-dark .deck-counter .dc-label { color: rgba(255, 255, 255, 0.5); }

/* ---------- cover block ---------- */

.report-cover {
  padding: 56px 40px 48px;
  margin-bottom: 24px;
}

.cover-doctype {
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 32px;
}

.cover-title {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.25;
  max-width: 18em;
}

.cover-project {
  font-size: 16px;
  margin-top: 12px;
  color: var(--accent);
}

/* dim-label / blue-value pairs, .globe-readout grammar stacked */
.cover-readout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
  font-size: 12px;
}

.cover-readout .k { color: var(--ink-dim); }
.cover-readout .v { color: var(--accent); word-break: break-all; }

/* North Star Labs mark */
.cover-mark {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cover-mark img {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
}

.cover-mark .mark-name { font-size: 16px; }
.cover-mark .mark-star { color: var(--accent); }
.cover-mark .mark-sub {
  display: block;
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* ---------- metadata pills ---------- */

.meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  border: 1px solid var(--ink);
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.pill .k { color: var(--ink-dim); margin-right: 8px; }
.pill .v { color: var(--accent); }

/* ---------- role id badge ---------- */

.air-badge {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 1px 7px;
  font-family: inherit;
  font-weight: inherit;
  font-size: 12px;
  color: var(--accent);
  background: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: baseline;
}

.air-badge:hover {
  border-color: var(--accent);
}

/* ---------- section headings ---------- */

.section-head {
  font-size: 16px;
  font-weight: 300;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 10px;
  margin-bottom: 40px;
}

.sub-head {
  font-size: 12px;
  margin: 56px 0 6px;
}

.sub-head:first-of-type { margin-top: 0; }

.sub-head .no { color: var(--accent); margin-right: 8px; }

/* the spec's Purpose line — dim 12px note under the title */
.purpose {
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 24px;
}

/* ---------- 1.1 contact-point flows — axonometric prisms ---------- */

.flow-block {
  position: relative;
  margin-bottom: 40px;
  padding: 24px 20px 20px;
  border: 1px solid var(--hairline);
  scroll-margin-top: 8px;
}

.flow-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 24px;
}

.flow-head .flow-name { font-size: 12px; }
.flow-head .flow-kind { font-size: 12px; color: var(--ink-dim); }

/* corner readout — anchor path, shown while the role prism is hot */
.flow-readout {
  position: absolute;
  top: 8px;
  right: 12px;
  max-width: 46ch;
  font-size: 10px;
  text-align: right;
  word-break: break-all;
  opacity: 0;
  transition: opacity 120ms linear;
  pointer-events: none;
}

.flow-readout .fr-k { color: var(--ink-dim); }
.flow-readout .fr-v { color: var(--accent); }

.flow-block.role-hot .flow-readout { opacity: 1; }

/* chain: prisms left→right on desktop, connectors between */
.flow-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 28px;
}

/* node: prism on a shared 72px band, tag + label stacked under it */
.fnode {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 104px;
  flex: 0 0 auto;
  text-align: center;
}

.fnode .prism { display: block; }

/* faces: white / light, hairline 1-device-px ink outlines */
.fnode .prism polygon {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linejoin: miter;
  transition: stroke 120ms linear;
}

.fnode .prism .pf-left { fill: #f7f7f7; }
.fnode .prism .pf-right { fill: #ececec; }

/* human step — dashed containment */
.fnode[data-kind="human"] .prism polygon { stroke-dasharray: 3 2; }

/* external system / consequence path — heavier outline */
.fnode[data-kind="external"] .prism polygon { stroke-width: 2; }

.fnode .f-kind {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-top: 6px;
  transition: color 120ms linear;
}

.fnode[data-kind="human"] .f-kind { color: var(--ink); }

.fnode .f-label {
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-dim);
  word-break: break-word;
  margin-top: 3px;
  max-width: 100%;
  transition: color 120ms linear;
}

/* the ROLE node — larger prism, only the blue badge + role type */
.fnode.f-role { width: 128px; }

.fnode.f-role .air-badge { margin-top: 6px; }

.fnode.f-role .f-type {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-top: 5px;
  transition: color 120ms linear;
}

/* connector: thin 1px line + small arrowhead, meets prisms mid-band */
.flink {
  position: relative;
  width: 26px;
  height: 1px;
  background: var(--ink);
  flex: 0 0 auto;
  margin-top: 36px; /* prism band center (PRISM_H / 2) */
  transition: background-color 120ms linear;
}

.flink::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 6px solid var(--ink);
  transition: border-left-color 120ms linear;
}

/* hover / tap: edges, label, and touching connectors flip to the accent —
   stroke and text color only, no scale, no shadow, no motion */
.fnode.hot .prism polygon { stroke: var(--accent); }
.fnode.hot .f-kind,
.fnode.hot .f-label,
.fnode.hot .f-type { color: var(--accent); }
.fnode.hot .air-badge { border-color: var(--accent); }

.flink.hot { background: var(--accent); }
.flink.hot::after { border-left-color: var(--accent); }

/* flows go vertical under ~700px: column chain, connector rotates */
@media (max-width: 700px) {
  .flow-chain {
    flex-direction: column;
    align-items: center;
    row-gap: 0;
  }

  .fnode { width: min(240px, 100%); }
  .fnode.f-role { width: min(240px, 100%); }

  .flink {
    width: 1px;
    height: 24px;
    margin: 8px 0;
    transition: background-color 120ms linear;
  }

  .flink::after {
    right: -3px;
    top: auto;
    bottom: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 6px solid var(--ink);
    border-bottom: none;
    transition: border-top-color 120ms linear;
  }

  .flink.hot::after {
    border-left-color: transparent;
    border-top-color: var(--accent);
  }
}

/* ---------- tables (1.2 / 1.3 / 1.4) ---------- */

/* wide tables scroll inside their own container (site rule) */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.report-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.report-table th {
  font-weight: 300;
  color: var(--ink-dim);
  text-align: left;
  border-bottom: 1px solid var(--ink);
  padding: 8px 20px 8px 0;
  white-space: nowrap;
}

.report-table td {
  border-bottom: 1px solid var(--hairline);
  padding: 10px 20px 10px 0;
  vertical-align: top;
  white-space: nowrap;
}

.report-table td.wrap {
  white-space: normal;
  min-width: 16ch;
}

.report-table td.code { word-break: break-all; white-space: normal; min-width: 22ch; }

/* enum values in blue / dim alternation for scanability */
.report-table td .ev-a { color: var(--accent); }
.report-table td .ev-b { color: var(--ink-dim); }

/* ---------- section 2 — distribution cell bars ---------- */

.dist-block { margin-bottom: 8px; }

.dist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--hairline);
}

.dist-row:last-child { border-bottom: none; }

.d-label {
  flex: 0 0 auto;
  width: 27ch;
  color: var(--ink-dim);
}

.d-cells {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.d-cells .cell {
  width: 10px;
  height: 10px;
  background: var(--ink);
}

.d-count { color: var(--accent); }

.dist-row.is-zero .d-count { color: var(--ink-dim); }

/* ---------- section 2.1–2.3 — radar (spider) charts ---------- */

/* three radars side by side on desktop, stacked on mobile/print */
.radar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 16px;
  align-items: flex-start;
}

.radar-item {
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 100%;
}

.radar-item .sub-head { margin-top: 0; }

.radar-block {
  display: flex;
  justify-content: center;
}

.radar-chart {
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.radar-ring,
.radar-axis {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1;
}

.radar-data {
  fill: rgba(34, 34, 255, 0.05);
  stroke: var(--accent);
  stroke-width: 1;
}

.radar-marker { fill: var(--accent); }

.radar-label {
  font-family: inherit;
  font-size: 10px;
  fill: var(--ink-dim);
}

.radar-label .radar-count { fill: var(--accent); }

/* ---------- section 3 — statement of AI use ---------- */

/* on screen the statement page itself is the black band */
.statement-band {
  background: #000;
  color: #fff;
  padding: 24px 0 64px;
}

/* deck pages own the black; the band just lays type on it */
body.deck-mode .statement-band { background: transparent; }

.statement-inner {
  max-width: 960px;
  margin: 0 auto;
}

.statement-inner .section-head {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.statement-inner .statement-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 48px;
}

.statement-inner .statement-meta .val { color: var(--accent); }

.statement-text {
  max-width: 640px;
}

.statement-text p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.statement-text p:last-child { margin-bottom: 0; }

/* ---------- mobile ---------- */

@media (max-width: 640px) {
  .deck-page { padding: 72px var(--pad) 96px; }

  .report-cover { padding: 40px 20px 36px; }

  .cover-title { font-size: 22px; }

  .cover-readout { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; }

  .flow-readout { position: static; text-align: left; margin-bottom: 16px; display: block; }

  .d-label { width: 100%; }

  .dist-row { flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; }

  .radar-row { flex-direction: column; gap: 48px; }

  .radar-item { max-width: 380px; margin: 0 auto; }

  .radar-chart { max-width: 260px; }
}

/* ---------- print — these get sent to insurers ---------- */

@media print {
  .site-header,
  .menu-toggle,
  .menu-overlay,
  .site-footer,
  .report-loading,
  .deck-counter,
  .deck-arrows,
  .flow-readout {
    display: none !important;
  }

  body { background: #fff; }

  body.deck-mode { overflow: visible; }

  .report-main { padding: 24px 0 0; max-width: none; }

  /* flatten the deck: every page sequential, no fixed positioning */
  .deck-page {
    display: block !important;
    position: static;
    height: auto;
    overflow: visible;
    padding: 0 0 48px;
    animation: none;
    background: #fff;
  }

  .deck-page.p-dark { background: #fff; }

  .statement-band {
    background: #fff;
    color: var(--ink);
    padding: 48px 0 0;
    margin-top: 16px;
  }

  .statement-inner .section-head {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }

  .statement-inner .statement-meta { color: var(--ink-dim); }

  /* never break inside a table row or a single flow diagram */
  .report-cover,
  .flow-block,
  .report-table tr,
  .dist-block,
  .radar-item,
  .statement-text p {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* three radars per row is too tight on a printed page — stack them */
  .radar-row { flex-direction: column; gap: 32px; }
  .radar-item { max-width: 420px; margin: 0 auto; }

  .table-scroll { overflow: visible; }

  .report-table td { white-space: normal; }

  .air-badge { cursor: default; }
}