/* 0sql app. Brand tokens from the 0sql brand package: monochrome by
   default, rust only where it means something (the logo badge, links, one
   primary action per view, active and focus states). Light and dark follow
   the system; data-theme on <html> overrides. Never pure #000 or #fff. */
:root {
  color-scheme: light dark;

  /* core */
  --ink: #0B0B0C;
  --paper: #FAFAF8;
  --rust: #BC3908;
  --rust-bright: #F15A22;

  /* neutral ramp */
  --gray-950: #0B0B0C; --gray-900: #141416; --gray-800: #222227; --gray-700: #2E2E34;
  --gray-500: #5C5C63; --gray-400: #9A9AA2; --gray-300: #C9C9CF; --gray-200: #E6E4E0; --gray-100: #F2EFEA;

  /* semantic, light then dark */
  --background:         light-dark(#FAFAF8, #0B0B0C);
  --surface:            light-dark(#FFFFFF, #141416);
  --surface-2:          light-dark(#F2EFEA, #1B1B20);
  --foreground:         light-dark(#0B0B0C, #FAFAF8);
  --muted-foreground:   light-dark(#5C5C63, #9A9AA2);
  --faint-foreground:   light-dark(#9A9AA2, #5C5C63);
  --border:             light-dark(#E6E4E0, #222227);
  --border-2:           light-dark(#C9C9CF, #2E2E34);
  --primary:            light-dark(#BC3908, #F15A22);
  --primary-hover:      light-dark(#A33106, #F47A4C);
  --primary-foreground: light-dark(#FAFAF8, #0B0B0C);
  --primary-wash:       light-dark(rgb(188 57 8 / 0.08), rgb(241 90 34 / 0.14));
  --ring:               var(--primary);
  --danger:             light-dark(#9F1D1D, #F0867C);
  --ok:                 light-dark(#1F6B3A, #7AD59A);

  /* code */
  --code-bg:      var(--surface-2);
  --code-text:    var(--foreground);
  --code-muted:   var(--muted-foreground);
  --code-keyword: var(--primary);

  /* type: mono for display, wordmark and code; Inter for body and UI */
  --font-mono: "DejaVu Sans Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* scrollbars: the ink of the theme at low opacity, so they read as a
     shadow of the text rather than a control */
  --scroll-size: 11px;
  --scroll-thumb: light-dark(rgb(11 11 12 / 0.20), rgb(250 250 248 / 0.20));
  --scroll-thumb-strong: light-dark(rgb(11 11 12 / 0.38), rgb(250 250 248 / 0.34));
  --shadow: 0 1px 2px rgb(11 11 12 / 0.04), 0 6px 20px rgb(11 11 12 / 0.04);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The logo file is chosen for the background, never recoloured. */
.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none; }
  :root:not([data-theme="light"]) .on-dark { display: inline-block; }
}
:root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark { display: inline-block; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font: 400 14px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; }
h1 { font: 500 20px/1.25 var(--font-mono); letter-spacing: -0.02em; }
h2 { font: 600 14px/1.3 var(--font-sans); letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; }
h3 { font: 500 11px/1.4 var(--font-mono); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.08em; }
code, .mono { font-family: var(--font-mono); font-size: 12.5px; }
code { background: var(--code-bg); border-radius: 4px; padding: 1px 5px; color: var(--code-text); }
pre code, .secret code, td code { background: none; padding: 0; }
p { margin: 0 0 8px; }
.muted { color: var(--muted-foreground); }
.faint { color: var(--faint-foreground); }
.small { font-size: 12.5px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* --- scrollbars
   Subtle, and only inked in while the pointer is over the thing that
   scrolls. Hover changes the colour and nothing else: the bar occupies
   the same width whether or not you can see it, so revealing one can
   never reflow the text beside it. The page and the field list also
   hold their gutter open, because those two change length under you and
   would otherwise shift sideways as content comes and goes.
   WebKit and Blink take the pseudo-elements, and get the `scrolling`
   class from the script: neither engine restyles a custom scrollbar
   when the element it belongs to is hovered, so the reveal cannot be
   written as `:hover` here. Firefox has no such pseudo-elements and
   takes the standard properties, where plain `:hover` does work. */
html { scrollbar-gutter: stable; }
::-webkit-scrollbar { width: var(--scroll-size); height: var(--scroll-size); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; background-clip: content-box; border: 3px solid transparent; border-radius: 999px; }
.scrolling::-webkit-scrollbar-thumb { background: var(--scroll-thumb); background-clip: content-box; }
/* The page's own bar is the exception: Blink settles the viewport
   scrollbar's style once and does not revisit it when the root
   element's classes change, so it cannot be revealed on hover. It
   stays faintly inked rather than risk being invisible. */
html::-webkit-scrollbar-thumb { background: var(--scroll-thumb); background-clip: content-box; }
.scrolling::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-strong); background-clip: content-box; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover, *:focus-within { scrollbar-color: var(--scroll-thumb) transparent; }
}

/* --- icons (lucide, ISC): currentColor, so they stay monochrome */
.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.i.sm { width: 14px; height: 14px; vertical-align: -2px; }
.i.lg { width: 20px; height: 20px; }
.i.xl { width: 28px; height: 28px; stroke-width: 1.5; }

/* --- frame */
.topbar {
  display: flex; align-items: center; gap: 20px;
  height: 54px; padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { height: 22px; width: auto; }
.logo:hover { text-decoration: none; }
.nav { display: flex; gap: 2px; margin-left: 4px; }
.nav a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--muted-foreground); font-weight: 500; }
.nav a:hover { color: var(--foreground); background: var(--surface-2); text-decoration: none; }
.nav a.active { color: var(--foreground); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.nav a .i { opacity: 0.8; }
.spacer { flex: 1; }
.who { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted-foreground); }
.who b { color: var(--foreground); font-weight: 500; }

/* --- the account menu: identity and sign out, folded away so the bar
   carries the product and not the session. The theme button stays
   outside it. */
.menu-wrap { position: relative; }
.who-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; font: 500 13px/1.3 var(--font-sans); color: var(--foreground); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.who-btn:hover { background: var(--surface-2); }
.who-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-2); }
.who-btn > .i:first-child { color: var(--muted-foreground); }
.who-btn > .i:last-child { color: var(--faint-foreground); }
.menu { position: absolute; right: 0; top: calc(100% + 7px); min-width: 232px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 4px rgb(11 11 12 / 0.05), 0 14px 36px rgb(11 11 12 / 0.14); z-index: 20; }
.menu[hidden] { display: none; }
.menu-head { padding: 9px 10px 11px; margin-bottom: 4px; border-bottom: 1px solid var(--border); display: grid; gap: 3px; }
.menu-name { font-weight: 500; color: var(--foreground); }
.menu-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; text-align: left; font: 500 13px/1.3 var(--font-sans); color: var(--foreground); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item .i { color: var(--muted-foreground); }
.menu-item.danger, .menu-item.danger .i { color: var(--danger); }
.main { max-width: 1040px; margin: 0 auto; padding: 28px 24px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head .sub { color: var(--muted-foreground); margin-top: 6px; max-width: 64ch; }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 4px; }
.crumbs a { color: var(--muted-foreground); }
.crumbs a:hover { color: var(--foreground); text-decoration: none; }
.crumbs .i { width: 13px; height: 13px; color: var(--faint-foreground); }
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .grid.two { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; gap: 10px; height: auto; min-height: 54px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .nav a span { display: none; }
  .who-name { display: none; }
  .main { padding: 20px 16px 48px; }
  .page-head { flex-direction: column; align-items: flex-start; }
}

/* --- card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); min-height: 46px; }
.card-head .i { color: var(--muted-foreground); }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }
.rows > * + * { border-top: 1px solid var(--border); }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: inherit; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 500; }
.row .meta { color: var(--muted-foreground); font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; }
.row .meta .i { width: 13px; height: 13px; vertical-align: -2px; color: var(--faint-foreground); }
.row .meta span { display: inline-flex; align-items: center; gap: 5px; }
.row:hover { background: var(--surface-2); text-decoration: none; }
.row .go { color: var(--faint-foreground); }
.row:hover .go { color: var(--foreground); }
.empty { padding: 32px 16px; text-align: center; color: var(--faint-foreground); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty .i { color: var(--faint-foreground); }
.empty.small { padding: 16px; }

/* --- pills */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--border-2); color: var(--muted-foreground); line-height: 1.5; white-space: nowrap; }
.pill.owner, .pill.admin { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); }
.pill.write { color: var(--foreground); border-color: var(--foreground); }
.pill.mono { font-family: var(--font-mono); font-size: 11px; }
.pill.dim { color: var(--foreground); }
.pill.msr { color: var(--primary); border-color: var(--primary); }

/* --- forms */
label { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 4px; }
.field { margin-bottom: 12px; }
input, select, textarea {
  width: 100%; padding: 7px 10px; font: inherit; color: var(--foreground);
  background: var(--background); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--faint-foreground); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); }
input.mono, select.mono, textarea.mono { font-family: var(--font-mono); }
input[disabled], select[disabled] { opacity: 0.6; }
.inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline .field { margin: 0; flex: 1; min-width: 140px; }
.inline .field.narrow { flex: 0 0 190px; }
.with-icon { position: relative; }
.with-icon .i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--faint-foreground); pointer-events: none; }
.with-icon input { padding-left: 30px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  font: 500 13px/1.3 var(--font-sans); color: var(--foreground);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn .i { width: 15px; height: 15px; }
.btn:hover { border-color: var(--foreground); text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.quiet { border-color: transparent; color: var(--muted-foreground); background: transparent; }
.btn.quiet:hover { color: var(--foreground); background: var(--surface-2); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn.sm .i { width: 13px; height: 13px; }
.btn.icon { padding: 6px; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.theme { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--muted-foreground); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.theme:hover { color: var(--foreground); background: var(--surface-2); }

/* --- secret reveal: the one place a dashed rust frame is earned */
.secret { background: var(--surface-2); border: 1px dashed var(--primary); border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0; }
.secret .label { display: flex; align-items: center; gap: 6px; font: 500 11px/1.4 var(--font-mono); color: var(--primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.secret code { display: block; word-break: break-all; font-size: 13px; user-select: all; }
.secret .note { margin-top: 8px; color: var(--muted-foreground); font-size: 12.5px; }

/* --- alerts */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); margin-bottom: 14px; font-size: 13px; }
.alert .i { margin-top: 1px; }
.alert.error { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.alert.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, transparent); }

/* --- auth pages */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth > div { width: 100%; max-width: 400px; }
.auth .logo { justify-content: center; display: flex; margin-bottom: 22px; }
.auth .logo img { height: 30px; }
.auth .alt { text-align: center; margin-top: 16px; color: var(--muted-foreground); font-size: 13px; }
.auth h1 { font-size: 18px; }

/* --- tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font: 500 11px/1.4 var(--font-mono); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; padding: 9px 16px; border-bottom: 1px solid var(--border); }
td { padding: 9px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.mono { color: var(--muted-foreground); }
td.actions { justify-content: flex-end; display: flex; }

/* --- misc */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--muted-foreground); }
.kv dd { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.switch input { width: auto; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: var(--foreground); color: var(--background); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; box-shadow: var(--shadow); opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 10; }
.toast.show { opacity: 1; }

/* --- playground */
.play { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .play { grid-template-columns: 1fr; } }
.play-main > * + * { margin-top: 20px; }
#out > * + * { margin-top: 20px; }
textarea { resize: vertical; }
textarea.mono { font-size: 13px; line-height: 1.5; }
.tabs { display: flex; gap: 2px; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font: 500 13px var(--font-sans); color: var(--muted-foreground); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.tab:hover { color: var(--foreground); background: var(--surface-2); }
.tab.active { color: var(--foreground); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.kbd { font: 500 10.5px var(--font-mono); opacity: 0.7; margin-left: 2px; }
.inline-explore { display: inline-flex; gap: 6px; align-items: center; }
.inline-explore input { padding-top: 5px; padding-bottom: 5px; }
.cheat[hidden] { display: none; }
.cheat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; display: grid; gap: 4px; }
.cheat div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.cheat b { color: var(--primary); font: 500 11px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.cheat span { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 11.5px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.chips .i { color: var(--faint-foreground); }
.chip { font: 12px var(--font-mono); color: var(--muted-foreground); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { color: var(--foreground); border-color: var(--foreground); }
pre.sql { margin: 0; padding: 12px 14px; background: var(--code-bg); border-radius: var(--radius-sm); font: 12.5px/1.55 var(--font-mono); color: var(--code-text); overflow: auto; tab-size: 4; white-space: pre; }
.items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.items code { color: var(--muted-foreground); font-size: 11.5px; }
.note { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 6px; }
details.small summary { cursor: pointer; margin-top: 10px; }
details.small pre { margin-top: 8px; }
.tree { font: 12.5px/1.6 var(--font-mono); overflow: auto; }
.tree-line b { font-weight: 500; color: var(--foreground); }
.tree-sub { color: var(--muted-foreground); font-size: 11.5px; white-space: nowrap; }
.phases { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font: 11.5px var(--font-mono); color: var(--muted-foreground); }
.phases b { color: var(--foreground); font-weight: 500; }
.row-btn { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.field-list { margin-top: 8px; max-height: 60vh; overflow: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 2px; }

/* --- the playground against the window
   The page does not grow past the viewport: every panel takes the
   height that is left over and scrolls its own content, so the header
   of each one stays put. Two panels that together want more than the
   room available shrink in proportion to what they hold, which leaves
   a short SQL statement its natural height and gives a long plan tree
   the scrollbar. Below the two-column breakpoint this is off and the
   page scrolls as usual: stacking full-height panels on a narrow
   screen would leave nothing readable. */
@media (min-width: 901px) {
  #app.tall { display: flex; flex-direction: column; height: 100dvh; }
  #app.tall .topbar { flex: none; }
  #app.tall .main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 20px; }
  #app.tall .page-head { flex: none; }
  #app.tall .play { flex: 1; min-height: 0; align-items: stretch; }
  #app.tall .play-main, #app.tall .play-side { min-height: 0; display: flex; flex-direction: column; gap: 20px; }
  /* the stack spaces itself with gap once it is a flex column */
  #app.tall .play-main > * + *, #app.tall #out > * + * { margin-top: 0; }
  /* the editor keeps its own height; the results take what is left */
  #app.tall .play-main > .card { flex: none; }
  #app.tall #out { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px; overflow: auto; }
  #app.tall #out > .card { min-height: 128px; }
  #app.tall .card { display: flex; flex-direction: column; }
  #app.tall .card-head { flex: none; }
  #app.tall .card-body { flex: 1; min-height: 0; overflow: auto; }
  /* the field search stays put, only its list scrolls */
  #app.tall .play-side .card-body { display: flex; flex-direction: column; overflow: hidden; }
  #app.tall .play-side .with-icon { flex: none; }
  #app.tall .field-list { flex: 1; min-height: 0; max-height: none; }
}
.field-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 6px; font: 13px var(--font-sans); color: var(--foreground); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.field-item:hover { background: var(--surface-2); }
.field-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; flex: none; }
.kind .i { width: 12px; height: 12px; }
.kind.dim { color: var(--foreground); background: var(--surface-2); }
.kind.msr { color: var(--primary); background: var(--primary-wash); }
.stat { display: inline-flex; align-items: center; gap: 5px; }