/* proto-panel.css — Prototype navigation panel, tabs, flow cards, and related styles */

.proto-panel {
    position: fixed; right: 0; top: 0; bottom: 0; width: 320px;
    background: var(--bg2); color: var(--text); z-index: 10001;
    transform: translateX(100%); transition: transform 0.3s ease;
    display: flex; flex-direction: column; overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08); font-size: 13px;
    border-left: 1px solid var(--border);
}
.proto-panel.open { transform: translateX(0); }
.proto-panel-header {
    padding: 24px 20px 16px; border-bottom: 1px solid var(--border);
}
.proto-panel-header h2 { font-size: 20px; font-weight: 800; color: var(--text); margin: 0 0 2px; }
.proto-panel-header .proto-brand { font-size: 14px; font-weight: 700; color: var(--accent); margin: 0; }
.proto-section {
    padding: 16px 20px 8px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--text3);
}
.proto-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; cursor: pointer; transition: background 0.15s;
    color: var(--text2); font-size: 13px;
}
.proto-item:hover { background: var(--bg3); }
.proto-item.active { background: var(--accent-bg); color: var(--accent); }
.proto-item .proto-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.proto-item .proto-label { flex: 1; }
.proto-item svg { flex-shrink: 0; }
.proto-divider { height: 1px; background: var(--border); margin: 8px 20px; }
.proto-flow-card {
    margin: 4px 16px; padding: 10px 12px; border-radius: 10px;
    background: var(--bg3); border: 1px solid var(--border);
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 10px;
}
.proto-flow-card:hover { background: var(--accent-bg); border-color: var(--accent); }
.proto-flow-card.proto-active { border-left: 3px solid var(--accent); background: var(--accent-bg); }
.proto-flow-card svg { flex-shrink: 0; color: var(--text3); }
.proto-flow-card:hover svg { color: var(--accent); }
.proto-flow-info { flex: 1; min-width: 0; }
.proto-flow-card h4 { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 2px; }
.proto-flow-card p { font-size: 10px; color: var(--text3); margin: 0; }
.proto-flow-tag {
    font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
    flex-shrink: 0; white-space: nowrap;
}
.proto-tab {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl; text-orientation: mixed;
    background: var(--accent); color: white; padding: 16px 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    border-radius: 8px 0 0 8px; cursor: pointer; z-index: 10000;
    transition: all 0.2s; box-shadow: -2px 0 8px rgba(0,0,0,0.1);
}
.proto-tab:hover { padding: 16px 14px; }
.proto-tab.hidden { display: none; }
.proto-close {
    position: absolute; top: 16px; right: 16px; background: none; border: none;
    color: var(--text3); cursor: pointer; font-size: 18px; padding: 4px; font-family: inherit;
}
.proto-close:hover { color: var(--text); }

.proto-flow-card.proto-coming-soon { cursor: default; }
.proto-flow-card.proto-coming-soon:hover { background: var(--bg3); border-color: var(--border); }