/* Superwagen visual system ยท executive overview, decisions and evidence. Presentation only: source states, ordering, routes and data remain unchanged. */ #homeView, #decisionDetailView, #recommendationHistoryView { --sw-home-ink: #1b2236; --sw-home-muted: #596579; --sw-home-line: #dce2e9; --sw-home-primary: #234a74; --sw-home-canvas: #f4f6f8; gap: 28px; color: var(--sw-home-ink); } #homeView .section-eyebrow, #decisionDetailView .section-eyebrow, #recommendationHistoryView .section-eyebrow { color: var(--sw-home-primary); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; } #homeView .home-cockpit-hero { align-items: center; min-height: 0; padding: 28px 30px; color: var(--sw-home-ink); background: #fff; border: 1px solid var(--sw-home-line); border-radius: 12px; box-shadow: none; } #homeView .home-cockpit-hero-copy { min-width: 0; } #homeView .home-cockpit-hero h2 { max-width: 980px; margin: 9px 0 12px; color: var(--sw-home-ink); font-size: clamp(24px, 2.1vw, 28px); font-weight: 700; line-height: 1.25; text-wrap: pretty; } #homeView .home-cockpit-hero p { max-width: 850px; color: var(--sw-home-muted); font-size: 15px; line-height: 1.6; } #homeView .home-cockpit-live { min-width: 178px; padding: 14px 16px; border: 1px solid var(--sw-home-line); border-radius: 10px; background: var(--sw-home-canvas); } #homeView .home-cockpit-live span { gap: 4px; color: var(--sw-home-muted); font-size: 12px; } #homeView .home-cockpit-live strong { color: var(--sw-home-ink); font-size: 13px; } #homeView .home-cockpit-live > i { color: #087f69; } #homeView .home-cockpit-live.is-partial > i { color: #946000; } #homeView .home-cockpit-live.is-loading > i { color: var(--sw-home-primary); } #homeView .home-ai-disclosure { gap: 12px; margin: -12px 0 0; padding: 12px 16px; color: var(--sw-home-muted); background: transparent; border: 1px solid var(--sw-home-line); border-radius: 10px; } #homeView .home-ai-disclosure > span { color: var(--sw-home-primary); font-size: 12px; } #homeView .home-ai-disclosure p { color: var(--sw-home-muted); font-size: 13px; line-height: 1.5; } #homeView .home-cockpit-section-heading { align-items: flex-end; gap: 20px; margin-bottom: 18px; } #homeView .home-cockpit-section-heading h2 { margin-top: 5px; color: var(--sw-home-ink); font-size: 24px; font-weight: 700; line-height: 1.25; } #homeView .home-cockpit-section-heading > p, #homeView .home-cockpit-heading-actions > p { color: var(--sw-home-muted); font-size: 13px; line-height: 1.55; } #homeView .home-cockpit-heading-actions { flex-wrap: wrap; } #homeView .home-cockpit-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #homeView .home-cockpit-kpi { --home-kpi-accent: #234a74; min-height: 250px; padding: 20px; color: var(--sw-home-ink); background: #fff; border: 1px solid var(--sw-home-line); border-radius: 12px; box-shadow: none; transition: border-color 160ms ease, box-shadow 160ms ease; } #homeView .home-cockpit-kpi.tone-positive { --home-kpi-accent: #087f69; } #homeView .home-cockpit-kpi.tone-negative { --home-kpi-accent: #b03b49; } #homeView .home-cockpit-kpi.tone-watch { --home-kpi-accent: #946000; } #homeView .home-cockpit-kpi:hover, #homeView .home-cockpit-kpi:focus-visible { border-color: #8da5be; box-shadow: 0 5px 18px rgb(16 27 45 / 7%); transform: none; } #homeView .home-cockpit-kpi-top { gap: 10px; color: var(--sw-home-muted); font-size: 12px; font-weight: 700; text-transform: none; } #homeView .home-cockpit-kpi-icon { width: 32px; height: 32px; border-radius: 9px; } #homeView .home-cockpit-kpi-reading { gap: 9px; margin-top: 18px; } #homeView .home-cockpit-kpi-reading > span { min-height: 0; color: var(--sw-home-muted); font-size: 14px; font-weight: 400; line-height: 1.45; } #homeView .home-cockpit-kpi-reading > strong { color: var(--sw-home-ink); font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } #homeView .home-cockpit-kpi-reading > small { padding: 5px 8px; border-radius: 6px; font-size: 12px; line-height: 1.35; } #homeView .home-cockpit-kpi > p { padding-top: 14px; color: var(--sw-home-muted); font-size: 12px; line-height: 1.5; } #homeView .home-kpi-compare span, #homeView .home-kpi-compare strong { font-size: 12px; line-height: 1.4; } #homeView .home-kpi-trend > div, #homeView .home-kpi-context-head, #homeView .home-kpi-context-head strong, #homeView .home-kpi-stack > div:last-child span { color: var(--sw-home-muted); font-size: 12px; line-height: 1.4; } #homeView .home-kpi-context-head { flex-wrap: wrap; gap: 3px 8px; } #homeView .home-kpi-stack-segment b { font-size: 10px; text-shadow: none; } #homeView .home-kpi-skeleton, #homeView .home-decision-skeleton { border: 1px solid var(--sw-home-line); border-radius: 12px; box-shadow: none; } /* Charts retain their series, scales and comparable-period distinctions. */ #homeView .home-performance-groups { gap: 24px; } #homeView .home-performance-group { gap: 18px; padding: 22px; background: #fff; border: 1px solid var(--sw-home-line); border-radius: 12px; } #homeView .home-performance-group.is-post-sales { margin-top: 0; border-top: 1px solid var(--sw-home-line); } #homeView .home-performance-group-heading { align-items: flex-start; } #homeView .home-performance-group-heading span { color: var(--sw-home-muted); font-size: 12px; letter-spacing: .03em; } #homeView .home-performance-group-heading h3 { margin: 5px 0 6px; color: var(--sw-home-ink); font-size: 23px; } #homeView .home-performance-group-heading p { max-width: 850px; color: var(--sw-home-muted); font-size: 14px; line-height: 1.5; } #homeView .home-performance-group-heading > a { min-height: 40px; padding: 9px 13px; color: var(--sw-home-primary); border-color: var(--sw-home-line); border-radius: 8px; font-size: 13px; } #homeView .home-performance-group-heading > a:hover { color: #fff; background: var(--sw-home-primary); border-color: var(--sw-home-primary); } #homeView .home-performance-toolbar { gap: 18px; padding: 16px; background: var(--sw-home-canvas); border: 1px solid var(--sw-home-line); border-radius: 10px; } #homeView .home-performance-filter > span, #homeView .home-performance-select > span { color: var(--sw-home-muted); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; } #homeView .home-performance-segmented { padding: 3px; background: #e8ecf1; border: 1px solid #d8dfe7; border-radius: 9px; } #homeView .home-performance-segmented button { min-height: 36px; padding: 9px 12px; color: var(--sw-home-muted); border-radius: 6px; font-size: 13px; font-weight: 700; } #homeView .home-performance-segmented button.active { color: var(--sw-home-primary); background: #fff; box-shadow: 0 1px 4px rgb(16 27 45 / 8%); } #homeView .home-performance-select select { min-height: 44px; color: var(--sw-home-ink); border-color: #c5cfdc; border-radius: 8px; font-size: 14px; font-weight: 400; } #homeView .home-performance-freshness { max-width: 310px; color: var(--sw-home-muted); } #homeView .home-performance-freshness > span, #homeView .home-performance-freshness strong { font-size: 12px; line-height: 1.5; } #homeView .home-performance-freshness strong { color: var(--sw-home-ink); } #homeView .home-performance-freshness > i { color: #087f69; } #homeView .home-performance-card { border: 1px solid var(--sw-home-line); border-radius: 10px; box-shadow: none; } #homeView .home-performance-card > header { grid-template-columns: minmax(0, 1fr) minmax(140px, auto) minmax(240px, auto); gap: 20px; padding: 22px; } #homeView .home-performance-card-title > span { color: var(--sw-home-muted); font-size: 12px; letter-spacing: .03em; } #homeView .home-performance-card-title h4 { margin: 5px 0; color: var(--sw-home-ink); font-size: 20px; } #homeView .home-performance-card-title p { color: var(--sw-home-muted); font-size: 12px; line-height: 1.45; } #homeView .home-performance-total span, #homeView .home-performance-chart-meta span { color: var(--sw-home-muted); font-size: 12px; line-height: 1.4; } #homeView .home-performance-total strong { margin-top: 4px; color: var(--sw-home-ink); font-size: 29px; font-variant-numeric: tabular-nums; } #homeView .home-performance-chart-meta { gap: 22px; } #homeView .home-performance-chart-meta strong { margin-top: 4px; font-size: 16px; font-variant-numeric: tabular-nums; } #homeView .home-performance-chart-meta .tone-positive { color: #087f69; } #homeView .home-performance-chart-meta .tone-negative { color: #b03b49; } #homeView .home-performance-chart-meta .tone-neutral { color: var(--sw-home-muted); } #homeView .home-performance-chart-wrap { border-top-color: var(--sw-home-line); } #homeView .home-performance-chart-axis { fill: #596579; font-size: 11px; } #homeView .home-performance-chart-grid { stroke: #e2e7ed; } #homeView .home-performance-chart-current { stroke-width: 2.6; } #homeView .home-performance-chart-previous { stroke: color-mix(in srgb, var(--home-performance-series) 60%, #78859a); } #homeView .home-performance-chart-previous-point { stroke: color-mix(in srgb, var(--home-performance-series) 60%, #78859a); } #homeView .home-performance-legend .is-previous i { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--home-performance-series) 60%, #78859a) 0 5px, transparent 5px 8px); } #homeView .home-performance-card > footer { gap: 20px; padding: 18px 22px; border-top-color: var(--sw-home-line); } #homeView .home-performance-legend { gap: 10px 18px; color: var(--sw-home-muted); font-size: 12px; line-height: 1.4; } #homeView .home-performance-projection { row-gap: 3px; border-left-color: var(--sw-home-line); } #homeView .home-performance-projection > span, #homeView .home-performance-projection > small { color: var(--sw-home-muted); font-size: 12px; line-height: 1.45; text-transform: none; } #homeView .home-performance-projection > strong { font-size: 20px; } #homeView .home-performance-projection > em { padding: 4px 8px; font-size: 11px; } #homeView .home-performance-tooltip { max-width: 310px; padding: 13px 15px; background: #101b2d; border-radius: 10px; font-size: 12px; line-height: 1.5; } #homeView .home-performance-tooltip strong { font-size: 13px; } #homeView .home-performance-updating { font-size: 12px; } #homeView .home-performance-empty, #homeView .home-performance-error span, #homeView .home-performance-error button { font-size: 14px; } #homeView .home-performance-error strong { font-size: 15px; } /* The leading proposals read as complete briefs; the remaining agenda is a list. */ #homeView .home-cockpit-featured-heading { gap: 8px 16px; } #homeView .home-cockpit-featured-heading > span { color: var(--sw-home-ink); font-size: 13px; letter-spacing: .02em; } #homeView .home-cockpit-featured-heading > small { color: var(--sw-home-muted); font-size: 13px; line-height: 1.5; } #homeView .home-cockpit-decision-stack { gap: 18px; } #homeView .home-cockpit-decision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } #homeView .home-cockpit-decision-grid .home-simple-decision { display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 24px; background: #fff; border: 1px solid var(--sw-home-line); border-radius: 12px; box-shadow: none; } #homeView .home-cockpit-decision-grid .home-simple-decision:hover, #homeView .home-cockpit-decision-grid .home-simple-decision:focus-visible { border-color: #8da5be; box-shadow: 0 5px 18px rgb(16 27 45 / 7%); transform: none; } #homeView .home-simple-decision-head { gap: 10px; } #homeView .home-simple-decision-rank { width: 36px; height: 36px; flex: 0 0 36px; color: var(--sw-home-primary); background: #edf1f6; border: 1px solid #d7e0ea; border-radius: 9px; font-size: 14px; } #homeView .home-simple-decision-area { color: var(--sw-home-muted); font-size: 12px; line-height: 1.4; text-transform: none; } #homeView .home-simple-decision-arrow { color: var(--sw-home-primary); font-size: 17px; } #homeView .home-simple-decision-main { display: grid; gap: 10px; margin-top: 0; } #homeView .home-simple-decision-main h3 { margin: 0; color: var(--sw-home-ink); font-size: 21px; font-weight: 700; line-height: 1.35; } #homeView .home-simple-decision-dealership { margin-top: 0; padding: 5px 8px; color: var(--sw-home-muted); background: var(--sw-home-canvas); font-size: 12px; } #homeView .home-simple-decision-outcome { display: grid; gap: 4px; margin-top: 0; padding: 0; color: var(--sw-home-ink); background: transparent; border: 0; font-size: 14px; line-height: 1.5; } #homeView .home-simple-decision-outcome small { color: var(--sw-home-muted); font-size: 12px; font-weight: 400; text-transform: none; } #homeView .home-simple-decision-signal { margin: 0; color: var(--sw-home-muted); font-size: 14px; line-height: 1.6; } #homeView .home-simple-decision-action { gap: 8px; padding: 16px; background: var(--sw-home-canvas); border: 1px solid var(--sw-home-line); border-radius: 9px; } #homeView .home-simple-decision-action > span { color: var(--sw-home-primary); font-size: 12px; text-transform: none; } #homeView .home-simple-decision-action > strong { color: var(--sw-home-ink); font-size: 14px; font-weight: 400; line-height: 1.55; } #homeView .home-simple-decision-meta { gap: 14px; margin-top: 0; padding-top: 16px; border-top-color: var(--sw-home-line); } #homeView .home-simple-decision-meta small { color: var(--sw-home-muted); font-size: 12px; font-weight: 400; text-transform: none; } #homeView .home-simple-decision-meta strong { color: var(--sw-home-ink); font-size: 13px; font-weight: 700; line-height: 1.45; } #homeView .home-cockpit-more { gap: 16px; margin-top: 10px; padding-top: 24px; border-top-color: var(--sw-home-line); } #homeView .home-cockpit-more-heading h3 { margin-top: 5px; color: var(--sw-home-ink); font-size: 22px; } #homeView .home-cockpit-more-heading p { margin-top: 8px; color: var(--sw-home-muted); font-size: 14px; line-height: 1.5; } #homeView .home-cockpit-more-count { width: 36px; height: 36px; flex-basis: 36px; color: var(--sw-home-primary); background: #e8eef5; border-radius: 9px; font-size: 14px; } #homeView .home-compact-decision-grid { border-color: var(--sw-home-line); border-radius: 12px; box-shadow: none; } #homeView .home-compact-decision { grid-template-columns: 36px minmax(0, 1fr) minmax(0, .8fr) minmax(110px, .35fr) 18px; gap: 20px; align-items: start; padding: 24px; border-left: 0; border-bottom-color: var(--sw-home-line); } #homeView .home-compact-decision:hover { background: #f8fafc; } #homeView .home-compact-decision-rank { width: 34px; height: 34px; color: var(--sw-home-primary); background: #edf1f6; border: 1px solid #d7e0ea; border-radius: 8px; font-size: 13px; } #homeView .home-compact-decision-kicker { gap: 6px 10px; margin-bottom: 8px; } #homeView .home-compact-decision-kicker > span { color: var(--sw-home-muted); font-size: 12px; font-weight: 400; text-transform: none; } #homeView .home-compact-decision-kicker > span:first-child { color: var(--sw-home-primary); font-weight: 700; } #homeView .home-compact-decision-kicker > span.home-compact-validation { color: #946000; } #homeView .home-compact-decision-body h3 { color: var(--sw-home-ink); font-size: 18px; line-height: 1.4; } #homeView .home-compact-decision-body p { margin-top: 8px; color: var(--sw-home-muted); font-size: 14px; line-height: 1.55; } #homeView .home-compact-decision-step, #homeView .home-compact-decision-owner { gap: 8px; grid-column: auto; padding: 0; border: 0; } #homeView .home-compact-decision-step { padding-left: 20px; border-left: 1px solid var(--sw-home-line); } #homeView .home-compact-decision-step > span, #homeView .home-compact-decision-owner > small { color: var(--sw-home-muted); font-size: 12px; font-weight: 400; text-transform: none; } #homeView .home-compact-decision-step > strong, #homeView .home-compact-decision-owner > strong { color: var(--sw-home-ink); font-size: 13px; font-weight: 400; line-height: 1.55; } #homeView .home-compact-decision-arrow { grid-column: auto; grid-row: auto; color: var(--sw-home-primary); font-size: 17px; } #homeView .home-decision-validation-note { padding: 12px; border-radius: 8px; } #homeView .home-decision-validation-note > span, #homeView .home-decision-validation-note strong { font-size: 12px; line-height: 1.5; } /* Decision detail: neutral reading surface with persistent evidence controls. */ #decisionDetailView { width: 100%; max-width: 1600px; } #decisionDetailView .decision-case-breadcrumb { flex-wrap: wrap; color: var(--sw-home-muted); font-size: 13px; } #decisionDetailView .decision-case-breadcrumb a { color: var(--sw-home-primary); } #decisionDetailView .decision-case-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 310px); gap: 30px; min-height: 0; padding: 30px; color: var(--sw-home-ink); background: #fff; border: 1px solid var(--sw-home-line); border-radius: 12px; box-shadow: none; } #decisionDetailView .decision-case-kicker { gap: 10px; margin-bottom: 18px; } #decisionDetailView .decision-case-rank { color: var(--sw-home-primary); background: #edf1f6; border: 1px solid #d7e0ea; border-radius: 8px; } #decisionDetailView .decision-case-area, #decisionDetailView .decision-case-scope { padding: 6px 9px; color: var(--sw-home-muted); background: #f4f6f8; border-color: var(--sw-home-line); border-radius: 6px; font-size: 12px; line-height: 1.45; text-transform: none; } #decisionDetailView .decision-case-area { color: var(--sw-home-primary); } #decisionDetailView .decision-case-hero h2 { margin-bottom: 14px; color: var(--sw-home-ink); font-size: clamp(26px, 2.3vw, 32px); font-weight: 700; line-height: 1.25; text-wrap: pretty; } #decisionDetailView .decision-case-hero-main > p { color: var(--sw-home-muted); font-size: 15px; line-height: 1.65; } #decisionDetailView .decision-case-context { align-content: start; gap: 6px; padding: 20px; background: var(--sw-home-canvas); border-color: var(--sw-home-line); border-radius: 10px; } #decisionDetailView .decision-case-context > span { margin-top: 12px; color: var(--sw-home-muted); font-size: 12px; font-weight: 400; text-transform: none; } #decisionDetailView .decision-case-context > strong { color: var(--sw-home-ink); font-size: 14px; line-height: 1.5; } #decisionDetailView .decision-case-assistant-button { min-height: 48px; margin-bottom: 4px; padding: 12px; color: #fff; background: var(--sw-home-primary); border-color: var(--sw-home-primary); border-radius: 8px; box-shadow: none; font-size: 13px; font-weight: 700; } #decisionDetailView .decision-case-assistant-button > i { color: #fff; } #decisionDetailView .decision-case-assistant-button:hover { background: #193b61; box-shadow: none; transform: none; } #decisionDetailView .decision-case-validation-notice { color: #725016; background: #fff8e9; border-color: #e2cc9c; border-radius: 8px; } #decisionDetailView .decision-case-validation-notice > i, #decisionDetailView .decision-case-validation-notice strong { color: #725016; } #decisionDetailView .decision-case-validation-notice > span, #decisionDetailView .decision-case-validation-notice strong { font-size: 13px; line-height: 1.5; } #decisionDetailView .decision-case-section { padding: 26px; border-color: var(--sw-home-line); border-radius: 12px; box-shadow: none; } #decisionDetailView .decision-case-section-heading { gap: 24px; margin-bottom: 22px; padding-bottom: 18px; border-bottom-color: var(--sw-home-line); } #decisionDetailView .decision-case-section-heading h2 { margin-top: 5px; color: var(--sw-home-ink); font-size: 23px; font-weight: 700; } #decisionDetailView .decision-case-section-heading > p { color: var(--sw-home-muted); font-size: 13px; line-height: 1.55; } #decisionDetailView .decision-case-explanation-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); gap: 28px; } #decisionDetailView .decision-case-explanation-copy { gap: 16px; } #decisionDetailView .decision-case-explanation-copy > p { color: #39465a; font-size: 15px; line-height: 1.7; } #decisionDetailView .decision-case-explanation-copy .recommendation-visual { padding: 18px; background: var(--sw-home-canvas); border-color: var(--sw-home-line); border-radius: 10px; } #decisionDetailView .decision-case-facts { gap: 12px; } #decisionDetailView .decision-case-fact { grid-template-columns: 30px minmax(0, 1fr); gap: 10px 12px; padding: 16px 36px 16px 16px; background: #fff; border-width: 1px; border-left-width: 3px; border-radius: 9px; } #decisionDetailView .decision-case-fact-index { width: 28px; height: 28px; color: var(--sw-home-muted); border-color: var(--sw-home-line); border-radius: 7px; font-size: 12px; } #decisionDetailView .decision-case-fact-copy > small { color: var(--sw-home-muted); font-size: 12px; font-weight: 700; text-transform: none; } #decisionDetailView .decision-case-fact-copy > p { margin-top: 6px; color: var(--sw-home-muted); font-size: 14px; line-height: 1.55; } #decisionDetailView .decision-case-fact > strong { grid-column: 2; color: var(--sw-home-ink); font-size: 22px; line-height: 1.3; text-align: left; font-variant-numeric: tabular-nums; } #decisionDetailView .decision-case-fact.is-linked:hover, #decisionDetailView .decision-case-fact.is-linked:focus-visible { border-color: #8da5be; box-shadow: 0 3px 12px rgb(16 27 45 / 6%); transform: none; } #decisionDetailView .decision-case-link-icon { color: var(--sw-home-primary); } #decisionDetailView .decision-case-fact.tone-negative { border-left-color: #b03b49; } #decisionDetailView .decision-case-fact.tone-warning { border-left-color: #946000; } #decisionDetailView .decision-case-fact.tone-positive { border-left-color: #087f69; } #decisionDetailView .decision-case-guardrails { padding: 18px; border-color: #e2cc9c; border-radius: 9px; background: #fff9ed; font-size: 14px; line-height: 1.6; } #decisionDetailView .decision-case-worklist-toolbar { flex-wrap: wrap; gap: 18px; } #decisionDetailView .decision-case-worklist-meta strong { color: var(--sw-home-ink); font-size: 18px; } #decisionDetailView .decision-case-worklist-meta span { color: var(--sw-home-muted); font-size: 13px; line-height: 1.5; } #decisionDetailView .decision-case-worklist-actions { flex-wrap: wrap; } #decisionDetailView .decision-case-worklist-status { color: var(--sw-home-muted); background: var(--sw-home-canvas); border-color: var(--sw-home-line); border-radius: 8px; font-size: 14px; } #decisionDetailView .decision-case-table-wrap { border-color: var(--sw-home-line); border-radius: 10px; } #decisionDetailView .decision-case-worklist-table th { padding: 14px 16px; color: var(--sw-home-muted); background: #f4f6f8; border-bottom-color: var(--sw-home-line); font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.4; text-transform: none; } #decisionDetailView .decision-case-worklist-table td { padding: 15px 16px; border-bottom-color: #e7ebf0; font-size: 14px; line-height: 1.5; } #decisionDetailView .decision-case-worklist-table td strong { color: var(--sw-home-ink); font-size: 14px; line-height: 1.5; } #decisionDetailView .decision-case-worklist-table td small { color: var(--sw-home-muted); font-size: 12px; line-height: 1.5; } #decisionDetailView .decision-case-worklist-table td.numeric { font-variant-numeric: tabular-nums; } #decisionDetailView .decision-case-worklist-table td.is-negative strong { color: #b03b49; } #decisionDetailView .decision-case-worklist-table .decision-case-review-cell { background: #fffaf0; } #decisionDetailView .decision-case-worklist-table .decision-case-review-cell strong { color: #725016; } #decisionDetailView .decision-case-review-guide { grid-template-columns: minmax(170px, .25fr) minmax(0, 1fr); gap: 22px; margin-top: 24px; padding-top: 22px; border-top-color: var(--sw-home-line); } #decisionDetailView .decision-case-review-guide h3 { color: var(--sw-home-ink); font-size: 20px; line-height: 1.4; } #decisionDetailView .decision-case-review-guide .decision-case-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #decisionDetailView .decision-case-review-guide .decision-case-check { grid-template-columns: 28px minmax(0, 1fr); padding: 16px; background: var(--sw-home-canvas); border-color: var(--sw-home-line); border-radius: 9px; } #decisionDetailView .decision-case-check strong { color: var(--sw-home-ink); font-size: 14px; line-height: 1.4; } #decisionDetailView .decision-case-check p { color: var(--sw-home-muted); font-size: 14px; line-height: 1.55; } #decisionDetailView .decision-case-traceability { padding: 0; } #decisionDetailView .decision-case-traceability > summary { padding: 20px 24px; color: var(--sw-home-ink); } #decisionDetailView .decision-case-traceability > summary strong { font-size: 16px; } #decisionDetailView .decision-case-traceability > summary small { margin-top: 5px; color: var(--sw-home-muted); font-size: 13px; line-height: 1.5; } #decisionDetailView .decision-case-traceability-body { padding: 20px 24px 24px; border-top-color: var(--sw-home-line); } #decisionDetailView .decision-case-evidence { gap: 14px; } #decisionDetailView .decision-case-evidence > a { padding: 18px; color: var(--sw-home-ink); border-color: var(--sw-home-line); border-radius: 9px; } #decisionDetailView .decision-case-evidence > a:hover { border-color: #8da5be; box-shadow: 0 3px 12px rgb(16 27 45 / 6%); transform: none; } #decisionDetailView .decision-case-evidence-icon { color: var(--sw-home-primary); background: #edf1f6; border-radius: 8px; } #decisionDetailView .decision-case-evidence strong { font-size: 14px; line-height: 1.5; } #decisionDetailView .decision-case-evidence small { margin-top: 6px; color: var(--sw-home-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; } #decisionDetailView .decision-case-footer-actions { margin-top: 22px; padding-top: 20px; border-top-color: var(--sw-home-line); } /* History keeps lifecycle distinctions readable without competing hero colours. */ #recommendationHistoryView .recommendation-history-hero { gap: 24px; padding: 30px; color: var(--sw-home-ink); background: #fff; border: 1px solid var(--sw-home-line); border-radius: 12px; box-shadow: none; } #recommendationHistoryView .recommendation-history-hero h2 { margin: 5px 0 7px; color: var(--sw-home-ink); font-size: clamp(26px, 2.3vw, 32px); font-weight: 700; line-height: 1.25; } #recommendationHistoryView .recommendation-history-hero p { color: var(--sw-home-muted); font-size: 15px; line-height: 1.6; } #recommendationHistoryView .recommendation-history-hero .secondary-button { color: var(--sw-home-primary); background: #fff; border-color: var(--sw-home-line); } #recommendationHistoryView .recommendation-history-summary { border-color: var(--sw-home-line); border-radius: 12px; } #recommendationHistoryView .recommendation-history-summary article { gap: 7px; padding: 22px; border-top-width: 3px; } #recommendationHistoryView .recommendation-history-summary span { color: var(--sw-home-muted); font-size: 12px; font-weight: 700; line-height: 1.5; text-transform: none; } #recommendationHistoryView .recommendation-history-summary strong { color: var(--sw-home-ink); font-size: 32px; font-variant-numeric: tabular-nums; } #recommendationHistoryView .recommendation-history-summary small { color: var(--sw-home-muted); font-size: 12px; line-height: 1.5; } #recommendationHistoryView .recommendation-history-change { gap: 18px; padding: 18px 20px; color: var(--sw-home-muted); background: #edf2f7; border-color: #ccd8e5; border-left: 3px solid var(--sw-home-primary); border-radius: 10px; } #recommendationHistoryView .recommendation-history-change span { font-size: 13px; line-height: 1.55; } #recommendationHistoryView .recommendation-history-change strong { color: var(--sw-home-ink); font-size: 14px; } #recommendationHistoryView .recommendation-history-panel { background: #fff; border-color: var(--sw-home-line); border-radius: 12px; box-shadow: none; } #recommendationHistoryView .recommendation-history-panel-heading { gap: 20px; padding: 24px; } #recommendationHistoryView .recommendation-history-panel-heading h2 { color: var(--sw-home-ink); font-size: 23px; } #recommendationHistoryView .recommendation-history-panel-heading p { color: var(--sw-home-muted); font-size: 13px; line-height: 1.5; } #recommendationHistoryView .recommendation-history-filters { gap: 16px; padding: 20px 24px; background: var(--sw-home-canvas); border-color: var(--sw-home-line); } #recommendationHistoryView .recommendation-history-filters label, #recommendationHistoryView .recommendation-reactivation-dialog label { color: var(--sw-home-muted); font-size: 13px; font-weight: 700; text-transform: none; } #recommendationHistoryView .recommendation-history-filters select, #recommendationHistoryView .recommendation-history-filters input, #recommendationHistoryView .recommendation-reactivation-dialog textarea { min-height: 44px; padding: 10px 12px; color: var(--sw-home-ink); border-color: #c5cfdc; border-radius: 8px; font-size: 14px; font-weight: 400; } #recommendationHistoryView .recommendation-history-item { grid-template-columns: minmax(0, 1fr) minmax(290px, .4fr); border-left-width: 3px; border-bottom-color: var(--sw-home-line); } #recommendationHistoryView .recommendation-history-item-main { gap: 12px; padding: 24px; } #recommendationHistoryView .recommendation-history-status { font-size: 12px; text-transform: none; } #recommendationHistoryView .recommendation-history-item-kicker .tag { font-size: 12px; } #recommendationHistoryView .recommendation-history-item h3 { font-size: 20px; line-height: 1.4; } #recommendationHistoryView .recommendation-history-item h3 a { color: var(--sw-home-ink); } #recommendationHistoryView .recommendation-history-item h3 a:hover { color: var(--sw-home-primary); } #recommendationHistoryView .recommendation-history-item-main > p { color: var(--sw-home-muted); font-size: 14px; line-height: 1.65; } #recommendationHistoryView .recommendation-history-reason, #recommendationHistoryView .recommendation-history-request-note, #recommendationHistoryView .recommendation-history-validation-note { padding: 14px; border-radius: 8px; } #recommendationHistoryView .recommendation-history-reason span, #recommendationHistoryView .recommendation-history-request-note span, #recommendationHistoryView .recommendation-history-validation-note span, #recommendationHistoryView .recommendation-history-reason strong, #recommendationHistoryView .recommendation-history-request-note strong, #recommendationHistoryView .recommendation-history-validation-note strong { font-size: 13px; line-height: 1.55; } #recommendationHistoryView .recommendation-history-item-meta { gap: 16px; padding: 24px; background: #f8f9fb; border-left-color: var(--sw-home-line); } #recommendationHistoryView .recommendation-history-item-meta small { color: var(--sw-home-muted); font-size: 12px; font-weight: 400; text-transform: none; } #recommendationHistoryView .recommendation-history-item-meta strong { color: var(--sw-home-ink); font-size: 13px; line-height: 1.55; } #recommendationHistoryView .recommendation-history-item-actions { gap: 9px; padding-top: 6px; } #recommendationHistoryView .recommendation-history-empty strong { color: var(--sw-home-ink); font-size: 17px; } #recommendationHistoryView .recommendation-history-empty span { color: var(--sw-home-muted); font-size: 14px; } #recommendationHistoryView .recommendation-reactivation-dialog { color: var(--sw-home-ink); border-radius: 12px; box-shadow: 0 24px 80px rgb(16 27 45 / 20%); } #recommendationHistoryView .recommendation-reactivation-dialog::backdrop { background: rgb(16 27 45 / 48%); } #recommendationHistoryView .recommendation-reactivation-dialog form { gap: 18px; padding: 30px; } #recommendationHistoryView .recommendation-reactivation-dialog h2 { color: var(--sw-home-ink); font-size: 25px; line-height: 1.3; } #recommendationHistoryView .recommendation-reactivation-dialog p { color: var(--sw-home-muted); font-size: 14px; line-height: 1.6; } #recommendationHistoryView .recommendation-reactivation-dialog .form-status { font-size: 13px; } #homeView .home-cockpit-kpi:focus-visible, #homeView .home-simple-decision:focus-visible, #homeView .home-compact-decision:focus-visible, #decisionDetailView .decision-case-fact.is-linked:focus-visible, #decisionDetailView .decision-case-evidence > a:focus-visible { outline: 3px solid #1686b3; outline-offset: -3px; } @media (min-width: 1550px) { #homeView .home-cockpit-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* At laptop widths, use the card width before adding another vertical block. */ @media (min-width: 901px) and (max-width: 1549px) { #homeView .home-cockpit-kpi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr); align-content: start; column-gap: 14px; row-gap: 12px; min-height: 0; padding: 18px; } #homeView .home-cockpit-kpi-top { grid-column: 1 / -1; } #homeView .home-cockpit-kpi-reading { grid-column: 1; grid-row: 2; align-content: center; gap: 7px; margin-top: 0; } #homeView .home-cockpit-kpi-reading > strong { font-size: 30px; } #homeView .home-cockpit-kpi-reading > small { padding: 4px 6px; } #homeView .home-cockpit-kpi-reading + div { grid-column: 2; grid-row: 2; align-self: center; min-width: 0; width: 100%; margin: 0; } #homeView .home-cockpit-kpi > p { grid-column: 1 / -1; margin: 0; padding-top: 12px; } #homeView .home-kpi-compare { gap: 9px; height: 82px; margin: 0; } #homeView .home-kpi-compare > div { grid-template-columns: 9px minmax(0, 1fr); column-gap: 5px; } #homeView .home-kpi-compare i { height: 74px; } #homeView .home-kpi-compare span, #homeView .home-kpi-compare strong { font-size: 11px; line-height: 1.45; } #homeView .home-kpi-stack { gap: 10px; padding-top: 0; } #homeView .home-kpi-stack-bar { height: 14px; overflow: visible; } #homeView .home-kpi-stack-segment { position: relative; overflow: visible; } #homeView .home-kpi-stack-segment:first-child { border-radius: 4px 0 0 4px; } #homeView .home-kpi-stack-segment:last-child { border-radius: 0 4px 4px 0; } #homeView .home-kpi-stack-segment b { position: absolute; top: -17px; color: var(--sw-home-muted); font-size: 11px; } #homeView .home-kpi-stack > div:last-child { gap: 5px 8px; } #homeView .home-kpi-stack > div:last-child span { font-size: 11px; } #homeView .home-cockpit-kpi-reading + .home-kpi-composite, #homeView .home-cockpit-kpi-reading + .home-kpi-trend { grid-column: 1 / -1; grid-row: 3; } #homeView .home-kpi-composite .home-kpi-compare { margin-bottom: 10px; } #homeView .home-kpi-gauge { height: 100px; } #homeView .home-kpi-gauge::before { width: 94px; height: 94px; } } @media (max-width: 1280px) { #homeView .home-cockpit-hero { align-items: flex-start; flex-direction: column; gap: 20px; } #homeView .home-cockpit-section-heading { align-items: flex-start; flex-direction: column; gap: 10px; } #homeView .home-cockpit-section-heading > p, #homeView .home-cockpit-heading-actions > p { max-width: 850px; text-align: left; } #homeView .home-cockpit-heading-actions { justify-content: flex-start; } #homeView .home-cockpit-decision-grid { grid-template-columns: 1fr; } #homeView .home-simple-decision-meta { grid-template-columns: 1fr 1fr; } #homeView .home-performance-card > header { grid-template-columns: minmax(0, 1fr) auto; } #homeView .home-performance-chart-meta { grid-column: 1 / -1; justify-content: flex-start; } #homeView .home-performance-chart-meta > div { justify-items: start; } #homeView .home-performance-card > footer { grid-template-columns: 1fr; } #homeView .home-performance-projection { justify-content: start; padding: 14px 0 0; border-top: 1px solid var(--sw-home-line); border-left: 0; text-align: left; } #homeView .home-performance-projection > em { justify-self: start; } #homeView .home-compact-decision { grid-template-columns: 36px minmax(0, 1fr) minmax(0, .85fr) 18px; } #homeView .home-compact-decision-owner { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: baseline; } #homeView .home-compact-decision-arrow { grid-column: 4; grid-row: 1; } #decisionDetailView .decision-case-hero { grid-template-columns: minmax(0, 1fr) 280px; } #decisionDetailView .decision-case-explanation-layout { grid-template-columns: 1fr; } #decisionDetailView .decision-case-review-guide { grid-template-columns: 1fr; } #recommendationHistoryView .recommendation-history-item { grid-template-columns: 1fr; } #recommendationHistoryView .recommendation-history-item-meta { border-left: 0; border-top: 1px solid var(--sw-home-line); } } @media (max-width: 900px) { #homeView .home-cockpit-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #homeView .home-performance-group-heading, #homeView .home-performance-toolbar { align-items: flex-start; flex-direction: column; } #homeView .home-performance-freshness { max-width: none; } #homeView .home-compact-decision { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 16px; } #homeView .home-compact-decision-step { grid-column: 2; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--sw-home-line); } #homeView .home-compact-decision-owner { grid-column: 2; } #homeView .home-compact-decision-arrow { grid-column: 3; grid-row: 1; } #decisionDetailView .decision-case-hero { grid-template-columns: 1fr; } #decisionDetailView .decision-case-context { grid-template-columns: 1fr 1fr; } #decisionDetailView .decision-case-assistant-button { grid-column: 1 / -1; width: fit-content; } #decisionDetailView .decision-case-context > span, #decisionDetailView .decision-case-context > strong { grid-column: auto; margin-top: 0; } #decisionDetailView .decision-case-section-heading { align-items: flex-start; flex-direction: column; gap: 10px; } #decisionDetailView .decision-case-section-heading > p { max-width: none; text-align: left; } #decisionDetailView .decision-case-evidence { grid-template-columns: 1fr; } #recommendationHistoryView .recommendation-history-hero { align-items: flex-start; flex-direction: column; } #recommendationHistoryView .recommendation-history-panel-heading { align-items: flex-start; flex-direction: column; } } @media (max-width: 600px) { #homeView, #decisionDetailView, #recommendationHistoryView { gap: 22px; } #homeView .home-cockpit-hero, #decisionDetailView .decision-case-hero, #recommendationHistoryView .recommendation-history-hero { padding: 22px 18px; } #homeView .home-cockpit-hero h2, #decisionDetailView .decision-case-hero h2, #recommendationHistoryView .recommendation-history-hero h2 { font-size: 26px; } #homeView .home-cockpit-section-heading h2 { font-size: 22px; } #homeView .home-cockpit-kpi-grid { grid-template-columns: 1fr; } #homeView .home-cockpit-kpi { min-height: 0; } #homeView .home-cockpit-kpi > p { margin-top: 14px; } #homeView .home-performance-group { padding: 16px; } #homeView .home-performance-controls { width: 100%; } #homeView .home-performance-segmented { flex-wrap: wrap; overflow: visible; } #homeView .home-performance-segmented button { flex: 1 1 auto; } #homeView .home-performance-card > header { grid-template-columns: 1fr; padding: 18px; } #homeView .home-performance-total { justify-items: start; } #homeView .home-performance-chart-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #homeView .home-performance-chart-meta > div { min-width: 0; } #homeView .home-performance-card > footer { padding: 16px 18px; } #homeView .home-cockpit-decision-grid .home-simple-decision { padding: 20px; } #homeView .home-simple-decision-main h3 { font-size: 20px; } #homeView .home-simple-decision-meta { grid-template-columns: 1fr; } #homeView .home-compact-decision { gap: 12px; padding: 20px 16px; } #homeView .home-compact-decision-body h3 { font-size: 18px; } #decisionDetailView .decision-case-context { grid-template-columns: 1fr; gap: 6px; } #decisionDetailView .decision-case-context > span { margin-top: 12px; } #decisionDetailView .decision-case-assistant-button { width: 100%; } #decisionDetailView .decision-case-section { padding: 20px 16px; } #decisionDetailView .decision-case-section-heading h2 { font-size: 21px; } #decisionDetailView .decision-case-fact { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px 32px 14px 12px; } #decisionDetailView .decision-case-worklist-actions { width: 100%; } #decisionDetailView .decision-case-worklist-actions > a { flex: 1 1 100%; white-space: normal; } #decisionDetailView .decision-case-review-guide .decision-case-checks { grid-template-columns: 1fr; } #decisionDetailView .decision-case-traceability { padding: 0; } #decisionDetailView .decision-case-traceability > summary { padding: 18px 16px; } #decisionDetailView .decision-case-traceability-body { padding: 16px; } #decisionDetailView .decision-case-evidence > a { grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 10px; padding: 14px; } #decisionDetailView .decision-case-evidence-icon { width: 32px; height: 32px; } #decisionDetailView .decision-case-footer-actions { justify-content: stretch; } #decisionDetailView .decision-case-footer-actions > a { flex: 1 1 100%; white-space: normal; } #recommendationHistoryView .recommendation-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #recommendationHistoryView .recommendation-history-summary article { padding: 18px; } #recommendationHistoryView .recommendation-history-summary article:nth-child(even) { border-left: 1px solid var(--sw-home-line); } #recommendationHistoryView .recommendation-history-summary article:nth-child(odd) { border-left: 0; } #recommendationHistoryView .recommendation-history-summary strong { font-size: 28px; } #recommendationHistoryView .recommendation-history-panel-heading, #recommendationHistoryView .recommendation-history-filters, #recommendationHistoryView .recommendation-history-item-main, #recommendationHistoryView .recommendation-history-item-meta { padding: 20px 16px; } #recommendationHistoryView .recommendation-history-filters { grid-template-columns: 1fr; } #recommendationHistoryView .recommendation-history-item-meta { grid-template-columns: 1fr; } #recommendationHistoryView .recommendation-reactivation-dialog form { padding: 24px 20px; } #recommendationHistoryView .recommendation-reactivation-dialog .dialog-actions { flex-wrap: wrap; } } @media (max-width: 760px) { #homeView .home-performance-select select, #recommendationHistoryView .recommendation-history-filters select, #recommendationHistoryView .recommendation-history-filters input, #recommendationHistoryView .recommendation-reactivation-dialog textarea { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { #homeView .home-cockpit-kpi, #homeView .home-simple-decision, #homeView .home-compact-decision, #decisionDetailView .decision-case-fact, #decisionDetailView .decision-case-evidence > a, #decisionDetailView .decision-case-assistant-button { transition: none; } }