@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 6%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --border: 240 3.7% 15.9%;
}

.canvas-grid {
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Custom Markdown Styling (The DelphiTools look) */
.delphi-prose {
    line-height: 1.6;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
.delphi-prose h1, .delphi-prose h2, .delphi-prose h3 {
    color: hsl(var(--foreground));
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: larger;
}

/* Scrollable code blocks for mobile */
.delphi-prose pre {
    white-space: pre-wrap !important; 
    word-break: break-word;
    overflow-x: auto;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    -webkit-overflow-scrolling: touch;
}

.delphi-prose code {
    white-space: pre-wrap !important;
}

/* Makes markdown tables responsive (scrollable on mobile) */
.delphi-prose table {
    width: 100%;
    display: block; 
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.delphi-prose td, .delphi-prose th {
    white-space: nowrap; /* Prevents awkward column crushing */
    padding: 0.75rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
}

.delphi-prose th {
    background-color: hsl(var(--muted) / 0.5);
    font-weight: bold;
    text-align: left;
}

.delphi-prose p {
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}
.delphi-prose strong {
    color: #6366f1; 
}
.delphi-prose ul {
    list-style-type: square;
    padding-left: 1.25rem;
    margin-bottom: 1rem;
    color: hsl(var(--muted-foreground));
}
.delphi-prose li {
    margin-bottom: 0.5rem;
}
.delphi-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.svg-wrapper {
	transform-origin: center;
}