/* Decision cards extend the existing workspace; every rule is route scoped. */ :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-ai-hero { grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr); align-items: start; border-top: 3px solid #008f78; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-ai-hero h2 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.2; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-cut { padding-left: 20px; border-left: 1px solid #d9e4e8; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-cut > span { font-size: 12px; font-weight: 700; color: #526477; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-cut p { margin: 5px 0 0; font-size: 13px; line-height: 1.6; color: #42566d; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-summary > summary { width: fit-content; padding-block: 8px; font-size: 14px; font-weight: 700; color: #0057a8; cursor: pointer; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-freshness { display: flex; gap: 12px; align-items: start; padding: 16px 20px; border: 1px solid #e2c68e; border-radius: 8px; background: #fff7e8; color: #664716; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-freshness > i { margin-top: 2px; font-size: 20px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-freshness strong { font-size: 15px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-freshness p { margin: 4px 0 0; max-width: 100ch; font-size: 14px; line-height: 1.5; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-ai-priorities { background: transparent; border: 0; box-shadow: none; overflow: visible; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-ai-priorities > .panel-header { padding-inline: 0; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-list { display: grid; gap: 16px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; padding: 22px 24px 0; border: 1px solid #cedae5; border-radius: 10px; background: #fff; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-card.has-impact { grid-template-columns: minmax(0, 1fr) minmax(210px, .34fr); } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-main { min-width: 0; padding-bottom: 20px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 700; color: #4c6277; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: #001e50; font-size: 13px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-status { padding: 4px 8px; border-radius: 5px; color: #526477; background: #eff3f6; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-status.is-ready { color: #186253; background: #eaf5ef; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-status.is-needs_validation, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-status.is-stale { color: #76501a; background: #fff1d5; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-card h3 { margin: 10px 0 8px; color: #001e50; font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-why { margin: 0; max-width: 90ch; color: #304b64; font-size: 15px; line-height: 1.55; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-ranking { margin: 8px 0 0; max-width: 90ch; color: #536579; font-size: 13px; line-height: 1.55; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-ranking strong { font-weight: 700; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-action .primary-button { min-height: 44px; white-space: normal; text-align: left; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-action > small { font-size: 12px; color: #536579; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-period { display: block; margin-top: 4px; color: #536579; font-size: 12px; font-weight: 400; line-height: 1.5; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-action > .sales-decision-period { flex-basis: 100%; margin-top: 0; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-unavailable { display: block; color: #6b521f; font-size: 13px; line-height: 1.5; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact { display: grid; align-content: start; gap: 7px; padding: 16px; margin-bottom: 20px; border: 1px solid #dce5ed; border-radius: 8px; background: #f6f9fb; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact > span { font-size: 13px; font-weight: 700; color: #455e75; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact > strong { color: #173954; font-size: clamp(25px, 2.3vw, 31px); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact.is-negative > strong { color: #a82e40; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact small { font-size: 12px; line-height: 1.5; color: #536579; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail { grid-column: 1 / -1; min-width: 0; border-top: 1px solid #e0e7ee; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail > summary { padding: 14px 0; color: #0057a8; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 48px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail-body { display: grid; gap: 20px; padding: 4px 0 22px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail-body h4 { margin: 0 0 7px; color: #203e59; font-size: 14px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail-body p, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail-body li { margin-block: 0; color: #40586e; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail-body ul, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail-body ol { margin: 0; padding-left: 22px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-detail-body li + li { margin-top: 5px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-blockers { padding: 14px 16px; border-left: 3px solid #cfa34b; background: #fff9ed; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-facts, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-ownership { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-facts > div, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-ownership > div { padding: 12px 14px; border: 1px solid #e0e7ee; border-radius: 6px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-facts dt, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-ownership dt { color: #536579; font-size: 12px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-facts dd, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-ownership dd { margin: 4px 0 0; color: #253f58; font-size: 14px; line-height: 1.5; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-facts dd { font-weight: 700; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-sources { display: grid; gap: 8px; margin-top: 10px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-source { border: 1px solid #d9e4ed; border-radius: 6px; background: #fbfdfe; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-source > summary { min-height: 44px; padding: 12px 14px; color: #235071; font-size: 14px; line-height: 1.45; cursor: pointer; overflow-wrap: anywhere; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-source > div { display: grid; gap: 9px; padding: 0 14px 14px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-source p { margin: 0; color: #40586e; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-source .sales-decision-source-origin { color: #657487; font-size: 12px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-source a, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap a { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 44px; color: #0057a8; font-size: 14px; font-weight: 700; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap { overflow-x: auto; border: 1px solid #dce5ed; border-radius: 6px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap table { width: 100%; min-width: 590px; border-collapse: collapse; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap caption { padding: 12px; color: #304b64; background: #f6f9fb; text-align: left; font-size: 13px; font-weight: 700; line-height: 1.5; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap th, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap td { padding: 10px 12px; border-bottom: 1px solid #e0e7ee; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap th:first-child, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap td:last-child { text-align: left; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-table-wrap thead { background: #f1f6fa; color: #425d75; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-support { padding: 0 20px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-support > summary { min-height: 52px; padding-block: 16px; font-size: 15px; font-weight: 700; color: #26435e; cursor: pointer; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-support > div { margin-bottom: 20px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) :is(summary, a, [tabindex]):focus-visible { outline: 3px solid #1686b3; outline-offset: 3px; } @media (max-width: 980px) { :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-ai-hero { grid-template-columns: minmax(0, 1fr); gap: 15px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-cut { padding: 12px 0 0; border-left: 0; border-top: 1px solid #d9e4e8; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-card.has-impact { grid-template-columns: minmax(0, 1fr); } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact > strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact > small:last-child { grid-column: 1 / -1; } } @media (max-width: 540px) { :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-card { padding: 16px 16px 0; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-card h3 { font-size: 20px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact { grid-template-columns: minmax(0, 1fr); } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-impact > strong { grid-column: auto; grid-row: auto; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-action { align-items: stretch; flex-direction: column; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-action .primary-button { justify-content: space-between; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-support { padding-inline: 16px; } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-facts, :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-ownership { grid-template-columns: minmax(0, 1fr); } :is(#salesAiView, #goldfingerAiView, #inventoryAiView, #commercialAiView) .sales-decision-freshness { padding: 14px; } } #goldfingerAiView .post-sales-decision-breakdown { display: grid; gap: 12px; } #goldfingerAiView .post-sales-decision-breakdown > article { padding: 14px; border: 1px solid #dce5ed; border-radius: 6px; } #goldfingerAiView .post-sales-decision-breakdown h5 { margin: 0 0 10px; color: #253f58; font-size: 14px; } #goldfingerAiView .post-sales-decision-breakdown a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #0057a8; font-weight: 700; font-size: 14px; } #goldfingerAiView .sales-decision-freshness[hidden] { display: none; } #inventoryAiView .inventory-decision-breakdown { display: grid; gap: 12px; } #inventoryAiView .inventory-decision-breakdown > article { padding: 14px; border: 1px solid #dce5ed; border-radius: 6px; } #inventoryAiView .inventory-decision-breakdown h5 { margin: 0 0 10px; color: #253f58; font-size: 14px; } #inventoryAiView .inventory-decision-breakdown a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #0057a8; font-weight: 700; font-size: 14px; } #commercialAiView .campaign-decision-conditions { margin: 14px 0; padding: 12px 14px; border-left: 3px solid #cfa34b; background: #fff9ed; font-size: 14px; line-height: 1.55; color: #40586e; } #commercialAiView .campaign-decision-conditions > strong { color: #5e481c; } #commercialAiView .campaign-decision-conditions ul { padding-left: 20px; margin: 6px 0 0; } #commercialAiView .campaign-decision-conditions li + li { margin-top: 4px; } #commercialAiView .campaign-decision-condition-note { color: #526477; font-size: 14px; line-height: 1.6; } #commercialAiView .campaign-decision-dates { display: grid; gap: 5px; margin-top: 12px; color: #526477; font-size: 12px; line-height: 1.6; } #commercialAiView .campaign-case-link { color: #0057a8; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; } #commercialAiView .campaign-requirement-details { display: grid; gap: 12px; } #commercialAiView .campaign-requirement-details span { display: block; color: #526477; } #commercialAiView .sales-decision-freshness[hidden] { display: none; } #commercialAiView .sales-decision-main { min-width: 0; } #commercialAiView .sales-decision-impact strong { overflow-wrap: anywhere; } #commercialAiView .campaign-decision-conditions p { margin: 8px 0 0; font-size: 12px; color: #526477; } #commercialAiView .campaign-conditions-open { border: 0; background: none; padding: 6px 0 0; min-height: 44px; color: #0057a8; font: inherit; font-weight: 700; text-align: left; cursor: pointer; } #commercialAiView .campaign-conditions-open:focus-visible { outline: 3px solid #1686b3; outline-offset: 3px; } #commercialAiView .campaign-decision-conditions ul { display: flex; flex-wrap: wrap; gap: 4px 24px; } #commercialAiView .campaign-benefit-component { display: block; } #commercialAiView .campaign-benefit-component + .campaign-benefit-component { margin-top: 7px; } #commercialAiView .campaign-validation-summary { margin: 14px 0; font-size: 14px; line-height: 1.55; } #commercialAiView .campaign-validation-summary section { padding: 12px 14px; border-left: 3px solid #cfa34b; background: #fff9ed; } #commercialAiView .campaign-validation-summary .campaign-validation-verified { background: #edf7f4; border-color: #338474; } #commercialAiView .campaign-validation-summary section + section { margin-top: 8px; } #commercialAiView .campaign-validation-verified ul { display: grid; gap: 4px; padding: 0; margin: 8px 0 0; list-style: none; } #commercialAiView .campaign-validation-verified li { display: flex; flex-wrap: wrap; column-gap: 10px; justify-content: space-between; } #commercialAiView .campaign-validation-verified li strong { font-size: 12px; color: #225b50; } #commercialAiView .campaign-validation-pending dl { margin: 8px 0 0; display: grid; gap: 7px; } #commercialAiView .campaign-validation-pending dt { font-weight: 700; color: #604c24; } #commercialAiView .campaign-validation-pending dd { margin: 0; color: #526477; overflow-wrap: anywhere; } #commercialAiView .campaign-requirement-details [data-check-assessment="failed"] { color: #9b3232; font-weight: 700; } #commercialAiView .campaign-requirement-details [data-check-assessment="not_applicable"] { color: #526477; }