/* ========================================================================== ShareFam — help-rights.css ES07 — the Help Center's rights panel, the "What will happen?" preview, the API-backed search results, and the always-visible support paths. This file EXTENDS the SHARED_HELP engine's own stylesheet (/SHARED_HELP/css/help.css). It never forks it: every selector here is either a new `sf-help-*` class or a documented repair to help.html's own markup. Nothing in here restyles a shared-tool class. DEV_GUIDE constraints, and how each is met: #1 ZERO px. Every length is rem, %, ch or a viewport unit. Hairlines are 0.0625rem. #2 Light AND dark, through `prefers-color-scheme` AND `[data-theme]`, so the family's explicit choice beats the operating system in BOTH directions. `sharefam-theme.js` also keeps Tailwind's `.dark` class in sync, so that selector is honoured too. #4 The preview modal is `max-height: 85vh` with an `85dvh` upgrade, a scrollable body and a fixed header/footer. #5 Mobile-first from a 360-wide viewport (22.5rem). #6 Touch targets at 2.75rem. #14 Motion 150-300ms, one easing family, and NONE for a reader who asked for none. #31 The dual-mode `--app-header-offset` token, additive, never an inline `padding-top` on . WCAG 1.4.10 (REFLOW). Measured in Chromium at a 360-wide viewport with `zoom: 2`: the document scrolled horizontally (scrollWidth 353 against a clientWidth of 345). The overflow came from help.html's own content header and content footer rows, whose icon buttons are `flex-shrink-0` and cannot give up any space. Both rows are allowed to WRAP below, which costs nothing at ordinary widths and removes the horizontal scrollbar at 200% zoom. Nothing in this file sets a fixed `width`; the only fixed `min-width` is the 2.75rem touch floor, which #6 requires. NO SPINNERS. There is no background worker behind any request on this page, so nothing here animates to suggest one is turning. A deletion request is RECORDED; it is not "processing". ========================================================================== */ /* ========================================================================== 1. DUAL-MODE HEADER OFFSET (DEV_GUIDE #31) Standalone ADDS the offset; embedded adds nothing. `page-mode.js` stamps the mode on before first paint, so this resolves without a flash. ========================================================================== */ :root { --app-header-offset: 3.75rem; } html.page-mode-embedded { --app-header-offset: 0rem; } html.page-mode-standalone body { padding-top: var(--app-header-offset); } html.page-mode-embedded body { padding-top: 0 !important; } /* ========================================================================== 2. COLOUR + MOTION TOKENS ========================================================================== */ :root { --sfh-surface: #ffffff; --sfh-surface-alt: #f9fafb; --sfh-border: #e5e7eb; --sfh-text: #111827; --sfh-text-muted: #4b5563; --sfh-accent: #0d9488; --sfh-accent-strong: #0f766e; --sfh-on-accent: #ffffff; --sfh-edge-blocked: #b45309; --sfh-edge-off: #6b7280; --sfh-edge-live: #0f766e; --sfh-overlay: rgba(15, 23, 42, 0.55); --sfh-focus: #2563eb; --sfh-motion: 200ms; --sfh-ease: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-color-scheme: dark) { :root { --sfh-surface: #111827; --sfh-surface-alt: #0b1220; --sfh-border: #374151; --sfh-text: #e5e7eb; --sfh-text-muted: #9ca3af; --sfh-accent: #2dd4bf; --sfh-accent-strong: #5eead4; --sfh-on-accent: #04211d; --sfh-edge-blocked: #fbbf24; --sfh-edge-off: #9ca3af; --sfh-edge-live: #2dd4bf; --sfh-overlay: rgba(2, 6, 23, 0.72); --sfh-focus: #93c5fd; } } /* The explicit choice wins over the operating system, in both directions. `html.dark` is listed because the SHARED_HELP engine reads Tailwind's dark class; `sharefam-theme.js` keeps the two in step. */ :root[data-theme="dark"], html.dark { --sfh-surface: #111827; --sfh-surface-alt: #0b1220; --sfh-border: #374151; --sfh-text: #e5e7eb; --sfh-text-muted: #9ca3af; --sfh-accent: #2dd4bf; --sfh-accent-strong: #5eead4; --sfh-on-accent: #04211d; --sfh-edge-blocked: #fbbf24; --sfh-edge-off: #9ca3af; --sfh-edge-live: #2dd4bf; --sfh-overlay: rgba(2, 6, 23, 0.72); --sfh-focus: #93c5fd; } :root[data-theme="light"] { --sfh-surface: #ffffff; --sfh-surface-alt: #f9fafb; --sfh-border: #e5e7eb; --sfh-text: #111827; --sfh-text-muted: #4b5563; --sfh-accent: #0d9488; --sfh-accent-strong: #0f766e; --sfh-on-accent: #ffffff; --sfh-edge-blocked: #b45309; --sfh-edge-off: #6b7280; --sfh-edge-live: #0f766e; --sfh-overlay: rgba(15, 23, 42, 0.55); --sfh-focus: #2563eb; } /* A hidden panel stays hidden. `display` declarations below would otherwise beat the user-agent's [hidden] rule and leak an empty section onto the page whenever the ES07 endpoints are switched off. */ [hidden] { display: none !important; } /* ========================================================================== 3. ACCESSIBILITY REPAIRS TO help.html'S OWN CHROME Every number below was measured in Chromium at a 360-wide viewport. ========================================================================== */ /* The skip link had NO styling on this page: base.css is not loaded here, so it rendered as an ordinary inline anchor, 147 by 21 device units, PERMANENTLY visible above the content. It is now off-canvas until focused, and 2.75rem tall when it arrives. */ .sf-skip-link { position: absolute; left: 0.5rem; top: -5rem; z-index: 200; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 0.5rem; background: var(--sfh-accent); color: var(--sfh-on-accent); font-weight: 600; text-decoration: none; transition: top var(--sfh-motion) var(--sfh-ease); } .sf-skip-link:focus, .sf-skip-link:focus-visible { top: 0.5rem; } /* The three sidebar quick links were bare glyphs inside anchors and rendered 12 by 18 — unhittable for an elder or a child. */ .sf-help-quicklinks { flex-wrap: wrap; } .sf-help-quicklinks a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: 0.5rem; transition: background-color var(--sfh-motion) var(--sfh-ease); } .sf-help-quicklinks a:hover { background: var(--sfh-surface-alt); } .sf-help-quicklinks a:focus-visible { outline: 0.1875rem solid var(--sfh-focus); outline-offset: 0.125rem; } /* Prev / next rendered 30 wide against a 44 floor. */ #helpPrevBtn, #helpNextBtn { min-width: 2.75rem; justify-content: center; } /* REFLOW. Both of help.html's fixed-size icon rows may wrap rather than force the document to scroll sideways. At ordinary widths they never do. */ .sf-help-topbar, .sf-help-footerbar__row { flex-wrap: wrap; row-gap: 0.5rem; min-width: 0; } .sf-help-topbar > *, .sf-help-footerbar__row > * { min-width: 0; } /* ========================================================================== 4. ALTERNATE SUPPORT PATHS — always visible, never behind search. ========================================================================== */ .sf-help-paths { margin: 0 0 1.25rem; padding: 0.875rem 1rem; border: 0.0625rem solid var(--sfh-border); border-left-width: 0.25rem; border-left-color: var(--sfh-edge-live); border-radius: 0.5rem; background: var(--sfh-surface-alt); color: var(--sfh-text); max-width: 100%; } .sf-help-paths__title { margin: 0; font-size: 0.9375rem; font-weight: 700; } .sf-help-paths__lead, .sf-help-rights__lead { margin: 0.25rem 0 0.625rem; font-size: 0.8125rem; line-height: 1.5; color: var(--sfh-text-muted); overflow-wrap: anywhere; } .sf-help-paths__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; min-width: 0; } .sf-help-paths__item { min-width: 0; } .sf-help-paths__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.875rem; border: 0.0625rem solid var(--sfh-border); border-radius: 0.5rem; background: var(--sfh-surface); color: var(--sfh-text); font-size: 0.8125rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; transition: background-color var(--sfh-motion) var(--sfh-ease); } .sf-help-paths__link:hover { background: var(--sfh-surface-alt); } .sf-help-paths__link:focus-visible { outline: 0.1875rem solid var(--sfh-focus); outline-offset: 0.125rem; } /* ========================================================================== 5. THE RIGHTS PANEL ========================================================================== */ .sf-help-rights { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0 0; padding: 1rem; border: 0.0625rem solid var(--sfh-border); border-radius: 0.75rem; background: var(--sfh-surface); color: var(--sfh-text); max-width: 100%; } .sf-help-rights__title { margin: 0; font-size: 1.0625rem; font-weight: 700; } .sf-help-rights__domains, .sf-help-rights__actions { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .sf-help-rights__actions { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .sf-help-domain { padding: 0.75rem 0.875rem; border: 0.0625rem solid var(--sfh-border); border-left-width: 0.25rem; border-left-color: var(--sfh-edge-live); border-radius: 0.5rem; background: var(--sfh-surface-alt); min-width: 0; } /* The state is carried by the SENTENCE inside the panel; the edge tint is the third signal, after the words and the position. */ .sf-help-domain--off { border-left-color: var(--sfh-edge-off); } .sf-help-domain--degraded, .sf-help-domain--blocked { border-left-color: var(--sfh-edge-blocked); } .sf-help-domain__title { margin: 0; font-size: 0.9375rem; font-weight: 700; overflow-wrap: anywhere; } .sf-help-domain__state, .sf-help-domain__note, .sf-help-domain__empty { margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--sfh-text-muted); overflow-wrap: anywhere; } .sf-help-domain__note { color: var(--sfh-text); font-weight: 600; } .sf-help-domain__items { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; } .sf-help-domain__item { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; padding: 0.5rem 0.625rem; border: 0.0625rem solid var(--sfh-border); border-radius: 0.375rem; background: var(--sfh-surface); font-size: 0.8125rem; min-width: 0; overflow-wrap: anywhere; } .sf-help-domain__item-label { font-weight: 600; min-width: 0; } .sf-help-domain__item-meta { color: var(--sfh-text-muted); min-width: 0; } /* ========================================================================== 6. BUTTONS ========================================================================== */ .sf-help-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 1rem; border: 0.0625rem solid var(--sfh-border); border-radius: 0.5rem; background: var(--sfh-surface); color: var(--sfh-text); font-size: 0.8125rem; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; transition: background-color var(--sfh-motion) var(--sfh-ease); } .sf-help-btn:hover { background: var(--sfh-surface-alt); } .sf-help-btn:focus-visible { outline: 0.1875rem solid var(--sfh-focus); outline-offset: 0.125rem; } .sf-help-btn--primary { border-color: transparent; background: var(--sfh-accent); color: var(--sfh-on-accent); } .sf-help-btn--primary:hover { background: var(--sfh-accent-strong); } /* ========================================================================== 7. SEARCH RESULTS (API-backed) + the search-outage notice ========================================================================== */ .sf-help-search { margin: 0.5rem 0 0; border: 0.0625rem solid var(--sfh-border); border-radius: 0.5rem; background: var(--sfh-surface); color: var(--sfh-text); max-height: 20rem; overflow-y: auto; max-width: 100%; } .sf-help-search__notice { margin: 0; padding: 0.625rem 0.75rem; border-bottom: 0.0625rem solid var(--sfh-border); font-size: 0.8125rem; line-height: 1.5; font-weight: 600; color: var(--sfh-text); overflow-wrap: anywhere; } .sf-help-search__empty { margin: 0; padding: 0.625rem 0.75rem; font-size: 0.8125rem; color: var(--sfh-text-muted); overflow-wrap: anywhere; } .sf-help-search__list { list-style: none; margin: 0; padding: 0; min-width: 0; } .sf-help-search__item { border-top: 0.0625rem solid var(--sfh-border); min-width: 0; } .sf-help-search__item:first-child { border-top: none; } .sf-help-search__link, .sf-help-search__off { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; min-height: 2.75rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--sfh-text); text-decoration: none; overflow-wrap: anywhere; transition: background-color var(--sfh-motion) var(--sfh-ease); } .sf-help-search__link:hover { background: var(--sfh-surface-alt); } .sf-help-search__link:focus-visible { outline: 0.1875rem solid var(--sfh-focus); outline-offset: -0.1875rem; } .sf-help-search__title { font-weight: 600; } .sf-help-search__summary, .sf-help-search__reason { color: var(--sfh-text-muted); } /* ========================================================================== 8. THE "WHAT WILL HAPPEN?" MODAL (DEV_GUIDE #4) ========================================================================== */ .sf-help-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 1rem; } .sf-help-modal__backdrop { position: absolute; inset: 0; background: var(--sfh-overlay); } .sf-help-modal__dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 36rem; /* 85vh first so a browser without dvh still gets a bounded dialog; 85dvh then wins where it is supported, because plain vh ignores the collapsing mobile URL bar and overflows on exactly the 360-wide devices this page is designed for. */ max-height: 85vh; max-height: 85dvh; border: 0.0625rem solid var(--sfh-border); border-radius: 0.75rem; background: var(--sfh-surface); color: var(--sfh-text); overflow: hidden; } .sf-help-modal__header, .sf-help-modal__footer { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; min-width: 0; } .sf-help-modal__header { border-bottom: 0.0625rem solid var(--sfh-border); } .sf-help-modal__footer { border-top: 0.0625rem solid var(--sfh-border); justify-content: space-between; } .sf-help-modal__title { flex: 1 1 12ch; margin: 0; font-size: 1rem; font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .sf-help-modal__close { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: 0.0625rem solid transparent; border-radius: 0.5rem; background: none; color: var(--sfh-text-muted); cursor: pointer; transition: background-color var(--sfh-motion) var(--sfh-ease); } .sf-help-modal__close:hover { background: var(--sfh-surface-alt); } .sf-help-modal__close:focus-visible { outline: 0.1875rem solid var(--sfh-focus); outline-offset: 0.125rem; } /* The body is the ONLY scrolling region — header and footer stay put. */ .sf-help-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; min-width: 0; } .sf-help-modal__note { flex: 1 1 14ch; margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--sfh-text-muted); min-width: 0; overflow-wrap: anywhere; } .sf-help-preview__lead, .sf-help-preview__line, .sf-help-preview__empty { margin: 0 0 0.625rem; font-size: 0.875rem; line-height: 1.55; overflow-wrap: anywhere; } .sf-help-preview__empty, .sf-help-preview__line { color: var(--sfh-text-muted); } .sf-help-preview__heading { margin: 1rem 0 0.375rem; font-size: 0.875rem; font-weight: 700; color: var(--sfh-text); } .sf-help-preview__list { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; } .sf-help-preview__blocked { margin: 0.75rem 0 0; padding: 0.625rem 0.75rem; border: 0.0625rem solid var(--sfh-border); border-left-width: 0.25rem; border-left-color: var(--sfh-edge-blocked); border-radius: 0.5rem; background: var(--sfh-surface-alt); font-size: 0.875rem; line-height: 1.55; overflow-wrap: anywhere; } /* ========================================================================== 9. REDUCED MOTION — remove decoration, keep every focus and status signal. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .sf-skip-link, .sf-help-quicklinks a, .sf-help-paths__link, .sf-help-btn, .sf-help-search__link, .sf-help-modal__close { transition: none; } }