/* ========================================================================== IntegrityShield — in-product help The "?" trigger, the slide-in drawer, first-run coach marks, inline field tooltips, and the operator manual at /admin/help. Everything here consumes the design tokens declared in app.css / public.css (--surface, --border, --text, --primary, --gold, --radius …), so the whole system follows the theme switch without redeclaring a single colour. The two tokens defined below are the only ones this file owns; both resolve through an app token so a theme change reaches them too. ========================================================================== */ :root { --help-w: 428px; --help-accent: var(--green-600, #0e7a4b); } /* ========================================================================== 1. Trigger ========================================================================== */ .help-mount { display: contents; } .help-trigger { position: relative; display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .help-trigger__glyph { display: inline-flex; } /* Inside the topbar the button borrows .topbar__icon-btn's box, so only the label needs suppressing — the icon alone is the affordance there. */ .help-trigger.topbar__icon-btn .help-trigger__label { display: none; } /* Public pages have no topbar to mount into: a discreet pill, out of the way of the content, that a reader can find when they want it and ignore when they do not. Anchored bottom-LEFT and at a low stacking order deliberately — the support-chat launcher owns the bottom-right corner and its panel must always be able to open over this. */ .help-trigger--float { position: fixed; left: 18px; right: auto; bottom: 18px; z-index: 60; padding: 9px 15px 9px 13px; border: 1px solid var(--border, #dfe5ea); border-radius: 999px; background: var(--surface, #fff); color: var(--text, #0c1b2a); font-size: 13px; font-weight: 600; box-shadow: 0 6px 22px rgba(12, 27, 42, .16); transition: transform .16s ease, box-shadow .16s ease; } .help-trigger--float:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(12, 27, 42, .22); } .help-trigger:focus-visible { outline: 2px solid var(--help-accent); outline-offset: 2px; } /* First-visit nudge: shown once, until the drawer is opened for the first time. A dot rather than a tooltip — it invites without interrupting. */ .help-trigger__dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #c19a2e); box-shadow: 0 0 0 0 rgba(193, 154, 46, .55); animation: help-pulse 2.4s ease-out infinite; } .help-trigger--float .help-trigger__dot { top: 4px; right: 6px; } /* On a small screen the pill would sit on top of the content it is offering to explain; shrink it to the glyph and keep it clear of the safe area. */ @media (max-width: 560px) { .help-trigger--float { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 9px 11px; } .help-trigger--float .help-trigger__label { display: none; } } @keyframes help-pulse { 0% { box-shadow: 0 0 0 0 rgba(193, 154, 46, .55); } 70% { box-shadow: 0 0 0 7px rgba(193, 154, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(193, 154, 46, 0); } } /* ========================================================================== 2. Drawer ========================================================================== */ /* Set on while the drawer is open, so the page behind it does not scroll under the sheet on a phone. */ .help-scroll-lock, .help-scroll-lock body { overflow: hidden; } .help-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(7, 18, 25, .42); backdrop-filter: blur(1.5px); opacity: 0; transition: opacity .18s ease; } .help-backdrop.is-open { opacity: 1; } .help-drawer { position: fixed; top: 0; right: 0; z-index: 91; display: flex; flex-direction: column; width: min(var(--help-w), 100vw); height: 100dvh; background: var(--surface, #fff); border-left: 1px solid var(--border, #dfe5ea); box-shadow: -18px 0 48px rgba(7, 18, 25, .18); transform: translateX(100%); transition: transform .22s cubic-bezier(.22, .8, .3, 1); } .help-drawer.is-open { transform: translateX(0); } .help-drawer__head { position: relative; flex: 0 0 auto; padding: 18px 52px 14px 20px; border-bottom: 1px solid var(--border, #dfe5ea); background: linear-gradient(180deg, var(--surface-2, #f6f8f9), var(--surface, #fff)); } .help-drawer__eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--help-accent); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .help-drawer__title { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--text, #0c1b2a); } .help-drawer__title:focus { outline: none; } .help-drawer__close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text-muted, #5b6b78); cursor: pointer; } .help-drawer__close:hover { border-color: var(--border, #dfe5ea); background: var(--surface-2, #f6f8f9); color: var(--text, #0c1b2a); } .help-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 22px; -webkit-overflow-scrolling: touch; } .help-drawer__foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 20px; padding-bottom: max(11px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border, #dfe5ea); background: var(--surface-2, #f6f8f9); } .help-drawer__hint { margin-left: auto; color: var(--text-muted, #5b6b78); font-size: 11px; letter-spacing: .03em; } /* On a phone the drawer is a full-height sheet rising from the bottom — the gesture a hand expects, and it does not fight the mobile tab bar. */ @media (max-width: 640px) { .help-drawer { top: auto; right: 0; left: 0; bottom: 0; width: 100%; height: 100dvh; border-left: 0; border-top: 1px solid var(--border, #dfe5ea); border-radius: 14px 14px 0 0; transform: translateY(100%); } .help-drawer.is-open { transform: translateY(0); } .help-drawer__head { border-radius: 14px 14px 0 0; } } /* ========================================================================== 3. Drawer content ========================================================================== */ .help-purpose { margin: 0 0 16px; padding: 11px 13px; border-left: 3px solid var(--help-accent); border-radius: 0 8px 8px 0; background: var(--green-100, #e3f4ec); color: var(--text, #0c1b2a); font-size: 13.5px; line-height: 1.55; } html[data-theme="dark"] .help-purpose { background: rgba(18, 148, 92, .12); } .help-block { margin-bottom: 18px; } .help-block__title, h4.help-block__title { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--text-muted, #5b6b78); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .help-block__title--warn { color: var(--danger, #c0392b); } .help-steps { margin: 0 0 4px; padding: 0; list-style: none; counter-reset: help-step; } .help-steps > li { position: relative; counter-increment: help-step; margin-bottom: 10px; padding-left: 30px; font-size: 13.5px; line-height: 1.55; color: var(--text, #0c1b2a); } .help-steps > li::before { content: counter(help-step); position: absolute; top: 1px; left: 0; display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; background: var(--help-accent); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .help-tips, .help-warns { margin: 0; padding: 0; list-style: none; } .help-tips > li, .help-warns > li { position: relative; margin-bottom: 9px; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text, #0c1b2a); } .help-tips > li::before { content: ""; position: absolute; top: 8px; left: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted, #5b6b78); } .help-warns > li { padding: 9px 11px 9px 30px; margin-bottom: 8px; border-radius: 8px; background: var(--danger-bg, #fdecea); color: var(--text, #0c1b2a); } .help-warns > li::before { content: "!"; position: absolute; top: 9px; left: 10px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--danger, #c0392b); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; } html[data-theme="dark"] .help-warns > li { background: rgba(192, 57, 43, .14); } .help-related { margin: 0; padding: 0; list-style: none; } .help-related > li + li { margin-top: 5px; } .help-related a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border, #dfe5ea); border-radius: 8px; color: var(--text, #0c1b2a); font-size: 13px; text-decoration: none; } .help-related a:hover { border-color: var(--help-accent); background: var(--surface-2, #f6f8f9); } .help-empty { padding: 26px 8px; text-align: center; } .help-empty__icon { margin-bottom: 10px; color: var(--text-muted, #5b6b78); opacity: .6; } .help-empty h3 { margin: 0 0 6px; font-size: 15px; } .help-empty p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; } /* ========================================================================== 4. First-run coach mark ========================================================================== */ .help-coach { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 11px 13px; border: 1px solid var(--gold, #c19a2e); border-left-width: 3px; border-radius: var(--radius, 10px); background: linear-gradient(180deg, rgba(217, 182, 74, .13), rgba(217, 182, 74, .05)); } .help-coach__ic { flex: 0 0 auto; margin-top: 1px; color: var(--gold, #c19a2e); display: inline-flex; } .help-coach__text { flex: 1 1 auto; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text, #0c1b2a); } .help-coach__more { flex: 0 0 auto; border: 0; background: none; padding: 0; color: var(--help-accent); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .help-coach__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -4px 0 0; border: 0; border-radius: 6px; background: none; color: var(--text-muted, #5b6b78); cursor: pointer; } .help-coach__close:hover { background: rgba(12, 27, 42, .07); color: var(--text, #0c1b2a); } @media (max-width: 560px) { .help-coach { flex-wrap: wrap; } .help-coach__more { order: 3; width: 100%; text-align: left; } } /* ========================================================================== 5. Inline field hints — help_tip() ========================================================================== */ .help-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; } .help-tip__btn { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: 1px solid var(--border-strong, #c3ced7); border-radius: 50%; background: var(--surface, #fff); color: var(--text-muted, #5b6b78); font-family: Georgia, "Times New Roman", serif; font-size: 10px; font-style: italic; font-weight: 700; line-height: 1; cursor: help; } .help-tip__btn:hover, .help-tip__btn[aria-expanded="true"] { border-color: var(--help-accent); background: var(--help-accent); color: #fff; } .help-tip__btn:focus-visible { outline: 2px solid var(--help-accent); outline-offset: 2px; } .help-tip__bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 70; width: max-content; max-width: min(280px, 70vw); padding: 8px 10px; border-radius: 8px; background: var(--ink, #0c1b2a); color: #fff; font-size: 12px; font-weight: 400; font-style: normal; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: 0; transform: translate(-50%, 3px); opacity: 0; visibility: hidden; transition: opacity .13s ease, transform .13s ease, visibility .13s; pointer-events: none; } .help-tip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink, #0c1b2a); } .help-tip:hover .help-tip__bubble, .help-tip__btn:focus-visible + .help-tip__bubble, .help-tip__btn[aria-expanded="true"] + .help-tip__bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* Near the right edge the bubble would overflow; the script flips this class on rather than letting a tooltip disappear off-screen. */ .help-tip--flip .help-tip__bubble { left: auto; right: 0; transform: translate(0, 3px); } .help-tip--flip .help-tip__bubble::after { left: auto; right: 4px; margin-left: 0; } .help-tip--flip:hover .help-tip__bubble, .help-tip--flip .help-tip__btn:focus-visible + .help-tip__bubble, .help-tip--flip .help-tip__btn[aria-expanded="true"] + .help-tip__bubble { transform: translate(0, 0); } /* ========================================================================== 6. The operator manual — /admin/help ========================================================================== */ .help-stats { margin-bottom: 14px; } .help-searchbar { margin-bottom: 16px; } .help-search { position: relative; display: flex; align-items: center; } .help-search__ic { position: absolute; left: 12px; display: inline-flex; color: var(--text-muted, #5b6b78); pointer-events: none; } .help-search input { width: 100%; padding: 11px 40px 11px 38px; border: 1px solid var(--border, #dfe5ea); border-radius: var(--radius, 10px); background: var(--surface, #fff); color: var(--text, #0c1b2a); font: inherit; font-size: 14px; } .help-search input:focus { outline: none; border-color: var(--help-accent); box-shadow: 0 0 0 3px rgba(14, 122, 75, .16); } .help-search__clear { position: absolute; right: 9px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--text-muted, #5b6b78); cursor: pointer; } .help-search__clear:hover { background: var(--surface-2, #f6f8f9); color: var(--text, #0c1b2a); } .help-search__count { margin: 9px 0 0; font-size: 12.5px; } .help-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 20px; align-items: start; } .help-rail__inner { position: sticky; top: calc(var(--topbar-h, 62px) + 14px); display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--border, #dfe5ea); border-radius: var(--radius, 10px); background: var(--surface, #fff); max-height: calc(100dvh - var(--topbar-h, 62px) - 34px); overflow-y: auto; } .help-rail__label { margin-bottom: 6px; color: var(--text-muted, #5b6b78); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .help-rail__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 7px; color: var(--text, #0c1b2a); font-size: 12.5px; line-height: 1.35; text-decoration: none; } .help-rail__link:hover, .help-rail__link.is-active { background: var(--surface-2, #f6f8f9); color: var(--help-accent); } .help-rail__link[hidden] { display: none; } .help-rail__n { flex: 0 0 auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2, #f6f8f9); color: var(--text-muted, #5b6b78); font-size: 10.5px; font-variant-numeric: tabular-nums; text-align: center; } .help-rail__link:hover .help-rail__n, .help-rail__link.is-active .help-rail__n { background: var(--surface, #fff); } .help-module { margin-bottom: 26px; scroll-margin-top: calc(var(--topbar-h, 62px) + 16px); } .help-module__title { margin: 0 0 10px; padding-bottom: 7px; border-bottom: 2px solid var(--border, #dfe5ea); font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--text, #0c1b2a); } .help-topic { margin-bottom: 12px; scroll-margin-top: calc(var(--topbar-h, 62px) + 16px); } .help-topic__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .help-topic--locked { opacity: .82; } .help-topic .card__sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; } .help-topic .help-block__title { margin-top: 15px; } /* The manual's section labels carry a rule instead of an icon — 89 topics × three icons is a lot of inlined SVG for decoration that says nothing the words do not. The drawer, which renders one topic at a time, keeps its icons. */ .help-topic .help-block__title::before, .help-relrow__label::before { content: ""; flex: 0 0 auto; width: 14px; height: 2px; border-radius: 2px; background: currentColor; opacity: .45; } .help-topic .help-purpose { margin-bottom: 4px; } .help-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border, #dfe5ea); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #5b6b78); } .help-chip--admin { border-color: var(--help-accent); color: var(--help-accent); } .help-chip--partner { border-color: var(--info, #2b6cb0); color: var(--info, #2b6cb0); } .help-chip--field { border-color: var(--gold, #c19a2e); color: var(--gold, #c19a2e); } .help-chip--public { border-color: var(--border-strong, #c3ced7); } .help-route { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text-muted, #5b6b78); } .help-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2, #f6f8f9); color: var(--text-muted, #5b6b78); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; vertical-align: middle; } .help-relrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 15px; padding-top: 11px; border-top: 1px dashed var(--border, #dfe5ea); } .help-relrow__label { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted, #5b6b78); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .help-relrow__link { padding: 3px 9px; border: 1px solid var(--border, #dfe5ea); border-radius: 999px; color: var(--text, #0c1b2a); font-size: 12px; text-decoration: none; } .help-relrow__link:hover { border-color: var(--help-accent); color: var(--help-accent); } .help-module[hidden], .help-topic[hidden] { display: none; } @media (max-width: 900px) { .help-layout { grid-template-columns: minmax(0, 1fr); } .help-rail__inner { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; } .help-rail__label { width: 100%; margin-bottom: 0; } } /* ========================================================================== 7. Motion, print ========================================================================== */ @media (prefers-reduced-motion: reduce) { .help-drawer, .help-backdrop, .help-tip__bubble, .help-trigger--float { transition: none; } .help-trigger__dot { animation: none; } } @media print { .help-trigger, .help-backdrop, .help-drawer, .help-coach, .help-searchbar, .help-rail, .help-noresults, .page-actions { display: none !important; } .help-layout { display: block; } .help-topic { break-inside: avoid; border: 0; box-shadow: none; border-bottom: 1px solid #ccc; border-radius: 0; } .help-warns > li { background: none; border: 1px solid #999; } .help-purpose { background: none; border-left: 3px solid #999; } }