Spaces:
Sleeping
Sleeping
| @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap'); | |
| @import 'tailwindcss'; | |
| :root { font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; color: #0d1831; background: #f6f8f8; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } | |
| * { box-sizing: border-box; } | |
| body { margin: 0; min-width: 1120px; } | |
| button, input { font: inherit; } | |
| button { cursor: pointer; } | |
| .app-shell { min-height: 100vh; background: #f6f8f8; } | |
| .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 248px; flex-direction: column; background: linear-gradient(180deg, #070a0b 0%, #0b0e0f 78%, #345f18 100%); color: white; } | |
| .brand { display: flex; align-items: center; gap: 10px; padding: 26px 25px 9px; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.04em; } | |
| .brand em { margin-left: auto; border: 1px solid rgba(183,250,24,.35); border-radius: 5px; padding: 3px 5px; color: #b7fa20; font-size: 9px; font-style: normal; letter-spacing: .08em; } | |
| .brand-mark { display: flex; height: 29px; align-items: center; gap: 3px; } | |
| .brand-mark i { display: block; width: 7px; border-radius: 99px; background: #b7fb18; transform: skewY(-8deg); } | |
| .brand-mark i:nth-child(1) { height: 20px; }.brand-mark i:nth-child(2) { height: 29px; }.brand-mark i:nth-child(3) { height: 24px; } | |
| .mobile-menu { display: none; } | |
| .primary-nav { margin-top: 19px; padding: 0 15px; overflow: auto; } | |
| .nav-group-label { margin: 15px 12px 6px; color: rgba(255,255,255,.37); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } | |
| .nav-item { display: flex; width: 100%; height: 39px; align-items: center; gap: 13px; border: 0; border-radius: 9px; padding: 0 12px; background: transparent; color: rgba(255,255,255,.78); font-size: 13px; text-align: left; transition: background .18s ease, color .18s ease, transform .18s ease; } | |
| .nav-item:hover { background: rgba(255,255,255,.09); color: white; transform: translateX(2px); }.nav-item-active { background: #b4fa18; color: #101a08; font-weight: 700; box-shadow: 0 8px 18px rgba(181,250,24,.14); }.nav-new { margin-left: auto; color: #437000; font-size: 8px; font-weight: 800; } | |
| .sidebar-footer { margin-top: auto; padding: 15px; }.status-card { width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px; background: rgba(8,13,13,.52); color: white; text-align: left; }.status-card-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }.status-card-head svg:last-child { margin-left: auto; }.status-card > span:not(.status-card-head) { display: block; margin-top: 9px; color: rgba(255,255,255,.75); font-size: 10px; }.status-card small { display: block; margin-top: 3px; color: rgba(255,255,255,.55); font-size: 9px; }.status-check { display: grid; height: 21px; width: 21px; place-items: center; border-radius: 50%; background: #b7fa20; color: #183100; }.sidebar-meta { display: flex; justify-content: space-between; padding: 17px 4px 0; color: rgba(255,255,255,.38); font-size: 9px; } | |
| .main-content { min-height: 100vh; margin-left: 248px; padding: 22px 30px 40px; } | |
| .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.context-pill { display: flex; max-width: calc(100% - 245px); align-items: center; gap: 10px; overflow: hidden; border: 1px solid #e1e7e8; border-radius: 23px; padding: 10px 14px; background: rgba(255,255,255,.78); box-shadow: 0 1px 2px rgba(20,30,45,.02); color: #253249; font-size: 11px; white-space: nowrap; }.context-pill span { overflow: hidden; text-overflow: ellipsis; }.context-pill b { color: #a0aab5; }.context-date { display: flex; flex-shrink: 0; align-items: center; gap: 5px; }.topbar-actions { display: flex; flex-shrink: 0; align-items: center; gap: 11px; }.icon-button { position: relative; display: grid; place-items: center; border: 0; background: transparent; color: #233149; }.has-dot::after { position: absolute; top: 1px; right: 0; height: 6px; width: 6px; border-radius: 50%; background: #b7fa20; content: ''; }.avatar { height: 33px; width: 33px; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(135deg,#ead2b9,#62442e 78%); color: white; font-size: 10px; font-weight: 800; }.profile-name { display: flex; flex-direction: column; }.profile-name strong { font-size: 11px; }.profile-name small { margin-top: 2px; color: #788393; font-size: 10px; } | |
| .workspace-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 28px 0 21px; }.eyebrow { color: #7b8792; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.workspace-head h1 { margin: 5px 0 0; color: #0d1831; font-size: 29px; letter-spacing: -.055em; }.workspace-head p { margin: 5px 0 0; color: #788393; font-size: 12px; }.workspace-actions { display: flex; gap: 9px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 7px; padding: 9px 13px; font-size: 11px; font-weight: 700; }.button-primary { background: #b4fa18; color: #142000; }.button-primary:hover { background: #c3ff43; }.button-secondary { border-color: #dce3e5; background: white; color: #213149; }.button-secondary:hover { background: #f8fbf1; }.dark-button { background: #080c0d; color: white; }.button-row { display: flex; gap: 9px; } | |
| .metric-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 11px; }.metric-card, .investigation-hero { min-height: 177px; grid-column: span 2; border-radius: 10px; padding: 15px; box-shadow: 0 2px 4px rgba(10,20,25,.05); }.metric-card { display: flex; flex-direction: column; color: white; background: radial-gradient(circle at 95% -15%, rgba(173,247,29,.95), transparent 43%), linear-gradient(135deg, #071011 0%, #111a18 100%); }.metric-card-light { border: 1px solid #e0e6e7; color: #0d1831; background: white; }.metric-head { display: flex; align-items: start; justify-content: space-between; }.metric-arrow { color: #b4fa18; }.metric-card-light .metric-arrow { color: #0d1831; }.metric-label { margin-top: 15px; font-size: 12px; }.metric-card strong { margin-top: 4px; font-size: 32px; line-height: 1; letter-spacing: -.07em; }.metric-card small { margin-top: 9px; color: rgba(255,255,255,.72); font-size: 10px; }.metric-card-light small { color: #6f7b8b; }.metric-card-light small + small { margin-top: 2px; color: #97a1ab; }.icon-bubble { display: inline-grid; height: 40px; width: 40px; flex-shrink: 0; place-items: center; border: 1px solid rgba(19,35,51,.17); border-radius: 50%; color: #0d1831; }.icon-bubble-dark { border-color: rgba(255,255,255,.38); background: #0a0d0e; color: white; }.icon-bubble-lime { border: 0; background: #b4fa18; color: #0a1807; }.stack-icon { position: relative; display: block; height: 24px; width: 27px; }.stack-icon span { position: absolute; left: 3px; height: 10px; width: 21px; transform: skewY(-28deg); border: 2px solid #6f8e22; border-radius: 2px; }.stack-icon span:nth-child(1) { top: 1px; }.stack-icon span:nth-child(2) { top: 7px; left: 5px; }.stack-icon span:nth-child(3) { top: 13px; left: 7px; } | |
| .investigation-hero { display: flex; grid-column: span 4; flex-direction: column; justify-content: space-between; background: #b4fa18; color: #111d0a; }.hero-head { display: flex; align-items: start; gap: 11px; }.hero-head span { font-size: 11px; }.hero-head h2 { max-width: 200px; margin: 4px 0 0; font-size: 22px; line-height: 1.1; letter-spacing: -.05em; }.hero-foot { display: flex; align-items: center; justify-content: space-between; }.hero-foot small { color: #4e6d11; font-size: 10px; }.dark-cta { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 20px; padding: 9px 13px; background: #05090b; color: white; font-size: 10px; font-weight: 700; } | |
| .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 12px; }.panel { min-width: 0; border: 1px solid #e1e7e9; border-radius: 10px; padding: 16px; background: white; box-shadow: 0 2px 4px rgba(16,31,47,.025); }.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.panel-title-with-icon { display: flex; align-items: center; gap: 11px; }.panel-title-with-icon > div { display: flex; flex-direction: column; }.panel-title-with-icon span { color: #687486; font-size: 11px; }.panel-title-with-icon h2 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.05em; }.section-title { margin: 0; font-size: 17px; letter-spacing: -.05em; }.view-all, .filter-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe5e7; border-radius: 18px; padding: 7px 11px; background: white; color: #26344a; font-size: 10px; font-weight: 700; }.view-all:hover, .filter-chip:hover { background: #f8fbf1; }.investigation-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }.big-stat { border-right: 1px solid #e4e8eb; }.big-stat span, .big-stat small { display: block; color: #687486; font-size: 11px; }.big-stat strong { display: block; margin: 3px 0; font-size: 37px; letter-spacing: -.07em; }.drivers { display: flex; flex-direction: column; gap: 11px; justify-content: center; }.driver { display: flex; align-items: center; gap: 9px; }.driver .icon-bubble { height: 33px; width: 33px; }.driver span { display: flex; flex-direction: column; }.driver small { color: #7e8995; font-size: 9px; }.driver b { margin-top: 2px; font-size: 10px; font-weight: 600; }.impact-card { margin-top: 18px; border: 1px solid #e6eaed; border-radius: 8px; padding: 11px; }.impact-card > span { font-size: 10px; }.impact-card > span small { color: #8b949f; }.impact-line { position: relative; display: flex; justify-content: space-between; margin: 13px 3px 7px; }.impact-line::before { position: absolute; top: 4px; right: 3px; left: 3px; height: 1px; background: #aeb8c3; content: ''; }.impact-line i { z-index: 1; height: 9px; width: 9px; border: 2px solid white; border-radius: 50%; background: #0c1932; box-shadow: 0 0 0 1px #0c1932; }.impact-line .impact-positive { background: #b4fa18; }.impact-labels { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; text-align: center; }.impact-labels span { display: flex; flex-direction: column; }.impact-labels b { font-size: 9px; }.impact-labels small { margin-top: 3px; color: #8a949f; font-size: 8px; }.investigation-panel .button-row { margin-top: 15px; }.run-head, .run-row { display: grid; grid-template-columns: 1.3fr 1.45fr .95fr 1fr 1fr; gap: 7px; align-items: center; }.run-head { margin-top: 16px; padding: 0 4px 7px; color: #7b8794; font-size: 9px; }.run-row { width: 100%; min-height: 46px; border: 0; border-top: 1px solid #eef1f2; padding: 0 4px; background: transparent; color: #4a5668; font-size: 9px; text-align: left; }.run-row:hover { background: #f8fbf1; }.run-name { display: flex; align-items: center; gap: 7px; color: #1d2b42; font-weight: 700; }.status-badge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 9px; font-weight: 600; }.status-dot { display: inline-block; height: 7px; width: 7px; border-radius: 50%; background: #9ba4ad; }.status-validated, .status-completed { color: #4e751a; }.status-validated .status-dot, .status-completed .status-dot { background: #72b820; }.status-needs-review, .status-stale, .status-inherited { color: #9c7411; }.status-needs-review .status-dot, .status-stale .status-dot, .status-inherited .status-dot { background: #e5ae32; }.status-draft, .status-overridden { color: #536de0; }.status-draft .status-dot, .status-overridden .status-dot { background: #536de0; }.status-running .status-dot { background: #4aa2cb; } | |
| .investigation-row { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; border-top: 1px solid #edf0f2; padding: 11px 1px; background: transparent; color: #27344a; text-align: left; }.investigation-row:hover { background: #f8fbf1; }.investigation-row > span { min-width: 0; flex: 1; }.investigation-row b { display: block; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.investigation-row span small { display: block; overflow: hidden; margin-top: 3px; color: #7c8796; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.investigation-row > small { color: #7c8796; font-size: 9px; }.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }.quick-action { min-height: 147px; border: 1px solid #dfe6e9; border-radius: 8px; padding: 10px; background: white; color: #1a2942; text-align: left; transition: transform .18s ease, box-shadow .18s ease; }.quick-action:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(20,34,55,.08); }.quick-action-lime { border-color: #b4fa18; background: #b4fa18; }.quick-action-top { display: flex; align-items: start; justify-content: space-between; }.quick-action b { display: block; margin-top: 14px; font-size: 11px; }.quick-action > small { display: block; margin-top: 4px; color: #6f7a87; font-size: 9px; line-height: 1.35; }.quick-action-lime > small { color: #38500b; } | |
| .workspace-stack { display: flex; flex-direction: column; gap: 12px; }.filter-bar { display: flex; align-items: center; gap: 8px; padding: 10px; }.search-field { display: flex; flex: 1; align-items: center; gap: 8px; border: 1px solid #dfe6e8; border-radius: 7px; padding: 8px 10px; color: #778392; }.search-field input { width: 100%; border: 0; outline: 0; color: #24334a; font-size: 11px; }.filter-count { margin-left: auto; color: #7b8793; font-size: 10px; }.model-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }.summary-tile { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 0 11px; border: 1px solid #e1e7e9; border-radius: 10px; padding: 12px; background: white; }.summary-tile > span:not(.icon-bubble) { color: #778392; font-size: 10px; }.summary-tile strong { grid-column: 2; margin-top: -4px; font-size: 23px; letter-spacing: -.06em; }.summary-dark { color: white; border-color: #13201d; background: linear-gradient(135deg,#071011,#111a18); }.summary-dark > span:not(.icon-bubble) { color: rgba(255,255,255,.7); }.table-panel { padding-bottom: 6px; }.muted { margin: 4px 0 0; color: #7b8793; font-size: 10px; }.model-table { margin-top: 16px; overflow: hidden; }.model-table-head, .model-row { display: grid; grid-template-columns: 2.2fr .65fr .65fr .7fr .85fr 1.1fr 1fr 18px; gap: 10px; align-items: center; }.model-table-head { padding: 0 10px 8px; color: #7e8996; font-size: 9px; }.model-row { width: 100%; min-height: 60px; border: 0; border-top: 1px solid #edf0f2; padding: 0 10px; background: transparent; color: #4d596b; font-size: 10px; text-align: left; }.model-row:hover { background: #f8fbf1; }.model-name { display: flex; align-items: center; gap: 9px; }.model-name > span:last-child { display: flex; flex-direction: column; }.model-name b { color: #17263e; font-size: 11px; }.model-name small { margin-top: 3px; color: #89939f; font-size: 9px; }.model-icon { display: grid; height: 31px; width: 31px; place-items: center; border-radius: 7px; background: #eaf6cf; color: #5f861c; }.model-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }.model-context-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 18px 0; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; padding: 12px 0; }.model-context-grid span { display: flex; flex-direction: column; gap: 4px; }.model-context-grid small { color: #89939f; font-size: 9px; }.model-context-grid b { font-size: 11px; }.tree-heading { display: flex; align-items: center; justify-content: space-between; color: #738090; font-size: 10px; }.tree-heading button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #58761b; font-size: 10px; font-weight: 700; }.model-tree { margin-top: 9px; border: 1px solid #edf0f2; border-radius: 7px; padding: 5px; }.tree-item { display: flex; min-height: 33px; align-items: center; justify-content: space-between; border-radius: 5px; padding: 0 7px; color: #566274; font-size: 10px; }.tree-item > span { display: flex; align-items: center; gap: 8px; }.tree-item b { font-weight: 600; }.tree-indent { padding-left: 26px; }.tree-active { background: #f1fbdc; color: #24370d; }.mentor-hint { display: flex; flex-direction: column; border: 1px solid #dbe8b8; border-radius: 10px; padding: 17px; background: linear-gradient(155deg,#f5ffdc,#fff); }.mentor-hint-head { display: flex; align-items: center; gap: 10px; }.mentor-hint-head div { display: flex; flex-direction: column; }.mentor-hint-head b { font-size: 12px; }.mentor-hint-head small { margin-top: 3px; color: #7b8793; font-size: 9px; }.mentor-hint p { margin: 20px 0; color: #44514a; font-size: 12px; line-height: 1.5; }.mentor-fact { display: flex; gap: 8px; border: 1px solid #e2ecc9; border-radius: 7px; padding: 10px; color: #5d801a; }.mentor-fact span { display: flex; flex-direction: column; }.mentor-fact b { font-size: 10px; }.mentor-fact small { margin-top: 3px; color: #7b8793; font-size: 9px; }.mentor-hint .button { align-self: flex-start; margin-top: 17px; }.empty-workspace { display: flex; min-height: 440px; align-items: center; justify-content: center; text-align: center; flex-direction: column; }.empty-icon { margin-bottom: 12px; }.empty-workspace h2 { margin: 7px 0 0; font-size: 25px; letter-spacing: -.05em; }.empty-workspace p { max-width: 430px; margin: 8px 0 18px; color: #7a8794; font-size: 12px; line-height: 1.5; }.empty-actions { display: flex; gap: 8px; }.empty-progress { display: flex; gap: 14px; margin-top: 34px; color: #6b7785; font-size: 10px; }.empty-progress span { display: inline-flex; align-items: center; gap: 5px; }.empty-progress svg { color: #6f9d21; }.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 9px; border: 1px solid #dce4c5; border-radius: 9px; padding: 11px 13px; background: #f4ffd7; box-shadow: 0 12px 26px rgba(16,25,28,.14); color: #26320d; font-size: 11px; }.toast button { display: grid; place-items: center; margin-left: 5px; border: 0; background: transparent; color: inherit; } | |
| @media (max-width: 1380px) { .sidebar { width: 220px; }.main-content { margin-left: 220px; padding-inline: 22px; }.nav-item { font-size: 12px; }.metric-card, .investigation-hero { min-height: 164px; padding: 12px; }.metric-card strong { font-size: 27px; }.model-table-head, .model-row { grid-template-columns: 2fr .55fr .55fr .6fr .75fr 1fr .9fr 18px; } } | |
| @media (max-width: 1160px) { .profile-name { display: none; }.quick-grid { grid-template-columns: repeat(2,1fr); }.quick-action { min-height: 122px; }.dashboard-grid, .model-detail-grid { grid-template-columns: 1fr; }.metric-grid { grid-template-columns: repeat(6,1fr); }.metric-card { grid-column: span 2; }.investigation-hero { grid-column: span 6; }.model-summary-grid { grid-template-columns: repeat(2,1fr); } } | |
| /* Authoring workspaces */ | |
| .workspace-callout { display: flex; align-items: center; gap: 11px; border: 1px solid #dce9ba; border-radius: 9px; padding: 12px 14px; background: #f7ffea; }.workspace-callout > span:not(.icon-bubble) { display: flex; flex: 1; flex-direction: column; }.workspace-callout b { color: #2d4113; font-size: 11px; }.workspace-callout small { margin-top: 3px; color: #74805f; font-size: 10px; }.workspace-callout button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #5d7e1d; font-size: 10px; font-weight: 700; }.input-table-head, .input-row { display: grid; grid-template-columns: 2fr .8fr 1fr 1fr 1fr 18px; gap: 10px; align-items: center; }.input-table { margin-top: 15px; }.input-table-head { padding: 0 10px 8px; color: #7e8996; font-size: 9px; }.input-row { width: 100%; min-height: 61px; border: 0; border-top: 1px solid #edf0f2; padding: 0 10px; background: transparent; color: #4d596b; font-size: 10px; text-align: left; }.input-row:hover { background: #f8fbf1; }.scenario-layout, .formula-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }.scenario-row, .formula-row { display: grid; width: 100%; grid-template-columns: 34px 1fr .9fr 1fr 16px; gap: 10px; align-items: center; min-height: 62px; border: 0; border-top: 1px solid #edf0f2; padding: 0 3px; background: transparent; color: #4d596b; text-align: left; }.scenario-row:hover, .formula-row:hover, .formula-selected { background: #f8fbf1; }.scenario-row > span:nth-child(2), .formula-row > span:nth-child(2) { display: flex; flex-direction: column; }.scenario-row b, .formula-row b { color: #1b2a41; font-size: 11px; }.scenario-row small, .formula-row small { margin-top: 3px; color: #89939f; font-size: 9px; }.scenario-icon, .formula-icon, .projection-icon { display: grid; height: 30px; width: 30px; place-items: center; border-radius: 7px; background: #eaf6cf; color: #5f861c; }.scenario-detail { display: flex; flex-direction: column; }.scenario-detail h2 { margin-top: 6px; }.scenario-chart { position: relative; display: flex; height: 108px; align-items: end; gap: 17px; margin: 18px 0; border-bottom: 1px solid #dae2dc; background: linear-gradient(180deg, transparent 68%, #f3f9eb 68%); padding: 0 18px; }.scenario-chart::before { position: absolute; right: 0; bottom: 21px; left: 0; height: 1px; background: #b7cf88; content: ''; transform: rotate(-8deg); }.scenario-chart i { z-index: 1; display: block; height: 32px; width: 5px; border-radius: 6px 6px 0 0; background: #b5ed4f; }.scenario-chart i:nth-child(2) { height: 44px; }.scenario-chart i:nth-child(3) { height: 53px; }.scenario-chart i:nth-child(4) { height: 68px; }.scenario-chart i:nth-child(5) { height: 77px; }.scenario-chart span { position: absolute; bottom: -22px; left: 0; color: #8a949f; font-size: 9px; }.detail-list, .formula-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 10px 0 20px; }.detail-list span, .formula-meta span { display: flex; flex-direction: column; gap: 3px; }.detail-list small, .formula-meta small { color: #8c96a1; font-size: 9px; }.detail-list b, .formula-meta b { color: #24334a; font-size: 10px; }.scenario-detail .button { align-self: flex-start; margin-top: auto; }.formula-library, .formula-detail { min-height: 370px; }.formula-row { grid-template-columns: 34px 1fr 1fr 16px; }.formula-row .status-badge { justify-self: end; }.formula-detail { display: flex; flex-direction: column; }.formula-meta { margin-top: 20px; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; padding: 13px 0; }.formula-code { display: flex; align-items: start; gap: 10px; border-radius: 8px; padding: 14px; background: #0b1115; color: #b4fa18; }.formula-code span { display: grid; height: 24px; width: 24px; place-items: center; border-radius: 5px; background: #233522; font-size: 11px; font-weight: 700; }.formula-code code { padding-top: 4px; color: #f1f6ed; font-family: ui-monospace, monospace; font-size: 10px; line-height: 1.4; }.reuse-map { margin-top: 17px; }.reuse-map > div { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: #5d6878; font-size: 10px; }.reuse-map > div span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #dfe7e9; border-radius: 5px; padding: 7px; background: white; }.projection-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-top: 16px; }.projection-card { display: flex; min-height: 206px; flex-direction: column; border: 1px solid #dfe7e9; border-radius: 9px; padding: 13px; background: white; color: #24334a; text-align: left; }.projection-card:hover { border-color: #b4e449; background: #fbfff4; }.projection-card-head { display: flex; align-items: start; justify-content: space-between; }.projection-card > b { margin-top: 17px; font-size: 13px; }.projection-card > small { margin-top: 4px; color: #7e8996; font-size: 10px; }.projection-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; color: #73808d; font-size: 9px; }.projection-meta span { display: inline-flex; align-items: center; gap: 4px; }.projection-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; border-top: 1px solid #edf0f2; padding-top: 10px; color: #65851e; font-size: 9px; font-weight: 700; } | |
| @media (max-width: 1160px) { .scenario-layout, .formula-layout { grid-template-columns: 1fr; }.projection-cards { grid-template-columns: repeat(2,1fr); } } | |
| /* Execution, results, reporting, investigation, and Mentor workspaces */ | |
| .run-overview, .results-layout, .report-layout, .investigate-layout, .mentor-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; }.run-config, .execution-summary, .results-explorer, .result-inspector, .report-library, .report-preview, .trace-panel, .investigations-list, .mentor-main, .mentor-history { min-height: 340px; }.run-config-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 21px 0; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; padding: 14px 0; }.run-config-grid span, .execution-stats span { display: flex; flex-direction: column; gap: 4px; }.run-config-grid small, .execution-stats small { color: #89939f; font-size: 9px; }.run-config-grid b, .execution-stats b { font-size: 10px; }.preflight { display: flex; align-items: center; gap: 10px; border: 1px solid #deebc1; border-radius: 7px; padding: 10px; background: #f7ffea; }.preflight > span { display: flex; align-items: center; gap: 7px; flex: 1; color: #5c7e1b; }.preflight > span b { font-size: 10px; }.preflight > span small { margin-left: 3px; color: #7a865f; font-size: 9px; }.preflight button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #688522; font-size: 9px; font-weight: 700; }.compute-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 21px; }.compute-options span { display: flex; min-height: 72px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e0e6e8; border-radius: 7px; color: #7a8694; }.compute-options .compute-selected { border-color: #b4fa18; background: #f4fbdc; color: #26370b; }.compute-options b { font-size: 10px; }.compute-options small { font-size: 8px; }.progress-bar { height: 7px; margin-top: 25px; overflow: hidden; border-radius: 9px; background: #e8edf0; }.progress-bar span { display: block; height: 100%; border-radius: inherit; background: #b4fa18; }.progress-meta { display: flex; justify-content: space-between; margin-top: 6px; color: #74808d; font-size: 9px; }.progress-meta b { color: #58761c; }.execution-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 18px 0; border-top: 1px solid #edf0f2; padding-top: 14px; }.full-button { width: 100%; margin-top: 8px; }.run-set-table { margin-top: 14px; }.run-set-head, .run-set-row { display: grid; grid-template-columns: 1.5fr .75fr 1.2fr 1fr 1.1fr 1fr; gap: 10px; align-items: center; }.run-set-head { padding: 0 8px 8px; color: #7e8996; font-size: 9px; }.run-set-row { width: 100%; min-height: 56px; border: 0; border-top: 1px solid #edf0f2; padding: 0 8px; background: transparent; color: #536072; font-size: 9px; text-align: left; }.run-set-row:hover { background: #f8fbf1; }.run-set-row b { color: #1c2b42; font-size: 10px; } | |
| .result-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }.result-metrics .metric-card { min-height: 128px; }.result-metrics .metric-card strong { font-size: 27px; }.result-metrics .metric-card .metric-label { margin-top: 9px; }.result-metrics .metric-card small { margin-top: 6px; }.results-layout { grid-template-columns: 1.6fr .75fr; }.chart-large { position: relative; height: 153px; margin: 20px 0 12px; overflow: hidden; border-bottom: 1px solid #dce3e5; background: repeating-linear-gradient(0deg, transparent 0, transparent 37px, #eef1f1 38px); }.chart-large::before { position: absolute; top: 45px; right: 0; left: 0; height: 2px; background: #b7d95b; content: ''; transform: rotate(-5deg); }.chart-line { position: absolute; height: 2px; width: 95%; background: #273b58; transform: rotate(8deg); }.chart-line-one { top: 88px; left: -1%; }.chart-line-two { top: 110px; left: 2%; background: #b4fa18; transform: rotate(-3deg); }.chart-large span { position: absolute; bottom: 3px; color: #88939e; font-size: 8px; }.chart-large span:nth-of-type(1) { left: 2%; }.chart-large span:nth-of-type(2) { left: 25%; }.chart-large span:nth-of-type(3) { left: 49%; }.chart-large span:nth-of-type(4) { left: 72%; }.chart-large span:nth-of-type(5) { right: 2%; }.result-grid-head, .result-row { display: grid; grid-template-columns: 1fr 1.1fr .8fr .8fr 1.2fr; gap: 8px; align-items: center; }.result-grid-head { padding: 0 7px 8px; color: #82909c; font-size: 9px; }.result-row { width: 100%; min-height: 40px; border: 0; border-top: 1px solid #edf0f2; padding: 0 7px; background: transparent; color: #5a6676; font-size: 9px; text-align: left; }.result-row:hover { background: #f8fbf1; }.result-row b { color: #25344b; }.positive { color: #5e8d1a; }.trace-link { display: inline-flex; align-items: center; gap: 4px; color: #65851e; font-weight: 700; }.result-inspector { display: flex; flex-direction: column; }.inspector-value { display: block; margin: 10px 0; font-size: 36px; letter-spacing: -.07em; }.inspector-section { display: flex; flex-direction: column; gap: 3px; margin-top: 21px; border-top: 1px solid #edf0f2; padding-top: 12px; }.inspector-section span { color: #8a949f; font-size: 9px; }.inspector-section b { font-size: 11px; }.inspector-section small { color: #7b8794; font-size: 9px; } | |
| .report-row { display: grid; width: 100%; grid-template-columns: 34px 1fr .7fr .8fr 17px; gap: 10px; align-items: center; min-height: 66px; border: 0; border-top: 1px solid #edf0f2; padding: 0 3px; background: transparent; color: #566273; text-align: left; }.report-row:hover { background: #f8fbf1; }.report-row > span:nth-child(2) { display: flex; flex-direction: column; }.report-row b { color: #1d2c43; font-size: 11px; }.report-row small { margin-top: 3px; color: #89939f; font-size: 9px; }.report-icon { display: grid; height: 30px; width: 30px; place-items: center; border-radius: 7px; background: #eaf6cf; color: #5f861c; }.report-state { color: #65851e; font-size: 9px; font-weight: 700; }.report-preview { display: flex; flex-direction: column; }.report-sheet { margin-top: 17px; border: 1px solid #e1e7e9; border-radius: 5px; padding: 15px; background: #fbfcfc; box-shadow: 0 4px 10px rgba(20,30,40,.04); }.report-sheet > div:first-child { display: flex; flex-direction: column; border-bottom: 1px solid #e8edef; padding-bottom: 10px; }.report-sheet > div:first-child b { font-size: 12px; }.report-sheet > div:first-child small { margin-top: 4px; color: #7f8a96; font-size: 8px; }.report-sheet-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 14px 0; }.report-sheet-metrics span { display: flex; flex-direction: column; gap: 3px; }.report-sheet-metrics small { color: #89939f; font-size: 8px; }.report-sheet-metrics b { font-size: 14px; }.report-sheet-chart { height: 56px; border-bottom: 2px solid #b4fa18; background: repeating-linear-gradient(0deg, #f8faf9 0, #f8faf9 17px, #e9eff0 18px); transform: skewY(-3deg); }.report-sheet-table { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 7px; margin-top: 14px; color: #667384; font-size: 8px; }.report-sheet-table b { color: #25344b; }.attachment-callout { display: flex; align-items: center; gap: 9px; margin-top: 15px; border-radius: 7px; padding: 10px; background: #f4fbdc; color: #607f1c; }.attachment-callout span { display: flex; flex: 1; flex-direction: column; }.attachment-callout b { font-size: 10px; }.attachment-callout small { margin-top: 3px; color: #788462; font-size: 9px; }.attachment-callout button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #64821e; font-size: 9px; font-weight: 700; } | |
| .trace-breadcrumb { display: flex; align-items: center; gap: 7px; margin-top: 19px; color: #87929e; font-size: 9px; }.trace-breadcrumb b { color: #5b7e1d; }.trace-graph { display: flex; min-height: 130px; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; background: radial-gradient(circle at center, #f7fcf0 0, transparent 67%); }.trace-node { display: flex; min-width: 110px; align-items: center; flex-direction: column; gap: 5px; border: 1px solid #dfe7e9; border-radius: 7px; padding: 10px 7px; background: white; color: #617080; }.trace-node b { color: #23334a; font-size: 10px; }.trace-node small { color: #8a949f; font-size: 8px; }.trace-selected { border-color: #b4fa18; background: #f4fbdc; color: #607e19; box-shadow: 0 0 0 3px rgba(180,250,24,.12); }.trace-node svg { color: #63881e; }.trace-actions { display: flex; gap: 7px; border-top: 1px solid #edf0f2; padding-top: 14px; }.saved-investigation { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; border-top: 1px solid #edf0f2; padding: 11px 2px; background: transparent; color: #596676; text-align: left; }.saved-investigation:hover, .mentor-history-row:hover { background: #f8fbf1; }.saved-investigation > span, .mentor-history-row > span { display: flex; flex: 1; flex-direction: column; }.saved-investigation b, .mentor-history-row b { color: #28374c; font-size: 10px; }.saved-investigation small, .mentor-history-row small { margin-top: 3px; color: #89939f; font-size: 8px; }.save-card { display: flex; align-items: start; gap: 8px; margin-top: 14px; border-radius: 7px; padding: 11px; background: #f4fbdc; color: #66831e; }.save-card span { display: flex; flex-direction: column; }.save-card b { font-size: 10px; }.save-card small { margin-top: 4px; color: #7d896d; font-size: 8px; line-height: 1.35; }.scratchpad-strip { display: flex; align-items: center; gap: 11px; }.scratchpad-strip > span:not(.icon-bubble) { display: flex; flex: 1; flex-direction: column; }.scratchpad-strip b { font-size: 11px; }.scratchpad-strip small { margin-top: 3px; color: #7e8995; font-size: 9px; }.scratchpad-strip button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #64851f; font-size: 10px; font-weight: 700; } | |
| .mentor-question { display: flex; align-items: center; gap: 10px; margin-top: 20px; border: 1px solid #deebc1; border-radius: 8px; padding: 12px; background: #f7ffea; }.mentor-question div { display: flex; flex-direction: column; }.mentor-question b { font-size: 12px; }.mentor-question small { margin-top: 3px; color: #7c896b; font-size: 9px; }.mentor-answer { margin-top: 15px; border: 1px solid #e2e8ea; border-radius: 8px; padding: 14px; }.mentor-answer.interpretation { border-color: #dbe8bc; background: #fbfff2; }.answer-label { display: flex; align-items: center; gap: 5px; color: #5c7f1b; font-size: 10px; font-weight: 700; }.mentor-answer p { margin: 10px 0; color: #4b5967; font-size: 11px; line-height: 1.5; }.source-links { display: flex; gap: 8px; }.source-links button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #64831f; font-size: 9px; font-weight: 700; }.mentor-next-step { display: flex; align-items: center; gap: 7px; border-radius: 7px; padding: 9px; background: #f0f7df; color: #68871e; }.mentor-next-step span { display: flex; flex: 1; flex-direction: column; }.mentor-next-step b { font-size: 10px; }.mentor-next-step small { margin-top: 3px; color: #7d896c; font-size: 9px; }.mentor-next-step button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #64831f; font-size: 9px; font-weight: 700; }.mentor-history-row { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; border-top: 1px solid #edf0f2; padding: 12px 2px; background: transparent; color: #6b801f; text-align: left; }.guardrail-card { display: flex; align-items: start; gap: 8px; margin-top: 16px; border: 1px solid #dfe7e9; border-radius: 7px; padding: 10px; color: #63741f; }.guardrail-card span { display: flex; flex-direction: column; }.guardrail-card b { font-size: 10px; }.guardrail-card small { margin-top: 4px; color: #7e8994; font-size: 8px; line-height: 1.35; } | |
| @media (max-width: 1160px) { .run-overview, .results-layout, .report-layout, .investigate-layout, .mentor-layout { grid-template-columns: 1fr; }.result-metrics { grid-template-columns: repeat(2,1fr); }.trace-graph { gap: 3px; }.trace-node { min-width: 90px; } } | |
| /* Reference fidelity: the sidebar is a clipped shell surface, never a visible browser-scroll region. */ | |
| html, body, #root, .app-shell { overflow-x: hidden; } | |
| .sidebar { overflow: hidden; } | |
| .primary-nav { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } | |
| .primary-nav::-webkit-scrollbar { width: 0; height: 0; display: none; } | |
| /* Model Library reference screen */ | |
| .topbar-library { align-items: center; }.global-search { display: flex; min-height: 42px; flex: 1; align-items: center; gap: 14px; border: 1px solid #e2e7ea; border-radius: 14px; padding: 0 16px; background: #fff; color: #21324b; box-shadow: 0 1px 2px rgba(21,31,48,.02); }.global-search input { min-width: 0; flex: 1; border: 0; outline: none; color: #26344a; font-size: 12px; }.global-search input::placeholder { color: #8893a1; }.global-search kbd { border: 1px solid #e5e9eb; border-radius: 5px; padding: 4px 7px; background: #f6f8f8; color: #89939f; font-size: 10px; }.models-reference { display: flex; flex-direction: column; gap: 16px; }.model-tabs { display: flex; align-items: center; gap: 24px; min-height: 42px; }.model-tab { display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: 18px; padding: 10px 18px; background: transparent; color: #25344a; font-size: 12px; font-weight: 700; }.model-tab b { color: #82909e; font-size: 10px; }.model-tab-active { background: #b4fa18; color: #1c2c09; }.model-tab-active b { color: #587b18; }.model-filter-actions { display: flex; gap: 10px; margin-left: auto; }.model-product-filter, .sort-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; min-width: 185px; border: 1px solid #e0e6e8; border-radius: 9px; padding: 11px 14px; background: #fff; color: #344257; font-size: 11px; }.square-control { display: inline-grid; height: 38px; width: 38px; place-items: center; border: 1px solid #e0e6e8; border-radius: 9px; background: #fff; color: #26354a; }.models-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 371px; gap: 22px; align-items: start; }.models-main-column { min-width: 0; }.model-summary-reference { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; }.reference-summary-card { display: flex; min-height: 126px; align-items: center; gap: 16px; border: 1px solid #e1e7e9; border-radius: 12px; padding: 18px; background: #fff; }.reference-summary-dark { border-color: #182218; background: radial-gradient(circle at 95% 20%, rgba(174,255,21,.65), transparent 32%), linear-gradient(135deg,#09100d,#121a17); color: white; }.reference-summary-icon { display: grid; height: 50px; width: 50px; flex: 0 0 50px; place-items: center; border: 1px solid rgba(38,53,68,.15); border-radius: 15px; background: #f1f5f5; color: #1e2c40; }.reference-summary-dark .reference-summary-icon { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.09); color: white; }.reference-summary-card > div { display: flex; flex-direction: column; }.reference-summary-card small { color: #6e7b8b; font-size: 10px; }.reference-summary-dark small { color: rgba(255,255,255,.75); }.reference-summary-card strong { margin-top: 7px; font-size: 30px; letter-spacing: -.07em; }.reference-summary-card span:last-child { margin-top: 5px; color: #87929e; font-size: 10px; }.reference-summary-dark span:last-child { color: rgba(255,255,255,.74); }.reference-summary-card em { margin-right: 11px; color: #b4fa18; font-style: normal; font-weight: 700; }.models-list-header { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 11px; }.models-list-header h2 { margin: 0; color: #16243a; font-size: 17px; letter-spacing: -.04em; }.models-list-header h2 span { color: #7e8996; font-size: 12px; }.models-list-header > div { display: flex; gap: 8px; }.sort-button { min-width: 186px; padding: 10px 12px; }.sort-button svg:first-child { color: #647285; }.view-selected { background: #f1fbdc; border-color: #ddedb6; color: #5e811b; }.reference-model-list { display: flex; flex-direction: column; gap: 9px; }.reference-model-row { display: grid; min-height: 94px; grid-template-columns: minmax(220px,1.9fr) 60px 145px 115px 100px 100px 24px; gap: 12px; align-items: center; border: 1px solid #e2e7e9; border-radius: 11px; padding: 0 15px; background: #fff; color: #627084; font-size: 10px; text-align: left; box-shadow: 0 1px 2px rgba(20,30,45,.02); transition: border-color .16s ease, background .16s ease, transform .16s ease; }.reference-model-row:hover { border-color: #b7e55e; background: #fbfff2; transform: translateY(-1px); }.reference-model-row-selected { border-color: #b5ec51; background: linear-gradient(90deg,#caff67,#b7f631); color: #2a4310; }.reference-model-row-dark { border-color: #17201c; background: #0d1613; color: rgba(255,255,255,.78); }.reference-model-identity { display: flex; min-width: 0; align-items: center; gap: 13px; }.reference-product-icon { display: grid; height: 50px; width: 50px; flex: 0 0 50px; place-items: center; border-radius: 12px; background: #f0f6f4; color: #22a679; }.product-fia { color: #2dbb91; }.product-rila { color: #20a78a; }.product-di { color: #28a88c; }.product-cat { background: #2a3631; color: white; }.reference-model-identity > span:last-child { display: flex; min-width: 0; flex-direction: column; }.reference-model-identity b { display: flex; align-items: center; gap: 6px; overflow: hidden; color: #15253b; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }.reference-model-row-dark .reference-model-identity b { color: white; }.reference-model-identity b svg { color: #82909b; }.reference-model-identity small { overflow: hidden; margin-top: 6px; color: #7e8995; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }.reference-model-row-dark .reference-model-identity small { color: rgba(255,255,255,.55); }.reference-version { justify-self: start; border-radius: 6px; padding: 5px 7px; background: #ecf7dd; color: #5b7d1d; font-size: 10px; font-weight: 700; }.reference-model-row-dark .reference-version { background: #2b3632; color: white; }.reference-owner { display: flex; align-items: center; gap: 8px; }.reference-owner i, .detail-owner i { display: grid; height: 28px; width: 28px; flex: 0 0 28px; place-items: center; border: 2px solid white; border-radius: 50%; background: linear-gradient(135deg,#ead3c1,#5e473b); color: white; font-size: 8px; font-style: normal; font-weight: 800; }.reference-owner > span { display: flex; flex-direction: column; color: #435268; }.reference-owner small { margin-top: 3px; color: #8b96a2; font-size: 8px; }.reference-updated { display: flex; flex-direction: column; gap: 3px; }.reference-updated small { color: #8b96a2; font-size: 8px; }.reference-updated b { color: #304056; font-size: 10px; }.reference-updated span { color: #7f8b99; font-size: 8px; }.reference-status .status-badge { font-size: 9px; }.reference-open-button { border: 0; border-radius: 10px; padding: 11px 12px; background: #f4f7f8; color: #17263c; font-size: 10px; font-weight: 700; white-space: nowrap; }.reference-model-row-selected .reference-open-button, .reference-model-row-dark .reference-open-button { background: #07100e; color: white; }.reference-model-row-selected .reference-status .status-badge { color: #2f6d21; }.reference-model-row-selected .reference-status .status-dot { background: #2cae4f; }.row-menu { display: grid; place-items: center; border: 0; background: transparent; color: #26354a; }.reference-model-row-dark .row-menu { color: white; }.model-list-foot { margin-top: 17px; color: #818d99; font-size: 10px; }.reference-model-detail { position: sticky; top: 16px; overflow: hidden; border: 1px solid #dfe7e8; border-radius: 12px; background: white; box-shadow: 0 4px 12px rgba(21,32,45,.035); }.detail-highlight { padding: 18px; background: linear-gradient(150deg,#d1ff76,#b4fa18); }.detail-model-heading { display: flex; align-items: center; gap: 12px; }.detail-model-heading > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }.detail-model-heading b { display: flex; align-items: center; gap: 5px; color: #1a310c; font-size: 15px; }.detail-model-heading small { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #36521d; font-size: 8px; }.detail-model-heading em { border-radius: 7px; padding: 6px 8px; background: rgba(255,255,255,.4); color: #486d1d; font-size: 10px; font-style: normal; font-weight: 700; }.detail-owner { display: flex; align-items: center; gap: 9px; margin-top: 25px; }.detail-owner > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }.detail-owner b { color: #2c4e14; font-size: 10px; }.detail-owner small { margin-top: 3px; color: #63843a; font-size: 8px; }.active-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 16px; padding: 7px 10px; background: rgba(255,255,255,.7); color: #346d2d; font-size: 10px; font-weight: 700; }.active-pill > span { height: 7px; width: 7px; border-radius: 50%; background: #25aa5a; }.detail-tabs { display: flex; border-bottom: 1px solid #edf0f1; }.detail-tabs button { position: relative; flex: 1; border: 0; padding: 17px 5px 15px; background: transparent; color: #788595; font-size: 10px; }.detail-tabs .detail-tab-active { color: #1b293e; font-weight: 700; }.detail-tabs .detail-tab-active::after { position: absolute; right: 16px; bottom: -1px; left: 16px; height: 3px; border-radius: 4px 4px 0 0; background: #b4fa18; content: ''; }.detail-fields { display: flex; flex-direction: column; gap: 22px; padding: 25px 18px 0; }.detail-field { display: grid; grid-template-columns: 22px 92px 1fr; gap: 8px; align-items: start; color: #687689; font-size: 10px; }.detail-field > span { color: #647486; }.detail-field > b { padding-top: 2px; font-weight: 500; }.detail-field > div { display: flex; flex-direction: column; gap: 5px; color: #24344b; }.detail-field strong { font-size: 10px; line-height: 1.45; }.detail-field small { color: #8893a0; font-size: 9px; line-height: 1.4; }.detail-more { margin: 14px 18px 0 120px; border: 0; background: transparent; color: #25364d; font-size: 10px; font-weight: 700; }.detail-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; border-top: 1px solid #edf0f1; padding: 16px; }.detail-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 10px; font-size: 11px; font-weight: 700; }.detail-open { border: 0; background: #08100e; color: white; }.detail-versions { border: 1px solid #dfe6e8; background: white; color: #23334a; } | |
| @media (max-width: 1260px) { .models-content-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; }.reference-model-row { grid-template-columns: minmax(180px,1.8fr) 55px 120px 95px 86px 94px 20px; gap: 7px; padding-inline: 10px; }.reference-open-button { padding-inline: 8px; }.detail-field { grid-template-columns: 20px 76px 1fr; } } | |
| @media (max-width: 1050px) { .models-content-grid { grid-template-columns: 1fr; }.reference-model-detail { position: relative; top: auto; }.reference-model-row { grid-template-columns: minmax(220px,2fr) 60px 130px 100px 90px 94px 20px; }.model-tabs { gap: 8px; } } | |
| .models-content-grid-full { grid-template-columns: minmax(0, 1fr); } | |
| .detail-highlight { position: relative; }.detail-close { position: absolute; top: 12px; right: 12px; display: grid; height: 28px; width: 28px; place-items: center; border: 0; border-radius: 7px; background: rgba(255,255,255,.42); color: #31500e; }.detail-close:hover { background: rgba(255,255,255,.75); } | |
| /* Completion workspaces and nested navigation */ | |
| .input-subnav, .execution-subnav, .results-subnav, .report-subnav, .mentor-subnav { display: flex; align-items: center; gap: 6px; overflow-x: auto; border-bottom: 1px solid #e6ebec; padding-bottom: 8px; }.input-subnav button, .execution-subnav button, .results-subnav button, .report-subnav button, .mentor-subnav button { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 7px; padding: 8px 11px; background: transparent; color: #768292; font-size: 10px; font-weight: 700; white-space: nowrap; }.input-subnav button:hover, .execution-subnav button:hover, .results-subnav button:hover, .report-subnav button:hover, .mentor-subnav button:hover, .input-subnav-active, .execution-subnav-active, .results-subnav-active, .report-subnav-active, .mentor-subnav-active { background: #f1fbdc; color: #3d5e11 ; }.back-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; border: 0; background: transparent; color: #5f7e1f; font-size: 10px; font-weight: 700; }.detail-workspace-head, .monitor-hero, .comparison-header, .variance-hero, .completed-report-header, .recovery-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.input-detail-grid, .run-editor-grid, .recovery-grid, .completed-report-grid, .report-definition-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(290px,.85fr); gap: 12px; }.input-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 20px; border-block: 1px solid #edf0f2; padding: 15px 0; }.input-preview-grid span, .run-library-summary span { display: flex; flex-direction: column; gap: 4px; }.input-preview-grid small, .run-library-summary small { color: #89939f; font-size: 9px; }.input-preview-grid b, .run-library-summary b { color: #26364c; font-size: 11px; }.factor-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 18px; overflow: hidden; border: 1px solid #e5ebec; border-radius: 7px; }.factor-grid > * { border-right: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; padding: 10px; color: #536174; font-size: 10px; }.factor-grid b { background: #f7f9f8; color: #344359; }.mapping-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 28px; }.mapping-flow > span { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 7px; border: 1px solid #e2e9e9; border-radius: 8px; padding: 17px 8px; color: #617084; font-size: 9px; text-align: center; }.mapping-flow b { color: #26364c; font-size: 11px; }.check-list, .preflight-list { display: flex; flex-direction: column; gap: 13px; margin: 22px 0; }.check-list span, .preflight-list span { display: flex; align-items: center; gap: 8px; color: #4d7420; font-size: 10px; }.check-warning { color: #ae7c15 ; }.validation-issues { padding-bottom: 8px; }.issue-row { display: grid; width: 100%; grid-template-columns: 24px 1fr auto 18px; gap: 10px; align-items: center; min-height: 65px; border: 0; border-top: 1px solid #edf0f2; background: transparent; color: #a67916; text-align: left; }.issue-row span { display: flex; flex-direction: column; gap: 4px; }.issue-row b { color: #25344a; font-size: 11px; }.issue-row small { color: #7e8996; font-size: 9px; }.run-library-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.run-library-summary span { border: 1px solid #e1e7e9; border-radius: 9px; padding: 14px; background: #fff; }.run-library-summary span:first-child { border-color: #1a241d; background: #111a16; }.run-library-summary span:first-child small, .run-library-summary span:first-child b { color: white; }.editor-section { border-bottom: 1px solid #edf0f2; padding-bottom: 17px; margin-bottom: 17px; }.editor-section > div { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #29394f; font-size: 11px; }.editor-section > div button { display: grid; margin-left: auto; border: 0; background: transparent; color: #668b21; }.editor-section-icon { display: grid; height: 27px; width: 27px; place-items: center; border-radius: 6px; background: #eef8d9; color: #628b1b; }.editor-section label { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: #637084; font-size: 10px; }.editor-section label input { accent-color: #8ecb24; }.editor-section label svg { margin-left: auto; color: #6ca629; }.monitor-progress { height: 10px; margin: 28px 0 8px; overflow: hidden; border-radius: 9px; background: #e9edef; }.monitor-progress span { display: block; height: 100%; border-radius: inherit; background: #b4fa18; }.job-list { margin-top: 18px; }.job-list > div { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; min-height: 43px; border-top: 1px solid #edf0f2; color: #5c697a; font-size: 10px; }.job-list svg { color: #68a827; }.job-list small { color: #89939e; font-size: 9px; }.monitor-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 25px; }.monitor-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #dfe6e8; border-radius: 7px; padding: 9px 5px; background: white; color: #637084; font-size: 9px; }.monitor-controls button:last-child { border-color: #ebd6a6; color: #9a7315; }.recovery-hero { border-color: #eddcb3; background: #fffaf0; color: #9a7317; }.recovery-hero > div { flex: 1; }.failure-code { display: flex; flex-direction: column; gap: 7px; margin: 20px 0; border: 1px solid #f0ded0; border-radius: 7px; padding: 13px; background: #fff9f7; }.failure-code b { color: #a94c31; font-size: 10px; }.failure-code small { color: #7c8794; font-size: 9px; }.failure-code code { color: #536174; font-size: 10px; line-height: 1.5; }.history-table, .mentor-history-table { margin-top: 18px; }.history-table > button, .mentor-history-table > button { display: grid; width: 100%; grid-template-columns: 1.3fr 1fr .8fr auto 18px; gap: 10px; align-items: center; min-height: 62px; border: 0; border-top: 1px solid #edf0f2; background: transparent; color: #536174; text-align: left; }.history-table > button span, .mentor-history-table > button span { display: flex; flex-direction: column; gap: 4px; }.history-table b, .mentor-history-table b { color: #24344b; font-size: 10px; }.history-table small, .mentor-history-table small { color: #84909c; font-size: 9px; }.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.compare-card { display: flex; align-items: center; gap: 13px; }.compare-card-icon { display: grid; height: 40px; width: 40px; place-items: center; border-radius: 10px; background: #f0f8df; color: #659220; }.compare-card > span:last-child { display: flex; flex-direction: column; gap: 4px; }.compare-card small { color: #84909c; font-size: 10px; }.compare-card strong { color: #1d2d44; font-size: 24px; }.compare-card b { color: #639121; font-size: 10px; }.compare-card .negative { color: #ad6a24; }.changed-dimensions { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 18px; }.changed-dimensions div { display: flex; flex-direction: column; gap: 5px; border: 1px solid #e4e9eb; border-radius: 8px; padding: 12px; }.changed-dimensions span { color: #7e8996; font-size: 9px; }.changed-dimensions b { color: #25364d; font-size: 12px; }.changed-dimensions small { color: #89939f; font-size: 8px; }.waterfall { display: flex; height: 210px; align-items: end; justify-content: space-around; border-bottom: 1px solid #dfe6e7; padding: 0 30px; }.waterfall-bar { position: relative; width: 50px; border-radius: 6px 6px 0 0; }.waterfall-bar span { position: absolute; top: -20px; left: 50%; color: #526173; font-size: 9px; transform: translateX(-50%); white-space: nowrap; }.positive-bar { background: #b5ec52; }.negative-bar { background: #e9b76d; }.total-bar { background: #17261e; }.waterfall-labels { display: flex; justify-content: space-around; padding-top: 10px; color: #798594; font-size: 9px; }.report-library-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-top: 18px; }.report-definition-card { display: flex; min-height: 180px; flex-direction: column; align-items: flex-start; border: 1px solid #e0e7e8; border-radius: 9px; padding: 14px; background: white; color: #25354b; text-align: left; }.report-definition-card:hover { border-color: #b4e449; background: #fbfff3; }.report-definition-card b { margin-top: 16px; font-size: 12px; }.report-definition-card small { margin-top: 6px; color: #7e8996; font-size: 9px; }.report-definition-card > span:last-of-type { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: auto; }.report-definition-card em { color: #7c8795; font-size: 9px; font-style: normal; }.report-definition-grid .panel:first-child { padding: 7px 16px; }.definition-row { display: flex; width: 100%; align-items: center; gap: 11px; min-height: 68px; border: 0; border-bottom: 1px solid #edf0f2; background: transparent; color: #6c7888; text-align: left; }.definition-row > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 4px; }.definition-row b { color: #26364c; font-size: 11px; }.definition-row small { color: #84909c; font-size: 9px; }.report-preview-panel .report-sheet, .report-sheet-large { margin-top: 18px; }.attachment-options { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }.attachment-options label { display: flex; align-items: center; gap: 8px; border: 1px solid #e2e8e9; border-radius: 7px; padding: 12px; color: #35445a; font-size: 10px; }.attachment-options input { accent-color: #8cc623; }.attachment-options small { margin-left: auto; color: #84909c; font-size: 8px; }.completed-report-grid { grid-template-columns: minmax(0,1.4fr) 300px; }.report-sheet-large { min-height: 360px; border: 1px solid #e0e7e8; border-radius: 8px; padding: 20px; background: #fff; }.mentor-citations { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }.mentor-citations span { border: 1px solid #dce8c1; border-radius: 5px; padding: 5px 7px; color: #638323; font-size: 8px; }.mentor-history-table > button { grid-template-columns: 30px 1fr auto 60px 18px; }.mentor-history-table .icon-bubble { height: 28px; width: 28px; }.mentor-subnav { margin-bottom: 2px; }.mentor-subnav button { border: 1px solid #e0e7e9; }.mentor-subnav-active { border-color: #bde766 ; }.mentor-history .button { margin-top: 16px; } | |
| @media (max-width: 900px) { .input-detail-grid, .run-editor-grid, .recovery-grid, .completed-report-grid, .report-definition-grid { grid-template-columns: 1fr; }.report-library-grid { grid-template-columns: 1fr; }.changed-dimensions, .run-library-summary { grid-template-columns: repeat(2,1fr); }.reference-model-detail { position: relative; }.mapping-flow { flex-direction: column; }.mapping-flow > span { width: 100%; }.input-preview-grid { grid-template-columns: repeat(2,1fr); } } | |
| /* Model Workspace and Formula Intelligence next-stage screens */ | |
| .model-workspace-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; background:linear-gradient(110deg,#111c16,#1d2d20); color:#fff; }.model-workspace-hero .section-title,.model-workspace-hero .muted,.model-workspace-hero .eyebrow { color:#fff; }.workspace-tabs,.formula-subnav { display:flex; gap:6px; border-bottom:1px solid #e5ebec; padding-bottom:8px; }.workspace-tabs button,.formula-subnav button { border:0; border-radius:7px; background:transparent; padding:8px 12px; color:#758190; font-size:10px; font-weight:700; }.workspace-tabs button:hover,.formula-subnav button:hover,.workspace-tab-active,.formula-subnav-active { background:#eff9d8 ; color:#52761d ; }.model-hierarchy-grid,.basis-detail-grid,.formula-detail-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.75fr); gap:12px; }.hierarchy-panel { padding:12px 0 18px; }.hierarchy-panel .panel-title-row { padding-inline:16px; }.tree-row { display:flex; width:100%; align-items:center; gap:8px; min-height:48px; border:0; border-top:1px solid #eef1f2; background:transparent; color:#667486; text-align:left; }.tree-row:hover,.tree-row-active { background:#f3fbdc; color:#4d771b; }.tree-row > span:nth-of-type(2) { display:flex; flex-direction:column; gap:3px; flex:1; }.tree-row b { color:#2c3c51; font-size:11px; }.tree-row small { color:#84909b; font-size:9px; }.tree-row-icon { display:grid; height:25px; width:25px; place-items:center; border-radius:6px; background:#edf7d8; color:#659321; }.model-context-panel { display:flex; flex-direction:column; gap:9px; }.context-fact { display:flex; align-items:center; gap:10px; border-bottom:1px solid #edf0f1; padding:9px 0; }.context-fact > span:first-child { display:grid; height:27px; width:27px; place-items:center; border-radius:6px; background:#eff8dc; color:#689324; }.context-fact > span:last-child { display:flex; flex-direction:column; gap:3px; }.context-fact small { color:#88939f; font-size:9px; }.context-fact b { color:#2d3e54; font-size:10px; }.composition-row { display:grid; width:100%; grid-template-columns:30px 1fr auto 16px; gap:9px; align-items:center; min-height:64px; border:0; border-top:1px solid #edf0f1; background:transparent; text-align:left; }.composition-row > span:nth-child(2) { display:flex; flex-direction:column; gap:4px; }.composition-row b { color:#29394e; font-size:11px; }.composition-row small { color:#87929e; font-size:9px; }.composition-icon { display:grid; height:27px; width:27px; place-items:center; border-radius:6px; background:#f0f8df; color:#659122; }.interface-table { padding:0 16px 12px; }.interface-table-head,.interface-row { display:grid; grid-template-columns:1.2fr .75fr 1.2fr .8fr 18px; gap:12px; align-items:center; }.interface-table-head { min-height:42px; color:#8a949e; font-size:9px; font-weight:700; }.interface-row { width:100%; min-height:58px; border:0; border-top:1px solid #edf0f1; background:transparent; color:#687587; font-size:10px; text-align:left; }.interface-row:hover { background:#f7fbe9; }.interface-row > span:first-child { display:flex; align-items:center; gap:8px; color:#527820; }.interface-row b { color:#293a4f; }.formula-screen-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.75fr); gap:12px; }.formula-overview { display:flex; flex-direction:column; }.formula-overview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:18px 0; }.formula-overview-stats span { display:flex; flex-direction:column; gap:4px; border:1px solid #e5eaeb; border-radius:7px; padding:10px; }.formula-overview-stats small { color:#89939f; font-size:8px; }.formula-overview-stats b { color:#293a50; font-size:16px; }.formula-expression { display:flex; align-items:center; gap:12px; margin:4px 0 22px; border:1px solid #dce8c5; border-radius:8px; padding:16px; background:#f8fced; }.formula-expression > span { display:grid; height:30px; width:30px; place-items:center; border-radius:7px; background:#b8ee4e; color:#34540e; font-weight:800; }.formula-expression code { color:#3f5b29; font-size:11px; line-height:1.5; }.formula-explanation { border-bottom:1px solid #edf0f1; padding-bottom:14px; }.formula-dependency-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }.dependency-card { border:1px solid #e1e8e9; border-radius:7px; padding:10px; }.dependency-card > div { display:flex; align-items:center; gap:6px; border-bottom:1px solid #edf0f1; padding-bottom:8px; color:#587c20; }.dependency-card b { color:#2a3b50; font-size:10px; }.dependency-card > span:not(:first-child) { display:flex; align-items:center; justify-content:space-between; padding-top:8px; color:#647184; font-size:9px; }.inheritance-map { display:flex; align-items:center; justify-content:space-between; gap:8px; overflow:auto; border:1px solid #e0e8e9; border-radius:9px; padding:22px 14px; background:#fbfdf8; }.map-node { display:flex; min-width:145px; flex-direction:column; align-items:center; gap:6px; border:1px solid #dce7cb; border-radius:8px; padding:13px 8px; background:#f4fbdc; color:#628a20; text-align:center; }.map-node b { color:#2f4155; font-size:10px; }.map-node small { color:#80909a; font-size:8px; }.inheritance-table { padding:15px 16px; }.inheritance-row { display:grid; grid-template-columns:1fr auto 18px; gap:10px; align-items:center; min-height:55px; border-top:1px solid #edf0f1; }.inheritance-row span:first-child { display:flex; flex-direction:column; gap:4px; }.inheritance-row b { color:#2d3d52; font-size:10px; }.inheritance-row small { color:#87929e; font-size:9px; }.diff-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.diff-grid pre { margin:18px 0 0; border-radius:7px; padding:16px; background:#f5f7f7; color:#526171; font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }.diff-local { border-color:#e4d5b0; background:#fffdf6; }.diff-local pre { background:#fff8e9; color:#956d1d; }.wizard-steps { display:flex; gap:8px; }.wizard-steps span { border:1px solid #e0e7e8; border-radius:7px; padding:8px 12px; color:#8a949f; font-size:9px; font-weight:700; }.wizard-step-active { border-color:#bfec62 ; background:#f0fbd9; color:#567c1d ; }.wizard-panel { min-height:210px; }.wizard-choice { display:flex; width:100%; align-items:center; gap:10px; border-top:1px solid #edf0f1; padding:14px 0; color:#5e6d7d; }.wizard-choice input { accent-color:#91ce27; }.wizard-choice > span { display:flex; flex:1; flex-direction:column; gap:4px; }.wizard-choice b { color:#2b3c51; font-size:11px; }.wizard-choice small { color:#87929e; font-size:9px; }.conflict-row { display:flex; align-items:center; gap:10px; margin-top:18px; border:1px solid #eddcb3; border-radius:7px; padding:14px; background:#fffaf1; color:#a37818; }.conflict-row span { display:flex; flex:1; flex-direction:column; gap:4px; }.conflict-row b { color:#765919; font-size:10px; }.conflict-row small { color:#947d50; font-size:9px; }.wizard-actions { display:flex; justify-content:flex-end; gap:8px; }.full-button { width:100%; justify-content:center; } | |
| @media (max-width:900px) { .model-hierarchy-grid,.basis-detail-grid,.formula-detail-grid,.formula-screen-grid { grid-template-columns:1fr; }.formula-dependency-grid { grid-template-columns:1fr; }.diff-grid { grid-template-columns:1fr; }.interface-table { overflow-x:auto; }.interface-table-head,.interface-row { min-width:650px; }.inheritance-map { justify-content:flex-start; } } | |
| /* Scenario architecture screens */ | |
| .scenario-subnav { display:flex; gap:6px; border-bottom:1px solid #e5ebec; padding-bottom:8px; }.scenario-subnav button { border:0; border-radius:7px; background:transparent; padding:8px 12px; color:#768390; font-size:10px; font-weight:700; }.scenario-subnav button:hover,.scenario-subnav-active { background:#eff9d8 ; color:#547c1d ; }.scenario-detail-grid,.generator-editor-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.75fr); gap:12px; }.scenario-large-chart { display:flex; height:170px; align-items:center; justify-content:center; gap:12px; border:1px solid #e1e9e9; border-radius:8px; background:linear-gradient(180deg,#fbfdf7,#f3f9e7); color:#6c9b26; }.scenario-large-chart span { color:#718090; font-size:10px; }.scenario-variable-table { margin-top:15px; }.scenario-variable-table > div { display:grid; grid-template-columns:1.2fr 1fr 1.3fr; gap:12px; align-items:center; min-height:47px; border-top:1px solid #edf0f1; color:#657285; font-size:10px; }.scenario-variable-table b { color:#2c3d51; }.scenario-variable-table small { color:#87929e; font-size:9px; }.generator-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.generator-card { display:flex; min-height:170px; flex-direction:column; align-items:flex-start; gap:8px; border:1px solid #e0e8e8; border-radius:9px; padding:16px; background:#fff; color:#758190; text-align:left; }.generator-card:hover { border-color:#b9e95d; background:#fbfff4; }.generator-card b { color:#2c3d51; font-size:12px; }.generator-card small,.generator-card > span:nth-of-type(2) { font-size:9px; }.generator-card .status-badge { margin-top:auto; }.generator-icon { display:grid; height:31px; width:31px; place-items:center; border-radius:7px; background:#eff8d9; color:#679422; }.generator-card > svg { align-self:flex-end; margin-top:auto; }.generator-editor-grid .definition-row { min-height:72px; }.batch-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.batch-summary > span { display:flex; flex-direction:column; gap:5px; border:1px solid #e1e8e9; border-radius:8px; padding:14px; background:#fff; }.batch-summary i { display:grid; height:25px; width:25px; place-items:center; border-radius:6px; background:#eef8d9; color:#699323; font-style:normal; }.batch-summary small { color:#89939e; font-size:9px; }.batch-summary b { color:#293b50; font-size:12px; }.attach-options { display:flex; flex-direction:column; gap:10px; margin:22px 0; }.attach-options label { display:flex; align-items:center; gap:9px; border:1px solid #e0e8e9; border-radius:8px; padding:14px; color:#4f6073; font-size:10px; }.attach-options input { accent-color:#8fcb28; }.attach-options small { margin-left:auto; color:#7d8997; font-size:9px; }.scenario-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.compare-scenario-card { display:flex; align-items:center; gap:12px; }.compare-scenario-card > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:4px; }.compare-scenario-card b { color:#2c3d52; font-size:11px; }.compare-scenario-card small { color:#87929e; font-size:9px; }.compare-scenario-card strong { color:#5b861d; font-size:22px; }.scenario-detail .button { margin-top:12px; } | |
| @media (max-width:900px) { .scenario-detail-grid,.generator-editor-grid { grid-template-columns:1fr; }.generator-grid { grid-template-columns:1fr; }.batch-summary { grid-template-columns:repeat(2,1fr); }.scenario-compare-grid { grid-template-columns:1fr; } } | |
| /* Trace Explorer and Scratchpad notebook */ | |
| .investigation-subnav { display:flex; gap:6px; border-bottom:1px solid #e5ebec; padding-bottom:8px; }.investigation-subnav button { display:inline-flex; align-items:center; gap:6px; border:0; border-radius:7px; background:transparent; padding:8px 12px; color:#778391; font-size:10px; font-weight:700; }.investigation-subnav button:hover,.investigation-subnav-active { background:#eff9d8 ; color:#52791d ; }.trace-header { display:flex; align-items:center; justify-content:space-between; gap:18px; }.trace-controls { display:flex; align-items:center; gap:7px; }.trace-controls button { display:inline-flex; align-items:center; gap:6px; border:1px solid #e0e7e8; border-radius:7px; background:white; padding:8px 11px; color:#6f7c8a; font-size:9px; }.trace-controls button:hover,.trace-control-active { border-color:#b9e760 ; background:#eff9d8 ; color:#527b1c ; }.trace-context { display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:#85919d; font-size:9px; }.trace-path-panel { padding:15px 16px 20px; }.trace-node-path { display:flex; align-items:center; gap:9px; overflow:auto; padding:24px 5px 10px; }.trace-path-segment { display:flex; min-width:180px; flex:1; align-items:center; gap:9px; }.trace-node-card { display:flex; width:100%; min-height:112px; flex-direction:column; align-items:flex-start; gap:6px; border:1px solid #dfe8e9; border-radius:9px; padding:13px; background:#fff; color:#657285; text-align:left; }.trace-node-card:hover,.trace-node-card-selected { border-color:#bce965; background:#f4fbdc; }.trace-node-card > span { display:grid; height:27px; width:27px; place-items:center; border-radius:6px; background:#eff8d9; color:#669122; }.trace-node-card b { color:#283a50; font-size:11px; }.trace-node-card small { color:#84909b; font-size:9px; }.trace-node-card em { margin-top:auto; color:#618d1e; font-size:8px; font-style:normal; }.trace-kind-result > span { background:#17251d; color:#b9f04f; }.trace-kind-formula > span { background:#e8f5ff; color:#3d7ab0; }.trace-bottom-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.7fr); gap:12px; }.checkpoint-row { display:grid; grid-template-columns:22px 1fr auto 24px; gap:8px; align-items:center; min-height:50px; border-top:1px solid #edf0f1; color:#6f861f; }.checkpoint-row span { display:flex; flex-direction:column; gap:4px; }.checkpoint-row b { color:#293a50; font-size:10px; }.checkpoint-row small { color:#87929e; font-size:9px; }.checkpoint-row button { border:0; background:transparent; color:#6b8e24; font-size:9px; }.saved-investigation-list { padding:10px 16px; }.saved-investigation-card { display:grid; width:100%; grid-template-columns:35px 1fr auto 17px; gap:10px; align-items:center; min-height:75px; border:0; border-top:1px solid #edf0f1; background:transparent; color:#687586; text-align:left; }.saved-investigation-card > span:nth-child(2) { display:flex; flex-direction:column; gap:5px; }.saved-investigation-card b { color:#293a50; font-size:11px; }.saved-investigation-card small,.saved-investigation-card em { color:#85919d; font-size:9px; font-style:normal; }.notebook-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }.notebook-actions { display:flex; gap:7px; }.notebook-toolbar { display:flex; align-items:center; gap:6px; overflow:auto; border:1px solid #e1e8e9; border-radius:8px; padding:7px; background:#fbfdfb; }.notebook-toolbar > span { margin:0 7px; color:#536478; font-size:10px; font-weight:800; }.notebook-toolbar button { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; border:1px solid #e0e7e8; border-radius:6px; background:white; padding:7px 9px; color:#627184; font-size:9px; }.notebook-toolbar button:hover { border-color:#b9e95e; color:#5a841c; }.notebook-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.65fr); gap:12px; }.notebook-canvas { display:flex; min-height:400px; flex-direction:column; gap:10px; border:1px dashed #d7e1d9; border-radius:9px; padding:14px; background:#f7faf6; }.notebook-block { border:1px solid #e0e8e9; border-left:4px solid #b5e856; border-radius:8px; padding:13px; background:#fff; box-shadow:0 3px 10px rgba(31,53,38,.04); }.notebook-comparison { border-left-color:#a8d9f6; }.notebook-formula { border-left-color:#d7b5f2; }.notebook-block-head { display:flex; align-items:center; gap:8px; }.notebook-block-head > span { display:grid; height:26px; width:26px; place-items:center; border-radius:6px; background:#eff8d9; color:#659122; }.notebook-block-head b { flex:1; color:#293a50; font-size:10px; }.notebook-block-head small { color:#87939e; font-size:8px; }.notebook-block-head button { display:grid; border:0; background:transparent; color:#87939e; }.notebook-block p { margin:12px 0; color:#5c6b7c; font-size:10px; line-height:1.5; }.notebook-provenance { display:flex; gap:12px; border-top:1px solid #edf0f1; padding-top:8px; color:#789221; font-size:8px; }.notebook-provenance span { display:inline-flex; align-items:center; gap:4px; }.notebook-sidebar { height:fit-content; }.notebook-sidebar .button { margin-top:8px; } | |
| @media (max-width:900px) { .trace-bottom-grid,.notebook-layout { grid-template-columns:1fr; }.trace-node-path { flex-direction:column; align-items:stretch; }.trace-path-segment { width:100%; flex-direction:column; }.trace-path-segment > svg { transform:rotate(90deg); }.trace-context { display:none; }.notebook-header { align-items:flex-start; flex-direction:column; } } | |
| /* Cross-model contracts */ | |
| .mapping-contract-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.75fr); gap:12px; }.cross-mapping-table { margin-top:10px; }.cross-mapping-row { display:grid; grid-template-columns:1fr 18px 1.25fr auto 18px; gap:9px; align-items:center; min-height:64px; border-top:1px solid #edf0f1; color:#657284; font-size:9px; }.cross-mapping-row > span { display:flex; flex-direction:column; gap:4px; }.cross-mapping-row b { color:#293a50; font-size:10px; }.cross-mapping-row small { color:#87929e; font-size:8px; }.cross-trace-path { display:flex; align-items:center; justify-content:space-between; gap:10px; overflow:auto; border:1px solid #e0e8e9; border-radius:9px; padding:22px 14px; background:#fafdf7; }.cross-trace-box { display:flex; min-width:160px; flex-direction:column; align-items:center; gap:6px; border:1px solid #dce8c8; border-radius:8px; padding:13px 8px; background:#f0f9dc; text-align:center; }.cross-trace-box i { display:grid; height:27px; width:27px; place-items:center; border-radius:6px; background:#c1f267; color:#4c7517; font-style:normal; }.cross-trace-box b { color:#2c3d51; font-size:10px; }.cross-trace-box small { color:#80909b; font-size:8px; }.cross-provenance { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:15px; }.cross-provenance span { display:flex; flex-direction:column; gap:5px; border:1px solid #e2e8e9; border-radius:7px; padding:11px; }.cross-provenance small { color:#87929e; font-size:8px; }.cross-provenance b { color:#2e4055; font-size:10px; } | |
| @media (max-width:900px) { .mapping-contract-grid { grid-template-columns:1fr; }.cross-provenance { grid-template-columns:repeat(2,1fr); }.cross-trace-path { justify-content:flex-start; } } | |
| /* Admin / Settings */ | |
| .settings-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.7fr); gap:12px; }.settings-list { padding:8px 16px; }.settings-row { display:grid; width:100%; grid-template-columns:35px 1fr 18px; gap:10px; align-items:center; min-height:73px; border:0; border-top:1px solid #edf0f1; background:transparent; color:#778390; text-align:left; }.settings-row:hover { background:#f7fbe9; }.settings-row > span:nth-child(2) { display:flex; flex-direction:column; gap:5px; }.settings-row b { color:#2b3c51; font-size:11px; }.settings-row small { color:#87929e; font-size:9px; }.settings-icon { display:grid; height:30px; width:30px; place-items:center; border-radius:7px; background:#eff8da; color:#669323; }.settings-icon-dark { background:#16231b; color:#b9ee51; }.settings-status { height:fit-content; }.settings-status > .settings-icon { margin-bottom:10px; } | |
| @media (max-width:900px) { .settings-grid { grid-template-columns:1fr; } } | |
| /* Interactive Mentor mock chat */ | |
| .mentor-chat { margin:16px 0; border:1px solid #dfe8e8; border-radius:9px; background:#fbfdfb; overflow:hidden; }.mentor-chat-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e7eded; padding:11px 13px; }.mentor-chat-head > span { display:flex; align-items:center; gap:7px; color:#527b1d; }.mentor-chat-head b { color:#2b3d51; font-size:10px; }.mentor-chat-head small { color:#87929e; font-size:8px; }.mentor-messages { display:flex; max-height:310px; flex-direction:column; gap:10px; overflow:auto; padding:13px; }.mentor-message { display:flex; max-width:92%; align-items:flex-start; gap:8px; }.mentor-message-user { align-self:flex-end; flex-direction:row-reverse; }.mentor-message-avatar { display:grid; flex:none; height:25px; width:25px; place-items:center; border-radius:50%; background:#eaf5d4; color:#669223; }.mentor-message-user .mentor-message-avatar { background:#17241b; color:#c1f35b; }.mentor-message p { margin:0; border-radius:8px; padding:9px 11px; background:#f0f6ed; color:#4f6072; font-size:10px; line-height:1.5; }.mentor-message-user p { background:#e8f5bd; color:#3f5d18; }.mentor-message-citations { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }.mentor-message-citations span { display:inline-flex; align-items:center; gap:3px; color:#6f8e2c; font-size:8px; }.mentor-prompts { display:flex; flex-wrap:wrap; gap:5px; padding:0 13px 10px; }.mentor-prompts button { border:1px solid #dce8c6; border-radius:15px; background:#f4fbdc; padding:6px 9px; color:#668621; font-size:8px; }.mentor-composer { display:flex; gap:7px; border-top:1px solid #e7eded; padding:10px; background:#fff; }.mentor-composer input { min-width:0; flex:1; border:1px solid #dce5e6; border-radius:7px; outline:none; padding:9px 10px; color:#536274; font:10px inherit; }.mentor-composer input:focus { border-color:#aee64c; box-shadow:0 0 0 2px #eff8d9; }.mentor-composer button { display:grid; height:34px; width:36px; place-items:center; border:0; border-radius:7px; background:#a9e942; color:#2f500e; } | |
| /* Mock execution controls and investigation run comparison */ | |
| .execution-log-drawer { display:flex; flex-direction:column; gap:6px; margin:12px 0; border:1px solid #e2ebde; border-radius:7px; background:#f5faef; padding:10px; color:#64775f; font-size:9px; }.execution-log-drawer span { display:flex; align-items:center; gap:6px; }.execution-log-drawer svg { color:#75aa2e; }.monitor-controls button:disabled { cursor:not-allowed; opacity:.55; }.compare-run-list { display:flex; flex-direction:column; gap:6px; padding:10px; }.compare-run-list button { display:grid; grid-template-columns:1fr auto 18px; gap:14px; align-items:center; border:1px solid #edf0f1; border-radius:8px; background:#fff; padding:14px; color:#6e7b89; text-align:left; }.compare-run-list button:hover, .compare-run-list .compare-run-selected { border-color:#b4e95c; background:#f2fbd9; }.compare-run-list button span { display:flex; flex-direction:column; gap:5px; }.compare-run-list button b { color:#314158; font-size:11px; }.compare-run-list button small { font-size:9px; }.compare-run-list button strong { color:#2f4d13; font-size:12px; } | |
| .toolbar-search-submit { border:0; background:transparent; color:#85919b; cursor:pointer; font-size:13px; }.filter-chip-active { border-color:#b8e967 ; background:#f0fbd7 ; color:#608522 ; }.toolbar-state { white-space:nowrap; border-radius:5px; background:#f4f7f3; padding:6px 8px; color:#718087; font-size:8px; } | |
| /* Clickable dashboard metric cards retain the reference’s left-aligned content. */ | |
| .metric-card-button { width:100%; border:0; cursor:pointer; font:inherit; text-align:left; } | |
| .metric-card-button .metric-label, .metric-card-button strong, .metric-card-button small { text-align:left; } | |
| .metric-card-button:hover { transform:translateY(-1px); } | |