/* What Tailwind's classes do not say: the logo, code, and prose in the docs. */

.logo {
  width: 1.35rem;
  height: 1.35rem;
  color: #f97316;
}

.hero-glow {
  background:
    radial-gradient(60rem 24rem at 50% -8rem, color-mix(in oklab, #f97316 18%, transparent), transparent),
    radial-gradient(40rem 20rem at 85% 0, color-mix(in oklab, #db2777 14%, transparent), transparent);
}

.gradient-text {
  background: linear-gradient(90deg, #f97316, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* One line stays one line, scrolled rather than wrapped: a command broken
   across two lines reads as two, and is pasted as it reads. */
pre.code {
  white-space: pre;
  overflow-x: auto;
  border-radius: 0.75rem;
  padding: 1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  background: #16161d;
  color: #e6e6ef;
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
pre.code .c { color: #7c7c99; font-style: italic; }
pre.code .k { color: #f472b6; }
pre.code .s { color: #fdba74; }
pre.code .n { color: #c4b5fd; }
pre.code .f { color: #7dd3fc; }
pre.code .t { color: #5eead4; }
pre.code .y { color: #fde68a; }

.prose { line-height: 1.7; }
.prose h1:not(.not-prose *) { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.prose h2:not(.not-prose *) { font-size: 1.3rem; font-weight: 650; margin: 2.25rem 0 0.6rem; letter-spacing: -0.01em; }
.prose h3:not(.not-prose *) { font-size: 1.05rem; font-weight: 650; margin: 1.5rem 0 0.4rem; }
.prose p, .prose ul, .prose ol, .prose pre, .prose table { margin: 0 0 1rem; }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.25rem; }
.prose li { margin: 0.2rem 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose :not(pre) > code {
  font-size: 0.85em;
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: color-mix(in oklab, currentColor 8%, transparent);
}
.prose .lead { font-size: 1.1rem; color: hsl(var(--muted-foreground)); }
.prose table { width: 100%; font-size: 0.9rem; border-collapse: collapse; }
.prose th, .prose td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }

figure.code-block { margin: 0 0 1rem; min-width: 0; }
figure.code-block figcaption { margin-bottom: 0.35rem; font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.prose h2[id], .prose h3[id] { scroll-margin-top: 5rem; }

/* The landing page, on one framed grid: a bordered column, sections and
   cells divided by rules, as vite.dev's is. */
.frame { max-width: 72rem; margin: 0 auto; border-left: 1px solid hsl(var(--border)); border-right: 1px solid hsl(var(--border)); }
.features { gap: 0; }
.feature { display: block; padding: 1.75rem 1.5rem; border-bottom: 1px solid hsl(var(--border)); transition: background .15s; }
.feature:hover { background: color-mix(in oklab, hsl(var(--foreground)) 3%, transparent); }
@media (min-width: 640px) {
  .feature:nth-child(odd) { border-right: 1px solid hsl(var(--border)); }
  .feature:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (min-width: 1024px) {
  .feature { border-right: 1px solid hsl(var(--border)); }
  .feature:nth-child(4n) { border-right: 0; }
  .feature:nth-last-child(-n + 4) { border-bottom: 0; }
}
.feature-icon { width: 1.35rem; height: 1.35rem; color: #f97316; }
.feature code, .frame p code { font-size: .85em; padding: .05rem .3rem; border-radius: .3rem; background: color-mix(in oklab, currentColor 8%, transparent); }

/* The stack: your app, on Sluurp, on SQLite. */
.stack { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
.stack-layer { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem; border: 1px solid hsl(var(--border)); border-radius: .9rem; background: hsl(var(--background)); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.stack-layer b { font-size: .95rem; }
.stack-main { border-color: #f97316; box-shadow: 0 10px 30px -10px color-mix(in oklab, #f97316 45%, transparent); }
.stack-main b { color: #c2410c; }
.stack-chip { font-size: .72rem; font-weight: 500; line-height: 1; padding: .35rem .6rem; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--foreground) / .7); }
.stack-main .stack-chip { color: #c2410c; background: color-mix(in oklab, #f97316 12%, transparent); }
.stack-link { align-self: center; width: 0; height: 1.4rem; border-left: 2px dashed color-mix(in oklab, #f97316 50%, hsl(var(--border))); }

/* The docs, on the same framed grid: a sidebar cell, the page, a pager row. */
.docs { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .docs { grid-template-columns: var(--docs-side, 15rem) minmax(0, 1fr); } }
/* The sidebar's edge (islands/docs-shell.tsx): the kit's handle, and a
   ghosted button to fold it away, at the top left of the page. */
.docs { position: relative; }
.docs-side { position: relative; min-width: 0; }
.docs-side > div { overflow-x: hidden; }
/* The handle is as tall as the window, not the sidebar, so its pill stays in
   view: it sits sticky in a column of its own on the sidebar's edge. */
.docs[data-hydrated] .docs-side { display: grid; grid-template-columns: minmax(0, 1fr) 0; }
.docs-handle { position: sticky !important; top: 4rem; align-self: start; height: calc(100dvh - 4rem); margin-left: -1px; background: transparent !important; }
.docs[data-folded] .docs-side { border-right: 0; }
.docs[data-folded] .docs-side > :not(.docs-handle) { visibility: hidden; }
.docs[data-folded] .docs-side { overflow: visible; }
/* Folded, the edge is at the page's edge: wide enough itself to be grabbed there. */
.docs[data-folded] .docs-handle { width: 8px; margin-left: 0; }
.docs-toggle { display: none; width: 2.75rem; height: 2.75rem; margin-left: -.75rem; place-items: center; border-radius: .5rem; color: hsl(var(--muted-foreground)); opacity: .55; transition: opacity .15s, background .15s; }
.docs-toggle:hover, .docs-toggle:focus-visible { opacity: 1; background: color-mix(in oklab, hsl(var(--foreground)) 6%, transparent); }
@media (min-width: 768px) { .docs-toggle { display: grid; } }
.docs-side { border-bottom: 1px solid hsl(var(--border)); }
@media (min-width: 768px) { .docs-side { border-bottom: 0; border-right: 1px solid hsl(var(--border)); } }
.doc-link { display: block; padding: .3rem .5rem; border-radius: .4rem; color: hsl(var(--muted-foreground)); }
.doc-link:hover { color: hsl(var(--foreground)); }
.doc-link-on { color: #c2410c; font-weight: 600; background: color-mix(in oklab, #f97316 9%, transparent); }
.doc-kicker { margin: 0 0 .75rem !important; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #c2410c; }
.prose h1:not(.not-prose *) { font-size: 2.4rem; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.prose h2:not(.not-prose *) { padding-top: 1.75rem; border-top: 1px solid hsl(var(--border)); }
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid hsl(var(--border)); }
.doc-pager a { display: block; padding: 1.25rem 1.5rem; font-weight: 600; }
.doc-pager a:hover { background: color-mix(in oklab, hsl(var(--foreground)) 3%, transparent); }
.doc-pager a + a, .doc-pager span + a { border-left: 1px solid hsl(var(--border)); }
.doc-pager small { display: block; font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

/* The header, on the same frame: the column's rules carried up to the top. */
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid hsl(var(--border)); background: color-mix(in oklab, hsl(var(--background)) 85%, transparent); backdrop-filter: blur(10px); }
.site-nav { display: flex; align-items: center; gap: 1.5rem; height: 4rem; padding: 0 1.25rem; font-size: 1rem; }
@media (min-width: 768px) { .site-nav { padding: 0 2.5rem; } }
/* On the docs, the toggle and the logo sit over the sidebar and the links
   start where the page's title does: the sidebar's width, plus the page's
   3rem, less the header's 2.5rem and one gap. Folded, the width is nothing
   and the header is as on any page. */
.site-start { display: flex; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .site-start-docs { min-width: calc(var(--docs-side, 15rem) - 1rem); } }
.site-brand { display: flex; align-items: center; gap: .55rem; margin-right: .5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
.site-brand .logo { width: 1.55rem; height: 1.55rem; }
/* One line height for the brand and the links, and the underline drawn
   under the text rather than as a border that makes the box taller. */
.site-brand, .site-link { line-height: 1; }
/* A finger's worth of height, whatever the text's. */
.site-link, .site-brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-foot-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-foot-link:hover { color: hsl(var(--foreground)); }
.site-link { color: hsl(var(--muted-foreground)); text-decoration: underline 2px transparent; text-underline-offset: .55em; }
.site-link:hover { color: hsl(var(--foreground)); }
.site-link-on { color: hsl(var(--foreground)); font-weight: 600; text-decoration-color: #f97316; }
.site-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .5rem; color: hsl(var(--muted-foreground)); }
.site-icon:hover { color: hsl(var(--foreground)); background: color-mix(in oklab, hsl(var(--foreground)) 5%, transparent); }
.site-cta { padding: .5rem .95rem; border-radius: .55rem; background: hsl(var(--foreground)); color: hsl(var(--background)); font-weight: 500; font-size: .9rem; }
.site-cta:hover { opacity: .9; }
@media (max-width: 420px) { .site-cta { display: none; } }

/* The stack's layers each carry an icon before their name. */
.stack-icon { width: 1.1em; height: 1.1em; flex: none; color: hsl(var(--muted-foreground)); }
.stack-main .stack-icon { color: inherit; }

/* Above a docs page: its section, and its source as Markdown. */
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.doc-top .doc-kicker { margin: 0 !important; }
.prose a.doc-raw { font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)); text-decoration: none; }
.prose a.doc-raw:hover { color: hsl(var(--foreground)); text-decoration: underline; }


/* On a phone the sidebar is a fold-out list above the page: no edge to drag. */
@media (max-width: 767px) { .docs-handle { display: none !important; } .docs[data-hydrated] .docs-side { display: block; } }

/* A code sample that is a column of its own: no margin under it, so it sits centred. */
.code-col > figure.code-block { margin-bottom: 0; }

/* A terminal's prompt: shown, never selected or copied. */
pre.code .prompt { user-select: none; -webkit-user-select: none; color: #7c8494; }

/* Text at a reading width; code and tables across the whole column, so a
   long line has the room there is before it scrolls. */
.prose > :not(pre):not(table):not(figure) { max-width: 48rem; }

/* The hand for a link that reads as one, wherever it is: in the text, the
   header, the footer. A link made to look like a control — a menu row in
   the sidebar, a button, a card — keeps the arrow, as a desktop app's
   controls do. */
.docs-side a, .site-cta, .site-icon, .feature, a.control { cursor: default; }