/* Macaw's framework-independent token integration.
   Color, shape and motion values come from the vendored semantic token sheet.
   Space steps mirror Macaw's documented SPACE_SCALE_PX, without Tailwind. */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;
    color-scheme: light;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
html.dark { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-surface-level-1); color: var(--text-primary); font-size: 14px; line-height: 1.5; }
button, input, select { font: inherit; }
button, a, input, select { outline-color: var(--border-focus); }
button { cursor: pointer; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}
.bg-mesh { display: none; }
.container { max-width: 1440px; margin: 0 auto; padding: var(--space-5) var(--space-6); }

/* A restrained app header, using Macaw's 24px heading and 14px body roles. */
header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); padding-bottom: var(--space-6); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.logo-container { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); padding-right: var(--space-8); margin-bottom: var(--space-5); }
.logo-link { display: inline-flex; }
.logo-icon { width: 174px; height: 32px; object-fit: contain; }
.macaw-logo-dark, html.dark .macaw-logo-light { display: none; }
html.dark .macaw-logo-dark { display: block; }
.gh-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; color: var(--icon-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.gh-link:hover { background: var(--bg-surface-level-2-hover); color: var(--icon-primary); }
.gh-link svg { width: 16px; height: 16px; }
header h1 { grid-column: 1; margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -0.04em; font-weight: 500; }
.subtitle { grid-column: 1; margin: 0; max-width: 780px; color: var(--text-tertiary); }
.langsmith-cta { grid-column: 2; grid-row: 2 / 4; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); color: var(--text-brand-on-fill); background: var(--bg-brand); border: 1px solid var(--border-brand); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; white-space: nowrap; }
.langsmith-cta:hover { background: var(--bg-brand-hover); color: var(--text-brand-on-fill); }
.langsmith-cta svg { width: 16px; height: 16px; }
.theme-toggle { position: fixed; top: var(--space-5); right: var(--space-5); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--bg-elevated); color: var(--icon-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); z-index: 20; }
.theme-toggle:hover { background: var(--bg-elevated-hover); }
.theme-toggle svg { width: 16px; height: 16px; }
.sun-icon, html.dark .moon-icon { display: none; }
html.dark .sun-icon { display: block; }

/* Card neutral intent: surface level 2, muted border, 8px radius, 16px inset. */
.product-panels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.product-panel { min-width: 0; display: flex; flex-direction: column; padding: var(--space-4); border: 1px solid var(--border-muted); border-radius: var(--radius-lg); background: var(--bg-surface-level-2); cursor: pointer; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.product-panel:hover { background: var(--bg-surface-level-2-hover); border-color: var(--border-default); }
.product-panel.active { background: var(--bg-selected); border-color: var(--border-brand); }
.product-panel-header { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.product-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--icon-secondary); }
.product-icon img, .product-icon svg { width: 20px; height: 20px; }
.product-title { color: var(--text-primary); font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.product-description { margin-bottom: var(--space-4); color: var(--text-tertiary); font-size: 13px; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; }
.product-count { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--bg-surface-level-3); color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.product-arrow { width: 16px; height: 16px; color: var(--icon-secondary); }
.product-panel.active .product-count { color: var(--text-brand-primary); background: var(--bg-brand-subtle); }

/* Fields and compact grouped controls use Macaw's input and selected surfaces. */
.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto 200px; gap: var(--space-3); margin-bottom: var(--space-4); }
.search-box { position: relative; min-width: 0; }
.search-box svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--icon-secondary); pointer-events: none; }
.search-box input, .sort-select select { width: 100%; height: 40px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-primary); }
.search-box input { padding: 0 var(--space-3) 0 var(--space-7); }
.search-box input::placeholder { color: var(--text-placeholder); }
.search-box input:focus, .sort-select select:focus { border-color: var(--border-focus); }
.sort-select { position: relative; min-width: 0; }
.sort-select select { padding: 0 var(--space-6) 0 var(--space-3); appearance: none; font-size: 13px; }
.sort-select svg { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--icon-secondary); pointer-events: none; }
.view-toggles { display: flex; align-items: stretch; gap: var(--space-1); padding: var(--space-1); min-width: 0; height: 40px; border: 1px solid var(--border-muted); border-radius: var(--radius-md); background: var(--bg-surface-level-2); }
.view-btn { flex: 1; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); font-size: 13px; font-weight: 500; white-space: nowrap; }
.view-btn:hover { color: var(--text-primary); }
.view-btn.active { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-xs); }
html.dark .view-btn.active { box-shadow: none; background: var(--bg-elevated-selected); }
.archive-option { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); width: fit-content; min-height: 24px; color: var(--text-tertiary); font-size: 12px; cursor: pointer; }
.archive-option input { accent-color: var(--bg-control-active); width: 16px; height: 16px; margin: 0; }

.content-area { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: var(--space-5); }
.topics-sidebar { position: sticky; top: var(--space-5); padding: var(--space-4); border: 1px solid var(--border-muted); border-radius: var(--radius-lg); background: var(--bg-sidebar); }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.sidebar-title { font-size: 14px; font-weight: 600; }
.clear-btn { padding: var(--space-1) var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-elevated); font-size: 12px; }
.clear-btn:hover { border-color: var(--border-default); }
.clear-btn.hidden { display: none; }
.topic-list { display: flex; flex-direction: column; gap: var(--space-4); max-height: 65vh; overflow-y: auto; scrollbar-width: thin; }
.topic-group-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; }
.topic-group-header svg { width: 12px; height: 12px; color: var(--icon-secondary); flex-shrink: 0; }
.topic-group-items { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.topic-group.collapsed .topic-group-items { display: none; }
.topic-group.collapsed .topic-group-header svg { transform: rotate(-90deg); }
.topic-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; }
.topic-item:hover { background: var(--bg-surface-level-2-hover); }
.topic-item.active { background: var(--bg-selected); color: var(--text-brand-primary); }
.topic-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.topic-count { flex-shrink: 0; color: var(--text-tertiary); font-size: 12px; font-weight: 500; }
.topic-item.active .topic-count { color: var(--text-brand-primary); }
.topic-item.disabled { color: var(--text-disabled); cursor: default; }
.topic-item.disabled .topic-count { color: var(--text-disabled); }
.topic-item.disabled:hover { background: transparent; }
.difficulty-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); cursor: pointer; }
.difficulty-item:hover { background: var(--bg-surface-level-2-hover); }
.difficulty-item.active { background: var(--bg-selected); }
.difficulty-info { display: flex; align-items: center; gap: var(--space-2); }
.difficulty-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--icon-secondary); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.difficulty-icon svg { width: 12px; height: 12px; }
.difficulty-name { font-size: 13px; font-weight: 500; }
.difficulty-desc { font-size: 12px; color: var(--text-tertiary); }
.difficulty-item.disabled, .difficulty-item.disabled .difficulty-desc, .difficulty-item.disabled .topic-count { color: var(--text-disabled); cursor: default; }
.difficulty-item.disabled:hover { background: transparent; }

.repos-container { min-width: 0; }
.repos-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.repos-title { font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.repos-count { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.active-filters[hidden] { display: none; }
.active-filters-label { font-size: 12px; color: var(--text-tertiary); }
.filter-chip, .reset-filters { min-height: 24px; padding: var(--space-1) var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: 12px; }
.filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; background: var(--bg-brand-subtle); color: var(--text-brand-primary); overflow-wrap: anywhere; text-align: left; }
.reset-filters { background: var(--bg-elevated); color: var(--text-secondary); }
.filter-chip:hover, .reset-filters:hover { border-color: var(--border-brand); }
.repos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.repo-card { min-width: 0; display: flex; flex-direction: column; padding: var(--space-4); border: 1px solid var(--border-muted); border-radius: var(--radius-lg); background: var(--bg-surface-level-2); color: var(--text-primary); transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.repo-card:hover { color: var(--text-primary); border-color: var(--border-default); background: var(--bg-surface-level-2-hover); }
.repo-header { display: flex; flex-direction: column; align-items: start; gap: var(--space-2); margin-bottom: var(--space-3); }
.repo-name { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; color: var(--text-primary); overflow-wrap: anywhere; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.repo-name svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--icon-secondary); }
.repo-card:hover .repo-name { color: var(--text-link); }
.repo-badges { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.repo-badge, .repo-difficulty-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: 12px; font-weight: 500; background: var(--bg-brand-subtle); color: var(--text-brand-primary); }
.repo-difficulty-badge { background: var(--bg-surface-level-3); color: var(--text-secondary); }
.repo-badge.archived { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.repo-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-4); color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.repo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: auto; color: var(--text-tertiary); font-size: 12px; }
.repo-meta-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.repo-meta-item svg { width: 12px; height: 12px; flex-shrink: 0; }
.repo-topics { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.repo-topic { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--bg-surface-level-3); color: var(--text-tertiary); font-size: 12px; line-height: 1.25; }
.empty-state { grid-column: 1 / -1; padding: var(--space-9) var(--space-5); text-align: center; color: var(--text-tertiary); }
.empty-state svg { width: 40px; height: 40px; color: var(--icon-secondary); }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: var(--space-5) 0; margin-top: var(--space-8); border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: 12px; }
footer p { margin: 0; }

@media (max-width: 1120px) {
    .product-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .controls { grid-template-columns: minmax(0, 1fr) 240px; }
    .search-box { grid-column: 1 / -1; }
    .content-area { grid-template-columns: 220px minmax(0, 1fr); }
    .repos-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .container { padding: var(--space-4); }
    .theme-toggle { top: var(--space-4); right: var(--space-4); }
    header { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    header h1, .subtitle, .langsmith-cta { grid-column: 1; grid-row: auto; }
    .langsmith-cta { justify-self: start; }
    .logo-container { margin-bottom: var(--space-3); }
    .product-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-area { grid-template-columns: minmax(0, 1fr); }
    .topics-sidebar { position: static; }
    .topic-list { max-height: 260px; }
}
@media (max-width: 520px) {
    .product-panels { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .controls { grid-template-columns: minmax(0, 1fr); }
    .search-box { grid-column: auto; }
    .view-btn { padding: 0 var(--space-2); }
    .logo-icon { width: 152px; height: 28px; }
    header h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}