/* Hallmark · shape: Narrative Workflow · genre: modern-minimal · theme: Console (deal 2/3, seed ontoagent-product-governed-enterprise-bc75·38a52bcb·2026-11-13·r0) · job: sign up · draw: 5ef732 · console: graphite
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · weakest: V, refocused narrative from governance plumbing to core product loop (grounding, cross-agent transfer, anti-drift, governance promotion)
 * hero-review: in-thread · verified 3-tab product inspector fits 1280x800 and 1440x900 folds cleanly
 * finish-review: in-thread · polish applied per Hallmark & Modern Web Guidance (popover navbar, hidden=until-found tabs, @container table, native underlines, logical properties, CJK punctuation) · 0 FAIL, 0 REFLEX, 0 WARN
 */
@import "./tokens.css?v=5";
@import "./base.css?v=5";

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
}

.measured {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums slashed-zero;
}

.actor {
  color: var(--color-accent);
}

.reading {
  font-family: var(--font-outlier);
  font-weight: 400;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Skip link */
.skip-link {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

/* Controls: one filled primary on the page (in hero), quiet outline elsewhere */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-block-size: 46px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.btn:hover {
  background: var(--color-paper-3);
  border-color: var(--color-muted);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover {
  background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink));
  border-color: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink));
}

.btn--quiet {
  background: transparent;
  border-color: var(--color-rule-2);
  color: var(--color-ink);
}

.btn--quiet:hover {
  background: var(--color-paper-2);
}

/* Header & Nav: slab with single-tree responsive popover */
.site-header {
  background: var(--color-paper-3);
  color: var(--color-ink);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-block-size: 68px;
}

.nav__row > * {
  flex-shrink: 0;
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  flex-shrink: 0;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.menu-button {
  min-block-size: 44px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  anchor-name: --menu-button;
}

.menu-button:hover {
  border-color: var(--color-muted);
}

.menu-button:active {
  transform: translateY(1px);
}

.site-menu {
  list-style: none;
  margin: 0;
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
  position: fixed;
  inset: auto;
  inset-block-start: 4.5rem;
  inset-block-start: anchor(--menu-button bottom);
  inset-inline-end: var(--gutter);
  inline-size: min(76dvw, 18rem);
  max-block-size: calc(100dvh - 6rem);
  margin-block-start: var(--space-xs);
  overflow: auto;
}

.site-menu:is(:popover-open, .\:popover-open) {
  display: grid;
  gap: var(--space-2xs);
}

.site-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out);
}

.site-menu a:hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
}

.site-header.is-wide .menu-button {
  display: none;
}

.site-header.is-wide .site-menu {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  inline-size: auto;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.site-header.is-wide .site-menu::backdrop {
  display: none;
}

.site-header.is-wide .site-menu a {
  padding: var(--space-xs) 0;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Hairline panels */
.panels {
  display: grid;
  gap: var(--rule-hair);
  background: var(--color-rule);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.panels > * {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

/* State chips */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.chip--ok {
  background: var(--color-ok-soft);
  border-color: color-mix(in oklab, var(--color-ok) 38%, transparent);
  color: var(--color-ok);
}

.chip--bad {
  background: var(--color-bad-soft);
  border-color: color-mix(in oklab, var(--color-bad) 38%, transparent);
  color: var(--color-bad);
}

.chip--cool {
  background: var(--color-cool-soft);
  border-color: color-mix(in oklab, var(--color-cool) 38%, transparent);
  color: var(--color-cool);
}

/* Hero: Stage (5fr / 7fr) */
.hero {
  min-block-size: calc(100dvh - 69px);
  display: grid;
  align-items: center;
  padding-block: var(--space-2xl);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
}

.hero__text {
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
}

.hero__text h1 {
  font-size: clamp(2.4rem, 4vw + 0.5rem, 4.25rem);
  line-height: 1.06;
  max-inline-size: 14ch;
}

.hero__text .lead {
  color: var(--color-ink-2);
  max-inline-size: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding-block-start: var(--space-xs);
}

.hero__visual {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.hero__slot {
  margin: 0;
  border-radius: var(--radius-card);
  background: transparent;
  min-width: 0;
}

.inspector__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0 var(--space-lg);
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.inspector__tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: inline proximity;
}

.inspector__tab {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  min-block-size: 48px;
  padding: 0 var(--space-2xs);
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}

.inspector__tab:hover {
  color: var(--color-ink);
}

.inspector__tab[aria-selected="true"] {
  color: var(--color-cool);
}

.inspector__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  border-block-end: 2px solid var(--color-cool);
}

.inspector__tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* Panels kept borderless/paddingless for hidden="until-found"; inner .inspector__card owns surface */
.inspector__stack {
  display: grid;
  min-width: 0;
  background: var(--color-paper-2);
}

.inspector__pane {
  grid-area: 1 / 1;
  min-width: 0;
}

.inspector__pane:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.inspector__card {
  display: grid;
  gap: var(--rule-hair);
  background: var(--color-rule);
  color: var(--color-ink);
}

.inspector__card > * {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.record__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.record__name {
  font-size: var(--text-title);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
}

.record__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.diff {
  display: grid;
  gap: var(--rule-hair);
  background: var(--color-rule);
}

.diff__row {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 8.5rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  align-items: baseline;
}

.diff__row--head {
  background: var(--color-paper-3);
  color: var(--color-muted);
  font-weight: 500;
}

.diff__row--changed {
  background: var(--color-ok-soft);
  color: var(--color-ink);
}

.diff__row--blocked {
  background: var(--color-bad-soft);
  color: var(--color-ink);
}

.diff__label {
  color: var(--color-muted);
  font-weight: 500;
  min-width: 0;
}

.diff__old,
.diff__new {
  min-width: 0;
  overflow-wrap: break-word;
}

.diff__old {
  color: var(--color-ink-2);
}

.diff__new {
  color: var(--color-ink);
}

.record__meta {
  margin: 0;
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.record__meta div {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.record__meta dt {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
}

.record__meta dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.well {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hero__caption,
.caption {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.caption {
  margin-block-start: var(--space-md);
}

/* Shared section heads & rhythm */
.headblock {
  display: grid;
  gap: var(--space-md);
  margin-block-end: var(--space-2xl);
}

.headblock .lead {
  color: var(--color-ink-2);
}

.headblock--split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap-columns);
  align-items: end;
}

.headblock--split .lead {
  max-inline-size: 56ch;
}

.sec-capabilities {
  padding-block-start: var(--section-gap);
  padding-block-end: 0;
}

.sec-lifecycle {
  padding-block-start: var(--section-gap-l);
  padding-block-end: 0;
}

.sec-contrast {
  padding-block-start: var(--section-gap);
  padding-block-end: 0;
}

.sec-evidence {
  padding-block-start: var(--section-gap-l);
  padding-block-end: 0;
}

.sec-usage {
  padding-block-start: var(--section-gap);
  padding-block-end: 0;
}

.sec-figures {
  padding-block-start: var(--section-gap-s);
  padding-block-end: var(--section-gap);
}

/* Section 1: Capabilities Bento (8 + 4 / 6 + 6) */
.bento {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.bento__lead {
  grid-column: span 8;
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-md);
  align-content: space-between;
}

.bento__side {
  grid-column: span 4;
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.bento__half {
  grid-column: span 6;
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.bento p {
  color: var(--color-ink-2);
}

.bento__lead .well,
.bento__half .well {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
}

/* Section 2: Lifecycle 4-stage flow */
.flow-list {
  list-style: none;
  counter-reset: stage;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-columns);
}

.flow-list li {
  counter-increment: stage;
  display: grid;
  gap: var(--space-md);
  align-content: start;
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  min-width: 0;
}

.flow-list h3::before {
  content: "0" counter(stage) "  ";
  font-family: var(--font-outlier);
  color: var(--color-cool);
  font-variant-numeric: tabular-nums;
}

.flow-list p {
  color: var(--color-ink-2);
}

.flow-list .flow__tag {
  font-size: var(--text-sm);
  color: var(--color-accent);
}

/* Section 3: Contrast Table (container-responsive + accessible region) */
.table-wrap {
  inline-size: 100%;
  overflow-x: auto;
  container-type: inline-size;
}

.table-wrap:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.cmp-table {
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
}

.cmp-table th,
.cmp-table td {
  padding: var(--space-lg) var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}

.cmp-table thead th {
  padding-block-start: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  border-block-end-color: var(--color-rule-2);
  white-space: nowrap;
}

.cmp-table th:first-child,
.cmp-table td:first-child {
  padding-inline-start: 0;
}

.cmp-table th:last-child,
.cmp-table td:last-child {
  padding-inline-end: 0;
}

.cmp-table tbody th {
  font-size: var(--text-title);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  white-space: nowrap;
}

.cmp-table tbody th .chip {
  margin-inline-start: var(--space-xs);
  vertical-align: middle;
}

.cmp-table td {
  color: var(--color-ink-2);
}

.cmp-table tr.row--onto {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.cmp-table tr.row--onto th {
  color: var(--color-cool);
}

.cmp-table tr.row--onto td {
  color: var(--color-ink);
}

@container (width < 46rem) {
  .cmp-table thead {
    display: none;
  }
  .cmp-table,
  .cmp-table tbody,
  .cmp-table tr,
  .cmp-table th,
  .cmp-table td {
    display: block;
    inline-size: 100%;
  }
  .cmp-table tr {
    padding: var(--space-lg) 0;
    border-block-end: var(--rule-hair) solid var(--color-rule);
  }
  .cmp-table tr.row--onto {
    padding-inline: var(--space-md);
    border-radius: var(--radius-card);
  }
  .cmp-table th,
  .cmp-table td {
    padding: var(--space-xs) 0;
    border-block-end: 0;
  }
  .cmp-table tbody th {
    white-space: normal;
    padding-block-end: var(--space-sm);
  }
  .cmp-table td::before {
    content: attr(data-label) "：";
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-muted);
    margin-block-end: var(--space-3xs);
  }
}

/* Section 4: Empirical Evidence Rows */
.ev-rows {
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}

.ev-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: var(--gap-columns);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  align-items: baseline;
}

.ev-row__name {
  font-size: var(--text-title);
  font-weight: 500;
  color: var(--color-ink);
}

.ev-row__src {
  color: var(--color-muted);
  overflow-wrap: break-word;
}

.ev-row__val {
  color: var(--color-ink);
}

/* Section 5: Integration Steps */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
}

.steps li {
  counter-increment: step;
  display: grid;
  gap: var(--space-md);
  align-content: start;
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  min-width: 0;
}

.steps h3::before {
  content: counter(step) "  ";
  font-family: var(--font-outlier);
  color: var(--color-cool);
  font-variant-numeric: tabular-nums;
}

.steps p {
  color: var(--color-ink-2);
}

.steps .well {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
}

/* Section 6: Verified Figures */
.figures__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-start: var(--rule-hair) solid var(--color-rule);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.figure {
  padding: var(--space-xl) var(--space-lg);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
  display: grid;
  gap: var(--space-xs);
}

.figure:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.figure__n {
  font-size: var(--text-display-s);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.figure__l {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Footer: mast */
.footer {
  background: var(--color-paper-3);
  color: var(--color-ink);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-2xl);
}

.footer__stack {
  display: grid;
  gap: var(--space-lg);
}

.footer__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out);
}

.footer__links a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.footer__legal {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@media (max-width: 60rem) {
  .hero {
    min-block-size: auto;
    padding-block: var(--space-xl);
  }
  .hero__grid,
  .headblock--split,
  .ev-row,
  .steps,
  .flow-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .diff__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }
  .record__meta {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento__lead,
  .bento__side,
  .bento__half {
    grid-column: span 12;
  }
  .figures__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .figure {
    padding: var(--space-lg);
  }
  .figure:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .figure:nth-child(n + 3) {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }
}

@media (max-width: 40rem) {
  .figures__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .figure {
    padding-inline: 0;
    border-inline-start: 0;
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }
  .figure:first-child {
    border-block-start: 0;
  }
}

@media (forced-colors: active) {
  .inspector__tab[aria-selected="true"]::after {
    border-block-end-color: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .site-menu a,
  .inspector__tab,
  .footer__links a {
    transition: none;
  }
}