/* Shared structural styles for prototype pages (basic-propagation-prototype, init-col-problem, ...). Visual details specific to a page (SVG rendering, per-page colors) stay in that page. */ /* ── Reset & base ── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { font-family: system-ui, sans-serif; background: #f5f5f5; color: #333; } /* Two page layouts: sidebar-on-left, or header-on-top. Pick one on . */ body.layout-sidebar { display: flex; flex-direction: column; height: 100vh; } body.layout-sidebar .layout-body { flex: 1; display: flex; min-height: 0; } body.layout-header { min-height: 100vh; display: flex; flex-direction: column; } /* ── Breadcrumb ── */ .breadcrumb { background: #fff; border-bottom: 1px solid #ddd; padding: 10px 20px; display: flex; align-items: center; gap: 8px; font-size: 0.85em; flex-shrink: 0; } .breadcrumb a { color: #1f6feb; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb .sep { color: #aaa; } .breadcrumb .current { color: #444; font-weight: 600; } /* ── Sidebar layout ── */ .sidebar { width: 300px; min-width: 300px; padding: 20px; background: #fff; border-right: 1px solid #ddd; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .sidebar h1 { font-size: 1.2em; color: #222; } .sidebar h2 { font-size: 0.85em; color: #666; text-transform: uppercase; letter-spacing: 0.05em; } .main { flex: 1; overflow: hidden; background: #fff; } /* ── Header layout ── */ .page-header { background: #fff; border-bottom: 1px solid #ddd; padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .page-header h1 { font-size: 1.1em; color: #222; } .nav-link { padding: 4px 12px; background: #1f6feb; color: #fff; border-radius: 6px; text-decoration: none; font-size: 0.85em; font-weight: 600; } /* ── Controls ── */ .controls { display: flex; flex-direction: column; gap: 10px; } .controls.horizontal { flex-direction: row; flex-wrap: wrap; } .control-row { display: flex; gap: 10px; } .control { display: flex; flex-direction: column; gap: 2px; } .control label { font-size: 0.75em; color: #666; } .control input { width: 64px; padding: 4px 8px; background: #f5f5f5; border: 1px solid #ccc; color: #333; border-radius: 4px; font-size: 0.9em; } /* ── Buttons / toggles ── */ .btn, .toggle-row button { padding: 4px 10px; background: #e8e8e8; border: 1px solid #ccc; color: #333; border-radius: 4px; cursor: pointer; font-size: 0.8em; } .btn.active, .toggle-row button.active { background: #1f6feb; border-color: #1f6feb; color: #fff; } .toggle-row { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Legend ── */ .legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.8em; } .legend-item { display: flex; align-items: center; gap: 8px; } .legend-swatch { width: 20px; height: 20px; flex-shrink: 0; } /* ── Call-signature / code display ── */ .call-sig { font-family: monospace; font-size: 0.95em; color: #2a7a3a; padding: 8px 12px; background: #f5f5f5; border-radius: 6px; border: 1px solid #ccc; white-space: pre-wrap; } /* ── Info / details panel ── */ .info-panel { padding: 12px; background: #f5f5f5; border: 1px solid #ccc; border-radius: 6px; font-size: 0.82em; min-height: 90px; flex-shrink: 0; } /* ── Side-by-side diagrams grid ── */ .diagrams { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #ddd; } @media (max-width: 900px) { .diagrams { grid-template-columns: 1fr; } } .diagram-wrap { background: #fff; padding: 16px; overflow: auto; } .diagram-wrap h2 { font-size: 0.95em; color: #444; margin-bottom: 8px; } .diagram-wrap .sub { font-family: monospace; font-size: 0.8em; color: #2a7a3a; margin-bottom: 12px; }