/* ── THE ANALYSIS MODULE'S OWN LOOK, SHARED BY BOTH APPS ───────────────────── analysis.js renders one module into two very different-looking places: the CRM's dark-and-gold, and the employer workspace's MyIApro navy-and-crimson. What is shared is STRUCTURE — which card lifts on hover, which row wears the picked blue, how big the star is. What is not shared is the SKIN: every value below is a token, and each app supplies its own palette for those tokens. So Ken gets "the coloring theme of the workspace, not the CRM look" without a second copy of the rules that decide what a picked card means. ⚠ THE TOKENS THIS FILE REQUIRES, which every host page must define: --border --border-picked --border-accent --surface-1 --surface-2 --surface-3 --bg-picked --bg-hover --text-muted --text-primary A host that omits one gets an invisible border, not an error, so they are listed here to be checked rather than discovered. */ /* ⚠ A QUOTE CARD ANSWERS THE MOUSE THE WAY A STRIP ROW DOES. Ken, 2026-08-18: "The current plan cards open a details dialog when you click on them. these do nothing!" They do now, and they have to LOOK like they will before the click — an identical card that only sometimes responds is worse than one that never did. Tokens, never hardcoded colours: this page has two themes. */ /* ⚠ ORDER IS THE RULE HERE, NOT SPECIFICITY. `.an-quote-card.is-current` and `.an-quote-card.is-picked` weigh exactly the same, so the one that wins is the one written last — which is why picked and hover come after current. Get this backwards and a current plan can never show either state. */ .an-quote-card { border: 1px solid var(--border); } /* ⚠ A TOKEN PER STATUS, DEFAULTING TO WHAT THIS FILE ALREADY DID. Ken asked for green current cards, darker green renewals and light yellow alternatives — on the WORKSPACE side only, and this stylesheet is shared. So each status names its own token and falls back: --card-current to the raised surface both apps use today, the other two to no background at all, which is what they have now. The CRM defines none of them and is therefore unchanged; my-analysis.html defines all three. ⚠ THESE STAY ABOVE :hover AND .is-picked. Same weight, so the last one written wins — see the note above. Ken: "DO NOT change any of the current mouse over or Selected for compare functionality." Move these below and a current plan could never show either. */ .an-quote-card.is-current { background: var(--card-current, var(--surface-2)); } .an-quote-card.is-renewal { background: var(--card-renewal, transparent); } .an-quote-card.is-alternative { background: var(--card-alternative, transparent); } /* Ken, 2026-08-19: "when a user hovers over a quoted plan card, could we make the background a light blue, and when a plan is selected to compare, (using the checkbox), we keep the light blue background for that selected card until it is Unchecked". One colour for both, because they are one idea — this is the card you are pointing at, or the one you have kept. */ .an-quote-card:hover, .an-quote-card.is-picked { background: var(--bg-picked); border-color: var(--border-picked); } /* ⚠ THE SELECTED BENEFIT LINE WEARS THE SAME BLUE, because it means the same thing: this is the one you have chosen. Ken, 2026-08-19: "I want to also have, in the Benefit tree navigation, the Benefit that is currently selected to have that light blue highlight until it is no longer selected!" It was var(--surface-2) inline — the colour of a raised panel, which says "this row is a surface" rather than "this row is your choice", and on the light theme var(--surface-2) is plain white, so the selection was carried by the bold weight alone. */ .an-tree-line { background: transparent; border: 1px solid transparent; } .an-tree-line:hover { background: var(--bg-hover, rgba(127,127,127,.06)); } .an-tree-line.is-on { background: var(--bg-picked); border-color: var(--border-picked); } /* ⚠ THE RECOMMENDED STAR IS THE AGENT'S OWN OPINION, and the employer sees it — so it is the one mark on this page allowed to be loud. Ken, 2026-08-18: "lets make that star a bit Bigger and lets make it stand out! What would be a good color???" ⚠ NOT var(--text-accent), which is what it wore. That is the CRM's muted antique gold (#c8a84b) and it is ALSO the colour of the status pill the star now sits beside — two golds touching, and the star lost. This is a brighter amber, warm enough to read as a star rather than as another label, and it carries a soft halo so it holds against the pill's tinted background in both themes. Stated rather than tokenised on purpose: no existing token means "this is the one we are recommending", and borrowing one that means something else is how the pill and the star came to be the same colour. */ .an-star { color: #f5b301; font-size: 20px; line-height: 1; flex: none; text-shadow: 0 0 6px rgba(245,179,1,.55); } html.light-theme .an-star { color: #d98f00; text-shadow: 0 0 5px rgba(217,143,0,.35); } /* ⚠ RESET TO LIVE DATA THROWS AWAY EVERYTHING MODELLED, so it must not look like the outline buttons around it. Ken, 2026-08-18: "I want to make sure users don't just go and click on it. it needs to be a Warning type of button!" Amber fill in both themes, and visibly dead when there is nothing to discard rather than merely faded. */ /* ⚠ NOT var(--fill-warning). That token is #f59e0b in BOTH themes — it is never overridden for light — and white text on it lands near 2:1, which is unreadable. A warning nobody can read is decoration. amber-700 carries white at ~4.9:1 and stays unmistakably amber against the dark surface and the light one alike, which is why this one figure is stated rather than taken from a token. */ /* ⚠ CRIMSON, NOT AMBER — Ken, 2026-08-20. var(--crimson) is defined on the workspace side as the IA brand red; the CRM has no such token, so the fallback carries the identical value rather than leaving the button unstyled there. One renderer, one colour, both skins. */ .an-reset { background: var(--crimson, #6e3335); color: #fff; border: 1px solid var(--crimson, #6e3335); font-weight: 700; } .an-reset:hover:not(:disabled) { filter: brightness(1.12); } .an-reset:disabled { background: transparent; color: var(--text-muted); border-color: var(--border); font-weight: 400; opacity: .5; cursor: not-allowed; } /* ⚠ NAVY BESIDE THE CRIMSON, AND THE CONTRAST IS THE MESSAGE. Ken, 2026-08-20: "(with our Navy Blue Color) we can put a button that says Re-Check For Compliance". Reset throws work away; Re-Check only brings questions back. Two buttons an inch apart in the same warning colour would flatten that difference — the harmless one would read as dangerous and, worse, the dangerous one would stop reading as dangerous. Same fallback discipline as .an-reset: --ia is the workspace's navy and the CRM has no such token, so the literal carries the identical value rather than leaving the button unstyled on one of the two skins. */ .an-recheck { background: var(--ia, #1d3557); color: #fff; border: 1px solid var(--ia, #1d3557); font-weight: 700; } .an-recheck:hover { filter: brightness(1.15); } /* ═══ THE ASK MyIAPro DRAWER ════════════════════════════════════════════════ ⚠ MOVED OUT OF index.html 2026-08-20. It only ever existed in the CRM's own