:root,
.theme-auto {
  --font-body:
	"JetBrains Mono",
	"SF Mono",
	ui-monospace,
	Menlo,
	Consolas,
	monospace;
  --size-border-width: 0.5px;
  --ui-border: 0.5px;
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #999999;
  --border-color: #333333;
  --accent-color: #3399ff;

  --background: #0a0a0a;
  --surface: #1a1a1a;
  --border: #333333;
  --text: #ffffff;
  --input-bg: #2a2a2a;
  --color-bg: #000000;
  --color-surface: #1a1a1a;
  --color-surface-hi: #2a2a2a;
  --color-border: #333333;
  --color-border-bright: #444444;
  --color-text: #ffffff;
  --color-text-muted: #999999;
  --color-text-dim: #666666;
  --color-accent: #3399ff;
  --color-accent-bg: #102a44;
  --color-folder: #3399ff;
  --color-danger: #ff6666;
  --color-danger-bg: #3a1010;
  --color-select: #262626;
}

@media (prefers-color-scheme: light) {
  .theme-auto {
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--text-primary: #000000;
	--text-secondary: #666666;
	--border-color: #cccccc;
	--accent-color: #0066cc;

	--background: #f5f5f5;
	--surface: #ffffff;
	--border: #e0e0e0;
	--text: #000000;
	--input-bg: #fafafa;
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-surface-hi: #f5f5f5;
	--color-border: #e0e0e0;
	--color-border-bright: #cccccc;
	--color-text: #000000;
	--color-text-muted: #666666;
	--color-text-dim: #999999;
	--color-accent: #0066cc;
	--color-accent-bg: #e6f0ff;
	--color-folder: #0066cc;
	--color-danger: #cc3333;
	--color-danger-bg: #ffeaea;
	--color-select: #eeeeee;
  }
}

.theme-light {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #000000;
  --text-secondary: #666666;
  --border-color: #cccccc;
  --accent-color: #0066cc;

  --background: #f5f5f5;
  --surface: #ffffff;
  --border: #e0e0e0;
  --text: #000000;
  --input-bg: #fafafa;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hi: #f5f5f5;
  --color-border: #e0e0e0;
  --color-border-bright: #cccccc;
  --color-text: #000000;
  --color-text-muted: #666666;
  --color-text-dim: #999999;
  --color-accent: #0066cc;
  --color-accent-bg: #e6f0ff;
  --color-folder: #0066cc;
  --color-danger: #cc3333;
  --color-danger-bg: #ffeaea;
  --color-select: #eeeeee;
}

.theme-auto,
.theme-dark,
.theme-light {
  color: var(--text-primary);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
  min-width: 0;
  min-height: 0;
}

body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  height: 100vh;
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
}

#app {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  place-items: center;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow: auto;
  background: var(--color-bg)
  /* SwiftUI semantics: the route hugs its content and is centered.
	 Spacer inside a stack expands that stack via the :has() rules below.
	 Use .fill() on the route to explicitly stretch to the viewport. */
}

/* UI ELEMENTS */

text {
  display: inline;
}

/* When Text is .fill()'d, it becomes a centered flex container so its
   inline content (the text itself) sits in the middle of the expanded box. */
text.fills {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

spacer {
  flex: 1 1 0;
  align-self: stretch;
}

vstack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

hstack {
  display: inline-flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

rectangle,
rounded-rectangle,
panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}

rounded-rectangle {
  --rounded-rectangle-fill: transparent;
  --rounded-rectangle-stroke: transparent;
  --rounded-rectangle-stroke-width: 0;
  --rounded-rectangle-backdrop-filter: none;
  --rounded-rectangle-stroke-alignment: center;
  --rounded-rectangle-shadow-filter: none;
}

rounded-rectangle > .rounded-rectangle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

rounded-rectangle > .rounded-rectangle-svg .rounded-rectangle-path {
  fill: none;
  stroke: var(--rounded-rectangle-stroke, transparent);
  stroke-width: var(--rounded-rectangle-stroke-width, 0);
}

rounded-rectangle > .rounded-rectangle-svg .rounded-rectangle-path.rr-stroke-2x {
  stroke-width: calc(var(--rounded-rectangle-stroke-width, 0) * 2);
}

rounded-rectangle > .rounded-rectangle-svg .rr-shadow-path {
  fill: var(--rounded-rectangle-fill, transparent);
  filter: var(--rounded-rectangle-shadow-filter, none);
  pointer-events: none;
}

rounded-rectangle > .rr-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: var(--rounded-rectangle-backdrop-filter, none);
}

rounded-rectangle > :not(.rounded-rectangle-svg):not(.rr-backdrop):not(.under-layer):not(.over-layer) {
  position: relative;
  z-index: 2;
}

grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
}

/* === stretch propagation ===
   A stack with a Spacer somewhere inside is "greedy" on its main axis.
   Greediness must propagate up through ANY stack ancestor (vstack/hstack/zstack)
   so the outermost container actually receives a real size from its parent.

   Axis is determined by which stack the spacer lives in:
	 - vstack > spacer  →  needs vertical space
	 - hstack > spacer  →  needs horizontal space

   We use simple descendant :has(...) (not nested) for reliability. */

/* vertical greediness (any vstack ancestor of a "vstack > spacer") */
vstack:has(> spacer),
hstack:has(vstack > spacer),
zstack:has(vstack > spacer) {
  height: 100%;
  align-self: stretch;
}

/* horizontal greediness (any vstack/hstack/zstack ancestor of a "hstack > spacer") */
hstack:has(> spacer),
vstack:has(hstack > spacer),
zstack:has(hstack > spacer) {
  width: 100%;
  justify-self: stretch;
}

/* === .fill() cascade ===
   .fills is "infinity-greedy on both axes". Any stack ancestor must offer
   100% on both axes so the request actually has space to resolve against.
   We push `align/justify-self: stretch` up the chain too, so a hugging
   grid/flex parent (like #app's `place-items: center` track) grows the
   ancestor to the available space — but ONLY if the ancestor doesn't have
   an explicit width/height set. With a fixed size, `stretch` would change
   the alignment from `center` to `flex-start`, visibly shifting it to the
   left/top. Inline width/height already wins over our 100% via specificity. */
.fills {
  flex: 1 1 0;
  place-self: stretch;
  width: 100%;
  height: 100%;
}

vstack:has(.fills),
hstack:has(.fills),
zstack:has(.fills) {
  width: 100%;
  height: 100%;
}

vstack:has(.fills):not([style*="width"]),
hstack:has(.fills):not([style*="width"]),
zstack:has(.fills):not([style*="width"]) {
  justify-self: stretch;
}

vstack:has(.fills):not([style*="height"]),
hstack:has(.fills):not([style*="height"]),
zstack:has(.fills):not([style*="height"]) {
  align-self: stretch;
}

/* Per-axis fill from .frame({ maxWidth/maxHeight: "infinity" }). Same shape
   as the .fills cascade, but only the relevant axis grows. */
vstack:has(.fills-x),
hstack:has(.fills-x),
zstack:has(.fills-x) {
  width: 100%;
}

vstack:has(.fills-x):not([style*="width"]),
hstack:has(.fills-x):not([style*="width"]),
zstack:has(.fills-x):not([style*="width"]) {
  justify-self: stretch;
}

vstack:has(.fills-y),
hstack:has(.fills-y),
zstack:has(.fills-y) {
  height: 100%;
}

vstack:has(.fills-y):not([style*="height"]),
hstack:has(.fills-y):not([style*="height"]),
zstack:has(.fills-y):not([style*="height"]) {
  align-self: stretch;
}

/* === New primitives === */

img {
  display: block;
  max-width: 100%;
}

canvas {
  display: block;
  max-width: 100%;
}

markdown {
  display: block;
  white-space: pre-wrap;
}

pre {
  display: block;
  max-width: 100%;
  overflow: auto;
  font-family: inherit;
  white-space: pre;
}

menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

menuitem {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

modal,
popover,
tooltip {
  display: block;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.1);
}

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

/* Divider: auto-axis based on parent stack. Horizontal in vstack,
   vertical in hstack, horizontal everywhere else. */
divider {
  display: block;
  background: var(--color-border, currentColor);
  opacity: 1;
  flex-shrink: 0;
}

vstack > divider {
  width: 100%;
  height: var(--size-border-width, var(--ui-border, 0.5px));
}

hstack > divider {
  width: var(--size-border-width, var(--ui-border, 0.5px));
  height: 1rem;
  align-self: center;
}

/* ScrollView */
scrollview {
  display: flex;
  flex: 1 1 auto;
  overflow: auto;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

scrollview[data-axis="vertical"] {
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: center;
  justify-content: flex-start;
}

scrollview[data-axis="horizontal"] {
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  justify-content: flex-start;
}

scrollview[data-axis="both"] {
  flex-direction: row;
  overflow: auto;
  align-items: center;
  justify-content: flex-start;
}

scrollview[data-no-indicators="true"] {
  scrollbar-width: none;
}

scrollview[data-no-indicators="true"]::-webkit-scrollbar {
  display: none;
}

.hack-scrollbar::-webkit-scrollbar {
  width: var(--hack-scrollbar-width);
  height: var(--hack-scrollbar-height);
}

.hack-scrollbar-hidden::-webkit-scrollbar,
.hack-scrollbar::-webkit-scrollbar-button {
  display: none;
}

.hack-scrollbar::-webkit-scrollbar-track {
  background: var(--hack-scrollbar-track);
}

.hack-scrollbar::-webkit-scrollbar-thumb {
  background: var(--hack-scrollbar-thumb);
  border-radius: var(--hack-scrollbar-radius);
  border: var(--hack-scrollbar-border);
  background-clip: content-box;
}

.hack-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--hack-scrollbar-thumb-hover);
}

.hack-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

zstack {
  display: grid;
  align-items: center;
  justify-items: center;
}

zstack > * {
  grid-area: 1/1;
}

.over-layer,
.under-layer {
  position: absolute;
  inset: 0;

  display: grid;

  pointer-events: none;

  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

:is(.over-layer, .under-layer) > * {
  pointer-events: auto;
}

.over-layer {
  z-index: 10;
}

.has-over-layer {
  position: relative;
}

.under-layer {
  z-index: 0;
}

.has-under-layer {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.has-under-layer > .under-layer {
  z-index: -1;
}

.has-under-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: inherit;
  border: inherit;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* .has-under-layer > :not(.under-layer):not(.over-layer):not(.rounded-rectangle-svg) {
  position: relative;
  z-index: 1;
} */

foreach,
foreachitem {
  display: contents;
}

.hack-context-menu {
  position: fixed;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px;
  min-width: 164px;
  max-width: min(260px, calc(100vw - 16px));
  box-sizing: border-box;
  border: var(--size-border-width, var(--ui-border, 0.5px)) solid var(--color-border, rgba(255,255,255,0.10));
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-surface, #1f2430) 94%, transparent);
  color: var(--color-text, #e2e8f0);
  box-shadow: 0 16px 42px rgba(0,0,0,0.42), 0 0 0 0.5px color-mix(in srgb, var(--color-border-bright, #ffffff) 18%, transparent) inset;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  font-family: inherit;
}

/* Link Styles */
a {
  color: var(--accent-color);
  text-decoration: underline;
  text-decoration-color: color-mix(
	in srgb,
	var(--accent-color) 50%,
	transparent
  );
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color) 80%, var(--text-primary));
  text-decoration-color: var(--accent-color);
}

a:visited {
  color: color-mix(in srgb, var(--accent-color) 70%, var(--text-secondary));
}

a:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Form Elements */

/* :where(
  input, textarea
) {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 8px 12px;
  box-sizing: border-box;
}

:where(input:focus, textarea:focus) {
  outline: none;
  border-color: #60a5fa;
}

textarea {
  display: block;
  resize: vertical;
  font-family: inherit;
} */


:where(
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"]
) {
  width: 100%;
  background: var(--bg-primary);
  min-width: 0;
  box-sizing: border-box;
  font-family: "JetBrains Mono";
  font-size: 14px;
  padding: 7px 10px;
  color: var(--text-primary);
  border: 1px solid var(--bg-secondary);
  border-radius: 0.5em;
}

:where(
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus
) {
  outline: 2px solid var(--accent-color);
}

input::placeholder {
  color: rgba(255,255,255,0.15);
}

textarea {
  width: 100%;
  background: var(--bg-primary);
  font-family: "JetBrains Mono";
  color: var(--text-primary);
  padding: 7px 10px;
  tab-size: 4;
  border: 1px solid var(--bg-secondary);
  border-radius: 0.5em;
}

textarea:focus {
  outline: 2px solid var(--accent-color);
}

button {
  background: var(--text-primary);
  color: var(--bg-primary);
  font-family: "JetBrains Mono";
  padding: 2px 10px;
  border-radius: 0.5em;
  border: none;
  border: 2px solid var(--text-primary);
  transition: all 0.1s;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

button:active {
  transform: scale(0.95);
  opacity: 0.6;
}