/* Market Intel — apps/Market-Intel styles * Consumes the shared VisionOne design system (visionone-brand.css) so this * app matches Strategic Playbook, Course Design, Learning Hub, and Career * Hub. Only Market-Intel-specific tints/soft-shades are declared here. */ :root { /* ─── Additional soft/tint shades not in the shared brand file ─── */ --vo-green-soft: #e7efe2; /* aliased to --vo-green-tint from brand */ --vo-blue-soft: #e0f1f8; --vo-red-soft: #fbe9e7; --vo-purple-soft: #efe9f5; --vo-yellow-soft: #fef8d8; /* ─── Legacy aliases so existing rules keep working ─────────────── */ --vo-ink-muted: var(--vo-ink-soft); /* map old alias to shared token */ --vo-bg: var(--vo-canvas); /* map old alias to shared token */ } /* Apply VisionOne body typography globally within Market Intel */ body { font-family: var(--vo-font-body); color: var(--vo-ink); } h1, h2, h3, h4, .mi-h1 { font-family: var(--vo-font-heading); color: var(--vo-ink); letter-spacing: -0.01em; } .mi-subtitle { color: var(--vo-ink-soft); } .mi-header-bar h1 { font-family: var(--vo-font-heading); font-size: 26px; letter-spacing: -0.015em; } /* Admin-only nav — currently visible for all users (single-admin usage today). To restrict later, uncomment the line below and have login/role code add `data-role="admin"` on or . Mirrors sp-admin-only pattern. */ /* html:not([data-role="admin"]) .mi-admin-only { display: none; } */ .mi-frame { display: flex; min-height: calc(100vh - 56px); background: var(--vo-canvas); } .mi-sidebar { width: 320px; background: var(--vo-surface); border-right: 1px solid var(--vo-border); padding: 20px 16px 16px; overflow-y: auto; max-height: calc(100vh - 56px); font-family: var(--vo-font-body); } .mi-sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .mi-sidebar-header h2 { margin: 0; font-size: 14px; font-weight: 700; color: #111827; letter-spacing: 0.04em; text-transform: uppercase; } .mi-sidebar-header button { font-size: 12px; padding: 4px 8px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; } .mi-segment-card { display: block; padding: 12px; margin-bottom: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.15s; } .mi-segment-card:hover { border-color: #6366f1; } .mi-segment-card.active { border-color: #6366f1; background: #f5f3ff; } .mi-segment-name { font-weight: 600; color: #111827; font-size: 14px; margin-bottom: 4px; } .mi-segment-meta { display: flex; gap: 8px; font-size: 11px; color: #6b7280; } .mi-pill { display: inline-block; padding: 2px 6px; border-radius: 10px; font-size: 11px; font-weight: 500; } .mi-pill.depth { background: #eef2ff; color: #4338ca; } .mi-pill.phase { background: #ecfdf5; color: #047857; } .mi-pill.intent-intentional { background: #fef3c7; color: #92400e; } .mi-pill.intent-accessible { background: #e0f2fe; color: #0369a1; } .mi-pill.intent-observed { background: #f3f4f6; color: #374151; } .mi-readiness-bar { height: 4px; border-radius: 2px; background: #e5e7eb; margin-top: 8px; overflow: hidden; } .mi-readiness-fill { height: 100%; background: #10b981; transition: width 0.2s; } .mi-readiness-fill.warning { background: #f59e0b; } .mi-readiness-fill.danger { background: #ef4444; } .mi-main { flex: 1; padding: 24px; overflow-y: auto; max-height: calc(100vh - 56px); } .mi-empty { color: #6b7280; text-align: center; padding: 80px 20px; } .mi-empty h3 { color: #111827; margin-bottom: 8px; } .mi-header-bar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; } .mi-header-bar h1 { margin: 0 0 4px; font-size: 24px; color: #111827; } .mi-header-bar .mi-subtitle { color: #6b7280; font-size: 14px; } .mi-tabs { display: flex; gap: 2px; border-bottom: 2px solid #e5e7eb; margin-bottom: 24px; } .mi-tab { padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 500; color: #6b7280; border: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -2px; } .mi-tab.active { color: #4338ca; border-bottom-color: #4338ca; } .mi-tab:hover { color: #111827; } .mi-panel { display: none; } .mi-panel.active { display: block; } .mi-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; margin-bottom: 16px; } .mi-card h3 { margin: 0 0 12px; font-size: 14px; color: #374151; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .mi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .mi-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .mi-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; } .mi-field { margin-bottom: 12px; } .mi-field label { display: block; font-size: 12px; font-weight: 600; color: #4b5563; margin-bottom: 4px; } .mi-field input, .mi-field select, .mi-field textarea { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; } .mi-field textarea { min-height: 80px; resize: vertical; } .mi-field .mi-hint { font-size: 11px; color: #6b7280; margin-top: 2px; } .mi-list { list-style: none; padding: 0; margin: 0; } .mi-list li { padding: 8px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 6px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; } .mi-list li button { font-size: 11px; padding: 2px 6px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; } .mi-btn { padding: 8px 14px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: #111827; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .mi-btn:hover { background: #f9fafb; } .mi-btn-primary { background: #4338ca; color: #fff; border-color: #4338ca; } .mi-btn-primary:hover { background: #3730a3; } .mi-btn-warning { background: #f59e0b; color: #fff; border-color: #f59e0b; } .mi-btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; } .mi-btn:disabled { opacity: 0.5; cursor: not-allowed; } .mi-btn-row { display: flex; gap: 8px; flex-wrap: wrap; } .mi-insight-card { background: #fff; border: 1px solid #e5e7eb; border-left: 3px solid #6366f1; border-radius: 8px; padding: 16px; margin-bottom: 12px; } .mi-insight-card.confidence-high, .mi-insight-card.confidence-very-high { border-left-color: #10b981; } .mi-insight-card.confidence-low { border-left-color: #f59e0b; } .mi-insight-card .mi-insight-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #6b7280; margin-bottom: 6px; } .mi-insight-card .mi-insight-title { font-weight: 600; color: #111827; margin-bottom: 4px; } .mi-insight-card .mi-insight-summary { color: #374151; font-size: 13px; line-height: 1.5; margin-bottom: 8px; } .mi-insight-card .mi-sources { font-size: 11px; color: #6b7280; } .mi-insight-card .mi-sources a { color: #4338ca; text-decoration: none; margin-right: 8px; } .mi-insight-card .mi-sources a:hover { text-decoration: underline; } .mi-readiness-panel { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); border: 1px solid #c7d2fe; border-radius: 10px; padding: 16px; margin-bottom: 16px; } .mi-readiness-panel h4 { margin: 0 0 8px; color: #3730a3; font-size: 14px; } .mi-readiness-panel .mi-gate { font-style: italic; color: #4b5563; margin-bottom: 8px; } .mi-readiness-panel .mi-missing { font-size: 12px; color: #92400e; } .mi-readiness-panel .mi-missing li { margin: 2px 0; } .mi-banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; display: flex; gap: 10px; align-items: center; } .mi-banner.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } .mi-banner.warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } .mi-banner.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } .mi-capacity-widget { display: flex; gap: 12px; font-size: 11px; color: #6b7280; padding: 8px 12px; background: #f9fafb; border-radius: 6px; margin-bottom: 16px; } .mi-capacity-widget span strong { color: #111827; } .mi-tag-list { display: flex; flex-wrap: wrap; gap: 4px; } .mi-tag { padding: 2px 8px; background: #f3f4f6; border-radius: 10px; font-size: 11px; color: #374151; } .mi-array-input { display: flex; gap: 6px; margin-bottom: 6px; } .mi-array-input input { flex: 1; } .mi-array-input button { padding: 6px 10px; } .mi-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #e5e7eb; border-top-color: #4338ca; border-radius: 50%; animation: mi-spin 0.8s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes mi-spin { to { transform: rotate(360deg); } } .mi-stat { padding: 12px; background: #f9fafb; border-radius: 6px; } .mi-stat .mi-stat-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; } .mi-stat .mi-stat-value { font-size: 20px; font-weight: 700; color: #111827; margin-top: 2px; } .mi-report-section { padding: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 12px; } .mi-report-section h4 { margin: 0 0 8px; color: #111827; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; } .mi-report-section pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; color: #374151; line-height: 1.55; margin: 0; } /* Stakeholder map matrix */ .mi-stakeholder-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 360px; margin-top: 12px; background: #f9fafb; border-radius: 8px; padding: 8px; position: relative; } .mi-stakeholder-quadrant { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; } .mi-stakeholder-quadrant h5 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #4b5563; } .mi-stakeholder-quadrant .mi-quad-hint { font-size: 11px; color: #9ca3af; margin-bottom: 8px; } .mi-stakeholder-quadrant .mi-stk-chip { display: inline-block; padding: 4px 8px; background: #eef2ff; color: #3730a3; border-radius: 4px; font-size: 12px; margin: 2px 4px 2px 0; } .mi-stakeholder-quadrant .mi-stk-chip.type-vendor { background: #fef3c7; color: #92400e; } .mi-stakeholder-quadrant .mi-stk-chip.type-shareholder { background: #d1fae5; color: #065f46; } /* Tier picker grid */ .mi-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 16px 0; } .mi-tier-card { background: #fff; border: 2px solid #e5e7eb; border-radius: 10px; padding: 16px; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; } .mi-tier-card:hover { border-color: #6366f1; } .mi-tier-card.active { border-color: #4338ca; background: #f5f3ff; } .mi-tier-card .mi-tier-name { font-weight: 700; font-size: 16px; color: #111827; margin-bottom: 4px; } .mi-tier-card .mi-tier-cost { font-size: 18px; font-weight: 700; color: #4338ca; margin-bottom: 6px; } .mi-tier-card .mi-tier-cost-note { font-size: 11px; color: #6b7280; margin-bottom: 10px; } .mi-tier-card .mi-tier-tagline { font-size: 13px; color: #374151; margin-bottom: 10px; line-height: 1.4; } .mi-tier-card .mi-tier-budget { font-size: 11px; color: #6b7280; margin-bottom: 10px; } .mi-tier-card .mi-tier-recommended { font-size: 11px; color: #6b7280; font-style: italic; flex-grow: 1; } .mi-tier-card .mi-tier-pick { margin-top: 12px; } .mi-tier-card.active .mi-tier-pick { background: #4338ca; color: #fff; border-color: #4338ca; } /* ── Strategic Platform extensions ─────────────────── */ .mi-alert-pill { display: inline-block; background: #dc2626; color: white; font-size: 11px; padding: 1px 7px; border-radius: 9px; margin-left: 6px; font-weight: 600; } .mi-tier-T1 { color: #b91c1c; font-weight: 600; } .mi-tier-T2 { color: #b45309; font-weight: 600; } .mi-tier-T3 { color: #6b7280; } .mi-sev-critical { background: #fef2f2; border-left: 4px solid #b91c1c; padding: 8px 12px; margin: 6px 0; } .mi-sev-high { background: #fff7ed; border-left: 4px solid #c2410c; padding: 8px 12px; margin: 6px 0; } .mi-sev-medium { background: #fefce8; border-left: 4px solid #ca8a04; padding: 8px 12px; margin: 6px 0; } .mi-sev-low { background: #f0fdf4; border-left: 4px solid #16a34a; padding: 8px 12px; margin: 6px 0; } .mi-briefing-md { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; background: #f9fafb; padding: 16px; border-radius: 6px; max-height: 600px; overflow-y: auto; } .mi-qa-pass { color: #16a34a; font-weight: 600; } .mi-qa-fail { color: #b91c1c; font-weight: 600; } .mi-qa-notes { color: #ca8a04; font-weight: 600; } .mi-opp-card, .mi-alert-card, .mi-briefing-row { padding: 12px; margin-bottom: 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .mi-opp-card:hover, .mi-alert-card:hover, .mi-briefing-row:hover { border-color: #6366f1; } .mi-score-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; font-size: 11px; } .mi-score-grid .lbl { color: #6b7280; } .mi-score-grid .val { font-weight: 600; color: #111827; } /* ─── VisionOne brand overrides ──────────────────────────────────── */ .mi-sidebar { border-right: 1px solid var(--vo-border); } .mi-sidebar-header h2 { color: var(--vo-green-dark); letter-spacing: 0.06em; } .mi-segment-card { border-color: var(--vo-border); } .mi-segment-card:hover { border-color: var(--vo-green); } .mi-segment-card.active { border-color: var(--vo-green); background: var(--vo-green-soft); } .mi-pill.depth { background: var(--vo-blue-soft); color: var(--vo-blue); } .mi-pill.phase { background: var(--vo-green-soft); color: var(--vo-green-dark); } .mi-pill.intent-intentional { background: var(--vo-yellow-soft); color: #6b5a00; } .mi-pill.intent-accessible { background: var(--vo-blue-soft); color: var(--vo-blue); } .mi-pill.intent-observed { background: #f3f4f6; color: #374151; } /* Buttons — primary action uses VO green */ .mi-btn-primary, button.mi-btn-primary { background: var(--vo-green); color: #fff; border: 1px solid var(--vo-green); } .mi-btn-primary:hover, button.mi-btn-primary:hover { background: var(--vo-green-dark); border-color: var(--vo-green-dark); } /* Severity bars — recalibrated to VO palette */ .mi-sev-critical { background: var(--vo-red-soft); border-left: 4px solid var(--vo-red); } .mi-sev-high { background: var(--vo-yellow-soft); border-left: 4px solid #c2410c; } .mi-sev-medium { background: #fefce8; border-left: 4px solid #ca8a04; } .mi-sev-low { background: var(--vo-green-soft); border-left: 4px solid var(--vo-green); } .mi-tier-T1 { color: var(--vo-red); font-weight: 700; } .mi-tier-T2 { color: #b45309; font-weight: 600; } .mi-tier-T3 { color: var(--vo-ink-muted); } /* QA grades */ .mi-qa-pass { color: var(--vo-green-dark); font-weight: 600; } .mi-qa-notes { color: #b45309; font-weight: 600; } .mi-qa-fail { color: var(--vo-red); font-weight: 700; } /* Header bar — subtle brand accent */ .mi-header-bar { border-bottom: 2px solid var(--vo-green); padding-bottom: 12px; margin-bottom: 16px; } .mi-header-bar h1 { color: var(--vo-ink); } .mi-header-bar .mi-subtitle { color: var(--vo-ink-muted); } /* Documents tab */ .mi-doc-drop { border: 2px dashed var(--vo-green); border-radius: 8px; padding: 28px; text-align: center; background: var(--vo-green-soft); color: var(--vo-green-dark); cursor: pointer; transition: background .15s; } .mi-doc-drop.dragover { background: #d4e3cc; } .mi-doc-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--vo-border); border-radius: 6px; background: var(--vo-surface); margin-bottom: 6px; } .mi-doc-row .mi-doc-meta { font-size: 12px; color: var(--vo-ink-muted); } .mi-doc-row .mi-doc-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--vo-green-soft); color: var(--vo-green-dark); } .mi-doc-row .mi-doc-status.extracting { background: var(--vo-yellow-soft); color: #6b5a00; } .mi-doc-row .mi-doc-status.failed { background: var(--vo-red-soft); color: var(--vo-red); } /* Chat panel */ .mi-chat-thread { max-height: 540px; overflow-y: auto; border: 1px solid var(--vo-border); border-radius: 8px; padding: 12px; background: var(--vo-surface); } .mi-chat-msg { padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; line-height: 1.5; } .mi-chat-msg.user { background: var(--vo-blue-soft); color: var(--vo-ink); border-left: 3px solid var(--vo-blue); } .mi-chat-msg.assistant { background: var(--vo-green-soft); color: var(--vo-ink); border-left: 3px solid var(--vo-green); } .mi-chat-msg.tool { background: var(--vo-yellow-soft); color: #4a3f00; font-family: ui-monospace, monospace; font-size: 12px; border-left: 3px solid var(--vo-yellow); } .mi-chat-input { width: 100%; padding: 10px; border: 1px solid var(--vo-border); border-radius: 6px; font-family: inherit; font-size: 14px; } .mi-chat-citation { display: inline-block; background: var(--vo-blue-soft); color: var(--vo-blue); font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; } /* Playbook view */ .mi-playbook-section { background: var(--vo-surface); border: 1px solid var(--vo-border); border-left: 4px solid var(--vo-green); border-radius: 6px; padding: 16px; margin-bottom: 12px; } .mi-playbook-section h3 { color: var(--vo-green-dark); margin-top: 0; } .mi-playbook-version-pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; margin-right: 6px; } .mi-playbook-version-pill.master { background: var(--vo-green-soft); color: var(--vo-green-dark); } .mi-playbook-version-pill.exec { background: var(--vo-blue-soft); color: var(--vo-blue); } .mi-playbook-version-pill.board { background: var(--vo-purple-soft); color: var(--vo-purple); } /* AOA layer chips */ .mi-aoa-chip { display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0; border-radius: 10px; font-size: 11px; font-weight: 600; } .mi-aoa-chip.layer-1 { background: var(--vo-green-soft); color: var(--vo-green-dark); } .mi-aoa-chip.layer-2 { background: var(--vo-blue-soft); color: var(--vo-blue); } .mi-aoa-chip.layer-3 { background: var(--vo-purple-soft); color: var(--vo-purple); } .mi-aoa-chip.layer-4 { background: var(--vo-yellow-soft); color: #6b5a00; } .mi-aoa-chip.layer-5 { background: var(--vo-red-soft); color: var(--vo-red); } .mi-aoa-chip.layer-6 { background: #f1f5f9; color: var(--vo-ink); } /* ─── Report-type tabs ─────────────────────────────────────────────── */ .mi-report-tab { padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--vo-ink-muted); border: none; background: transparent; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .15s; } .mi-report-tab:hover { color: var(--vo-green-dark); } .mi-report-tab.active { color: var(--vo-green-dark); border-bottom-color: var(--vo-green); } /* ─── Intake form — dictation + AI coach polish ───────────────────── */ .mi-dictate-btn { background: var(--vo-blue-soft); color: var(--vo-blue); border: 1px solid var(--vo-blue); border-radius: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 88px; /* equal width keeps Dictate + Coach me lined up */ text-align: center; margin-left: 0; /* spacing is owned by the .mi-intake-actions gap */ } .mi-dictate-btn:hover { background: var(--vo-blue); color: #fff; } .mi-coach-btn { background: var(--vo-green-soft); color: var(--vo-green-dark); border-color: var(--vo-green); } .mi-coach-btn:hover { background: var(--vo-green); color: #fff; } .mi-intake-actions { white-space: nowrap; } .mi-dictate-btn.recording { background: var(--vo-red); color: #fff; border-color: var(--vo-red); animation: mi-pulse 1.2s infinite; } @keyframes mi-pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .mi-intake-coach { position: sticky; bottom: 0; background: var(--vo-surface); border-top: 2px solid var(--vo-green); padding: 12px; margin-top: 20px; border-radius: 6px 6px 0 0; box-shadow: 0 -4px 12px rgba(0,0,0,0.06); } .mi-intake-coach h4 { margin: 0 0 6px; color: var(--vo-green-dark); font-size: 13px; font-weight: 700; } .mi-coach-q { font-size: 12px; color: var(--vo-ink-muted); margin-bottom: 6px; } .mi-coach-suggestions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .mi-coach-suggestion { background: var(--vo-blue-soft); color: var(--vo-blue); border: 1px solid var(--vo-blue); border-radius: 12px; padding: 3px 10px; font-size: 11px; cursor: pointer; } .mi-coach-suggestion:hover { background: var(--vo-blue); color: #fff; } .mi-coach-reply { background: var(--vo-green-soft); border-left: 3px solid var(--vo-green); padding: 10px 12px; border-radius: 4px; font-size: 13px; margin-top: 8px; line-height: 1.5; max-height: 200px; overflow-y: auto; } /* ─── Hide all right-side FABs except the AI Coach (per Michelle 2026-06-02) ─ */ .wt-ask-ai-fab, .wt-improve-fab, .wt-notes-fab, .wt-bookmark-fab, .wt-bookmark-add-fab, .wt-edit-fab-panel, .wt-edit-fab { display: none !important; } /* Keep the AI Coach FAB highly visible + VisionOne branded */ .wt-coach-fab { background: var(--vo-green) !important; color: #fff !important; border-color: var(--vo-green) !important; box-shadow: 0 4px 12px rgba(100, 153, 84, 0.35) !important; } .wt-coach-fab:hover { background: var(--vo-green-dark) !important; } /* ─── Visible scrollbar on main content area (per Michelle 2026-06-02) ─── */ .mi-main { overflow-y: scroll !important; /* always show, even when not needed */ scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--vo-green) var(--vo-bg); } .mi-main::-webkit-scrollbar { width: 12px; } .mi-main::-webkit-scrollbar-track { background: var(--vo-bg); } .mi-main::-webkit-scrollbar-thumb { background: var(--vo-green); border-radius: 6px; border: 2px solid var(--vo-bg); } .mi-main::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark); } /* Sidebar — always-visible scrollbar with VisionOne green theme. Without this Windows hides the thin track until hover, leaving users unsure whether the panel is scrollable. */ .mi-sidebar { overflow-y: scroll !important; scrollbar-width: thin; scrollbar-color: var(--vo-green, #649954) var(--vo-green-soft, #e7efe2); } .mi-sidebar::-webkit-scrollbar { width: 12px; } .mi-sidebar::-webkit-scrollbar-track { background: var(--vo-green-soft, #e7efe2); border-radius: 6px; margin: 4px 0; } .mi-sidebar::-webkit-scrollbar-thumb { background: var(--vo-green, #649954); border-radius: 6px; border: 2px solid var(--vo-green-soft, #e7efe2); min-height: 40px; } .mi-sidebar::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark, #4d7a40); } /* ─── Force scrollbar always visible (Windows hides empty ones by default) ─── */ .mi-main { overflow-y: scroll !important; /* Force a minimum scrollable region so the scrollbar is visible even on short content */ min-height: calc(100vh - 56px); } /* Add a fixed quick-jump scrollbar style for older browsers */ html { scrollbar-gutter: stable; } /* ─── In-app Help / Coach FAB stack — push the platform's old FABs out of the way ─── */ #mi-fab-stack { right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; } /* Don't let the platform's existing FAB stack overlap ours */ .wt-fab-stack-root, .wt-fab-host { display: none !important; } /* ─── AGGRESSIVE scrollbar styling (Michelle 2026-06-02) ─────────────── */ /* Apply to html + body + all major scrollable containers */ html, body { overflow-y: scroll !important; scrollbar-width: thick !important; scrollbar-color: var(--vo-green) #e7efe2; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 16px !important; background: var(--vo-green-soft) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: var(--vo-green) !important; border: 3px solid var(--vo-green-soft) !important; border-radius: 8px !important; min-height: 60px; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: var(--vo-green-soft) !important; } /* Make sure mi-main inherits scrolling */ .mi-main { overflow-y: scroll !important; scrollbar-width: thick !important; scrollbar-color: var(--vo-green) var(--vo-green-soft); min-height: calc(100vh - 56px); } .mi-main::-webkit-scrollbar { width: 14px !important; background: var(--vo-green-soft) !important; } .mi-main::-webkit-scrollbar-thumb { background: var(--vo-green) !important; border-radius: 7px !important; border: 2px solid var(--vo-green-soft) !important; } /* Coach + Help + Modal scrollable areas */ .mi-coach-panel .body, .mi-help-panel .body, .mi-modal { overflow-y: scroll !important; scrollbar-width: thick !important; scrollbar-color: var(--vo-green) #fff; } .mi-coach-panel .body::-webkit-scrollbar, .mi-help-panel .body::-webkit-scrollbar, .mi-modal::-webkit-scrollbar { width: 12px !important; background: #fff !important; } .mi-coach-panel .body::-webkit-scrollbar-thumb, .mi-help-panel .body::-webkit-scrollbar-thumb, .mi-modal::-webkit-scrollbar-thumb { background: var(--vo-green) !important; border-radius: 6px !important; border: 2px solid #fff !important; } /* ─── NUCLEAR scrollbar fix (Michelle 2026-06-02 round 2) ─────────────── * Windows 11 + Edge/Chrome use overlay scrollbars by default. * scrollbar-gutter: stable forces actual space for it. */ :root { scrollbar-gutter: stable !important; } html { overflow-y: scroll !important; -ms-overflow-style: scrollbar !important; /* Legacy Edge */ scrollbar-gutter: stable always !important; } body { overflow-y: scroll !important; -ms-overflow-style: scrollbar !important; scrollbar-gutter: stable always !important; } /* Hammer the webkit scrollbar — must be visible, must be green, must be wide */ html::-webkit-scrollbar, body::-webkit-scrollbar { width: 18px !important; height: 18px !important; background: #e7efe2 !important; display: block !important; -webkit-appearance: none !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: #649954 !important; border: 3px solid #e7efe2 !important; border-radius: 9px !important; min-height: 80px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #4d7a40 !important; } /* Force the main frame to have visible scrollbar too */ .mi-frame { min-height: 100vh !important; overflow: visible !important; } .mi-main { overflow-y: scroll !important; -ms-overflow-style: scrollbar !important; scrollbar-gutter: stable !important; } .mi-main::-webkit-scrollbar { width: 16px !important; display: block !important; background: #e7efe2 !important; } .mi-main::-webkit-scrollbar-thumb { background: #649954 !important; border: 2px solid #e7efe2 !important; border-radius: 8px !important; min-height: 60px !important; } /* ─── Coach textarea fix: box-sizing + breathing room ──────────────── */ .mi-coach-panel { padding: 0 !important; } .mi-coach-panel .footer { padding: 14px !important; background: #fff; } .mi-coach-input, .mi-chat-input, .mi-help-panel input, .mi-help-panel textarea, textarea.mi-coach-input { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; display: block !important; resize: vertical !important; } /* ─── Intake form: fix overlapping fields ──────────────────────────── */ #miIntakeBody .mi-field { margin-bottom: 18px !important; clear: both; } #miIntakeBody .mi-field input, #miIntakeBody .mi-field textarea, #miIntakeBody .mi-field select { box-sizing: border-box !important; width: 100% !important; display: block !important; margin-top: 4px; } #miIntakeBody .mi-grid-2, #miIntakeBody .mi-grid-3 { display: grid !important; gap: 20px !important; margin-bottom: 16px !important; } #miIntakeBody table { margin: 8px 0 16px !important; border-collapse: separate; border-spacing: 0; } /* Per-question label row should never overlap with input */ #miIntakeBody label { display: block !important; margin-bottom: 4px; line-height: 1.4; } /* ─── Modal forms (financial model, share, etc.) ───────────────────── */ .mi-modal .mi-field input, .mi-modal .mi-field textarea, .mi-modal .mi-field select { box-sizing: border-box !important; width: 100% !important; display: block !important; } .mi-modal .mi-grid-2, .mi-modal .mi-grid-3 { gap: 16px !important; } /* ─── Scrollable lists inside briefings/playbooks (sources, etc.) ───── */ .mi-sources-list { scrollbar-width: thick !important; scrollbar-color: #649954 #e7efe2 !important; } .mi-sources-list::-webkit-scrollbar { width: 14px !important; background: #e7efe2 !important; display: block !important; } .mi-sources-list::-webkit-scrollbar-thumb { background: #649954 !important; border: 2px solid #e7efe2 !important; border-radius: 7px !important; min-height: 50px !important; } .mi-sources-list::-webkit-scrollbar-thumb:hover { background: #4d7a40 !important; } /* Same treatment for any other in-content scrollable lists we want capped */ .mi-scrollable-list { max-height: 280px; overflow-y: scroll; border: 1px solid var(--vo-border); border-radius: 6px; padding: 10px 14px 10px 30px; background: #fff; } .mi-scrollable-list::-webkit-scrollbar { width: 14px; background: #e7efe2; } .mi-scrollable-list::-webkit-scrollbar-thumb { background: #649954; border: 2px solid #e7efe2; border-radius: 7px; min-height: 50px; } /* ─── Profile / client modal — force visible green scrollbar ────── */ .mi-modal { max-height: 85vh !important; overflow-y: scroll !important; scrollbar-width: thick !important; scrollbar-color: #649954 #e7efe2 !important; -ms-overflow-style: scrollbar !important; } .mi-modal::-webkit-scrollbar { width: 14px !important; background: #e7efe2 !important; display: block !important; } .mi-modal::-webkit-scrollbar-thumb { background: #649954 !important; border: 2px solid #e7efe2 !important; border-radius: 7px !important; min-height: 60px !important; } .mi-modal::-webkit-scrollbar-thumb:hover { background: #4d7a40 !important; } .mi-modal::-webkit-scrollbar-track { background: #e7efe2 !important; } /* Same for the .body inside the modal (which is the actual scrolling area) */ .mi-modal .body { max-height: 70vh !important; overflow-y: scroll !important; scrollbar-width: thick !important; scrollbar-color: #649954 #e7efe2 !important; } .mi-modal .body::-webkit-scrollbar { width: 14px !important; background: #e7efe2 !important; display: block !important; } .mi-modal .body::-webkit-scrollbar-thumb { background: #649954 !important; border: 2px solid #e7efe2 !important; border-radius: 7px !important; min-height: 60px !important; } /* ─── Tier picker — feature-driven, no specific pricing ──────────── */ .mi-tier-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; } .mi-tier-card { background: #fff; border: 2px solid var(--vo-border, #e2e8f0); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; transition: all 0.15s; } .mi-tier-card.active { border-color: var(--vo-green, #649954); background: var(--vo-green-soft, #e7efe2); } .mi-tier-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .mi-tier-name { font-size: 18px; font-weight: 700; color: var(--vo-ink, #1f2937); } .mi-tier-active-badge { background: var(--vo-green, #649954); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; letter-spacing: 0.05em; } .mi-tier-tagline { font-size: 13px; color: var(--vo-green-dark, #4d7a40); font-style: italic; margin-bottom: 12px; line-height: 1.4; } .mi-tier-features { list-style: none; padding: 0; margin: 0 0 14px; } .mi-tier-feature { font-size: 12px; color: var(--vo-ink, #1f2937); padding: 3px 0; line-height: 1.4; } .mi-tier-feature.disabled { color: #9ca3af; text-decoration: line-through; } .mi-tier-pricing-guidance { background: var(--vo-yellow-soft, #fef8d8); border-left: 3px solid var(--vo-yellow, #EBD417); padding: 8px 10px; border-radius: 4px; font-size: 12px; color: #4a3f00; line-height: 1.4; margin-bottom: 10px; } .mi-tier-recommended { background: var(--vo-blue-soft, #e0f1f8); border-left: 3px solid var(--vo-blue, #0081B7); padding: 8px 10px; border-radius: 4px; font-size: 12px; color: var(--vo-ink, #1f2937); line-height: 1.4; margin-bottom: 12px; } .mi-tier-pick { margin-top: auto; width: 100%; } /* ─── Semantic flag colors — red/yellow/green/neutral ──────────────────── risk = high-risk threat or competitive pressure moderate = watch list / medium severity opportunity = positive (growth, NPD, AI, efficiency) info = informational / neutral context */ .mi-flag-risk { background: #fef2f2; border-left: 4px solid #b91c1c; padding: 10px 14px; margin: 8px 0; border-radius: 4px; } .mi-flag-moderate { background: #fefce8; border-left: 4px solid #ca8a04; padding: 10px 14px; margin: 8px 0; border-radius: 4px; } .mi-flag-opportunity { background: #f0fdf4; border-left: 4px solid #16a34a; padding: 10px 14px; margin: 8px 0; border-radius: 4px; } .mi-flag-info { background: #ffffff; border-left: 4px solid #cbd5e1; padding: 10px 14px; margin: 8px 0; border-radius: 4px; } .mi-briefing-item { padding: 10px 14px; margin: 8px 0; border-radius: 4px; } /* Color legend — sits above briefing/opportunity lists */ .mi-flag-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; padding: 8px 12px; background: #f9fafb; border-radius: 6px; border: 1px solid #e2e8f0; } .mi-flag-chip { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; letter-spacing: 0.03em; } .mi-flag-chip.mi-flag-risk { background: #fef2f2; color: #b91c1c; border-left: 3px solid #b91c1c; } .mi-flag-chip.mi-flag-moderate { background: #fefce8; color: #854d0e; border-left: 3px solid #ca8a04; } .mi-flag-chip.mi-flag-opportunity { background: #f0fdf4; color: #166534; border-left: 3px solid #16a34a; } .mi-flag-chip.mi-flag-info { background: #f9fafb; color: #475569; border-left: 3px solid #94a3b8; } /* Inline badge on insight cards */ .mi-flag-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; letter-spacing: 0.04em; margin-right: 6px; } .mi-flag-badge-risk { background: #b91c1c; color: #fff; } .mi-flag-badge-moderate { background: #ca8a04; color: #fff; } .mi-flag-badge-opportunity { background: #16a34a; color: #fff; } .mi-flag-badge-info { background: #94a3b8; color: #fff; } /* "Why this matters for the company" callout on insight cards */ .mi-why-relevant { margin-top: 10px; padding: 8px 12px; background: var(--vo-blue-soft, #e0f1f8); border-left: 3px solid var(--vo-blue, #0081B7); border-radius: 4px; font-size: 13px; line-height: 1.45; color: var(--vo-ink, #1f2937); } .mi-why-relevant strong { color: var(--vo-blue-dark, #00608a); } /* Inline source links inside briefing items + opportunity cards */ .mi-inline-sources { margin-top: 8px; font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; } .mi-inline-sources a { color: var(--vo-blue, #0081B7); text-decoration: none; padding: 2px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--vo-border, #e2e8f0); } .mi-inline-sources a:hover { background: var(--vo-blue-soft, #e0f1f8); text-decoration: underline; } .mi-opp-card { padding: 14px; margin: 8px 0; border-radius: 6px; } /* ─── Tier picker — included-stack value banner ────────────────────── */ .mi-stack-value-banner { grid-column: 1 / -1; background: linear-gradient(135deg, var(--vo-green-soft, #e7efe2) 0%, var(--vo-blue-soft, #e0f1f8) 100%); border-left: 4px solid var(--vo-green, #649954); border-radius: 8px; padding: 14px 18px; margin-bottom: 8px; font-size: 13px; color: var(--vo-ink, #1f2937); } .mi-stack-value-banner strong { display: block; font-size: 14px; color: var(--vo-green-dark, #4d7a40); margin-bottom: 4px; } /* ─── Premium research add-ons section ─────────────────────────────── */ .mi-addons-section { grid-column: 1 / -1; margin-top: 24px; padding-top: 20px; border-top: 2px dashed var(--vo-border, #e2e8f0); } .mi-addons-title { margin: 0 0 6px; font-size: 16px; color: var(--vo-ink, #1f2937); } .mi-addons-subtitle { margin: 0 0 16px; font-size: 13px; color: #4b5563; line-height: 1.5; } .mi-addons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .mi-addon-card { background: #fff; border: 1px solid var(--vo-border, #e2e8f0); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .mi-addon-name { font-weight: 700; font-size: 14px; color: var(--vo-ink, #1f2937); display: flex; align-items: center; gap: 8px; } .mi-addon-cat { background: var(--vo-blue-soft, #e0f1f8); color: var(--vo-blue, #0081B7); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.03em; } .mi-addon-unlocks { font-size: 12px; color: var(--vo-ink, #1f2937); line-height: 1.4; } .mi-addon-row { font-size: 11px; color: #4b5563; line-height: 1.4; } .mi-addon-label { font-weight: 600; color: #374151; } .mi-addon-contact { margin-top: auto; padding: 6px 10px; font-size: 12px; font-weight: 600; background: var(--vo-green-soft, #e7efe2); color: var(--vo-green-dark, #4d7a40); border: 1px solid var(--vo-green, #649954); border-radius: 4px; cursor: pointer; } .mi-addon-contact:hover { background: var(--vo-green, #649954); color: #fff; } /* Intake list — archive button + archived-row styling */ .mi-intake-archive-btn { padding: 6px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--vo-border, #e2e8f0); border-radius: 4px; background: #fff; color: var(--vo-ink-muted, #64748b); cursor: pointer; flex: 0 0 auto; white-space: nowrap; } .mi-intake-archive-btn:hover:not([disabled]) { background: var(--vo-red-soft, #fbe9e7); border-color: var(--vo-red, #C73127); color: var(--vo-red, #C73127); } .mi-intake-archive-btn[disabled] { opacity: 0.5; cursor: not-allowed; background: #f3f4f6; } .mi-briefing-row.mi-archived { background: #f9fafb; opacity: 0.7; } /* ─── Out-of-scope but strategic insight marker ────────────────────── */ .mi-out-of-scope { margin-top: 10px; padding: 8px 12px; background: var(--vo-purple-soft, #efe9f5); border-left: 3px solid var(--vo-purple, #74519A); border-radius: 4px; font-size: 12px; line-height: 1.45; color: var(--vo-ink, #1f2937); } .mi-out-of-scope strong { color: var(--vo-purple, #74519A); } /* ─── Date stamps on briefing items + source chips ─────────────────── */ .mi-item-date { font-size: 11px; color: var(--vo-ink-muted, #64748b); margin-top: 6px; } .mi-item-date strong { color: var(--vo-ink, #1f2937); } .mi-src-date { font-size: 10px; color: var(--vo-ink-muted, #64748b); margin-left: 4px; font-weight: 500; } /* ─── Explanatory banner (Assess/Align/Apply method strip) ─────────── */ .mi-method-banner { display: flex; gap: 12px; align-items: stretch; margin: 0 0 18px; /* Red → Yellow → Green: Assess (intake/explore) → Align (decide) → Apply (act) */ padding: 12px 14px; background: linear-gradient(135deg, var(--vo-red-soft, #fbe9e7) 0%, var(--vo-yellow-soft, #fef8d8) 50%, var(--vo-green-soft, #e7efe2) 100%); border-radius: 8px; border: 1px solid var(--vo-border, #e2e8f0); font-size: 12px; line-height: 1.5; } .mi-method-banner .mi-method-cell { flex: 1; padding: 6px 10px; background: #ffffffcc; border-radius: 6px; border-top: 4px solid transparent; } .mi-method-banner .mi-method-cell strong { display: block; font-size: 13px; margin-bottom: 4px; } .mi-method-banner .mi-method-cell.assess { border-top-color: var(--vo-red, #C73127); } .mi-method-banner .mi-method-cell.align { border-top-color: var(--vo-yellow, #EBD417); } .mi-method-banner .mi-method-cell.apply { border-top-color: var(--vo-green, #649954); } .mi-method-banner .mi-method-cell.assess strong { color: var(--vo-red, #C73127); } .mi-method-banner .mi-method-cell.align strong { color: #8a6d04; /* readable yellow */ } .mi-method-banner .mi-method-cell.apply strong { color: var(--vo-green-dark, #4d7a40); } .mi-method-banner .mi-method-cell.you-are-here { outline: 2px solid var(--vo-red, #C73127); outline-offset: 2px; } .mi-method-banner .mi-method-cell.you-are-here-blue { outline: 2px solid var(--vo-yellow, #EBD417); outline-offset: 2px; } .mi-method-banner .mi-method-cell.you-are-here-purple { outline: 2px solid var(--vo-green, #649954); outline-offset: 2px; } /* ─── Introduction + Resources content styling (matches Strategic Playbook / Course Design) ─── */ .mi-intro-list { list-style: disc; padding-left: 22px; margin: 8px 0; font-size: 14px; line-height: 1.55; color: var(--vo-ink); } .mi-intro-list li { margin: 4px 0; } .mi-intro-list li strong { color: var(--vo-ink); } #miIntroView .mi-card, #miResourcesView .mi-card { max-width: 900px; line-height: 1.6; } #miIntroView .mi-card h3, #miResourcesView .mi-card h3 { font-family: var(--vo-font-heading); font-size: 20px; color: var(--vo-green-dark, #4d7a40); letter-spacing: -0.01em; text-transform: none; margin: 0 0 12px; } #miIntroView details, #miResourcesView details { border: 1px solid var(--vo-border); border-radius: 6px; padding: 10px 12px; background: #fafcf9; } #miIntroView details[open], #miResourcesView details[open] { background: var(--vo-green-tint, #e7efe2); } /* ═══════════════════════════════════════════════════════════════════ VisionOne UI Alignment — Strategic Playbook Hub parity ─────────────────────────────────────────────────────────────────── Overrides Market Intel's legacy indigo (#4338ca, #6366f1) palette with the shared VisionOne green/blue system. Loaded last so cascade priority takes effect without hunting through every rule. */ /* ── Primary buttons: indigo → VisionOne green (matches .sp-btn.primary) ── */ .mi-btn-primary, .mi-tier-card.active .mi-tier-pick { background: var(--vo-green) !important; color: #fff !important; border-color: var(--vo-green) !important; font-weight: 700; } .mi-btn-primary:hover, .mi-tier-card.active .mi-tier-pick:hover { background: var(--vo-green-dark) !important; border-color: var(--vo-green-dark) !important; } /* Secondary buttons: adopt SP's blue-on-hover treatment */ .mi-btn:not(.mi-btn-primary):not(.mi-btn-danger):not(.mi-btn-warning):hover { border-color: var(--vo-blue); color: var(--vo-blue); } /* ── Tabs: indigo underline → VisionOne green ── */ .mi-tab.active { color: var(--vo-green-dark) !important; border-bottom-color: var(--vo-green) !important; } .mi-tab:hover { color: var(--vo-ink); } /* ── Segment cards: hover + active states use VisionOne green ── */ .mi-segment-card { border: 1px solid var(--vo-border); } .mi-segment-card:hover { border-color: var(--vo-green) !important; } .mi-segment-card.active { border-color: var(--vo-green) !important; background: var(--vo-green-tint) !important; } .mi-segment-name { color: var(--vo-ink); } /* ── Depth / info pills: indigo → VisionOne blue ── */ .mi-pill.depth { background: var(--vo-blue-tint) !important; color: var(--vo-blue-dark) !important; } /* ── Insight cards: SP-style border treatment ── */ .mi-insight-card { border-left-color: var(--vo-blue); } .mi-insight-card .mi-sources a { color: var(--vo-blue); } /* ── Readiness banner: adopt SP's info-banner treatment ── */ .mi-readiness-panel { background: linear-gradient(135deg, var(--vo-green-tint) 0%, var(--vo-blue-tint) 100%); border-color: var(--vo-green); } .mi-readiness-panel h4 { font-family: var(--vo-font-heading); color: var(--vo-green-dark); } /* ── Tier cards: adopt SP's card language ── */ .mi-tier-card { border: 2px solid var(--vo-border); border-radius: 12px; } .mi-tier-card:hover { border-color: var(--vo-blue); } .mi-tier-card.active { border-color: var(--vo-green) !important; background: var(--vo-green-tint) !important; } .mi-tier-card .mi-tier-cost { font-family: var(--vo-font-heading); color: var(--vo-green); } /* ── Hover accents on rows: SP uses green border on hover ── */ .mi-opp-card:hover, .mi-alert-card:hover, .mi-briefing-row:hover { border-color: var(--vo-green) !important; } /* ── Spinner: indigo → green ── */ .mi-spinner { border-top-color: var(--vo-green) !important; } /* ── Card headings: adopt SP's uppercase small-caps treatment ── */ .mi-card h3 { font-family: var(--vo-font-body); font-size: 13px; color: var(--vo-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin: 0 0 12px; } /* ── Card container: SP uses 12px radius + surface color ── */ .mi-card { background: var(--vo-surface); border: 1px solid var(--vo-border); border-radius: 12px; padding: 18px; } /* ── Inputs: SP-style focus outline in blue ── */ .mi-field input:focus, .mi-field select:focus, .mi-field textarea:focus { outline: 2px solid var(--vo-blue); border-color: var(--vo-blue); } .mi-field input, .mi-field select, .mi-field textarea { border: 1px solid var(--vo-border); border-radius: 8px; padding: 10px 12px; font-family: var(--vo-font-body); font-size: 14px; color: var(--vo-ink); background: #fff; } .mi-field label { font-family: var(--vo-font-body); font-weight: 700; font-size: 13.5px; color: var(--vo-ink); margin-bottom: 6px; } /* ── Sidebar section headers: SP-style uppercase blue small-caps ── */ .mi-sidebar-header h2 { font-family: var(--vo-font-body); font-size: 11px; color: var(--vo-blue); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } /* ── Sidebar buttons: SP treatment (transparent → green tint on hover) ── */ .mi-sidebar .mi-btn:not(.mi-btn-primary) { background: transparent; border: 1px solid transparent; text-align: left; color: var(--vo-ink); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: var(--vo-font-body); } .mi-sidebar .mi-btn:not(.mi-btn-primary):hover { background: var(--vo-green-tint); border-color: transparent; color: var(--vo-ink); } /* ── Section labels within cards: SP uses uppercase blue small-caps ── */ .mi-section-label { font-family: var(--vo-font-body); font-size: 11px; color: var(--vo-blue); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; margin: 12px 0 4px; } /* ── Header bar: SP-style Sanchez h1 ── */ .mi-header-bar h1 { font-family: var(--vo-font-heading); font-size: 28px; color: var(--vo-ink); letter-spacing: -0.01em; margin: 0 0 4px; } .mi-header-bar .mi-subtitle { color: var(--vo-ink-soft); font-size: 14px; } /* ═══════════════════════════════════════════════════════════════════ App brand block — mirrors Strategic Playbook Hub's .sp-brand. Sits at the very top of the sidebar so someone flipping between Market Intel Hub and Strategic Playbook Hub sees the same visual family. */ .mi-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--vo-border); } .mi-brand-title { font-family: var(--vo-font-heading); font-size: 17px; line-height: 1.1; color: var(--vo-ink); font-weight: 400; } .mi-brand-sub { font-size: 12px; color: var(--vo-ink-soft); margin-top: 3px; line-height: 1.3; }