/* wgsl.run — Decoder design system applied.
 *
 *   tokens: bg-primary / amber-accent / gray scale / DM Sans + JetBrains Mono
 *   layout: editor (left) | output (right) — full-bleed, no margins
 *   accent: amber on actions / active tabs / status dot, mono on labels
 */

:root {
    color-scheme: dark;

    /* ── Decoder design tokens ────────────────────────────────── */
    --bg-primary:    #0F1112;
    --bg-secondary:  #111314;
    --bg-tertiary:   #161819;
    --bg-card:       #1A1C1E;

    --amber-accent:  #F6A623;
    --amber-10:      rgba(246, 166, 35, 0.10);
    --amber-20:      rgba(246, 166, 35, 0.20);
    --amber-30:      rgba(246, 166, 35, 0.30);
    --amber-400:     #FBBF24;

    --gray-50:  #F9FAFB;
    --gray-100: #E5E7EB;
    --gray-200: #D1D5DB;
    --gray-300: #9CA3AF;
    --gray-400: #6B7280;
    --gray-500: #4B5563;
    --gray-600: #374151;

    --border-subtle: rgba(255, 255, 255, 0.06);

    --error:   #f87171;
    --warning: #fbbf24;
    --info:    #60a5fa;

    --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body {
    height: 100%; margin: 0;
    background: var(--bg-primary);
    color: var(--gray-100);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
body { display: flex; flex-direction: column; }
::selection { background: var(--amber-20); color: var(--amber-accent); }

/* ── Topbar ──────────────────────────────────────────────────── */

.topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.55rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex: 0 0 auto;
}
.brand {
    display: inline-flex; align-items: baseline; gap: 0.15rem;
    text-decoration: none;
    font-family: var(--font-mono);
}
.brand-name   { font-weight: 600; color: var(--gray-100); letter-spacing: -0.02em; font-size: 0.95rem; }
.brand-domain { font-size: 0.75rem; color: var(--gray-400); }

.status {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--gray-400);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.status-dot {
    width: 0.375rem; height: 0.375rem; border-radius: 50%;
    background: var(--amber-accent);
    display: inline-block;
    animation: pulse-dot 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.oss-link {
    display: inline-flex; align-items: center; gap: 0.45rem;
    margin-left: auto;
    color: var(--gray-400);
    font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
    text-decoration: none;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.25rem;
    transition: color 150ms, background-color 150ms, border-color 150ms;
}
.oss-link:hover { color: var(--amber-accent); border-color: var(--amber-30); background: var(--amber-10); }
.oss-icon       { display: block; opacity: 0.85; }
.oss-link:hover .oss-icon { opacity: 1; }
.oss-arrow      { font-size: 0.85em; opacity: 0.7; transition: transform 150ms; }
.oss-link:hover .oss-arrow { transform: translateX(2px); opacity: 1; }

.actions { display: flex; gap: 0.5rem; }
button {
    background: var(--bg-tertiary);
    color: var(--gray-200);
    border: 1px solid var(--border-subtle);
    padding: 0.4rem 0.9rem;
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 150ms, background-color 150ms, color 150ms;
}
button:hover { border-color: var(--gray-500); background: var(--bg-card); }

.btn-primary {
    background: var(--amber-accent);
    color: var(--bg-primary);
    border-color: var(--amber-accent);
}
.btn-primary:hover { background: var(--amber-400); border-color: var(--amber-400); color: var(--bg-primary); }
.btn-ghost  { /* default style */ }

/* ── Layout: 3-column split (sidebar | editor | output) ──────── */

.layout {
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    flex: 1 1 auto; min-height: 0;
}
.sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-subtle);
    overflow: auto;
    min-height: 0;
}
.editor-pane { border-right: 1px solid var(--border-subtle); min-height: 0; display: flex; flex-direction: column; }
#editor      { flex: 1 1 auto; min-height: 0; }

/* Sidebar contents */

#sidebar          { padding: 0.6rem 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; }
.sb-section      { margin-bottom: 1rem; }
.sb-head         {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.25rem 0.5rem 0.4rem; gap: 0.5rem;
}
.sb-h            {
    font-size: 0.65rem; text-transform: uppercase;
    color: var(--amber-accent);
    letter-spacing: 0.1em;
    font-weight: 600;
}
.sb-add          {
    background: transparent; border: 1px solid var(--border-subtle);
    color: var(--gray-400);
    padding: 0; width: 1.4rem; height: 1.4rem;
    border-radius: 3px; font-size: 0.95rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-add:hover    { color: var(--amber-accent); border-color: var(--amber-30); background: var(--amber-10); }
.sb-row          {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.4rem; cursor: pointer;
    border-radius: 3px;
    color: var(--gray-300);
    transition: background-color 100ms, color 100ms;
}
.sb-row:hover    { background: var(--bg-tertiary); color: var(--gray-100); }
.sb-row.active   { background: var(--bg-card); color: var(--gray-50); }
.sb-row.active .sb-name { color: var(--amber-accent); }
.sb-star {
    background: transparent; border: 0; color: var(--gray-500);
    padding: 0 0.15rem; cursor: pointer; font-size: 0.85rem;
    line-height: 1;
}
.sb-star.on      { color: var(--amber-accent); cursor: default; }
.sb-star:hover   { color: var(--amber-400); }
.sb-name         { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; }
.sb-name.shared  { color: var(--gray-500); font-style: italic; }
.sb-x {
    background: transparent; border: 0; color: var(--gray-500);
    padding: 0 0.25rem; cursor: pointer; font-size: 0.95rem;
    line-height: 1; visibility: hidden;
}
.sb-row:hover .sb-x { visibility: visible; }
.sb-x:hover         { color: var(--error); }

.output-pane { display: flex; flex-direction: column; min-height: 0; background: var(--bg-primary); }
.tabs {
    display: flex; gap: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex: 0 0 auto;
}
.tab {
    background: transparent; border: 0;
    border-bottom: 2px solid transparent;
    color: var(--gray-400);
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
    padding: 0.55rem 1rem;
    cursor: pointer;
    border-radius: 0;
    transition: color 150ms, border-color 150ms;
}
.tab:hover  { color: var(--gray-200); background: transparent; border-color: transparent; }
.tab.active { color: var(--amber-accent); border-bottom-color: var(--amber-accent); }

.tab-panels { flex: 1 1 auto; min-height: 0; position: relative; }
.tab-panel {
    position: absolute; inset: 0;
    padding: 1rem 1.25rem;
    overflow: auto;
    display: none;
}
.tab-panel.active { display: block; }

/* ── Tab content ─────────────────────────────────────────────── */

#canvas {
    display: block; max-width: 100%;
    background: #000;
    border: 1px solid var(--border-subtle);
    border-radius: 0.25rem;
}
#compute-out,
#module-json,
#host-plan {
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--gray-200);
    margin: 0;
}
#compute-out { margin-top: 1rem; color: var(--gray-300); }

#diag-list      { list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: 0.78rem; }
#diag-list li   {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background-color 150ms;
}
#diag-list li:hover     { background: var(--bg-secondary); }
.diag-error   { color: var(--error); }
.diag-warning { color: var(--warning); }
.diag-info    { color: var(--info); }
.diag-where   { color: var(--gray-500); margin-right: 0.6rem; }

/* ── Params panel ────────────────────────────────────────────── */

#params-panel    { font-family: var(--font-mono); font-size: 0.78rem; }
.p-section       { margin-bottom: 1.5rem; }
.p-h             {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--amber-accent);
    letter-spacing: 0.08em;
    font-weight: 500;
}
.p-row           { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0; flex-wrap: wrap; }
.p-resource      { padding: 0.6rem 0; border-bottom: 1px solid var(--border-subtle); }
.p-resource:last-child { border-bottom: 0; }
.p-bind          { color: var(--amber-accent); font-family: var(--font-mono); }
.p-name          { font-weight: 600; color: var(--gray-100); }
.p-type          { color: var(--gray-500); }
.p-label         { display: inline-block; min-width: 5.5rem; color: var(--gray-400); }
.p-num           {
    width: 5.5rem;
    background: var(--bg-secondary);
    color: var(--gray-100);
    border: 1px solid var(--border-subtle);
    border-radius: 0.25rem;
    padding: 0.2rem 0.45rem;
    font: inherit;
    transition: border-color 150ms;
}
.p-num:focus     { outline: none; border-color: var(--amber-accent); }
.p-vec           { display: inline-flex; gap: 0.3rem; }
.p-pattern       { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.p-sel {
    background: var(--bg-secondary);
    color: var(--gray-100);
    border: 1px solid var(--border-subtle);
    border-radius: 0.25rem;
    padding: 0.2rem 0.45rem;
    font: inherit;
}
.p-sel:focus     { outline: none; border-color: var(--amber-accent); }
.p-args          { display: inline-flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; color: var(--gray-400); }
.p-summary       { color: var(--gray-500); padding-left: 5.5rem; font-size: 0.7rem; margin-top: 0.2rem; }
.p-hint          { color: var(--gray-500); font-style: italic; }
.p-empty         { color: var(--gray-500); font-style: italic; padding: 1rem 0; }

/* Monaco's diagnostic squigglies are recoloured via the custom
 * theme defined in editor.ts; nothing to do here. */