/* One81 design system for Health-Bot-FE. Ported from one81web/styles/one81-design-system.css (same tokens + standards). Load order: this file is linked LAST in index.html (after style.css / main.css / all.min.css) so it wins by source order. Component rules are scoped to `body.one81-system` (the class is set on in index.html), so the whole bot picks up the tokens with minimal !important. Scope: FOUNDATION + STANDARD CONTROLS only (tokens, Satoshi font, base text, buttons + inputs + text). The chat bubbles / response components (Health.css) are intentionally NOT restyled here. */ /* ========================================================================= SATOSHI — loaded from Fontshare CDN (per-weight so browsers pick the exact woff2 without synthesising). ========================================================================= */ @font-face { font-family: 'Satoshi'; src: url('//cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'), url('//cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('//cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2'), url('//cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('//cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2'), url('//cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('//cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2'), url('//cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('//cdn.fontshare.com/wf/NHPGVFYUXYXE33DZ75OIT4JFGHITX5PE/PSUTMASCDJTVPERDYJZPN23BVUFUCQIF/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff2') format('woff2'), url('//cdn.fontshare.com/wf/NHPGVFYUXYXE33DZ75OIT4JFGHITX5PE/PSUTMASCDJTVPERDYJZPN23BVUFUCQIF/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* ========================================================================= POPPINS → SATOSHI BRIDGE. The bot's chat font falls back to "Poppins" (--chat-font-family: var(--font, "Poppins", sans-serif)). Re-point the "Poppins" @font-face at Satoshi so any Poppins fallback renders Satoshi. Reversible: delete this block to restore real Poppins. ========================================================================= */ @font-face { font-family: "Poppins"; src: url('//cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2'), url('//cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url('//cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2'), url('//cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url('//cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2'), url('//cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff') format('woff'); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url('//cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'), url('//cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } /* ========================================================================= DESIGN TOKENS (neutral one81 palette). Same names/values as one81web. Change a token here to re-theme the bot. ========================================================================= */ :root { --color-neutral-0: #FFFFFF; --color-neutral-50: #FAFAFA; --color-neutral-100: #F4F5F6; --color-neutral-200: #EAEBED; --color-neutral-300: #DBDEE0; --color-neutral-400: #C6CACE; --color-neutral-500: #AFB4BA; --color-neutral-600: #989FA6; --color-neutral-700: #7F8790; --color-neutral-800: #667085; --color-neutral-900: #4D5965; --color-neutral-900-rgb: 77, 89, 101; --color-text-inverse: #FFFFFF; --status-error: #B42318; --status-error-strong: #8F1D14; --status-error-bg: #FDECEC; --status-success: #027A48; --status-success-bg: #ECFDF3; --status-info: #175CD3; --status-info-bg: #EFF6FF; --status-warning: #7A2E0E; --status-warning-bg: #FFF4E5; --text-default: var(--color-neutral-900); --text-strong: var(--color-neutral-900); --text-muted: var(--color-neutral-800); --text-subtle: var(--color-neutral-700); --text-disabled: var(--color-neutral-700); --text-inverse: var(--color-text-inverse); --link-default: var(--status-info); --surface-page: var(--color-neutral-0); --surface-card: var(--color-neutral-0); --surface-raised: var(--color-neutral-50); --surface-soft: var(--color-neutral-200); --surface-hover: var(--color-neutral-200); --surface-active: var(--color-neutral-300); --surface-disabled: var(--color-neutral-100); --border-subtle: var(--color-neutral-200); --border-default: var(--color-neutral-300); --border-strong: var(--color-neutral-800); --border-focus: var(--color-neutral-900); --font-family-sans: Satoshi, Segoe UI, Arial, sans-serif; --font-family-mono: Consolas, SFMono-Regular, monospace; /* Component-library brand accent (Health.css). One control point for the whole chat/response component set (buttons, borders, focus rings, selected states, tinted backgrounds). Defaults to the neutral one81 palette. → For a BLUE accent instead, set: --brand-accent: var(--status-info); and --brand-accent-rgb: 23, 92, 211; */ --brand-accent: var(--color-neutral-900); --brand-accent-rgb: var(--color-neutral-900-rgb); --type-h1-size: 40px; --type-h1-line: 48px; --type-h1-weight: 700; --type-h2-size: 32px; --type-h2-line: 40px; --type-h2-weight: 700; --type-h3-size: 26px; --type-h3-line: 34px; --type-h3-weight: 700; --type-h4-size: 20px; --type-h4-line: 28px; --type-h4-weight: 700; --type-card-title-size: 22px; --type-card-title-line: 30px; --type-card-title-weight: 700; --type-content-title-size: 18px; --type-content-title-line: 26px; --type-content-title-weight: 700; --type-body-lg-size: 18px; --type-body-lg-line: 28px; --type-body-size: 16px; --type-body-line: 24px; --type-body-sm-size: 14px; --type-body-sm-line: 21px; --type-label-size: 14px; --type-label-line: 20px; --type-label-weight: 650; --type-caption-size: 12px; --type-caption-line: 16px; --type-caption-weight: 500; --type-form-helper-size: 12px; --type-form-helper-line: 16px; --type-form-helper-weight: 500; --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(var(--color-neutral-900-rgb), .08); --shadow-md: 0 8px 24px rgba(var(--color-neutral-900-rgb), .12); --shadow-lg: 0 16px 48px rgba(var(--color-neutral-900-rgb), .18); --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 260ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --focus-ring: 2px solid var(--border-focus); --focus-offset: 2px; --button-height-sm: 36px; --button-height-md: 44px; --button-height-lg: 52px; --button-padding-x-sm: 12px; --button-padding-x-md: 20px; --button-padding-x-lg: 24px; --button-primary-bg: var(--color-neutral-200); --button-primary-bg-hover: var(--color-neutral-300); --button-primary-bg-active: var(--color-neutral-300); --button-primary-text: var(--color-neutral-900); --button-primary-border: transparent; --button-secondary-bg: var(--color-neutral-0); --button-secondary-bg-hover: var(--color-neutral-100); --button-secondary-text: var(--color-neutral-900); --button-secondary-border: var(--color-neutral-400); --button-disabled-bg: var(--color-neutral-100); --button-disabled-text: var(--color-neutral-700); --field-height: 56px; --field-height-compact: 44px; --field-bg: var(--color-neutral-0); --field-bg-disabled: var(--color-neutral-100); --field-border: var(--color-neutral-700); --field-border-hover: var(--color-neutral-900); --field-border-focus: var(--color-neutral-900); --field-border-error: var(--status-error); --field-text: var(--color-neutral-900); --field-placeholder: var(--color-neutral-700); --field-helper: var(--color-neutral-800); } /* ========================================================================= LEGACY VARIABLE BRIDGE — remap the bot's existing vars onto tokens so the whole bot re-themes from the tokens above. (Bot vars found in style.css: --font, --chat-font-family, --chat-text-color, --theme_clr, --theme_light_clr.) ========================================================================= */ body.one81-system { --font: var(--font-family-sans); --chat-font-family: var(--font-family-sans); --chat-text-color: var(--text-default); --theme_clr: var(--color-neutral-300); --theme_light_clr: var(--color-neutral-100); } /* ========================================================================= BASE FOUNDATION — Satoshi everywhere, neutral text colour. ========================================================================= */ /* Embedded-iframe scroll containment: keep the bot's scroll INSIDE the iframe so it never chains to the parent page (fixes "scrolling the bot scrolls the host"). BODY becomes the single scroll container sized to the iframe viewport, and overscroll-behavior:contain stops any scroll from leaking to the parent. NOTE: the iframe must have a fixed height on the host (bot-script.js) — otherwise there is nothing to scroll internally and the parent will still move. */ html { height: 100%; overflow: hidden; /* html itself doesn't scroll … */ overscroll-behavior: contain; } body.one81-system { height: 100%; overflow-y: auto; /* … BODY is the scroll container … */ overscroll-behavior: contain; /* … and its scroll can't chain to the parent. */ -webkit-overflow-scrolling: touch; } body.one81-system { font-family: var(--font-family-sans); color: var(--text-default); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.one81-system h1, body.one81-system h2, body.one81-system h3, body.one81-system h4, body.one81-system h5, body.one81-system h6 { font-family: var(--font-family-sans); } /* Form controls don't inherit font-family by default — pull them onto Satoshi. */ body.one81-system button, body.one81-system input, body.one81-system select, body.one81-system textarea, body.one81-system optgroup { font-family: inherit; } body.one81-system a { color: var(--brand-accent); text-underline-offset: 3px; } body.one81-system :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* ========================================================================= STANDARD BUTTONS — bot classes: .btn, .btn-botton, .send_btn, submit buttons. Primary style (neutral). .link-btn = text-link style. ========================================================================= */ body.one81-system .btn, body.one81-system .btn-botton, body.one81-system .send_btn, body.one81-system button[type="submit"] { min-height: var(--button-height-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--button-primary-border); border-radius: var(--radius-sm); padding: 0 var(--button-padding-x-md); background: var(--button-primary-bg); color: var(--button-primary-text); font-family: var(--font-family-sans); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); text-decoration: none; cursor: pointer; transition: background var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } body.one81-system .btn:hover, body.one81-system .btn-botton:hover, body.one81-system .send_btn:hover, body.one81-system button[type="submit"]:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-text); } body.one81-system .btn:active, body.one81-system .btn-botton:active, body.one81-system .send_btn:active, body.one81-system button[type="submit"]:active { background: var(--button-primary-bg-active); transform: translateY(1px); } body.one81-system .btn:disabled, body.one81-system .btn.disabled, body.one81-system .btn-botton:disabled, body.one81-system .send_btn:disabled, body.one81-system button[type="submit"]:disabled, body.one81-system [aria-disabled="true"] { background: var(--button-disabled-bg); border-color: var(--border-default); color: var(--button-disabled-text); cursor: not-allowed; transform: none; } /* Text-link style button */ body.one81-system .link-btn { display: inline-block; min-height: 0; padding: 0; border: none; background: transparent; color: var(--link-default); font-family: var(--font-family-sans); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* ========================================================================= STANDARD INPUTS — bot wrappers: .input-field input/textarea, .input_box .input. ========================================================================= */ body.one81-system .input-field input, body.one81-system .input-field textarea, body.one81-system .input_box .input, body.one81-system input[type="text"], body.one81-system input[type="email"], body.one81-system input[type="password"], body.one81-system input[type="number"], body.one81-system input[type="search"], body.one81-system input[type="tel"], body.one81-system textarea, body.one81-system select { min-height: var(--field-height-compact); border: 1px solid var(--field-border); border-radius: var(--radius-sm); padding: 0 var(--space-4); background: var(--field-bg); color: var(--field-text); box-shadow: none; font-family: var(--font-family-sans); font-size: var(--type-body-size); line-height: var(--type-body-line); transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); } body.one81-system textarea { min-height: calc(var(--field-height-compact) * 2); padding-top: var(--space-3); resize: vertical; } body.one81-system .input-field input::placeholder, body.one81-system .input-field textarea::placeholder, body.one81-system input::placeholder, body.one81-system textarea::placeholder { color: var(--field-placeholder); } body.one81-system .input-field input:hover, body.one81-system input:hover, body.one81-system textarea:hover, body.one81-system select:hover { border-color: var(--field-border-hover); } body.one81-system .input-field input:focus, body.one81-system input:focus, body.one81-system textarea:focus, body.one81-system select:focus { outline: none; border-color: var(--field-border-focus); box-shadow: none; } body.one81-system .required-field input, body.one81-system [aria-invalid="true"] { border-color: var(--field-border-error); box-shadow: 0 0 0 1px var(--field-border-error); } /* ========================================================================= STANDARD TEXT — labels, helper/error text. ========================================================================= */ body.one81-system label, body.one81-system .input-field label, body.one81-system .form-label { color: var(--text-default); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); } body.one81-system .error-msg, body.one81-system .signin-error, body.one81-system .text-danger { color: var(--status-error); font-size: var(--type-form-helper-size); line-height: var(--type-form-helper-line); font-weight: var(--type-form-helper-weight); } /* ========================================================================= HARDCODED-BLACK OVERRIDES. style.css hard-codes #191919 as literals (not vars), so the token bridge can't reach them. Re-point the visible ones at the neutral tokens. Add more selectors here if other black spots surface. ========================================================================= */ /* Header title + subtitle (style.css .main_hdr .hdr_logo h1/p = #191919) */ body.one81-system .main_hdr .hdr_logo h1 { color: var(--text-default); } body.one81-system .main_hdr .hdr_logo p { color: var(--text-muted); } /* Care-menu chips — clean bordered light pill (match reference): thin neutral border, subtle shadow, slate semibold label. */ body.one81-system .help-tags .tag-row .tag { border: 1px solid var(--border-default, #DBDEE0); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); background-color: var(--surface-card, #fff); transition: border-color var(--motion-fast, 120ms) var(--ease-standard, ease), background-color var(--motion-fast, 120ms) var(--ease-standard, ease); } body.one81-system .help-tags .tag-row .tag:hover { border-color: var(--border-strong, #667085); background-color: var(--surface-raised, #FAFAFA); } body.one81-system .help-tags .tag-row .tag p { font-weight: 500; color: var(--text-default); } /* Chip icons are single-colour SVG (black fill) — recolour to neutral slate via filter. (Brand logo .hdr_logo img is untouched.) */ body.one81-system .help-tags .tag img { filter: brightness(0) saturate(100%) invert(37%) sepia(11%) saturate(627%) hue-rotate(165deg) brightness(95%) contrast(88%); } /* react-select dropdown (classNamePrefix="symptom-list") — token-based control, focus, menu and options. !important beats react-select's inline emotion styles. */ body.one81-system .symptom-list__control { min-height: var(--field-height, 56px) !important; height: auto !important; border: 1px solid var(--field-border, #7F8790) !important; border-radius: var(--radius-sm, 8px) !important; padding: 0 var(--space-4, 16px) !important; background: var(--field-bg, #fff) !important; color: var(--field-text, #4D5965) !important; box-shadow: none !important; font-family: var(--font-family-sans) !important; font-size: var(--type-body-size, 16px) !important; line-height: var(--type-body-line, 24px) !important; transition: background var(--motion-base, 180ms) var(--ease-standard, ease), border-color var(--motion-base, 180ms) var(--ease-standard, ease), box-shadow var(--motion-base, 180ms) var(--ease-standard, ease) !important; } body.one81-system .symptom-list__control:hover { border-color: var(--field-border-hover, #4D5965) !important; } body.one81-system .symptom-list__control--is-focused, body.one81-system .symptom-list__control--menu-is-open { outline: none !important; border-color: var(--field-border-focus, #4D5965) !important; box-shadow: none !important; } body.one81-system .symptom-list__placeholder { color: var(--field-placeholder, #7F8790) !important; } body.one81-system .symptom-list__single-value { color: var(--field-text, #4D5965) !important; } body.one81-system .symptom-list__indicator { color: var(--text-muted, #667085) !important; } body.one81-system .symptom-list__indicator-separator { background-color: var(--border-default, #DBDEE0) !important; } body.one81-system .symptom-list__menu { background: var(--surface-card, #fff) !important; border: 1px solid var(--border-default, #DBDEE0) !important; border-radius: var(--radius-md, 10px) !important; box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,.14)) !important; overflow: hidden !important; } body.one81-system .symptom-list__option { color: var(--text-default, #4D5965) !important; cursor: pointer !important; } body.one81-system .symptom-list__option--is-focused { background-color: var(--surface-hover, #EAEBED) !important; } body.one81-system .symptom-list__option--is-selected { background-color: var(--brand-accent, #4D5965) !important; color: var(--text-inverse, #fff) !important; } /* Search send button — was a baked dark PNG; now an inline SVG icon in a token button (brand-accent square, white icon, radius-sm). */ body.one81-system .search_bar .search-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; background: var(--brand-accent, #4D5965); color: var(--text-inverse, #fff); border-radius: var(--radius-sm, 8px); cursor: pointer; transition: background var(--motion-base, 180ms) var(--ease-standard, ease); } body.one81-system .search_bar .search-btn:hover { background: var(--color-neutral-800, #667085); } body.one81-system .search_bar .search-btn.disabled { background: var(--button-disabled-bg, #F4F5F6); color: var(--button-disabled-text, #7F8790); cursor: not-allowed; pointer-events: none; } body.one81-system .search_bar .search-btn__icon { width: 18px; height: 18px; color: inherit; } /* ── Rating popup: primary/secondary buttons + responsive ────────────────── */ /* Modal box: fluid width, responsive padding. */ body.one81-system .rating-popup .modal_box { width: min(100%, 500px) !important; max-width: 500px !important; padding: clamp(20px, 5vw, 30px) !important; box-sizing: border-box; } /* Actions row: primary + secondary side by side, wraps/stacks on narrow. */ body.one81-system .rating-popup .rating-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-3, 12px); flex-wrap: wrap; margin-top: var(--space-5, 20px); } /* Submit = PRIMARY button. */ body.one81-system .rating-popup .submit-button { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 140px; min-height: var(--button-height-md, 44px); margin: 0 !important; padding: 0 var(--button-padding-x-md, 20px) !important; background: var(--button-primary-bg, #EAEBED) !important; color: var(--button-primary-text, #4D5965) !important; border: 1px solid var(--button-primary-border, transparent) !important; border-radius: var(--radius-sm, 8px) !important; font-size: var(--type-label-size, 14px); font-weight: var(--type-label-weight, 650); cursor: pointer; transition: background var(--motion-base, 180ms) var(--ease-standard, ease); } body.one81-system .rating-popup .submit-button:hover:not(.disabled):not(:disabled) { background: var(--button-primary-bg-hover, #DBDEE0) !important; } body.one81-system .rating-popup .submit-button.disabled, body.one81-system .rating-popup .submit-button:disabled { background: var(--button-disabled-bg, #F4F5F6) !important; color: var(--button-disabled-text, #7F8790) !important; cursor: not-allowed; } /* Skip = SECONDARY (outlined) button. */ body.one81-system .rating-popup .skip-link { display: inline-flex !important; align-items: center; justify-content: center; min-width: 100px; min-height: var(--button-height-md, 44px); padding: 0 var(--button-padding-x-md, 20px); background: var(--button-secondary-bg, #fff); color: var(--button-secondary-text, #4D5965) !important; border: 1px solid var(--button-secondary-border, #C6CACE); border-radius: var(--radius-sm, 8px); font-size: var(--type-label-size, 14px); font-weight: var(--type-label-weight, 650); text-decoration: none !important; cursor: pointer; transition: background var(--motion-base, 180ms) var(--ease-standard, ease), border-color var(--motion-base, 180ms) var(--ease-standard, ease); } body.one81-system .rating-popup .skip-link:hover { background: var(--button-secondary-bg-hover, #F4F5F6); border-color: var(--color-neutral-500, #AFB4BA); } /* Narrow screens: stack the buttons full-width. */ @media (max-width: 480px) { body.one81-system .rating-popup .rating-actions { flex-direction: column; align-items: stretch; } body.one81-system .rating-popup .submit-button, body.one81-system .rating-popup .skip-link { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } } /* SOURCES links — markdown-rendered default to the blue link colour; force them to the brand-accent token (matches the intended .sources__link style). */ body.one81-system .sources a, body.one81-system .sources__list a, body.one81-system .sources__link { color: var(--brand-accent) !important; text-decoration: underline; text-underline-offset: 2px; } /* Option list items (.select_ans) — add a subtle hover (style.css has it commented out). Excludes the goal CTA button and disabled items. */ body.one81-system .singl_select_box .select_ans:not(.goal-add-btn):not(.disabled) { cursor: pointer; transition: background var(--motion-fast, 120ms) var(--ease-standard, ease); } body.one81-system .singl_select_box .select_ans:not(.goal-add-btn):not(.disabled):hover { background: var(--surface-hover, #EAEBED); } /* "+Add to my goals" wrapper — the .singl_select_box