/* ========================================================================== OMI-AI Docs — shadcn-style documentation stylesheet Plain CSS. No build step. Works over file://. Light = :root defaults. Dark = .dark class (toggled on by the no-flash head script). All colors are HSL channels consumed as hsl(var(--token)). Hierarchy via type weight + 1px --border hairlines. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS (verbatim from CONTRACT §4) -------------------------------------------------------------------------- */ :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --success: 142 71% 45%; --warning: 35 92% 44%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --success: 142 71% 45%; --warning: 35 92% 44%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } /* Derived helpers ---------------------------------------------------------- */ :root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Radius scale (CONTRACT §4 component guidance) */ --radius-lg: var(--radius); /* 0.5rem — cards, pre, tables */ --radius-md: calc(var(--radius) - 2px); /* buttons, badges, inputs */ --radius-sm: calc(var(--radius) - 4px); /* inline code, chips */ /* Layout metrics */ --header-h: 56px; --content-measure: 70ch; /* Motion */ --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--transition), color var(--transition); } /* Visible keyboard focus everywhere — never removed without replacement. */ :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm); } /* Drop the legacy outline only where :focus-visible is supported. */ :focus:not(:focus-visible) { outline: none; } ::selection { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } img, svg { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- 3. SITE HEADER (sticky) -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; width: 100%; height: var(--header-h); padding: 0 20px; background: hsl(var(--background) / 0.9); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid hsl(var(--border)); transition: background-color var(--transition), border-color var(--transition); } .site-header .brand { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: hsl(var(--foreground)); text-decoration: none; transition: opacity var(--transition); } .site-header .brand:hover { opacity: 0.7; } /* Pill badge — reused inline in prose for status/level chips. */ .badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; line-height: 1.4; padding: 2px 8px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); white-space: nowrap; } .spacer { flex: 1 1 auto; } /* Square icon buttons (theme + menu toggles). */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; font: inherit; color: hsl(var(--muted-foreground)); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition), color var(--transition), border-color var(--transition); } .icon-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); } .icon-btn:active { background: hsl(var(--accent)); } /* Theme toggle icon — moon (light mode) / sun (dark mode). Pure CSS glyphs. */ .theme-icon { position: relative; display: inline-block; width: 18px; height: 18px; } /* Moon: a disc with a smaller background-colored disc cut out of it. */ .theme-icon::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; } .theme-icon::after { content: ""; position: absolute; top: -1px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: hsl(var(--background)); transition: background-color var(--transition); } /* Dark mode: morph the glyph into a filled sun disc (drop the crescent mask). */ .dark .theme-icon::before { inset: 4px; border-radius: 50%; box-shadow: 0 0 0 2px currentColor; background: currentColor; } .dark .theme-icon::after { /* Sun rays via a conic-ish set of dashes around the disc. */ inset: 0; top: 0; right: 0; width: 18px; height: 18px; background: none; border-radius: 0; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 50% 0, 50% 100%, 0 50%, 100% 50%; background-size: 2px 3px, 2px 3px, 3px 2px, 3px 2px; } /* Hamburger / menu icon — three bars built from currentColor. */ .menu-icon { position: relative; display: inline-block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; } /* Text header links (Download spec, GitHub). */ .header-link { font-size: 14px; font-weight: 400; color: hsl(var(--muted-foreground)); text-decoration: none; text-underline-offset: 3px; white-space: nowrap; transition: color var(--transition); } .header-link:hover { color: hsl(var(--foreground)); text-decoration: underline; } /* Menu toggle: hidden on desktop, revealed at the mobile breakpoint. */ #menu-toggle { display: none; } /* -------------------------------------------------------------------------- 4. LAYOUT GRID (sidebar | content | toc) -------------------------------------------------------------------------- */ .layout { display: grid; grid-template-columns: 256px minmax(0, 1fr) 240px; gap: 0; max-width: 1400px; margin: 0 auto; } /* -------------------------------------------------------------------------- 5. SIDEBAR -------------------------------------------------------------------------- */ .sidebar { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 24px 16px 40px; border-right: 1px solid hsl(var(--border)); background: hsl(var(--background)); transition: background-color var(--transition), border-color var(--transition); } .sidebar ul { list-style: none; margin: 0; padding: 0; } .sidebar li { margin: 1px 0; } .sidebar a { display: block; padding: 6px 12px; font-size: 14px; line-height: 1.4; color: hsl(var(--muted-foreground)); text-decoration: none; border-left: 2px solid transparent; border-radius: var(--radius-sm); transition: color var(--transition), background-color var(--transition), border-color var(--transition); } .sidebar a:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); } .sidebar a.active { color: hsl(var(--foreground)); font-weight: 500; background: hsl(var(--accent)); border-left-color: hsl(var(--primary)); } /* -------------------------------------------------------------------------- 6. CONTENT / PROSE -------------------------------------------------------------------------- */ .content { min-width: 0; /* allow pre/tables to shrink and scroll */ padding: 32px 40px 80px; } /* Constrain measure for readability. pre + .table-wrap may go full width. */ .content > h1, .content > h2, .content > h3, .content > h4, .content > p, .content > ul, .content > ol, .content > blockquote, .content > dl { max-width: var(--content-measure); } /* Headings ---------------------------------------------------------------- */ .content h1, .content h2, .content h3, .content h4 { color: hsl(var(--foreground)); scroll-margin-top: 72px; /* clear the sticky header on anchor jumps */ letter-spacing: -0.011em; } .content h1 { font-size: 32px; font-weight: 600; line-height: 1.2; margin: 0 0 16px; } .content h2 { font-size: 24px; font-weight: 600; line-height: 1.3; margin: 40px 0 12px; padding-bottom: 0; } .content h3 { font-size: 20px; font-weight: 600; line-height: 1.35; margin: 28px 0 8px; } .content h4 { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 20px 0 8px; } /* Heading anchor (#) injected by docs.js next to h2/h3. */ .heading-anchor { display: inline-block; margin-left: 0.35em; color: hsl(var(--muted-foreground)); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity var(--transition), color var(--transition); } .content h2:hover .heading-anchor, .content h3:hover .heading-anchor, .content h4:hover .heading-anchor { opacity: 1; } .heading-anchor:hover { color: hsl(var(--foreground)); } .heading-anchor:focus-visible { opacity: 1; } /* Body text --------------------------------------------------------------- */ .content p { margin: 0 0 16px; color: hsl(var(--foreground)); } .content a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: opacity var(--transition); } .content a:hover { opacity: 0.75; } .content ul, .content ol { margin: 0 0 16px; padding-left: 1.5rem; } .content li { margin: 4px 0; } .content li::marker { color: hsl(var(--muted-foreground)); } /* Nested lists keep tight rhythm. */ .content li > ul, .content li > ol { margin: 4px 0; } .content strong { font-weight: 600; color: hsl(var(--foreground)); } .content em { font-style: italic; } .content hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 32px 0; max-width: var(--content-measure); } /* -------------------------------------------------------------------------- 7. BLOCKQUOTE CALLOUTS -------------------------------------------------------------------------- */ .content blockquote { margin: 20px 0; padding: 12px 16px; border-left: 4px solid hsl(var(--border)); background: hsl(var(--muted)); border-radius: var(--radius-md); color: hsl(var(--foreground)); } .content blockquote p { margin: 0 0 8px; } .content blockquote p:last-child { margin-bottom: 0; } /* Variant accents — semantic colors used ONLY as the left border. */ .content blockquote.note { border-left-color: hsl(var(--border)); } .content blockquote.tip { border-left-color: hsl(var(--success)); } .content blockquote.warning { border-left-color: hsl(var(--warning)); } .content blockquote.danger { border-left-color: hsl(var(--destructive)); } /* -------------------------------------------------------------------------- 8. CODE — inline + fenced blocks -------------------------------------------------------------------------- */ /* Inline code (anything not inside a 
). */
.content :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: hsl(var(--muted));
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border));
  word-break: break-word;
}

/* Fenced code blocks. */
.content pre {
  position: relative;          /* anchors copy button + language label */
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow-x: auto;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.content pre > code {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  background: none;
  border: 0;
  padding: 0;
  color: hsl(var(--foreground));
  white-space: pre;            /* no wrap — horizontal scroll instead */
  word-break: normal;
}

/* Copy button — top-right inside the pre. */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), color var(--transition),
    background-color var(--transition), border-color var(--transition);
}
.content pre:hover .copy-btn,
.copy-btn:focus-visible,
.copy-btn.copied {
  opacity: 1;
}
.copy-btn:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}
.copy-btn.copied {
  color: hsl(var(--success));
  border-color: hsl(var(--success));
}

/* Optional language label set by docs.js from language-* class. */
.lang-label {
  position: absolute;
  top: 8px;
  right: 70px;
  font-size: 11px;
  line-height: 1;
  padding-top: 5px;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. TABLES  (.table-wrap > table)
   -------------------------------------------------------------------------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.content thead th {
  text-align: left;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  padding: 10px 14px;
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
  background: hsl(var(--muted));
}

.content tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: top;
  color: hsl(var(--foreground));
}
.content tbody tr:last-child td {
  border-bottom: 0;
}

/* No vertical borders anywhere — horizontal hairlines only. */
.content table th,
.content table td {
  border-left: 0;
  border-right: 0;
}

.content tbody tr {
  transition: background-color var(--transition);
}
.content tbody tr:hover {
  background: hsl(var(--muted));
}

/* First column emphasized: mono + medium. */
.content tbody td:first-child {
  font-family: var(--font-mono);
  font-weight: 500;
  color: hsl(var(--foreground));
  white-space: nowrap;
}

/* Inline code inside table cells stays compact. */
.content table code {
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   10. TOC (on-this-page)
   -------------------------------------------------------------------------- */
.toc {
  position: sticky;
  top: var(--header-h);
  align-self: start;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 32px 16px;
  font-size: 13px;
}

.toc-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  margin-bottom: 8px;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li {
  margin: 0;
}

.toc a {
  display: block;
  padding: 3px 8px;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  border-left: 2px solid transparent;
  line-height: 1.4;
  transition: color var(--transition), border-color var(--transition);
}
.toc a:hover {
  color: hsl(var(--foreground));
}
.toc a.active {
  color: hsl(var(--foreground));
  border-left-color: hsl(var(--primary));
  font-weight: 500;
}

/* Nested h3 entries indented + smaller. */
.toc .toc-h3 {
  padding-left: 20px;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   11. PREV / NEXT PAGER  (two cards)
   -------------------------------------------------------------------------- */
.prevnext {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--border));
}

.prevnext a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: hsl(var(--foreground));
  max-width: 48%;
  transition: background-color var(--transition), border-color var(--transition);
}
.prevnext a:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--ring));
}

/* Keep a lone card on its correct side. */
.prevnext a.prev {
  align-items: flex-start;
  text-align: left;
}
.prevnext a.next {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.prevnext .pn-label {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.prevnext .pn-title {
  font-size: 15px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid hsl(var(--border));
  padding: 32px 40px;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
}
.site-footer p {
  margin: 0 0 12px;
}
.site-footer strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.footer-links a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.footer-links a:hover {
  color: hsl(var(--foreground));
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   13. FRONT-MATTER / METADATA DEFINITION LIST
   -------------------------------------------------------------------------- */
dl.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0 0 24px;
  font-size: 14px;
  max-width: var(--content-measure);
}
dl.meta dt {
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}
dl.meta dd {
  margin: 0;
  color: hsl(var(--foreground));
  font-family: var(--font-mono);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   14. DARK-MODE FINE-TUNING
   The token swap carries every rule. Only structural softening here —
   no hardcoded theme-dependent colors.
   -------------------------------------------------------------------------- */
.dark .copy-btn {
  /* slightly lift the button off the muted pre surface */
  background: hsl(var(--secondary));
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */

/* --- Collapse the TOC below ~1280px ------------------------------------- */
@media (max-width: 1280px) {
  .layout {
    grid-template-columns: 256px minmax(0, 1fr);
  }
  #toc {
    display: none;
  }
}

/* --- Sidebar becomes a mobile drawer below ~1024px ---------------------- */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
  }

  /* Reveal the menu toggle. */
  #menu-toggle {
    display: inline-flex;
  }

  /* Off-canvas drawer. Hidden by default, slid in via .open / body.nav-open. */
  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    z-index: 45;
    width: 280px;
    max-width: 85vw;
    height: calc(100vh - var(--header-h));
    border-right: 1px solid hsl(var(--border));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateX(-100%);
    transition: transform var(--transition);
    will-change: transform;
  }
  .sidebar.open,
  body.nav-open .sidebar {
    transform: translateX(0);
  }

  /* Scrim behind the open drawer. */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 44;
    background: hsl(var(--foreground) / 0.4);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  .content {
    padding: 24px 20px 64px;
  }
  .site-header {
    padding: 0 16px;
  }
  .site-footer {
    padding: 28px 20px;
  }
}

/* --- Tighten the header on small phones --------------------------------- */
@media (max-width: 560px) {
  .site-header {
    gap: 8px;
  }
  /* Hide the longer text links; brand + toggles remain. */
  .header-link {
    display: none;
  }
  .content h1 {
    font-size: 27px;
  }
  .content h2 {
    font-size: 21px;
  }
  .content h3 {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   16. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   17. PRINT — hide chrome, render clean prose
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  #sidebar,
  #toc,
  #menu-toggle,
  #theme-toggle,
  .copy-btn,
  .lang-label,
  .prevnext,
  .footer-links,
  .heading-anchor {
    display: none !important;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }

  .layout {
    display: block;
    max-width: none;
    margin: 0;
  }

  .content {
    padding: 0;
    max-width: none;
  }
  .content > h1,
  .content > h2,
  .content > h3,
  .content > h4,
  .content > p,
  .content > ul,
  .content > ol,
  .content > blockquote,
  .content > dl,
  dl.meta {
    max-width: none;
  }

  .content pre,
  .content :not(pre) > code,
  .table-wrap {
    border: 1px solid #ccc;
    background: #f7f7f7;
    color: #000;
  }
  .content pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow: visible;
  }
  .content pre > code {
    white-space: pre-wrap;
    color: #000;
  }

  .content thead th {
    background: #f0f0f0;
    color: #000;
  }
  .content tbody td,
  .content thead th {
    border-bottom: 1px solid #ccc;
  }

  .content a {
    color: #000;
    text-decoration: underline;
  }

  .content h1,
  .content h2,
  .content h3,
  .content h4 {
    page-break-after: avoid;
    color: #000;
  }
  .content pre,
  .table-wrap,
  blockquote {
    page-break-inside: avoid;
  }

  .site-footer {
    border-top: 1px solid #ccc;
    color: #333;
  }
}