/* OpenOv AI — openov.ai
 *
 * One stylesheet, no build step. Light is the base; the dark palette is a redefinition of the
 * same tokens, so no colour is ever defined only inside a media query.
 *
 * --is-dark is read back by the theme toggle in index.html, which is why it exists as a token.
 */

/* IBM Plex, served from this site. No third-party request is made by this page.
 * SIL Open Font License 1.1, (c) 2017 IBM Corp — the full text is in fonts/OFL.txt, which is
 * what the licence asks be distributed alongside the files.
 *
 * Sans is the variable file, so one download covers every weight the page uses. Mono is static
 * per weight, so there are two of it. Latin subset only: three files, about 75 KB in total.
 * font-display: swap, so text is readable before the fonts arrive and the page never blanks.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin.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-400-latin.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-500-latin.woff2") format("woff2");
}

:root {
  --is-dark: 0;

  /* Warm neutrals: nothing is pure white or pure black. */
  --bg:        hsl(30 20% 99%);
  --bg-soft:   hsl(30 14% 96%);
  --bg-term:   hsl(30 12% 97%);
  --text:      hsl(20 8% 12%);
  --text-soft: hsl(20 5% 42%);
  --line:      hsl(30 8% 87%);
  --line-firm: hsl(30 7% 78%);

  /* The highlighter. Same idea as a marker pen over text, a different pen. */
  --mark:      hsl(174 62% 84%);
  --mark-firm: hsl(174 46% 32%);

  /* One column, and everything in it fills it: text, boxes, tables, cards. The width is set by
   * the widest thing that must not scroll — the install one-liner, 82 characters of Plex Mono at
   * 14px, in its box, inside a numbered step, with the Copy button clear of the text — plus room
   * for a fallback font while Plex loads. If the lines read long, this is the one token to
   * narrow; nothing inside the column has a width of its own.
   * --gap is the paragraph gap; --block the gap before a box; --section the space a section
   * keeps above its heading, half of it below its last block.
   */
  --col: 63rem;
  --gap: 1rem;
  --block: 1.5rem;
  --section: 3rem;
  --pad: clamp(1rem, 4vw, 3rem);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --is-dark: 1;
    --bg:        hsl(20 9% 7%);
    --bg-soft:   hsl(20 7% 11%);
    --bg-term:   hsl(20 8% 10%);
    --text:      hsl(30 12% 96%);
    --text-soft: hsl(30 6% 65%);
    --line:      hsl(20 6% 20%);
    --line-firm: hsl(20 5% 30%);
    --mark:      hsl(174 42% 24%);
    --mark-firm: hsl(174 48% 72%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --is-dark: 1;
  --bg:        hsl(20 9% 7%);
  --bg-soft:   hsl(20 7% 11%);
  --bg-term:   hsl(20 8% 10%);
  --text:      hsl(30 12% 96%);
  --text-soft: hsl(30 6% 65%);
  --line:      hsl(20 6% 20%);
  --line-firm: hsl(20 5% 30%);
  --mark:      hsl(174 42% 24%);
  --mark-firm: hsl(174 48% 72%);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* A section keeps --section above its heading and half of that below its last block, so the
 * rule between two sections sits nearer the text it closes than the heading it precedes, and
 * the whole gap from one section's last line to the next heading stays within three lines.
 */
main > section {
  padding-block: var(--section) calc(var(--section) / 2);
  border-bottom: 1px solid var(--line);
}

main > section:last-child { border-bottom: 0; }

/* The rhythm: a paragraph gap between things, a block gap before a box or after a heading,
 * nothing above the first child. The top margin belongs to these rules alone: a list or a
 * figure below resets its own bottom and side margins, never its top.
 */
main > section > :first-child { margin-top: 0; }
main > section > * + * { margin-top: var(--gap); }
main > section > * + :where(figure, .term, .table, .cards, .callout) { margin-top: var(--block); }
main > section > h2 + * { margin-top: var(--block); }
main > section > h3 + * { margin-top: 0.75rem; }

/* ---- type --------------------------------------------------------------- */

h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; }
h1 { font-size: clamp(1.75rem, 1rem + 2vw, 2.25rem); line-height: 1.111; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; line-height: 1.333; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; line-height: 1.2; }

p { margin: 0; }
.lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--text-soft); }
.note { font-size: 0.92rem; color: var(--text-soft); }

a { color: inherit; text-decoration-color: var(--line-firm); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }

/* A code token never breaks inside itself — not at a hyphen, not at a slash. A code long enough
 * to need wrapping says where with <wbr>, between arguments or clauses; a line breaks there and
 * nowhere else.
 */
code { font-family: var(--mono); font-size: 0.9em; white-space: nowrap; }

/* ---- the tag, the marks, the buttons ------------------------------------ */

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.25rem 0.5rem;
  background: var(--mark);
  color: var(--mark-firm);
  border-radius: 2px;
}

.marks { list-style: none; padding: 0; margin-bottom: 0; }
.marks li { position: relative; padding-left: 2rem; }
.marks li + li { margin-top: 0.5rem; }
.marks li::before {
  content: "[*]";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  color: var(--mark-firm);
}
.marks-tight li + li { margin-top: 0.25rem; }

.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-firm);
  border-radius: 3px;
  background: var(--mark);
  color: var(--mark-firm);
  text-decoration: none;
}
.btn:hover { border-color: var(--mark-firm); }
.btn-quiet { background: transparent; color: var(--text); }

.ghost {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}
.ghost:hover { color: var(--text); border-color: var(--line-firm); }

/* ---- the terminal boxes ------------------------------------------------- */

.term {
  margin-inline: 0;
  margin-bottom: 0;
  border: 1px solid var(--line-firm);
  border-radius: 4px;
  background: var(--bg-term);
  position: relative;
}

.term figcaption {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-soft);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--line);
}

.term pre {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow-x: auto;          /* wide content scrolls in its own box, never the page */
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5rem;
  tab-size: 2;
}

.term b { font-weight: 500; background: var(--mark); color: var(--mark-firm); padding: 0 0.25em; }

/* The button sits over the box's top-right corner; the text keeps clear of it, so a one-line
 * command is never covered and never scrolls to get out from under it.
 */
.term-copy pre { padding-right: 4rem; }
.term-copy .copy { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--bg-term); }

/* ---- bars --------------------------------------------------------------- */

.bar { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.bar-foot { border-bottom: 0; border-top: 1px solid var(--line); }

.bar-in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
  font-size: 0.9rem;
}

.bar-in nav { display: flex; align-items: center; gap: 1rem; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: normal;
  text-decoration: none;
}
.mark img { display: block; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }

.bar-foot { color: var(--text-soft); font-size: 0.85rem; }

/* ---- the docs row --------------------------------------------------------
 *
 * Every page carries the same second row under the header: one link per docs page. The page
 * that is open is marked from the body's data-page, so the row itself is the same bytes on every
 * page and the mark needs no script.
 */

.docs { border-top: 1px solid var(--line); font-size: 0.85rem; }

/* The links are inline, not flex items, so that when the row has to break — on a phone — the
 * lines come out even (text-wrap: balance) instead of one link left over on the last line.
 */
.docs-in { padding-block: 0.5rem; text-wrap: balance; }
.docs-in a { display: inline-block; text-decoration: none; color: var(--text-soft); padding-block: 0.25rem; margin-right: 0.75rem; }
.docs-in a:hover { color: var(--text); }
[data-page="how-it-works"] .docs-in a[href="/how-it-works/"],
[data-page="install"]       .docs-in a[href="/install/"],
[data-page="team"]          .docs-in a[href="/team/"],
[data-page="permissions"]   .docs-in a[href="/permissions/"],
[data-page="knowledge"]     .docs-in a[href="/knowledge/"],
[data-page="plugins"]       .docs-in a[href="/plugins/"],
[data-page="customization"] .docs-in a[href="/customization/"],
[data-page="defaults"]      .docs-in a[href="/defaults/"],
[data-page="faq"]           .docs-in a[href="/faq/"],
[data-page="reference"]     .docs-in a[href="/reference/"] {
  color: var(--mark-firm);
  box-shadow: inset 0 -2px 0 var(--mark-firm);
}

/* ---- docs pages ----------------------------------------------------------
 *
 * A docs page is one column of prose with boxes in it, and the text and the boxes are the same
 * width: the column's.
 */

/* Headings keep twice as much above as below, so each sits with the text it opens: h2 opens a
 * section (the section's own padding is its space above, --block below), h3 2rem above and
 * 0.75rem below — the space below is set with the rhythm rules above.
 */
.prose > * + h2 { margin-top: var(--section); }
.prose > * + h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 0; }
.prose li + li { margin-top: 0.5rem; }
.prose li > ul { margin-top: 0.5rem; }
.prose dl { margin-bottom: 0; }
.prose dt { font-family: var(--mono); font-size: 0.88rem; font-weight: 500; margin-top: 0.75rem; }
.prose dd { margin: 0.25rem 0 0 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 3rem; }

/* Inline code in prose sits on the soft ground; code inside a terminal box does not. */
.prose p code, .prose li code, .prose dd code, .prose td code, .card code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 0.2em;
  font-size: 0.86em;
}

/* Tables: the reference page is mostly these. The columns share the width by what they hold:
 * no column is held on one line, so the prose column gets the room and a command in a cell
 * wraps between its arguments. A table wider than its column scrolls in its own box.
 */
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; line-height: 1.5rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
th { font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
table.whose td:nth-child(2) { white-space: nowrap; }  /* the whose column is one line per cell; the what column takes the rest */

/* Cards: the front page's grid of what you get, and any other list that wants to be boxes. */
.cards {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}
.card {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-soft);
  padding: 1rem 1.5rem;
}
.card h3 { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.5; }
.card p { font-size: 0.92rem; color: var(--text-soft); }
.card a { display: inline-block; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.8rem; }

/* Callouts: a note is something to know, a warning is something that bites. */
.callout {
  border-left: 3px solid var(--mark-firm);
  background: var(--bg-soft);
  padding: 0.75rem 1rem;
  border-radius: 0 3px 3px 0;
  font-size: 0.95rem;
}
.callout-warn { border-left-color: hsl(32 90% 45%); }
.callout > * + * { margin-top: 0.5rem; }
.callout b:first-child { font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* A media figure that is not recorded yet: a dashed box saying what goes there and why. */
.media {
  margin-inline: 0;
  margin-bottom: 0;
  border: 2px dashed var(--line-firm);
  border-radius: 4px;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text-soft);
}
.media b { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--mark-firm); margin-bottom: 0.25rem; }
.media figcaption { font-size: 0.92rem; }

/* A recorded media figure: the shot at its own size, never wider than the column, the caption under it. */
.shot { margin-inline: 0; margin-bottom: 0; }
.shot img { display: block; max-width: 100%; height: auto; }
/* A shot of the ovai page comes as a light and a dark file; the one matching the site's theme shows. */
.shot > a.dark { display: none; }
:root[data-theme="dark"] .shot > a.light { display: none; }
:root[data-theme="dark"] .shot > a.dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot > a.light { display: none; }
  :root:not([data-theme="light"]) .shot > a.dark { display: inline; }
}
.shot figcaption { font-size: 0.92rem; color: var(--text-soft); margin-top: 0.5rem; }

/* A diagram in words: a terminal box that is not a command. */
.diagram pre { font-size: 0.8rem; line-height: 1.25rem; }

/* Steps: the install page is a numbered read. It is not a prose list — ol.steps outweighs
 * .prose ol, so the list keeps no indent of its own and each step's box fills the step.
 */
ol.steps { counter-reset: step; list-style: none; padding: 0; margin-bottom: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.5rem; }
.steps > li + li { margin-top: 2rem; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  border-radius: 50%;
  background: var(--mark);
  color: var(--mark-firm);
}
.steps > li > * + * { margin-top: 0.75rem; }
.steps h3 { margin-top: 0; }

/* The two-line hero on the front page, and the tag under it. */
.hero .line { font-family: var(--mono); font-size: 0.9rem; color: var(--mark-firm); }

/* ---- small screens -------------------------------------------------------
 *
 * The big gaps shrink, the text does not: section space 3rem → 2rem, the gap before a box
 * 1.5rem → 1rem, card padding 1rem all round; body stays 16px and the side padding is --pad's
 * floor of 1rem.
 */
@media (max-width: 40em) {
  :root { --section: 2rem; --block: 1rem; }
  .card { padding: 1rem; }
}

/* ---- accessibility ------------------------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--pad);
  top: 0.5rem;
  z-index: 10;
  background: var(--bg);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-firm);
  border-radius: 3px;
}

:focus-visible { outline: 2px solid var(--mark-firm); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}