/* FILE: mrpPortalTheme.css — Global CSS file for MRP Portal */

/* ============================================================
   0. LOGS
   One-line entries per change. Newest at the top.
   ============================================================
   2026-06-17 Lakshmi — Reverted the previous-same-day `.ark-input-dob .slds-required { margin-right: 1px }` scoped override and the corresponding entry in the `.ark-input-text/.ark-input-combobox/.ark-input-textarea/.ark-input-dob` selector group. Root rule lives inside the `c-arfocus-date-input` shadow root (`arfocusDateInput.css` line 18 `.arfocus-date-label .slds-required`), not in this file; tightening was applied there (5px → 1px) so it actually reaches the DOM that renders the asterisk. Static-resource selectors targeting `.ark-input-dob .slds-required` matched nothing because the asterisk lives in the child's shadow root, not on the host. AV/AO/PGC LWC wiring (`required={…dobRequired}` + view-model getters) is unchanged.
   2026-06-17 Lakshmi — §8 added `.ark-input-dob` to the `.slds-required` asterisk selector group (reuses 20px / #b80000 / SS Pro skin) and added scoped `.ark-input-dob .slds-required { margin-right: 0 !important }` so the DOB asterisk matches the inline gap of other required fields (child template carries a literal space inside `<abbr>* </abbr>`, so the shared 5px right margin would double the gap). Conditional on/off driven by `victim.dobRequired = !readOnly && !ageUnknown` getter in arfocusAllegedVictim.js, passed as `required={victim.dobRequired}` on `<c-arfocus-date-input>`. Scoped to AV only — Narrative / PGC siblings do not pass `required` so their date inputs render no `<abbr class="slds-required">` and this selector matches nothing on those screens. Internal-DOM fallback per Rule 4.3 step 5 / Miss 8; no SLDS hook exists for asterisk margin.
   2026-06-16 Akhilesh Pk — §16.3 `.ark-report-additional-info` `padding-bottom: 24px` so the CHRIS-amendment Submit button has breathing room before the Reporter Information card. Multiple-of-4 per §6 spacing rule; scoped to the additional-info wrapper so other portal screens are unaffected.
   2026-06-16 Akhilesh Pk — §16.15 narrative textarea resting height lowered 500→300px per user request. Same scoping: narrative field ONLY via `.ark-narrative-screen .ark-input-textarea[data-field="narrative"] .slds-textarea`; optional textareas unaffected. `resize: vertical !important` from §8 preserves the drag handle.
   2026-06-12 Akhilesh Pk — §16.15 narrative textarea resting height set to 500px (~25 visible lines on landing) per user request. Same scoping: narrative field ONLY via `.ark-narrative-screen .ark-input-textarea[data-field="narrative"] .slds-textarea`; optional textareas unaffected. `resize: vertical !important` from §8 preserves the drag handle. Internal-DOM fallback per Rule 4.3 step 5 / Miss 8. (Supersedes the same-day 180/1260/300 entries below.)
   2026-06-12 Akhilesh Pk — §16.15 narrative textarea resting height raised 180→1260px (7× the prior value, ~63 visible lines on landing) per user request. Same scoping as the earlier 180px change: narrative field ONLY via `.ark-narrative-screen .ark-input-textarea[data-field="narrative"] .slds-textarea`; optional textareas (Risk Factors / Who Else Knows / Family Resources) unaffected. `resize: vertical !important` from §8 still preserves the drag handle. Internal-DOM fallback per Rule 4.3 step 5 / Miss 8 (no SLDS hook for resting min-height).
   2026-06-12 Akhilesh Pk — §16.3 Additional Info block aligned with narrative-screen validation primitive. Removed three dead/anti-narrative rules: (a) `.ark-report-additional-info__submit { margin-top:-18px }` (was pulling Submit up to a counter that no longer exists; wrapper's 28px gap now governs Submit spacing); (b) `.ark-report-additional-info > p.slds-text-body_small.slds-text-align_right[aria-live="polite"] { margin-top:-44px !important }` (dead — targeted sibling `<p>` counter removed from arkMrpReportPreview.html); (c) the `position:relative` on `.ark-input-textarea` + `position:absolute; top:100%` help-slot reservation (was protecting the counter from validation-shift; narrative pattern leaves the help slot in normal flow so error text pushes content down naturally, matching arfocusNarrative behavior). Wrapper `.ark-report-additional-info { display:flex; flex-direction:column; gap:28px; width:100% }` retained (Figma 575:3223 spec, unchanged). Paired with `max-length` attribute removal + `message-when-value-missing` addition in both arkMrpReportPreview.html AND arfocusReviewSummary.html (the CHRIS Additional Info field is rendered on both screens). 1800-char hard cap still enforced via `ADDITIONAL_INFO_MAX_LENGTH` substring truncation in both JS files. Collapses the 2026-05-15 → 2026-05-17 Miss 14/15/16 selector-iteration saga at Lakshmi's authorship (entries preserved below for history). Internal-DOM callout per Rule 4.3 step 5 / Miss 8 no longer required for this block — the wrapper-only rule that remains targets the project-owned `.ark-report-additional-info` class.
   2026-06-12 Lakshmi — §16.15 narrative textarea resting height raised 60→180px (3× the §8 shell floor) per user request. Scoped to ONLY the narrative field via existing `.ark-narrative-screen .ark-input-textarea[data-field="narrative"] .slds-textarea`; the three optional textareas (Risk Factors / Who Else Knows / Family Resources) keep the §8 default 60px. `resize: vertical !important` from §8 unaffected — drag handle preserved; we only raised the resting floor. Internal-DOM fallback per Rule 4.3 step 5 / Miss 8 (no SLDS hook exists for resting min-height).
   2026-05-29 Lakshmi — Reporter Intake a11y reverted: removed off-screen focus announcer, `renderedCallback` scroll/focus, and the v1/v2/v3 a11y wrappers. Browse-mode arrow navigation reads the H1 + intro paragraph correctly without intervention (matches Victim/Family + Alleged Victim pattern, which have zero focus-on-load code). End state is plain semantic DOM.
   2026-05-27 Lakshmi — §17 portal-nav mobile: (1) expanded summary now puts status icon on LEFT via `display:contents` on `.mobile-indicators` + `order:-1` on the icon + `margin-left:auto` on status-right (Figma 959:3827). (2) `.mobile-summary` made full-bleed via `width:100vw; margin-left:calc(50% - 50vw)` so the green bar escapes Experience Cloud column inset and touches viewport edges. (3) Mobile-only `.ark-portal-nav__card--active { background-color:#E0E8EC !important }` so the active step row gets the light-blue tint per Figma (desktop §16.11 only sets the left-bar color).
   2026-05-27 Lakshmi — §17 portal-nav mobile pt2: (a) `.mobile-summary` switched to two-sided bleed (margin-left + margin-right `calc(50% - 50vw)`, width:auto) so the right edge also touches the viewport. (b) Removed desktop navy left-bar on active row in mobile (`border-left-color:transparent`). (c) Step rows on mobile now full-width, no rounded corners, 16px padding, 64px min-height, 1px #E5E5E5 bottom-divider between rows (last child no divider).
   2026-05-27 Lakshmi — §17 portal-nav mobile pt3: (a) `.mobile-summary` reverted to `width:100vw + max-width:100vw` because the button defaults to inline-block and `width:auto` shrink-wrapped the bar to its content. (b) `.ark-portal-nav__steps` overridden on mobile to `width:100% + gap:0` — desktop §16.11 sets 280px+24px which both constrained row width AND created a large gap between the summary and the first row.
   2026-05-27 Lakshmi — §17 portal-nav mobile pt4: `.ark-portal-nav__list-region--expanded` now full-bleeds via `width:100vw + margin-left/right: calc(50% - 50vw)` so step rows extend to viewport edges (previously inherited Experience Cloud column padding → rows appeared indented vs the green summary bar).
   2026-05-27 Lakshmi — §17 portal-nav mobile pt5: (a) active row tint `#E0E8EC` → `#e5f1fe` to reuse the portal-wide selected-state blue (combobox/picklist/address-search §8). (b) `.mobile-summary--expanded { padding-bottom: 0 }` so the progress bar sits flush with the first list row (was leaving a 12px dead band).
   2026-05-27 Lakshmi — §17 portal-nav mobile pt7: `.mobile-summary--expanded { min-height: auto }`. Root cause of the remaining gap between the green progress bar and the first list row: button kept its 86px min-height when expanded; `align-content: stretch` on the flex-wrap container inflated the row heights to fill the slack, parking dead space below the progress bar (DevTools confirmed progress bar margin-bottom 0 and ol margin-top 0 — gap was inside the button).
   2026-05-27 Lakshmi — §16.1 `.ark-your-reports-page` top padding 28→40px to match Figma 625:5115 Content Area `py-[40px]` (page-title-to-header gap).
   2026-05-27 Lakshmi — §17 portal-nav mobile pt8: (a) move `order:-1; margin-right:0` from the `--expanded` selector onto the base `.mobile-status-icon` rule (applies in both states; parent `gap:12px` handles spacing). (b) mobile-only `.ark-portal-nav__label { font-weight:600; color:#1D2528 }` so every list row label renders bold per Figma 959:3827.
   2026-05-27 Lakshmi — §17 portal-nav mobile polish: `.ark-portal-nav` padding 24px→0 + box-shadow:none so the green collapsed summary fills the host card edge-to-edge; `.ark-portal-nav__title-block` set to display:none on mobile (Figma 741:8557 has no "New Report Form" heading — tapping the summary reveals steps directly). Desktop §16.11 unaffected.
   2026-05-21 Lakshmi — §8 textarea resize fix: removed `.ark-input-textarea .slds-textarea` from the combined input-shell selector (it was inheriting `height:60px !important`, which overrode any drag-set height even with the dedicated rule's `height:auto !important` later in source). Rewrote the dedicated `.ark-input-textarea .slds-textarea` rule to carry the shell appearance (bg, 2px #c4c4c4 border, 10px radius, 16px padding, SS Pro 15/24/0.15) with `min-height:60px` only and explicit `resize:vertical !important`. Drag handle now works; single-line input shell unchanged.
   2026-05-20 Lakshmi — §15.4 portrait print round 2: added `width:100vw; margin-inline:0; box-sizing:border-box !important` to the @media print `.ark-mrp-header__logo-bar` rule. DevTools print-emulation Computed proved `display:flex` + `justify-content:space-between` were winning, but bar was shrink-wrapped to 283.847px (≈ 52+43+61+92 = content+gap+padding). Same root cause as 2026-05-18 host-shrink-wrap on REVIEW_SUBMIT, but in print the parent chain ABOVE `c-arfocus-mrp-header` is what shrinks (existing screen rule `c-arfocus-mrp-header { width:100% }` resolves to 100% of a shrunk parent). 100vw on the bar bypasses the shrunk chain entirely — single-rule fix, no host/header tampering needed.
   2026-05-20 Lakshmi — §15.4 added single-rule print fix: `@media print { .ark-mrp-header__logo-bar { display:flex !important; justify-content:space-between !important } }`. Verified via real Chrome print preview (not emulation) that the bar already spans the full page width on both portrait (816px) and landscape (1056px) paper — only flex distribution was lost because SLDS `.slds-grid` + `.slds-grid_align-spread` utility classes don't reliably engage in Chrome real-print on LWR. Single property fix replaces the May 14–18 stacked-override pile (host width:100vw, .ark-mrp-header__actions flex:1 1 0, .ark-mrp-header__logo-img_police margin-left:auto). Landscape phantom-empty-box on Review & Submit is a separate Bug 2 still to diagnose.
   2026-05-20 Lakshmi — §15.4 stripped the entire print-page logo-bar override block (the `@media print { html c-arfocus-mrp-header / .ark-mrp-header / .ark-mrp-header__logo-bar { width:100vw; space-between; flex 1 1 0; margin-left:auto } }` chunk layered over May 14–18). It worked in landscape but logos clustered left in portrait; rather than keep stacking overrides, reset to baseline so the portrait failure can be diagnosed cleanly. Kept the unrelated `.slds-no-print` polyfill, `@page { margin: 0 }`, `a[href]::before/::after` URL suppressor, and the screen-mode `c-arfocus-mrp-header { display:block; width:100% }` host rule (load-bearing on screen, §16.5 May-5).
   2026-05-20 Lakshmi — §16.16 `.ark-review-card` shadow aligned to `.ark-form-card`: was `0 4px 8px rgba(0,63,94,0.1)` (bottom-only), now `0 -2px 6px / 0 2px 6px rgba(0,63,94,0.08)` (dual top+bottom). Gives the Review & Submit card the visible hairline above its top edge that PGC/AV/VictimFamily cards already have. No other property changed; mobile padding overrides (§17) unaffected.
   2026-05-20 Lakshmi — §16.x + §17 Upload Document modal aligned to Figma 275:3322. Container 820→fluid `calc(100vw - 32px)` capped at 640px (Figma w-[640px]). Header padding 20/20/0/20 → 20/20/16/20 (adds Figma Header gap-[16px] between title and hr). Cancel button rewritten to use the standard outline tokens (`var(--nav-btn-navy)`, `var(--hf-heading-4-*)`, `var(--hf-button-ds-shadow)`) matching `.ark-btn-previous` — same border, h48 per Figma I275:3322;19756:37023. §17 `@media (max-width:768px)` adds upload-modal mobile block: tighter 16px L/R padding, divider inset 16px, dropzone 24/12 padding, legend `white-space: normal`, buttons stacked full-width (Upload top, Cancel bottom).
   2026-05-20 Lakshmi — §17 added screen-scoped long-label inline-helptext rule under `.ark-reporter-screen`. Overrides §8's `inline-flex` label/helptext layout to pure `inline` flow so the (i) icon glues to the last word of wrapping labels (e.g. "What is your relationship to the child(ren)?", "Agency/Facility/School you work for?"). Visually identical to §8 for short labels — only changes behavior when label would otherwise force (i) to wrap. Desktop unaffected. Same pattern to be replicated for `.ark-victim-family-screen` / `.ark-narrative-screen` after device validation.
   2026-05-20 Lakshmi — §17 `.portal-container__content` mobile padding `1rem` → `5px`. Was 16px on top of `.portal-container__layout`'s 16px outer gutter (32px combined gap from viewport edge), while the stacked sidebar only had the layout's 16px (asymmetric). 5px keeps a hairline buffer between card edge and viewport on phones, gains ~22px of input width per row. Desktop (>1024px) has no padding on this element — unaffected.
   2026-05-19 Lakshmi — §17 reverted the blanket `[part="input-text"]` flex helptext-wrap rules added earlier today (changed layout for short-label fields too). Will reintroduce as an opt-in modifier class on specific long-label fields when needed.
   2026-05-19 Lakshmi — §16.13 / §16.14 / §16.15 extended the same `@media (max-width:1024px)` reset to `.ark-alleged-offender-screen / .ark-pgc-screen / .ark-narrative-screen .ark-collapsible-card_open .ark-collapsible-card__content { padding-right: 16px }` so AO / PGC / Narrative mobile inputs match Reporter Intake & Victim Family widths. Desktop 55px (Figma 16:1073 / 518:5958 / 33:4386) unchanged.
   2026-05-19 Lakshmi — §16.12 added `@media (max-width:1024px)` reset of `.ark-alleged-victim-screen .ark-collapsible-card_open .ark-collapsible-card__content { padding-right: 16px }` (desktop 55px from Figma 16:1015 unchanged). The 55px right-padding was eating 55px off input width on mobile (iPhone SE: AV inputs 144px vs VictimFamily 199px — exact 55px gap). AV mobile inputs now match the rest of the wizard.
   2026-05-19 Lakshmi — §17 wizard footer mobile (≤768px) horizontal padding 12/16 → 12/0 so Next/Previous buttons stretch flush with the divider (`.ark-form-footer` border-top) edges. Page shell `.ark-reporter-screen { padding: 24px 16px }` already provides the outer gutter — footer doesn't need its own. Desktop padding (10px all sides, §16.x) untouched.
   2026-05-19 Lakshmi — §17 simplified MRP header mobile (≤768px) to a single rule: `.ark-mrp-header__actions { flex: 0 0 100%; order: 3; justify-content: center }`. Nav (Home / Your Reports / profile) always drops to row 2 centered on mobile; two logos sit at row-1 corners. Removed the dual-breakpoint (≤420 vs 421-768) approach — too cramped at 430px when name was long.
   2026-05-19 Lakshmi — §17 added nested `@media (max-width: 420px)` inside the mobile block: `.ark-mrp-header__actions { flex: 0 0 100%; order: 3 }` so at iPhone SE-class widths the nav wraps to row 2 and the two logos stay at row-1 corners (otherwise police-alone wraps to row 2 because it's last in DOM). 421-768px keeps nav inline between the logos.
   2026-05-19 Lakshmi — §17 mobile (≤768px) `.ark-mrp-header__actions` reverted to `flex: 0 1 auto` (removed `order: 3` + `flex: 0 0 100%`). Nav now stays inline between DHS (left) and police (right) so all three sit on one row when viewport allows.
   2026-05-19 Lakshmi — §17 mobile (≤768px) `.ark-mrp-header__actions` now `flex: 0 0 100% !important; order: 3 !important` so the nav wraps to a row below the two logos. DOM is DHS → nav → police; without `order` the nav split them and police dropped to row 2 alone. Two logos now sit on row 1 with the existing `justify-content: space-between`.
   2026-05-19 Lakshmi — §17 Review & Submit mobile footer order overridden: Abandon (previous-outline) now ABOVE Submit (next-primary), mirroring desktop where Abandon sits left of Submit. Other wizard screens unaffected (Next stays on top there).
   2026-05-19 Lakshmi — §17 mobile (≤768px) wizard footer buttons now `white-space: normal !important` so long labels (e.g. "Abandon Report and Return Home" on Review & Submit) wrap inside the full-width stacked button instead of clipping. Desktop `nowrap` preserved.
   2026-05-19 Lakshmi — §17 collapsible card title mobile overflow fix. Symptom: on ≤768px the bin icon overlapped "Parent/Guardian/Caregiver" because the slash-joined token never wrapped and the actions block sat on top of it. Scoped fix inside `@media (max-width:768px)`: `.ark-collapsible-card__title { overflow-wrap: anywhere; word-break: break-word }` so the title soft-wraps; `.ark-form-card { padding: 24px 16px }` (was 40); `.ark-collapsible-card__summary { gap: 12px }` (was 20); `.ark-collapsible-card__actions { gap: 4px }` (was 8). Net: ~64px more horizontal budget for the title on mobile, shared by every consumer of arfocusCollapsibleCard (PGC, AV, AO). Desktop fully unchanged (all four rules are inside the media query).
   2026-05-19 Lakshmi — §17 wizard footer mobile (≤768px) re-ordered to Next → Previous → Cancel (was Cancel → [Previous Next] 50/50). `.ark-form-footer__right` now `flex-direction: column` with `order: 1`, `__left` `order: 3`; inside `__right`, `.ark-btn-next-primary` `order: 1`, `.ark-btn-previous-outline` `order: 2`. All three buttons full-width stacked. Applies to every wizard screen + Review (Submit / Abandon / Cancel naturally inherit the same ordering since they reuse the same class names).
   2026-05-18 Lakshmi — §16.17 `.ark-documents-screen .ark-reporter-screen__content { gap: 20px }` (was 40 from shared shell) to tighten the space between the NOTICE block and the confirm-checkbox row per user request.
   2026-05-18 Lakshmi — §16.17 NOTICE paragraphs 2–4 recolored to `#3b3a48` (Review Summary field-label color, matches `.ark-review-field__label`); first `<p>` ("NOTICE:") kept `#000`. Added `.ark-documents-screen .ark-page-subtitle strong` (color `#3b3a48`, weight 700) and wrapped "support" in the subtitle in `<strong>` per user request.
   2026-05-18 Lakshmi — §16.17 `.ark-documents-screen__notice` typography aligned with subtitle: Source Sans Pro 15/24/0.15 (same family/size/line-height/letter-spacing as `.ark-page-subtitle`), keeping bold + black per user follow-up "fonts used are different, make it the same".
   2026-05-18 Lakshmi — §16.17 Documents screen: expanded subtitle copy (narrative-supports-screening guidance) and added `.ark-documents-screen__notice` bold-black NOTICE block (CSAM upload prohibition, 4 paragraphs, 16px stack gap) per user request. Removed `.ark-documents-screen__legal-pending` placeholder + its red [DCFS to provide legal language] span (final copy delivered).
   2026-05-18 Lakshmi — §8 `.ark-input-search` active row: bg `#cee5f4` → `#e5f1fe` to mirror `.ark-input-combobox` selected state verbatim (picklist parity per user request). Text + weight already aligned.
   2026-05-18 Lakshmi — §8 `.ark-input-search` active row tuning: bg `#e5f1fe` → `#cee5f4` (more saturated so the active suggestion is clearly distinguishable) + added `color:#1d2528 !important` to keep the value readable (was washing out against the SLDS-default inherited light text).
   2026-05-18 Lakshmi — §8 `.ark-input-search` active suggestion highlight: added `.ark-input-search__option[aria-selected="true"]` + `.ark-input-search__option--focused` → `background:#e5f1fe !important; font-weight:600 !important` to match Race multiselect selected pattern (§8 line ~1346). Root cause: arfocusAddressInput.js `_focusSuggestionItem` sets `aria-selected="true"` + adds `--focused` class on the active typeahead row, but no CSS targeted either selector → SLDS/Experience Cloud bundled `[aria-selected="true"]` default leaked through as bright brand-blue. Internal-DOM override (Rule 4.3 step 5 / Miss 8) — no styling hook for custom listbox option active-state bg.
   2026-05-18 Lakshmi — §15.4 removed the Reports datatable print block (`.ark-reports-section <descendant>` selectors for `overflow:visible`, width-clamp, table-layout, col-reset). Per §0 LOG 2026-05-11 + 2026-05-12, static-resource CSS only pierces lightning-datatable's shadow root via the host-chain selector `c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable …`; the `.ark-reports-section` prefix sits outside that host and the descendant selector never matched anything inside the shadow root, so all four rules were no-ops. Reverting to leave the print-page datatable behavior as-is (horizontal scrollbar + 980px width acceptable for now). MRP header / police logo / `.slds-no-print` polyfill rules in the same `@media print` block left intact.
   2026-05-18 Lakshmi — §15.4 datatable print: added `min-width: 0 !important` on inner `<table>`/`.slds-table`. DevTools Computed confirmed the table has BOTH inline `style="width: 980px"` AND `min-width: 980px` — `width:100% !important` overrode the inline width but `min-width:980px` held the floor, leaving row dividers exiting the card right edge. `min-width:0` releases the floor so `width:100%` resolves to the card width. Confidence raised to ~92% via DevTools Computed inspection.
   2026-05-18 Lakshmi — §15.4 datatable print row-dividers exiting card right edge: lightning-datatable sets inline `width` (~980px) on `.dt-width-observer`/`.dt-outer-container`/`<col>` from the column-sum, so `table-layout:fixed; width:100%` resolved to 100% of 980px (not the ~780px card). Added `width:100% !important; max-width:100% !important; min-width:0 !important` on all internal width wrappers (`.dt-width-observer`, `.dt-outer-container`, `.slds-scrollable_x/_y`, `.slds-table_header-fixed_container`, etc.), and reset `<col>` inline widths to `auto` so fixed-layout distributes columns proportionally within the card width. Internal-DOM override (Miss 8).
   2026-05-18 Lakshmi — §15.4 datatable print scrollbar fix expanded: the real scroll container is `lightning-datatable`'s internal `.dt-outer-container` (inline `style="height:100%"`), not `.slds-scrollable_x`. DevTools "Emulate print" reuses live layout and hid it; Chrome's real print preview paginates and re-creates overflow. Added `.dt-outer-container`, `.dt-width-observer`, `c-arfocus-custom-datatable`, `.portal-table-wrapper`, `.portal-table-body`, `.portal-data-table`, `.slds-table_edit_container` to the `.ark-reports-section` print override (Miss 8), plus `table-layout:fixed; width:100%` on the inner `<table>` / `.slds-table` so columns lay out within the print page width. `!important` beats the inline `height:100%`.
   2026-05-18 Lakshmi — §15.4 removed datatable horizontal scrollbar in print: added `@media print` rule setting `overflow:visible !important; max-height:none; height:auto` on `.ark-reports-section` descendants (`c-arfocus-data-table`, `lightning-datatable`, `.slds-scrollable_x`, `.slds-scrollable_y`, `.slds-scrollable`, `.slds-table_header-fixed_container`). Internal-DOM override (Miss 8) — no public styling hook for datatable scroll containers.
   2026-05-18 Lakshmi — §15.4 print logo-bar root cause: an earlier @media print block at line ~3002 with `width:100% !important; max-width:none !important` on `html c-arfocus-mrp-header, html .ark-mrp-header, html .ark-mrp-header__logo-bar` was winning the cascade over the new 100vw rule (equal specificity, later source order). Fix: updated THAT existing block to `width:100vw !important; max-width:100vw !important; position:relative; left:0; margin:0; box-sizing:border-box`. Removed the now-redundant earlier @media print block I had just added. Single consolidated rule.
   2026-05-18 Lakshmi — §15.4 print logo-bar final fix: replaced the percentage-cascade host width rule with an `@media print { html c-arfocus-mrp-header { width:100vw; max-width:100vw; position:relative; left:0; margin:0 } }` viewport-width override. Root cause: REVIEW_SUBMIT page nests the header inside Experience Cloud BYO scoped-header-and-footer → `community_layout-column` → `.column-content` (flex wrappers that shrink-wrap the host to ~154px). `width:100%` resolved to that narrow parent. `100vw` detaches from ancestor constraints. Validated in DevTools before deploy.
   2026-05-18 Lakshmi — §15.4 removed temp diagnostic outline block. Real fix added OUTSIDE @media print: `c-arfocus-mrp-header { display:block; width:100%; flex:1 1 100% }` — the LWC host was shrink-wrapping to ~154px on REVIEW_SUBMIT page (Experience Cloud BYO scoped-header-and-footer flex wrapper shrink-wraps host to content width). Previous @media-print-scoped fix did not fire because REVIEW_SUBMIT is rendered as live page, not print-emulation. Diagnosis: Computed tab showed `.ark-mrp-header__logo-bar` width 153.828px while `justify-content:space-between` was already applied, proving the bar was constrained by the host, not by missing flex.
   2026-05-18 Lakshmi — §15.4 hardened print logo-bar layout. Added `html c-arfocus-mrp-header { display:block; width:100% }` (the LWC host was shrink-wrapping in Chrome print engine, so `width:100%` on the bar resolved to host content width), re-asserted `.ark-mrp-header__actions { flex:1 1 0; display:flex }` (§17 sets `flex:0 1 auto` which fired in print viewport <1024px, collapsing the nav spacer), and pinned `.ark-mrp-header__logo-img_police { margin-left:auto }` as belt-and-suspenders so the right logo always lands at the bar edge even if flex/space-between cascading partially fails.
   2026-05-17 Lakshmi — §15.2 Portal Reports table made responsive. Desktop (≥1024px) keeps the original proportional column-sharing layout (`overflow-x:visible; table-layout:fixed; width:100%`). Added `@media (max-width: 1023.98px)` block flipping to `overflow-x:auto; table-layout:auto; min-width:1000px` so tablet portrait + phone get fixed-width columns with horizontal scroll instead of crushed cells. Paired with arfocusPortalReportsTable.js: introduced `NARROW_BREAKPOINT_PX=1024` + `NARROW_COLUMN_WIDTHS` config (conf 200 / victim 220 / date 200 / status 160 / actions 220, sum 1000), `_isNarrow` `@track`ed + driven by `window.matchMedia('(max-width:1023.98px)')` listener in connected/disconnectedCallback, and `get columns()` now conditionally spreads `initialWidth` only when narrow. Keep CSS media-query bound and JS `NARROW_BREAKPOINT_PX` aligned when tuning.
   2026-05-17 Lakshmi — §1 added `--portal-site-max-width: 1400px` token mirroring Experience Builder → Site Spacing → Max Content Width. Swapped literal `1400px` → `var(--portal-site-max-width)` in `.ark-mrp-header__logo-bar` + `.ark-mrp-header__help-bar` full-bleed calc math so header bars read from a single value if the Builder cap ever changes. Verified via DevTools 2026-05-17 that `<main>` + `.content-container` carry NO width cap, so the cap must come from individual self-capping components. Kept `max-width:1400px; margin-inline:auto` on `.portal-container__layout` + `.portal-container__loading` (wizard shell — load-bearing) AND on body wrappers `.ark-your-reports-page` / `.ark-mrp-resources` / `.ark-postlogin` (standalone components NOT nested under `.portal-container__layout` — also load-bearing). No CSS removals this turn; only token + header-bar calc indirection.
   2026-05-17 Lakshmi — §16.3 Rule -2 reservation rewritten as `position:absolute; top:100%` on `.ark-report-additional-info .ark-input-textarea .slds-form-element__help`, with `position:relative` directly on the `<lightning-textarea>` host (`.ark-input-textarea` — itself the `.slds-form-element` containing block; no nested `.slds-form-element` exists). Previous `min-height:18px` reservation only covered the empty state; in error state SLDS injected the error icon + text and the slot grew past 18px, pushing counter and Submit downward (Miss 16 pile-up). Absolute positioning takes the slot out of flow entirely so the counter and Submit row stay pinned in BOTH empty and error states.
   2026-05-15 Lakshmi — §16.3 counter `margin-top` `-48px` → `-44px` (was overlapping focused textarea blue border); added Rule -2 reservation `.ark-report-additional-info .ark-input-textarea .slds-form-element__help { display:block; min-height:18px !important }` so "Complete this field." error does not shift counter / Submit downward when validation triggers.
   2026-05-15 Lakshmi — §16.3 `.ark-report-additional-info__submit` `margin-top:-42px` to tighten Submit row up close to the character counter.
   2026-05-15 Lakshmi — §16.3 reverted character-counter hide; counter is now kept VISIBLE and pulled tight to the textarea via `margin-top:-24px !important` (4px below the textarea instead of the wrapper's 28px gap). Wrapper's `gap:28px` still governs counter→Submit spacing.
   2026-05-15 Lakshmi — §16.3 character-counter hide selector corrected (round 2). The counter `<p>` is a SIBLING of `<lightning-textarea>` inside `.ark-report-additional-info`, NOT a descendant. Selector now `.ark-report-additional-info > p.slds-text-body_small.slds-text-align_right[aria-live="polite"] { display:none }`.
   2026-05-15 Lakshmi — §16.3 character-counter hide selector corrected. The counter is a sibling `<p aria-live="polite" class="slds-text-body_small slds-text-align_right slds-p-top_xx-small">`, NOT inside `.slds-form-element__help`. Previous selector (form-element__help) missed it; replaced with `.ark-report-additional-info .ark-input-textarea p.slds-text-body_small.slds-text-align_right[aria-live="polite"] { display:none }`.
   2026-05-15 Lakshmi — §16.3 added `.ark-report-additional-info .ark-input-textarea .slds-form-element:not(.slds-has-error) .slds-form-element__help { display:none }` to suppress `lightning-textarea`'s OOTB `0/max` character counter on the CHRIS-amendment additional-info field. Figma 575:3670 shows no counter; the counter was visually inflating the textarea→Submit gap past the 28px Content Area spec (575:3223). Error slot preserved when `.slds-has-error` is set so required-field validation still renders (Rule -2).
   2026-05-15 Lakshmi — §8 added `.ark-input-dob` + `.ark-field-help_error`. `.ark-input-dob .slds-form-element__help { display:none !important }` suppresses lightning-input's native "Format: M/D/YYYY" hint (and shared SLDS error slot) on DOB date inputs so the unified static `<p class="ark-field-help">Date of birth or Age unknown is required (Format:12/31/2024)</p>` rendered below each DOB input owns the message. `.ark-field-help_error { color: var(--portal-error,#b80000) !important }` flips that static `<p>` red on required-state validation failure. Applied across arfocusAllegedVictim, arfocusAllegedOffender, arfocusPgcSiblings (parent + sibling DOB). Internal-DOM fallback per Rule 4.3 step 5 / Miss 8; anchored to dedicated `.ark-input-dob` class (Rule -3 — not anchored to shared `.ark-input-text`).
   2026-05-15 Lakshmi — §3 `.ark-page-title` color `--portal-neutral-grey-90` → `--portal-blue-tints-blue-3` (#134e81) to unify wizard headings (Reporter Info, PGC & Siblings, Alleged Victims, Alleged Offenders, Narrative) with Doc Upload + Review & Submit. Removed now-redundant `.ark-documents-screen .ark-page-title` override in §16.17.
   2026-05-15 Lakshmi — §16.16 `.ark-btn-print` border 3px → 1px (portal-wide). Affects Review/Submit, Report Preview, and both Your Reports surfaces.
   2026-05-15 Lakshmi — Your Reports Print button: swapped class `ark-reports-print-btn` → portal-wide `ark-btn-print` in both arfocusPortalReportsTable.html and arkMrpYourReports.html, matching the Review/Submit + Report Preview Print skin (56px height, 3px navy border, 20/28 SS Pro SemiBold, 24×24 icon) per user request. Deleted dead `.ark-reports-print-btn` §9 + §17 rules.
   2026-05-15 Lakshmi — §16.8 `.ark-mrp-hero-card` align-items center→flex-end so Login/Register button sits at the right end above the hero image.
   2026-05-15 Lakshmi — §9 added `:focus-visible` rules for `.ark-btn-previous-outline` and `.ark-btn-next-primary` (3px solid navy outline, 2px offset). Base rules set `box-shadow !important` which was suppressing SLDS's default box-shadow focus ring; keyboard users had no visible indicator on the wizard Previous/Next buttons (WCAG 2.4.7 fail).
   2026-05-15 Lakshmi — arfocusMrpHeader: moved `slds-no-print` from the `<nav class="ark-mrp-header__actions">` wrapper onto the three inner items (Home link, Your Reports link, profile menu via `profileMenuClass`). The nav now stays in the flex row in print, preserving its `flex:1 1 0` spacer between the DHS and police logos so they remain at opposite edges; previously hiding the whole nav collapsed the row to just 2 children and §15.4 had to force `space-between` to compensate.
   2026-05-14 Lakshmi — §9 `.ark-btn-previous-outline` border 3px → 1px (per Figma I111:3435;…30617 Tailwind `border` default) and padding 16/20 → 15/19. Outer box now 56×auto matching `.ark-btn-next-primary` exactly (was +6px in each axis due to content-box border). Affects every wizard Previous + Success page Print/Return.
   2026-05-15 Lakshmi — §16.3 `.ark-page-title-section__row` align-items center→flex-start so the Print button sits at the H1 top baseline, not centered against the taller H1+divider stack.
   2026-05-15 Lakshmi — §16.1 `.ark-your-reports-page` top padding 40→28px so the "Your Reports" H1 sits 28px below the MRP header.
   2026-05-14 Lakshmi — §15.4 bumped logo-bar print override specificity to `html .ark-mrp-header__logo-bar` so it beats §17 mobile breakpoint `.ark-mrp-header__logo-bar { padding:12px 16px !important; gap:12px !important }` which Chrome's narrow print viewport also triggers; without the bump §17 won the cascade (later source order, equal specificity) and the two logos kept clustering left. Also mirrored §16.3 Your Reports header restructure into `arfocusPortalReportsTable.html` because that bundle (not `arkMrpYourReports`) is what Experience Builder renders on /your-reports.
   2026-05-14 Lakshmi — §9 added `.ark-reports-print-btn` rule (outlined-navy, 2px border, 16/20 typography) so arkMrpYourReports Print button gets a bolder edge per user request; previously the class was referenced in §17 only and inherited bare lightning-button defaults. §16.3 `.ark-page-title-section__row` un-scoped from `.ark-report-preview-page` so the same flex row layout works on the Your Reports page header. §15.4 added `a[href]::before/::after { content: none }` inside @media print to suppress the URL append that Chromium injects after each link (was printing as "2402915 (/mrp/ar-re…)" inside the Reports table).
   2026-05-14 Lakshmi — §16.3 re-asserted `.ark-field-row { flex-direction: row }` + `.ark-field-col { flex: 1 0 0 }` in @media print. Chrome print viewport (~816px) triggers §17 mobile breakpoint which flips field rows to a single column; Preview was printing as a tall single column instead of the 2-col Figma layout. Mirrors the §16.16 `.ark-review-fields` 2-col re-assert.
   2026-05-14 Lakshmi — §15.4 added `@page { margin: 0 }` to suppress Chrome's browser-injected URL/date/page-number headers and footers (they render inside the @page margin band — no margin, no room). Also re-asserted `.ark-mrp-header__logo-bar { display:flex; justify-content:space-between }` in @media print because SLDS `.slds-grid` is unreliable in print on LWR (same root cause as slds-no-print polyfill) and the two logos were collapsing to the left in print preview.
   2026-05-14 Lakshmi — §15.4 added `@media print { .slds-no-print { display:none !important; } }` polyfill. The SLDS 1 `slds-no-print` utility isn't loaded on this Experience Cloud (LWR) site, so chrome (header help bar, auth nav, left-nav stepper) and wizard footer were still printing despite the class being placed. Polyfill makes every `slds-no-print` we already wrote functional.
   2026-05-14 Lakshmi — Print pass: added §15.4 `.ark-print-banner` shared print-only header; new §16.3 @media print block for arkMrpReportPreview (white card, print-color-adjust:exact, page breaks, banner visible); rewrote §16.16 @media print block for arfocusReviewSummary (chrome reset, 2-col grid re-assert, print-color-adjust:exact, page-break:avoid on sections/persons, banner visible). Portal chrome (header, footer, left-nav stepper, flow-navigator) hidden via OOTB `slds-no-print` on each chrome LWC root. Print-only banner shows "Mandated Reporter Portal" + render-time timestamp; Preview adds CHRIS Referral #.
   2026-05-14 Lakshmi — §16.3 `.ark-report-card` box-shadow upgraded from single-side `0 4 8 rgba(0,63,94,0.1)` to dual `0 -2 6 / 0 2 6 rgba(0,63,94,0.08)` mirroring `.ark-form-card`. Top edge of the report card was invisible against the white page bg (no top shadow line above "Information added after initial submission"). Now matches form-card lift. Also added `.ark-page-title-section__row` to host the Print button inline with the H1.
   2026-05-14 Lakshmi — §16.2 `.ark-success-page` removed `min-height: 630px` + `align-items: center`. Both kept content vertically centered inside a 630px band, producing a large empty gap above the icon on shorter content (arkMrpError submission-failed page especially noticeable). Content now sits at the top of the band; bottom padding still provides breathing room above footer. Affects both arkMrpSuccess and arkMrpError (shared skin).
   2026-05-14 Lakshmi — §8 `.ark-field-help` margin-bottom 0 → 14px !important. Negative margin-top:-11px shrunk the helper `<p>`'s vertical extent so the next form-row (City / State) crowded up against the helper text. 14px compensation restores natural inter-row gap, matching the cross-field error rule pattern.
   2026-05-14 Lakshmi — §8 `.ark-field-help` margin 10px 0 0 0 → -11px 0 0 0 !important. Same hidden-padding-bottom failure mode as the cross-field error rule below — Address Line 1 / Address Line 2 helper `<p>` was rendering ~22-25px below input shell instead of matching the 4px error-line spacing. Affects AV/AO/PGC/Reporter Intake/Victim Family address rows.
   2026-05-14 Lakshmi — §8 `.ark-input-text/-combobox/-textarea + .slds-text-color_error`: margin-top 4px → -14px !important + added margin-bottom:14px !important + display:block. Same SLDS hidden-padding-bottom failure mode as the multiselect fix below — lightning-input ships padding-bottom on an inner wrapper layer between the visible input shell and where the custom-error sibling div renders (~18px hidden), so margin-top:4px only added on top of that and produced ~22px visible gap (AV Daycare + DOB still showed loose error after the earlier deploy). Negative margin-top:-14px claws the hidden space back → ~4px effective gap. margin-bottom:14px compensates the cell's natural extent so the Age-unknown checkbox under DOB does not crowd up against the error line. Matches native lightning-input error spacing.
   2026-05-14 Lakshmi — §8 .ark-input-multiselect .slds-has-error .slds-form-element__help: margin-top 4px → -7px !important + added margin-bottom:14px !important. SLDS ships padding-bottom on `.slds-dropdown-trigger_click` (a middle layer not covered by the existing zero-rule) which added ~11px hidden space between the visible input bottom and the `__help` baseline. Negative margin pulls `__help` up by 7px → ~4px effective gap above; compensating 14px margin-bottom restores the form-element's natural vertical extent so the next row (Gender) keeps its normal inter-row gap instead of crowding up against the error line. Matches native lightning-combobox error (Ethnicity sibling).
   2026-05-18 Lakshmi — arfocusDataTable.css pagination footer rewritten to match Figma 625:5115 (was old prototype values overriding testTheme.css §15.2 from inside the LWC shadow root). Prev `.portal-page-btn` border-radius 50%→5px (was a circle, now Figma-correct rounded square), bg #fff→#eaeaea, border 1px #ccc→none. Next `.portal-page-btn-next` bg #003366→#154570 + added soft shadow `1px 4px 10px rgba(115,115,115,0.25)`. `.portal-view-all` color #003366→#154570 + SS Pro SemiBold 16/20 tracking 0.112. `.portal-page-input` resized 3rem→53×32 with #c4ced1 border + SS Pro SemiBold. `.portal-pagination` border-top removed (Figma has no divider above pager). `.portal-pagination-controls` gap 0.5rem→16px. Component-local CSS wins over §15.2 in shadow DOM; §15.2 rules are kept as portal-wide documentation. Scoped via `<template lwc:if={showPortalPagination}>` — only the Reports table consumer uses these classes.
   2026-05-18 Lakshmi — §15.2 Portal Reports narrow Actions column 210→240 (sum 950→980): link cell renders SS Pro SemiBold 18/24 underlined (§15.2 `arfocusNavLinkCell` inline style), so `Add additional Info` measures ~190px and was clipping the trailing "o" at 210 (content room 178 after 8/16 cell padding). 240 gives ~208 content + ~18px buffer. Desktop ≥1200 unaffected (proportional `width:100%`).
   2026-05-18 Lakshmi — §15.2 Portal Reports table: desktop base rule `overflow-x: visible` → `overflow-x: hidden` to suppress an inert horizontal scrollbar SLDS was rendering on ≥1200px viewports even though the proportional table fits the card. Bumped narrow Actions column 180→210 (`Add additional Info` was truncating at 180 — ~148px content width after 8/16 cell padding); narrow `min-width` 920→950. Removed stale duplicate `@media (max-width: 1023.98px)` block left by a prior local-only edit. Paired JS: arfocusPortalReportsTable NARROW_COLUMN_WIDTHS.actions 180→210.
   2026-05-18 Lakshmi — §15.2 Portal Reports table responsive: added `@media (max-width: 1199.98px)` block flipping `.dt-outer-container` / `.slds-scrollable_x` / `.slds-table_header-fixed_container` to `overflow-x:auto` and `.slds-table` to `table-layout:auto; min-width:920px; width:auto` so tablet (incl. iPad Pro 1024 portrait) and phone get horizontal scroll instead of crushed columns. Paired JS change: arfocusPortalReportsTable NARROW_BREAKPOINT_PX 1024→1200, NARROW_COLUMN_WIDTHS confirmation 200→160 + actions 220→180 (sum 1000→920) — trims wasted whitespace on 7-digit confirmation numbers and lets `Add additional Info` fit the Actions cell. Desktop (≥1200) keeps original proportional `table-layout:fixed; width:100%` behaviour unchanged. Host-chain scoped (Rule -3) — Documents and other datatable consumers unaffected.
   2026-05-14 Lakshmi — §8 added `.ark-input-text + .slds-text-color_error` (and combobox / textarea variants) rule: tightens the gap above cross-field error divs (AV/AO/PGC Daycare + DOB cross-field errors, Sibling DOB) to 4px top margin / 12px / 16px line-height — matches native SLDS `.slds-form-element__help` spacing. Was previously ~20-25px because the custom error div renders as a sibling of `<lightning-input>` (not inside the help slot) and inherited `slds-text-body_small` 13px/18px with zero top tuning. No HTML change required.
   2026-05-14 Lakshmi — §8 .ark-input-multiselect .slds-has-error .slds-form-element__help: added `!important` to color/margin-top/font-size/line-height so SLDS + Experience Cloud bundled `__help` margins lose the cascade and the "<label> is required" line sits 4px below the input shell (was ~20px). HTML + JS already wire `slds-has-error` via formElementClass getter (Akhilesh 05/13) — bug was the rule lacking !important per Miss 8.
   2026-05-14 Lakshmi — §16.8 .ark-mrp-hero-card gap 33 → 25px; removed .ark-mrp-hero-card__cta margin-top:82px so button top aligns with "Welcome to" h1 in the adjacent column.
   2026-05-15 Lakshmi — §16.5 .ark-mrp-header__action-link: added hover/focus affordance (light-gray #f3f3f3 pill, 4px radius, 6/10 padding, 0.12s transition) so Home/Your Reports match the profile-icon button's native SLDS hover. Resting padding/radius reserve the pill area to prevent reflow.
   2026-05-15 Lakshmi — §16.5 .ark-mrp-header__action-link color changed from var(--utility-black-800) to var(--nav-btn-navy) (#002b61) on default + :hover/:focus/:visited/:active. Also emptied component-local arfocusMrpHeader.css (Rule 4.3 violation — all rules duplicated in §16.5 with weaker specificity; global !important was already winning). Component file now placeholder-only.
   2026-05-13 Lakshmi — arfocusPgcSiblings restructure (HTML-only): Sibling Information card now contains ONLY the Yes/No gate. Each sibling renders as its own c-arfocus-collapsible-card (mirroring the PGC card SHELL — show-delete in header, same body padding via §16.14 `pr-[55px]`). Field set inside the sibling card UNCHANGED from previous inline `.ark-sibling-block` (name, gender, daycare, race, ethnicity, DOB+Age unknown, conditional Approximate Age/Months row). "+ Add Sibling" button now always rendered below the card; `isAddSiblingDisabled` getter keeps it disabled until siblingsGate === 'Yes'. No CSS change in this file; logging here per §0 convention.
   2026-05-13 Lakshmi — §15.2 Portal Reports table: horizontal scroll suppressed per requirement ("Horizontal scroll on your report not needed"). Added host-chain rule setting `overflow-x: visible` on `.dt-outer-container`, `.slds-scrollable_x`, `.slds-table_header-fixed_container`, and `table-layout: fixed; width: 100%` on `.slds-table` so columns share card width instead of summing to natural widths. Scoped to `c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable` only (Rule -3 — does not affect Documents or other consumers). Paired JS/HTML change: arfocusPortalReportsTable default page-size 10→5 per requirement "Default to be set to 5 records on Your Reports table".
   2026-05-13 Lakshmi — §8 .ark-sibling-radio label box `min-width: 54px` added per Figma 247:4527/4528 `w-[54px]` label allocation. SLDS .slds-form-element__label has no width by default so "Yes" rendered at ~22px + 12px gap; Figma allocates 54px per label box → effective gap between "Yes" and "No" circle was ~12px in impl vs ~44px in Figma. Now matches.
   2026-05-13 Lakshmi — §16.14 PGC + Siblings (Figma 247:4460): removed `.ark-sibling-block__delete` rules (per-sibling delete icon was not in Figma — JSON 247:4760+ shows no delete on sibling rows). Added scoped overrides `.ark-pgc-screen .ark-reporter-screen__content { gap: 32px }` + `.ark-pgc-screen .ark-btn-add-victim { margin-top: 0 }` so cards stack matches JSON 247:4471 `gap-[32px]` (was 40+32=72px above Add button vs 40px below — asymmetric). HTML side: removed the per-sibling delete button block from arfocusPgcSiblings.html.
   2026-05-13 Lakshmi — §16.17 arfocusDocuments: confirm checkbox unified with portal-wide visual — HTML adds `ark-manual-mode-toggle` class on the lightning-input so it reuses the §8 skin (white bg / 2px #003464 border / navy tick). Added §16.17 disabled-state rules for `.ark-btn-upload-doc` mirroring `.ark-btn-previous-outline` (faded white bg, #c9c9c9 border, #a8a8a8 label, no shadow, opacity 0.65, pointer-events:none) so the Upload Document button visibly greys out when the confirm checkbox is unchecked.
   2026-05-13 Lakshmi — §16.5 arfocusMrpHeader compact header: logo-bar padding-block reduced 22→5px to shrink total bar height ~105→71px (target 70 per Figma; logo heights kept at original 52/61 — 1px rounding overhead so logos don't clip).
   2026-05-13 Lakshmi — Documents inner-table chrome (Figma 33:5012, node 238:4015) added §15.3 scoped `c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable …`. Dead §16.17 .ark-documents-table* rules removed. Document-Name link uses new `arfocusFileLink` custom cell type (SS Pro SemiBold 16/24 #002b61 underline 0.4) registered in arfocusCustomDatatable. Delete column uses standard type:'button-icon' utility:delete bare variant via onrowaction. onnavigate handler in consumer keeps popup-blocker workaround for getViewUrl (sync window.open('about:blank') then redirect on .then). Header chrome (border, padding, typography) matches §15.2 Reports; body cell typography differs (SS Pro Regular 16/24 #1d2528 tracking 0.16 vs Reports' lh 20 / tracking 0.112).
   2026-05-13 Lakshmi — §7 removed the @media (min-width:1025px) override that raised `.ark-alleged-victim-screen / .ark-alleged-offender-screen / .ark-pgc-screen .ark-form-row__cell / __cell_half / __pair` basis from §7 default to `flex: 1 1 380px`. The override was written when the §7 default was 428px (relaxing it down to 380 to clear the `pr-[55px]` squeeze); since §7 was later dropped to `1 1 260px`, the override flipped from helpful to harmful — it was pushing AV/AO/PGC cells UP from 260 to 380, taking the 2-cell row threshold from 552px to 792px and causing Race+Ethnicity, Gender+SSN, Daycare+DOB etc. to wrap one-per-line under the 55px right-pad. Removing the override lets AV/AO/PGC inherit the 260px default and render 2-column to match Reporter Intake.
   2026-05-13 Lakshmi — §16.3 arkMrpReportPreview: added `.ark-report-additional-info` flex column gap:28px + `.ark-report-additional-info__submit` justify-end so the textarea and Submit button respect the Figma 575:3223 28px Content Area gap (was relying on slds-m-top_medium = 12px).
   2026-05-12 Lakshmi — §8 .ark-input-combobox open-dropdown options: added internal-DOM override (Rule 4.3 step 5 / Miss 8 — no SLDS hook exists for listbox option typography). Anchored on .slds-listbox (Rule -3) to leave the resting shell + chevron + panel position untouched. Options now match Race multi-select panel: SS Pro Regular 15/24/0.15 #1d2528, hover #f3f2f2, selected #e5f1fe + 600, checkmark fill #002b61. Portal-wide on every lightning-combobox carrying ark-input-combobox.
   2026-05-12 Lakshmi — §8 .ark-manual-mode-toggle label color #51646d → #1d2528 (Figma 16:1035 / 16:1041 / 518:3322 — portal-wide darker label). Affects checkbox labels on AllegedVictim, AllegedOffender, AddressInput, Narrative, PgcSiblings.
   2026-05-12 Lakshmi — Portal Reports inner-table chrome (Figma 625:5125) moved to testTheme.css §15.2 anchored on host chain `c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable …`. Synthetic-shadow leak under Experience Cloud lets static-resource CSS reach lightning-datatable's <table> via light-DOM custom-element host tags (CARES pattern, docs/ThemePortal.txt §Table css). Covers: `.dt-outer-container` flatten; header th 1px #728a92 border + 10/16 pad + SS Pro SemiBold 16/20 #1d2528 across `.slds-th__action` + `.slds-truncate` + plain span (all link pseudo-states per Miss 5); sort chevron `lightning-primitive-icon svg` fill #1d2528 16x16; resting-state border/outline suppressed via `:not(.slds-has-focus)`; body td/th 1px #c4ced1 border + 8/16 pad + h40 + SS Pro Regular 16/20 #1d2528 (covers `lightning-base-formatted-text` / `-formatted-text` / `-date-time` / `-number` / `-url` + `.slds-truncate`); `.slds-table_bordered` borders neutralised. Bundle CSS `:host(.portal-data-table)` chrome block removed (proven unreachable from a static resource — bundle CSS is scoped to this LWC's shadow root, not lightning-datatable's). Cell template typography re-applied as inline `style=` on arfocusNavLinkCell.html + arfocusBadgeCell.html (sidesteps shadow boundary). `class="portal-data-table"` dropped from arfocusDataTable.html portal variant — now dead. Caveat: host-chain selectors depend on synthetic shadow; if Salesforce ever flips Experience Cloud to native shadow these will need re-routing.
   2026-05-11 Lakshmi — §16.18 .portal-container__layout dropped `padding-left:46px` (no inline padding at all). Wizard column (sidebar + form) now spans edge-to-edge to match navy header bar's outer edges on both sides. Sidebar's own internal padding handles AR-logo vertical alignment; form's .ark-reporter-screen handles its own internal padding.
   2026-05-11 Akhilesh Pk — §16.18 + §17 .portal-container__loading now matches the post-load layout footprint (max-width:1400px, margin-inline:auto, padding-left:345px to reserve the sidebar slot, box-sizing:border-box). Previously the loading state had no width/offset constraints so the spinner sat dead-center of the viewport and the page snapped left when .portal-container__layout (1400px column + 345px sidebar) rendered. Mobile (<=1024px) zeros padding-left to mirror the stacked layout. Fixes horizontal shift when the portal LWC is hosted on an internal Object record page or any page wider than the wizard column.
   2026-05-11 Lakshmi — arfocusCustomDatatable theming made generic: replaced `:host(.portal-data-table)` rules with CSS-variable hooks (--ark-dt-header-*, --ark-dt-row-*, --ark-dt-link-*) so consumers theme the inner table from their own light-DOM wrapper (vars cascade through both shadow roots). Portal Figma 625:5125 values now live on `.portal-table-wrapper` in §15.2 — single source for portal theming. `class="portal-data-table"` removed from arfocusDataTable.html. Future consumers (FCS/DDS/Salesforce variant) inherit SLDS defaults via var fallbacks; can override by setting the same vars on their own ancestor wrapper.
   2026-05-11 Lakshmi — Portal Reports inner-table theming (Figma 625:5125) relocated from testTheme.css §15.2 → arfocusCustomDatatable.css scoped via `:host(.portal-data-table)`. Static-resource CSS cannot pierce the lightning-datatable shadow root, so the §15.2 rules were no-ops. arfocusDataTable.html portal-variant `<c-arfocus-custom-datatable>` host now carries `class="portal-data-table"`. §15.2 retains card chrome + pagination + view-all only.
   2026-05-11 Lakshmi — Portal Reports table (Figma 625:5125) link + status fidelity: arfocusPortalReportsTable Confirmation Number + Actions columns swapped from `type:'button'` → `type:'arfocusNavLink'` so the existing §15.2 `c-arfocus-nav-link-cell a` hyperlink rules apply (SS Pro SemiBold 18/24 #154570 underlined). Status column reuses arfocusBadge cell rebuilt as 16px icon + SS Pro SemiBold 14/20 #1d2528 label (spinner/warning for In Progress; package_org/success for Submitted / Re-Submitted). onrowaction → onnavigate handler. arfocusBadge typeAttributes: ['label','iconName','iconVariant']. No testTheme.css changes beyond removing the obsolete --slds-c-button-text-color block.
   2026-05-11 Lakshmi — §16.1 .ark-your-reports-page added `max-width:1400px; margin-inline:auto` so the page stops stretching edge-to-edge on wide viewports (matches .portal-container__layout / .ark-mrp-resources / .ark-postlogin portal-wide 1400px cap).
   2026-05-08 Lakshmi — §16.10 .ark-ack-row__checkbox refactored from background-image SVG (ark-check-box.svg, fill #003688) to SLDS Styling Hooks (Rule 4.3 step 4): white box / #154570 border / navy fill + white tick when checked. Drops 4 internal-DOM rules + asset dependency.
   2026-05-07 Lakshmi — §8 .ark-manual-mode-toggle: added SLDS checkbox styling hooks (Rule 4.3 step 4) to neutralise Experience Cloud community brand-blue on .slds-checkbox_faux. Unchecked = white bg + #c4c4c4 border, checked = portal navy #003464 with white tick, radius 3px. Matches Figma 16:1034 / 16:1040 / 16:1043 plain unchecked boxes.
   2026-05-07 Lakshmi — §8 combobox chevron 28→20px (right:16→12) + value padding-right 48→36px. Figma 111:3401 calls for 28x28 but that left only ~52px of text room in the 128px Prefix cell ("ASP Sr...." truncated). 20x20 is still legible on the 60px shell and gives ~12px more text room across every combobox.
   2026-05-07 Lakshmi — §8 added `.ark-input-combobox` value-text `padding-right:48px` (superseded same day). Internal-DOM fallback per Rule 4.3 step 5 / Miss 8 (no SLDS hook for value-text padding).
   2026-05-06 Lakshmi — §16.3 arkMrpReportPreview Figma 261:7091 fidelity pass: HTML wrapper now reuses .ark-reporter-screen + .ark-reporter-screen__content (mobile rules in §17 apply for free); .ark-report-preview-page demoted to a modifier that only overrides __content gap to 28px. .ark-report-card shadow corrected from --hf-selection-ds-shadow (0/4/16) to 0 4 8 rgba(0,63,94,0.1) per Figma 261:7095. .ark-section-body padding-left:24 → padding:0 24 per Figma 261:7098 px-[24px]. No JS/HTML structural changes beyond the shell wrapper.
   2026-05-06 Lakshmi — §17 added arfocusReviewSummary mobile responsive rules. ≤1024px: .ark-review-card padding 40→32. ≤768px: .ark-reporter-screen shell padding 40→24/16 (affects every reporter screen + Review); .ark-review-card padding 24/16 + gap 20; .ark-review-section__title 24/32 → 20/28; .ark-review-fields 2-col grid collapses to single column with 12px row-gap; .ark-btn-print stretches full-width with !important on inner button (Miss 8 — Experience Cloud brand-button width); .ark-review-banner padding 12/16; section head align-items flex-start. Footer Cancel/Abandon/Submit already covered by existing .ark-form-footer mobile rules.
   2026-05-06 Lakshmi — Rule 4.B exception: lightning-datatable inner-table theming moved INTO arfocusCustomDatatable.css (cannot live in testTheme.css — datatable renders <table> inside its own shadow root, static-resource selectors don't penetrate). Scoped via :host(.portal-data-table) so only the portal variant is themed; Salesforce variant unaffected. arfocusDataTable.html portal variant marked with `class="portal-data-table"`. Header `th` 1px #728a92 underline + SS Pro SemiBold 16/20 #1d2528, body `td` 1px #c4ced1 div + Regular 16/20 #1d2528 h40, hyperlinks SemiBold 18/24 #154570 underlined per Figma 625:5125.
   2026-05-06 Lakshmi — §15.2 inner lightning-datatable theming added for portal variant (Figma 625:5125): scoped to `.portal-table-wrapper`. Header `th` border-bottom 1px #728a92, pad 10/16, SS Pro SemiBold 16/20 #1d2528. Body `td` border-bottom 1px #c4ced1, pad 8/16, h40, SS Pro Regular 16/20 #1d2528. Hyperlink cells (arfocusNavLinkCell <a>): SS Pro SemiBold 18/24 #154570 underlined tracking 0.4 (default + hover/focus/visited/active per Miss 5). All rules `!important` (Miss 8). Targets internal SLDS DOM — not strict best practice; no SLDS hooks exist for lightning-datatable cell typography.
   2026-05-06 Lakshmi — §15.2 arfocusDataTable chrome migrated out of component .css into testTheme.css per Rule 4. Salesforce variant rules (.page-size-select / .page-button / .slds-is-relative) preserved. Portal variant rebuilt to Figma 625:5125: card no border / radius 10 / padding 16-32 / shadow 0-4-8 rgba(0,63,94,0.1) / flex column gap 16; .portal-title SS Pro SemiBold 24/32 #000; .portal-print-btn matches Review/Documents print skin; .portal-page-btn 32x32 #eaeaea radius 5; .portal-page-btn-next #154570 white chevron with shadow; .portal-page-input 53x32 1px #c4ced1; .portal-view-all #154570 SS Pro SemiBold 16. §16.1 duplicate .portal-table-wrapper override removed (now in §15.2). Component .css emptied to placeholder.
   2026-05-13 Lakshmi — §8 arfocusMultiSelectPicklist shell→pills gap fix: added `.ark-input-multiselect > .slds-form-element / .slds-form-element__control / .slds-combobox__form-element { margin-bottom:0; padding-bottom:0 !important }` to neutralize SLDS/Experience-Cloud bundled bottom spacing that was stacking on top of the wrapper's `gap:10px`, inflating the visible Race input → pill row gap above the 10px Figma target. Internal-DOM fallback per Rule 4.3 step 5 / Miss 8.
   2026-05-06 Lakshmi — §16.16 arfocusReviewSummary font-family fixed: replaced hardcoded `'Source Sans Pro', sans-serif` (not loaded — fell back to a system serif) with the project's self-hosted `'ark-source-sans-pro', sans-serif` declared in §2 @font-face. Affects section titles, field labels/values, person name/role, age-unknown, banners, print button, empty state.
   2026-05-06 Lakshmi — §16.16 arfocusReviewSummary fluid layout fixes: dropped the inner `<div class="review-summary slds-card review-summary--portal">` wrapper (slds-card was painting a 1px border around the whole page) — replaced with shared `.ark-reporter-screen__content` flex stack used by all reporter screens. Removed `max-width:1023px` from `.ark-review-card` so the card grows/shrinks with the viewport (Rule -1: Figma px is a basis, not a cap).
   2026-05-06 Lakshmi — §16.16 arfocusReviewSummary page header rebuilt to use shared `.ark-page-title-section` + `<h1 class="ark-heading-1 ark-text-portal-blue-3">` + `.ark-heading-divider` (mirrors arkMrpReportPreview / arfocusDocuments / arkMrpYourReports). Adds the missing 100×4 #134e81 underline below "Review & Submit" and renders title in Portal Blue 3 per Figma I105:3816;…22380:1363. Dead `.ark-review__title` override removed (class was never in HTML).
   2026-05-05 Lakshmi — §16.18 .portal-container__content removed `padding: 1.5rem 2rem` (gray gutter showed between sidebar and the white .ark-reporter-screen card which already owns its own 40px 32px 40px 40px padding). Added `min-width:0` so flex children can shrink. 
   2026-05-05 Lakshmi — §16.5 added `c-arfocus-mrp-header { display:block; width:100% }` host rule. Custom elements default to display:inline so the LWC was shrinking to content width on zoomed-out / wider viewports, leaving the gray/navy header bars narrower than the body below.
   2026-05-13 Lakshmi — §16.16 + §17 `.ark-btn-print` made scope-independent (was `.ark-review-screen .ark-btn-print …`). Print is a portal-wide button skin reused by arfocusReviewSummary AND arkMrpReportPreview; scoping it to one screen meant the other rendered as bare SLDS outline-brand chrome. True reuse per Rule 0.
   2026-05-13 Lakshmi — §8 multiselect shell→pills spacing: restored wrapper `gap:10px` to match Figma 16:1085 `gap-[10px]` and zeroed `.slds-form-element` margin-bottom inside the multiselect so the wrapper gap is the sole contributor (prev gap:0 sat too tight; prev gap:10 + bundled margin doubled the distance).
   2026-05-06 Lakshmi — §8 added `.ark-input-text/.ark-input-textarea .slds-has-error` rule: restores `padding-left:44px` on the input (base skin's `padding:16px !important` was clobbering SLDS's reserved icon gutter, causing the red error icon to overlap the typed value). Sized the SLDS error icon to 16×16 at left:16 / vertically centered against the 60px shell. No SLDS hook exists — internal-DOM fallback per Rule 4.3 step 5 / Miss 8.
   2026-05-05 Lakshmi — §7 reverted .ark-form-row__cell / __pair / __cell_half from `flex: 0 0 428px; max-width: 428px` back to `flex: 1 1 428px` (no max-width). The hard 428px lock was per Figma frame width but broke fluid resize on real screens — cells must grow/shrink with the card. 428px stays as the basis only.
   2026-05-05 Lakshmi — §8 `.ark-input-combobox.ark-input-multiselect` made `display:flex; flex-direction:column; gap:10px` per Figma 16:1085 (Race column `flex flex-col gap-[10px]`). Removes reliance on SLDS-bundled `.slds-combobox` padding-bottom which inflated the shell→pills gap above the 10px target. Pills `margin-top` removed (now owned by wrapper gap).
   2026-05-05 Lakshmi — arfocusMultiSelectPicklist.html error message moved inside `.slds-form-element` using `.slds-form-element__help` (was sibling outside form-element with `slds-var-m-top_xx-small`). Native lightning-combobox uses the same slot; pre-fix Race column ended shorter than its row sibling, dropping out of vertical alignment.
   2026-05-05 Lakshmi — §7 .ark-form-row__cell + .ark-form-row__pair locked from `flex: 1 1 428px` → `flex: 0 0 428px; max-width: 428px` per Figma 111:3402/3403/3406/3424/3425/3430/3431 + 111:3400/3405 (paired). All cells now render at the literal 428px regardless of card width — single (Relationship, Work Email) and paired rows align side-by-side at the same width with empty space on the right of the row, matching the Figma frame. ≤1024px §17 stack-to-100% rule still applies.
   2026-05-05 Lakshmi — §7 .ark-form-row__cell_half reverted from `flex: 1 1 428px` → `flex: 0 0 428px; max-width: 428px` per Figma 111:3591/3595 (Relationship) + 111:3432 (Work Email): single-cell rows are locked to 428px on the left with empty space on the right; previous fluid behaviour stretched the field across the full card width. ≤1024px §17 stack-to-100% rule still applies.
   2026-05-05 Lakshmi — §16.17 added Documents (Optional) screen styles for arfocusDocuments (Figma 33:5012 + 275:3183). New scope `ark-documents-screen` reusing ark-reporter-screen shell + ark-page-title-section + ark-heading-divider + ark-form-footer. Page-title color override #134e81, subtitle weight 400 #1d2528 + inline `__legal-pending` red span. `__confirm-row` (checkbox left + Upload-Document outline button right). `.ark-documents-table` card (white/p20/r10/shadow/gap16/w-1016) with __title h2, __head row (Document Name 229 / Date Uploaded 249 / Actions 163 right), __hr 1px #c4c4c4, __row, __file-link SemiBold underline #002b61, __date Regular #1d2528, __delete via SLDS hook. Upload modal: SLDS dialog with __dropzone (2px dashed #c4c4c4 r10 px162 py24), __icon, __legend. Component has no .css file (root is a block <section>; no :host fix needed). HTML rewritten from lightning-card placeholder to `<section class="ark-reporter-screen ark-documents-screen">` semantic structure. JS adds isUploadModalOpen state + sample documents list (UI only, no upload persistence).
   2026-05-05 Lakshmi — §15.1 c-arfocus-collapsible-card host rule (component .css): `:host { display:block; width:100% }`. Custom elements default to display:inline; without this the host shrunk inside .ark-reporter-screen__content (align-items:flex-start), forcing slotted .ark-form-row rows to wrap one cell per line on Reporter Intake + Victim Family. AV/AO/PGC/Narrative all benefit.
   2026-05-05 Lakshmi — §16.16 added Review & Submit screen styles for arfocusReviewSummary (Figma 105:3811). New scope `ark-review-screen` reusing ark-reporter-screen shell + ark-page-title-section + ark-heading-divider. Added .ark-review-card (white/40p/r10/shadow/gap-24/max-1023), .ark-review-section{__head/__title/__rule/__edit}, .ark-review-fields (2-col grid 16/24), .ark-review-field{__label/__value}, .ark-review-person{__head/__name/__role}, .ark-review-age-unknown{__box}, .ark-review-banner--success/info, .ark-btn-print custom skin (3px #002b61 border, radius 10, shadow, SS Pro SemiBold 20 capitalize). HTML rewritten from `<article>` + slds-grid grids to `<section class="ark-reporter-screen ark-review-screen">` with semantic h1 + ark-heading-divider + ark-page-subtitle, and ark-form-footer (Cancel base / Abandon outline / Submit brand). Component .css emptied to placeholder per Rule 4.
   2026-05-05 Lakshmi — §16.15 new screen scope `ark-narrative-screen` for arfocusNarrative (Figma 33:4361). Refactored HTML to use §15.1 c-arfocus-collapsible-card + §7 ark-form-row + §8 ark-input-* / ark-input-textarea + §9 ark-btn-* + ark-form-footer (mirrors AO/PgcSiblings pattern). Tip box (33:4373) styled inline: bg #e7eef9, border #a3bee7, radius 10, p 20, gap 20, inline red-highlight span. handleToggleDetails updated for collapsible-card event.detail.isOpen. Lightning-card chrome dropped. Screen-unique rule: `.ark-narrative-screen .ark-collapsible-card_open .ark-collapsible-card__content { padding-right: 55px }` per JSON 33:4386 `pr-[55px]`.
   2026-05-05 Lakshmi — §16.14 new screen scope `ark-pgc-screen` for arfocusPgcSiblings (Figma 19:1957 + 247:4460). Refactored HTML to use §15.1 c-arfocus-collapsible-card + §7 ark-form-row + §8 ark-input-* + §9 ark-btn-* + ark-form-footer (mirrors AO pattern). PGC entries one collapsible per row; Sibling Information one outer collapsible containing radio gate + inline `.ark-sibling-block` per sibling (each with top-right delete). JS handlers (handleRemovePgc / handleTogglePgcExpand / handleToggleSiblingsCard) updated for collapsible-card event.detail. Component .css emptied. Screen-unique rule: `.ark-pgc-screen .ark-collapsible-card_open .ark-collapsible-card__content { padding-right: 55px }` per JSON 518:5958 `pr-[55px]` + `.ark-sibling-block` divider/spacing.
   2026-05-05 Lakshmi — §16.13 new screen scope `ark-alleged-offender-screen` for arfocusAllegedOffender (Figma 16:1048). Refactored HTML to use §15.1 c-arfocus-collapsible-card + §7 ark-form-row + §8 ark-input-* + §9 ark-btn-* + ark-form-footer (mirrors AV pattern). JS handlers updated for collapsible-card event.detail. Component .css emptied. Only screen-unique rule: `.ark-alleged-offender-screen .ark-collapsible-card_open .ark-collapsible-card__content { padding-right: 55px }` per JSON 16:1073 `pr-[55px]`.
   2026-05-05 Lakshmi — §16.12 removed `.ark-alleged-victim-screen .ark-form-row__cell/__cell_half/__pair { flex: 1 1 0 }` (was stretching cells to fill, but JSON 16:1017/1020/1024/1025 lock each cell to w-[428px]). Cells now respect §7's literal 428px basis. Added `.ark-alleged-victim-screen .ark-collapsible-card_open .ark-collapsible-card__content { padding-right: 55px }` per JSON 16:1015 `pr-[55px]`. §15.1 open-summary `padding-bottom 12 → 24` to match JSON 16:1004 header-block internal `gap-[24px]` between title row 16:1006 and divider line 16:1013.
   2026-05-05 Lakshmi — §15.1 .ark-collapsible-card__delete tinted to var(--legacy-royal) via SLDS Styling Hook --slds-c-icon-color-foreground / -default.
   2026-05-05 Lakshmi — §15.1 new c-arfocus-collapsible-card common component (SLDS accordion blueprint: slds-accordion / __section[/slds-is-open] / __summary / __summary-action button with aria-controls + aria-expanded / __summary-content / __content with id + aria-hidden). Two-line title/subtitle, optional delete action, slotted body. arfocusAllegedVictim refactored to use it — collapsed/expanded templates collapsed into one <c-arfocus-collapsible-card>. §16.12 trimmed (.ark-victim-summary*, .ark-form-card__chevron-btn / --collapsed dropped); .ark-icon-btn + .ark-address-populated retained.
   2026-05-04 Lakshmi — §16.12 chevron/delete OOTB on arfocusAllegedVictim. Reverted prior native-<button>+SVG approach (broke Rule 4.2). Now uses lightning-button-icon (utility:delete, utility:chevronright, utility:chevrondown) themed via SLDS Styling Hooks (--slds-c-button-color-background/border/shadow → transparent, --slds-c-icon-color-foreground-default → #154570) plus internal-DOM fallback on inner button/.slds-button for padding (Rule 4.3 step 5, no hook exists for that property).
   2026-05-04 Lakshmi — §16.12 added .ark-victim-card-wrapper { width: 100% } so the per-victim wrapper <div> stops shrinking to content width inside .ark-reporter-screen__content (align-items:flex-start). Collapsed summary card now spans full content width per Figma 16:1002.
   2026-05-04 Lakshmi — §16.12 added screen-scoped override `.ark-alleged-victim-screen .ark-form-row__cell / __cell_half / __pair { flex: 1 1 0 }` so two-cell rows split evenly and fill the card body on this screen at any viewport. Reporter Intake + Victim Family keep the shared 428px basis from §7. HTML: added `ark-alleged-victim-screen` class to <article> for scoping.
   2026-05-15 Lakshmi — §16/ark-input-search: 6px padding-left on lightning-helptext to restore label→icon gap (arfocusAddressInput renders raw {label} text — no inner spans like native lightning-input).
   2026-05-04 Lakshmi — §16.12 arfocusAllegedVictim visual fixes per Figma 16:990: ark-victim-summary__label color #51646d → #000 (JSON I16:1002;20224:11269 text-black); ark-address-populated bg white → #eaeaea + border #c4c4c4 → #51646d (JSON I518:3322;5:29348;11959:93425). HTML: added vertical pipe (.ark-form-card__divider) between delete + chevron in summary actions row (Figma I16:1002;22576:1023).
   2026-05-04 Lakshmi — §8 input/combobox shell padding `0 16px` → `16px` (all sides). lightning-combobox renders `.slds-input_faux` as a <button>; native <input> auto-centres single-line text vertically but a <button> does not. With `padding:0` the value text top-aligned in the 60px box and the absolutely-positioned chevron appeared visually below it (looked like vertical stacking on Prefix/Other). Math: 60h − 2·2 borders − 2·16 padding = 24px content area = exact line-height → centred for both <input> and faux <button>.
   2026-05-04 Lakshmi — §8 input/combobox shell vertical padding 20px → 0 (with horizontal 16px). Figma 111:3401 uses `py-[20px]` on a flex `items-center` shell; native <input> ignores flex centering and treats padding additively, so 60h + 4px borders + 40px py + 24px line-height overflowed and clipped the value text at the bottom (visible on "Other"/"Female"/comboboxes generally). Padding 0 lets the browser vertically center the 24px line in the 56px inner area, matching Figma exactly. Textarea overridden separately to padding:16px (multi-line needs vertical padding).
   2026-05-04 Lakshmi — §8 helptext label-to-icon visual gap reduced (Figma I111:3424;5:29348;19658:118848 gap-[8px]): label margin-right 8px → 2px. lightning-input's label markup wraps the text in inner spans plus a trailing whitespace text node that the flex container can't collapse; with margin-right:8px the visible label→icon gap rendered at ~16px instead of the spec'd 8px.
   2026-05-04 Lakshmi — §8 helptext info-icon vertical alignment fix (Figma I111:3424;5:29348;19658:118848 `flex gap-[8px] items-center`): added `align-self:center !important` + `padding:0 !important` + `margin:0 !important` to `.ark-input-* lightning-helptext`. SLDS ships `.slds-form-element__icon` (the class on the helptext host) with `align-self:flex-start` and `padding:0.125rem 0 0 0.25rem`, which beat the parent row's align-items:center and added a stray 4px to the label→icon gap (visible mis-alignment of "i" against label x-height middle on Race / Gender / Parent-Guardian last name).
   2026-05-04 Lakshmi — §7 .ark-form-row__cell / __cell_half / __pair switched from `flex: 0 0 428px` → `flex: 1 1 428px` so cells grow proportionally past the 888px design content width. Single-cell rows (Relationship, Work Email) and paired rows now track the same width at any viewport; previously single rows left the right half empty when the card was wider than 888px.
   2026-05-04 Lakshmi — §7 .ark-form-row__pair changed from align-items:flex-end → flex-start. flex-end was pushing the no-error sibling's label DOWN by the height of the other cell's required-field error slot (visible on First+Middle / Last+Suffix when only one of the pair was empty). flex-start keeps labels top-aligned regardless of which cell has an error.
   2026-05-04 Lakshmi — §7 added .ark-form-row__cell_full (flex 0 0 100%) — full-width row cell used by arfocusAllegedVictim address-different checkbox row (Figma 16:1037 w-full). §16.12 added ark-victim-summary / __name / ark-victim-section-divider / ark-address-populated for alleged-victim collapsed summary bar + populated read-only family address (Figma 16:1002 / 518:3322). arfocusAllegedVictim refactored to use generic ark-reporter-screen / ark-form-card / ark-form-row / ark-input-* / ark-btn-* / ark-form-footer (mirrors Reporter Intake / Victim Family); component .css emptied to placeholder per Rule 4.
   2026-05-04 Lakshmi — §8 explicit `margin-top:10px` on `.slds-form-element__control` (Figma I111:3424;5:29348 `flex flex-col gap-[10px]`): row-gap on the wrapped flex parent wasn't taking effect because SLDS sets its own zero margin on the control wrapper with higher specificity; explicit margin-top wins and matches Figma 10px label-to-shell spacing.
   2026-05-04 Lakshmi — §8 helptext label-row switched to flex `align-items:center` (Figma I111:3424;5:29348;19658:118848 `flex gap-[8px] items-center`): previous `inline-block` + `vertical-align:middle` aligned the 20px info icon to the inline x-height midpoint, sitting ~3px below the SemiBold 15/24 label cap-line. New rules: `.slds-form-element` flex-wrap+align-items:center, label `inline-flex align-items:center`, helptext `inline-flex align-items:center`, control `flex:0 0 100%` to wrap below.
   2026-05-04 Lakshmi — §7 ark-form-row cells locked to Figma literal widths (no flex-grow): __cell 428px, __cell_narrow 128px, __cell_half 428px, __pair 428px (Figma 111:3401/3402/3403/3406/3407 etc.). Previously cells used `flex: 1 1 428px` and stretched to ~444px when the row had slack, leaving Relationship/Work Email visually narrower than First/Last/Middle Name above them.
   2026-05-04 Lakshmi — §8 combobox shell height fix (Figma 111:3401 h-[60px]): forced height:60px on `.slds-combobox_container` / `.slds-combobox` / `.slds-combobox__form-element` / `.slds-form-element__control` so the visible combobox matches the adjacent text input. Centered chevron with `top:50%; margin-top:0; transform:translateY(-50%)` (was off-center by 6px due to SLDS default -0.5rem margin-top tuned for 16px icon). Removed `margin-left:8px` on helptext button (label already has `margin-right:8px`) so info-icon sits at Figma 8px gap not 16px.
   2026-05-04 Lakshmi — §8 collapse `.slds-form-element__help:empty` inside `.ark-form-row` (Rule 4.3 step 5 / Miss 8 internal-DOM override): SLDS reserves an empty error slot under every input that adds ~24px to the visual row gap; collapsing it restores Figma 111:3398 strict 24px row-gap. Re-expands automatically when validation fills the slot.
   2026-05-04 Lakshmi — §7 added ark-form-row (flex wrap, 32px column gap per Figma 111:3399/3404/3423/3429 gap-[32px]) + ark-form-row__pair (8px inner gap per Figma 111:3400/3405 gap-[8px]) + cell width helpers (__cell-flex 428 / __cell-narrow 128 / __cell-half 0-shrink). Reporter Intake rows switched from slds-grid/slds-gutters_small (12px) + slds-m-top_small (8px) to ark-form-row; vertical gap now lives solely on .ark-form-card__body gap:24px (was 24+8=32px effective).
   2026-05-04 Lakshmi — §8 added ark-field-help (Figma I238:4079;…;19051:11319 / I238:4262;…;19051:11319): SS Pro Regular 12/16/0.4px #3b3a48, margin-top 10px under input shell. Renamed legacy `field-help-text` → `ark-field-help` in arfocusVictimFamily / arfocusReporterIntake / arfocusAllegedVictimsScreen.
   2026-05-04 Lakshmi — §8 helptext inline fix: flex-wrap on .slds-form-element so lightning-helptext (sibling of label in combobox) sits inline beside label text instead of stacking on its own line. Control flex-basis 100% to wrap below.
   2026-05-04 Lakshmi — §3 added ark-required-asterisk inline span (color: red) — wired into arfocusReporterIntake subtitle per Figma 111:3385 inline `<span text-[red]>*</span>`.
   2026-05-04 Lakshmi — §16.x ark-form-footer: added 2px #C4CED1 top border + 10px margin-top per Figma I111:3435;5:28703;22370:30611 imgDivider2 (full-width hairline above Cancel/Previous/Next).
   2026-05-04 Lakshmi — §7 ark-form-card__header: added 2px #c4c4c4 bottom border (Figma 111:3396 imgHeader) + 12px padding-bottom; new ark-form-card__divider (vertical 1×24 #c4c4c4, Figma 111:3394 imgDivider1) + ark-form-card__chevron (24×24 painted with ark-chevron-down.svg 20×12, rotates -90° when aria-expanded=false, Figma 111:3395 imgShape2). Replaced lightning-icon chevron in arfocusReporterIntake Your Information / Your Workplace headers with span.ark-form-card__divider + span.ark-form-card__chevron.
   2026-05-07 Lakshmi — §8 reverted date calendar icon enlarge (was 16→24px via internal-DOM svg override — not best practice, no SLDS hook exists).
   2026-05-07 Lakshmi — §8 ark-manual-mode-toggle: 2px border-width on .slds-checkbox_faux (internal-DOM fallback, no hook exists). Matches portal input standard.
   2026-05-07 Lakshmi — §8 ark-manual-mode-toggle: blue border always (#003464), white bg checked, blue tick — portal-wide (SLDS hooks). Removed scoped AO test rule.
   2026-05-07 Lakshmi — §8 added ark-checkbox-default (Figma 16:1076 #1d2528 label). HTML: arfocusAllegedOffender Parent/Caregiver checkbox gains ark-checkbox-default; Age unknown gains ark-age-unknown-check — both alongside ark-manual-mode-toggle for box skin.
   2026-05-04 Lakshmi — §8 added ark-manual-mode-toggle label skin (Figma 111:3428): SS Pro Regular 14/18/0.14px #51646d on lightning-input checkbox label. Checkbox box left as SLDS default per user.
   2026-05-04 Lakshmi — §8 added ark-input-search skin (Figma 111:3425) — pairs with ark-input-text for label+shell typography, adds trailing 28×28 magnifier (ark-search-icon.svg, _shape inset-12.5% → 21px), typeahead dropdown radius-10 / shadow 0 4 8 rgba(0,63,94,0.1), clear button + spinner in same right slot. arfocusAddressInput.css emptied → all styles in testTheme.css per Rule 4.
   2026-05-08 Lakshmi — §17 added arfocusDocuments mobile rule: stack __confirm-row vertically (checkbox + Upload Document button) below 1024px. Table layout untouched per user.
   2026-05-08 Lakshmi — §16.2 arkMrpSuccess (Figma 303:3057) refactor: header gap 8→10, actions gap 8→10, divider color --utility-black-400→--primary-100. §9 deleted ark-reports-print-btn / ark-btn-return; both Success buttons now use ark-btn-previous-outline (added box-shadow var(--hf-button-ds-shadow) so wizard Previous + Success Print/Return share one class per Figma 303:3709/303:3853 = 111:3435 hf/button outlined variant). HTML <hr> dropped role="separator" aria-hidden.
   2026-05-14 Lakshmi — §16.8 .ark-mrp-hero-card gap 10 → 33px (button-to-image spacing).
   2026-05-14 Lakshmi — §16.8 .ark-mrp-hero-card__cta margin-top 82px so button top aligns with the orange tip-box top in the adjacent Welcome column (h1 40 + 14 + rule 4 + 24).
   2026-05-14 Lakshmi — §16.8 .ark-mrp-hero-card align-items flex-end → center (button centered above hero image).
   2026-05-14 Lakshmi — §16.8 .ark-mrp-hero-card align-items flex-start → flex-end (button right-aligned above hero image per original spec).
   2026-05-14 Lakshmi — §16.8 added .ark-mrp-hero-card flex-column wrapper (align-items:flex-start, gap:10px) so Login/Register button (relocated from arfocusMrpWelcome to arfocusMrpHero) sits left-aligned above the hero image with a 10px gap.
   2026-05-12 Akhilesh — §9 added :disabled / [disabled] rules for ark-btn-previous-outline + ark-btn-next-primary (faded bg/border/color, opacity 0.65, pointer-events:none, cursor not-allowed). Component CSS uses !important throughout, which steamrolled SLDS native disabled styling and made disabled buttons appear visually identical to enabled. Required for Reporter Information Previous-button-always-disabled (first portal step has no upstream node).
   2026-05-05 Lakshmi — §17 ark-form-footer mobile stack: row1 Cancel full-width, row2 Previous+Next 50/50 (Option C). lightning-button inner width 100% !important targets SLDS internal DOM (Rule 4.3 step 5 / Miss 8 — no styling hook for width). Desktop §16.x untouched.
   2026-05-05 Lakshmi — §17 stack ark-form-row + __pair to single column at ≤1024px (every cell 100% width). Fixes Prefix+Other Prefix collapsed-stub + paired First/Middle wrap on Reporter Intake / Victim Family / AV / AO / PGC / Narrative. Desktop §7 widths unchanged.
   2026-05-05 Lakshmi — §17 mobile clamps: .ark-portal-nav width 345→100% / title-block 280→100%, .ark-mrp-header__logo-bar padding 22/46→12/16 + flex-wrap, __actions tightened. Fixes horizontal overflow + apparent header bleed at <360px viewports.
   2026-05-05 Lakshmi — §16.18 + §17 migrated portal-container layout from arfocusPortalFormContainer.css (Rule 4). Bumped sidebar-stacking breakpoint 768→1024 to match rest of portal — fixes wizard horizontal overflow and header bleed at 769–1024px viewports. Component CSS emptied to placeholder.
   2026-05-05 Lakshmi — §17 added ark-mrp-resources mobile rules: stack __list to single column (was 2-col flex 88px gap that squashed below 1024px), reduce section padding to 32px 16px.
   2026-05-04 Lakshmi — §16.6 ark-mrp-welcome__body: removed !important on color + letter-spacing on inner elements so CMDT inline styles (MRP_Portal_Config Welcome_BodyRichText) win per <p>/<strong>/<a>. Wrapper still defaults to #3D3D3D / 0.15px. font-family / font-size / line-height stay forced.
   2026-05-04 Lakshmi — §16.0 generalized ark-reporter-intake → ark-reporter-screen (shared shell across all reporter wizard pages: page bg white per Figma 111:3378 Body, padding pl-40 pr-32 py-40, content stack gap-40, header gap-20). Class-renamed in arfocusReporterIntake.html.
   2026-05-04 Lakshmi — Reporter Intake refactor (Rule 4): wiped component CSS to placeholder. Added §7 ark-form-card (bg white, shadow 0/4/8/rgba(0,63,94,0.1), radius 10, padding 40, gap 12) + __header/__title/__body per Figma 111:3386/3387/3391/3398. Added §9 ark-btn-cancel-text / ark-btn-previous-outline / ark-btn-next-primary per Figma I111:3435;...30615/30617/30620. Added §16.x ark-reporter-intake page wrapper (pl-40 pr-32 py-40, content-stretch flex-col gap-40) per 111:3380/3381 and ark-form-footer per I111:3435;5:28703. Card header divider + chevron asset deferred (SVG not provided yet).
   2026-05-04 Lakshmi — §3 added portal-wide ark-page-title + ark-page-subtitle (Figma 111:3384 / 111:3385) — H1 Source Serif Pro Bold 32/40/0.224px #1d2528, subtitle SS Pro SemiBold 15/24/0.105px #323e43. Removed wrong .arfocus-page-title (Georgia/30px/#0b1d3a) from component CSS.
   2026-05-04 Lakshmi — §8 added portal-wide ark-input-text + ark-input-combobox skins (Figma 111:3381) — label SS Pro SemiBold 15/24/0.105px #1d2528, shell 60h border 2px #c4c4c4 radius 10 px16 py20, value SS Pro Regular 15/24/0.15px #262626, required * #b80000, disabled bg #eaeaea border #51646d, combobox placeholder #555, info-icon + chevron swapped to ark-info-icon.svg / ark-keyboard-arrow-down.svg. No width set — column width stays on parent grid.
   2026-04-30 Lakshmi — §16.11 ark-portal-nav__status-text--completed color #28807C → #323E43 (match base + active per design).
   2026-04-30 Lakshmi — §16.11 added ark-portal-nav (Figma 111:3379): w-345 p-40 shadow, title block gap-8 width-280, steps gap-24, tab card h-50 w-280 px-8 py-4 rounded-5 navy left-bar on active, SS Pro 15/24 SemiBold + 14/18 Regular. Moved out of component css per Rule 4.3.
   2026-04-30 Lakshmi — §16.10 ack-row checked SVG resized 100% → 75% to match Figma 344:7761 _shape inset-[12.5%] (19.5px centered in 26px box).
   2026-04-30 Lakshmi — §16.10 ack-panel alignment per Figma 344:7759 JSON: parent flex-col gap-16 (rows+button), row gap-4 items-center, zero lightning-input host margin, drop redundant margin-top on actions.
   2026-04-30 Lakshmi — §16.10 ack-row checkbox: minimal visual override on .slds-checkbox_faux only (26px, 2px royal border, 4px radius, white fill; checked = SVG asset). No host/label/input overrides — click stays intact.
   2026-04-30 Lakshmi — §16.10 REVERTED all .ark-ack-row__checkbox overrides — restore OOTB SLDS checkbox so click works.
   2026-04-30 Lakshmi — §16.10 ack-row checkbox click restored: removed line-height:0 (collapsed label height killed input hit area), added explicit 26×26 on label + native input inset:0, faux pointer-events:none.
   2026-04-30 Lakshmi — §16.10 ack-row unchecked border 1.5px → 2px (match Figma weight).
   2026-04-30 Lakshmi — §16.10 ack-row checked state → SVG asset (ark-check-box.svg, Figma 344:7761 imgShape2) as background-image on .slds-checkbox_faux; suppress CSS-drawn ::after tick.
   2026-04-30 Lakshmi — §16.10 ack-row checkbox: zero host/wrapper margins, lock host to 26px, force white fill + blue border + blue tick on .slds-checkbox_faux (Miss 8 expanded selector list).
   2026-04-30 Lakshmi — §16.10 ack-row checked state → white fill + blue border + blue tick (Figma 344:7761 outlined style); previously solid blue fill.
   2026-04-30 Lakshmi — §16.10 added .ark-ack-panel / .ark-ack-row / .ark-ack-new-report-btn (Figma 344:7742 strict): 26px checkbox, label SS Pro 14/18 #1D2528, link SS Pro SemiBold 16/24 #154570, button #002B61 SS Pro SemiBold 20/24 w-201 radius-10 shadow.
   2026-04-30 Lakshmi — §16.6 ark-mrp-welcome__body added strong/b/em/i/li selectors (Miss 8 expanded list) so brand-stylesheet doesn't darken inline runs.
   2026-04-30 Lakshmi — §16.6 ark-mrp-welcome__body color #000 → #3D3D3D + literal letter-spacing 0.15px + host-tag selector (Figma 22-12386-Updated 22:12402).
   2026-04-29 Lakshmi — §16.9 footer inner justify space-between → center (single-child layout, text was left-anchored in 316px box).
   2026-04-29 Lakshmi — §16.10 disclaimer split to .ark-postlogin__disclaimer (Figma sibling p: SemiBold #728a92 Grey-60).
   2026-04-29 Lakshmi — §16.10 added ark-postlogin-section-list (Figma 344:7757 list-disc, ms-21, mb-20).
   2026-04-29 Lakshmi — §16.10 added MRP Post-Login (Figma 344:7740 strict): bg #fafafa, title navy 32/40, rule primary-400 100x4, tip-danger box, 8/12+4/12 grid, hero 249h rounded 40 corners.
   2026-04-29 Lakshmi — §1/§7 added ca-danger-* + tip-danger tokens & .ark-tip-box--danger variant.
   2026-04-29 Lakshmi — §16.9 added MRP Footer (Figma 22:12619 strict): bg utility-gray, h 56, text Public Sans 18/32 #002b61.
   2026-04-29 Lakshmi — §16.7 deduped header comment (was opened twice).
   2026-04-29 Lakshmi — §16.7 link list hugs content + columns shrink to fit, so block centers horizontally.
   2026-04-29 Lakshmi — §16.7 restored column row-gap 16px (user-confirmed prior working value; node 22:12408 not present in JSON export).
   2026-04-29 Lakshmi — §16.7 restored 2-col layout: list flex gap 88px, columns flex:1 (Frame 21346 Dev Mode authoritative). Section flex-col items-center (was text-align:center).
   2026-04-29 Lakshmi — §16.7 title letter-spacing → literal 0.224px from 22:12407 node (was using token 0.7px).
   2026-04-29 Lakshmi — §16.7 reverted all inferred link layout values; link styling now uses ONLY hf/Hyperlink M + primary/300 tokens from JSON.
   2026-04-29 Lakshmi — §16.7 link styling: row-gap 32→16, override brand <li> border + <a> font-family/size/weight to match Figma.
   2026-04-29 Lakshmi — §16.7 title selector → section.ark h2.title (0,2,2) to beat Exp Cloud brand h2 !important.
   2026-04-29 Lakshmi — §16.7 link color → --primary-300 (#4D798E, Figma primary/300).
   2026-04-29 Lakshmi — Added --primary-300 token (#4D798E, Figma primary/300).
   2026-04-29 Lakshmi — §16.7 restored link-list styles (dynamic from CMD); inferred from screenshot.
   2026-04-29 Lakshmi — §16.7 stripped link-list rules; kept title only (strict JSON 22:12406).
   2026-04-29 Lakshmi — Added §16.7 ark-mrp-resources styles.
   2026-04-29 Lakshmi — Added §16.8 ark-mrp-hero styles.
   2026-04-29 Lakshmi — Tuned §16.7: list max-width 1216, link color ca-main-primary.
   2026-04-29 Lakshmi — Reverted §16.7 link color to legacy-royal (matches Figma).
   2026-04-29 Lakshmi — §16.7 list max-width 1216 → 880 (centered to match Figma).
   2026-04-29 Lakshmi — §16.7 list max-width 880 → 760, added column-gap 80 (right col alignment).
   2026-04-29 Lakshmi — §16.7 switched list to CSS grid 1fr 1fr (right col was wrapping).
   2026-04-29 Lakshmi — §16.7 grid block 760→750, column-gap 80→220 (measured from Figma).
   2026-04-29 Lakshmi — §16.6 ark-mrp-welcome__title color !important (h1 brand override).
   2026-04-29 Lakshmi — §16.7 ark-mrp-resources__title font-family/size/weight/line-height/letter-spacing !important (h2 brand override).
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   Sources: Figma MRP (node-id: 303-3057, 625-5115, 261-7087)
   ============================================================ */
:root {
    /* ── Colors: Utility ── */
    --utility-black-800:     #262626;
    --utility-black-400:     #9d9d9d;
    --utility-gray:          #ededed;

    /* ── Colors: Legacy ── */
    --legacy-white:          #ffffff;
    --legacy-royal:          #154570;

    /* ── Colors: Primary ── */
    --primary-100:           #b3c5cf;
    --primary-300:           #4d798e;   /* Figma primary/300 — MRP Resources link color (22:12386 styles) */
    --primary-500:           #003f5e;
    --primary-700:           #00314c;   /* Figma primary/700 — MRP Welcome login button (22:12404) */
    --primary-900:           #001b31;

    /* ── Colors: CA ── */
    --ca-main-black:         #000000;
    --ca-main-primary:       #004abc;
    --ca-main-primary-dark:  #003464;
    --ca-success-700:        #0f6d38;
    --ca-primary-100:        #e7eef9;
    --ca-primary-300:        #a3bee7;
    --ca-primary-900:        #003688;
    --ca-gray-900:           #3b3a48;
    --ca-gray-400:           #a4a3ab;
    --portal-colours-tint-4: #1a2c3c;

    /* ── Colors: Portal Neutral Grey 80 (from node 247:4460) ── */
    --portal-neutral-grey-80: #323e43;

    /* ── Colors: Portal Status (from node 247:4460) ── */
    --portal-status-danger:   #b80000;
    --portal-status-success:  #158655;

    /* ── Colors: Brand Green (from node 247:4460) ── */
    --brand-green:            #28807c;

    /* ── Colors: Utility (extra, from node 247:4460) ── */
    --utility-black-600:      #555555;

    /* ── Colors: Navigation Button Navy (from node 247:4460) ── */
    --nav-btn-navy:           #002b61;

    /* ── Colors: Portal Blue Tints ── */
    --portal-blue-tints-blue-3: #134e81;

    /* ── Colors: Tip / Warning callout (MRP Welcome hotline callout) ── */
    --ark-color-tip-warning-bg:     #FFECC4;
    --ark-color-tip-warning-border: #ECB328;
    --ark-color-tip-warning-icon:   #FF8000;

    /* ── Colors: Tip / Danger callout (MRP Post-Login deletion notice) ──
       Source: Figma 344-7740 variable_defs.json — CA-Danger/100, CA-Danger/300, CA-Danger/700 */
    --ca-danger-100:                #FCE9E8;
    --ca-danger-300:                #EEABA9;
    --ca-danger-700:                #B91B37;
    --ark-color-tip-danger-bg:      var(--ca-danger-100);
    --ark-color-tip-danger-border:  var(--ca-danger-300);
    --ark-color-tip-danger-icon:    var(--ca-danger-700);

    /* ── Colors: Figma 344-7740 additional design tokens ── */
    --primary-400:                  #265C76;   /* Welcome rule color (344:7753) */
    --wf-dark-gray:                 #3D3D3D;   /* Instructions text (344:7757) */
    --portal-neutral-grey-70:       #51646D;   /* Ack item 2 text (344:7765) */

    /* ── Colors: Portal Neutrals ── */
    --portal-neutral-white:   #ffffff;
    --portal-neutral-grey-90: #1d2528;
    --portal-neutral-grey-60: #728a92;
    --portal-neutral-grey-40: #c4ced1;
    --portal-neutral-grey-20: #eaeaea;

    /* ── Colors: Portal / Workflow ── */
    --wf-light-gray:         #f9f9f9;

    /* ── Effects ── */
    --hf-button-ds-shadow:    1px 4px 10px 0px rgba(115, 115, 115, 0.25);
    --hf-selection-ds-shadow: 0px 4px 16px 0px rgba(0, 63, 94, 0.1);

    /* ── Typography: Heading 1 (Source Serif Pro Bold 32) ── */
    --hf-heading-1-font-family:    'ark-source-serif-pro', serif;
    --hf-heading-1-font-size:      32px;
    --hf-heading-1-font-weight:    700;
    --hf-heading-1-line-height:    40px;
    --hf-heading-1-letter-spacing: 0.7px;

    /* ── Typography: Heading 2 (Source Sans Pro SemiBold 24) ── */
    --hf-heading-2-font-family:    'ark-source-sans-pro', sans-serif;
    --hf-heading-2-font-size:      24px;
    --hf-heading-2-font-weight:    600;
    --hf-heading-2-line-height:    32px;
    --hf-heading-2-letter-spacing: 0.7px;

    /* ── Typography: Heading 4 (Source Sans Pro SemiBold 20) ── */
    --hf-heading-4-font-family:    'ark-source-sans-pro', sans-serif;
    --hf-heading-4-font-size:      20px;
    --hf-heading-4-font-weight:    600;
    --hf-heading-4-line-height:    24px;
    --hf-heading-4-letter-spacing: 0.7px;

    /* ── Typography: Body Regular (Source Sans Pro Regular 15) ── */
    --hf-paragraph-body-regular-font-family:    'ark-source-sans-pro', sans-serif;
    --hf-paragraph-body-regular-font-size:      15px;
    --hf-paragraph-body-regular-font-weight:    400;
    --hf-paragraph-body-regular-line-height:    24px;
    --hf-paragraph-body-regular-letter-spacing: 1px;

    /* ── Typography: Body Small Bold (Source Sans Pro SemiBold 14) ── */
    --hf-body-small-bold-font-family:    'ark-source-sans-pro', sans-serif;
    --hf-body-small-bold-font-size:      14px;
    --hf-body-small-bold-font-weight:    600;
    --hf-body-small-bold-line-height:    20px;
    --hf-body-small-bold-letter-spacing: 1px;

    /* ── Typography: Body XS (Source Sans Pro Regular 12) ── */
    --hf-paragraph-body-xs-font-family:    'ark-source-sans-pro', sans-serif;
    --hf-paragraph-body-xs-font-size:      12px;
    --hf-paragraph-body-xs-font-weight:    400;
    --hf-paragraph-body-xs-line-height:    16px;
    --hf-paragraph-body-xs-letter-spacing: 0.4px;

    /* ── Typography: Base Text Desktop (Public Sans Regular 18) ── */
    --base-text-desktop-font-family:    'ark-public-sans', sans-serif;
    --base-text-desktop-font-size:      18px;
    --base-text-desktop-font-weight:    400;
    --base-text-desktop-line-height:    32px;
    --base-text-desktop-letter-spacing: 0px;

    /* ── Typography: Title Small Bold (Source Sans Pro SemiBold 16) ── */
    --hf-title-small-bold-font-family:    'ark-source-sans-pro', sans-serif;
    --hf-title-small-bold-font-size:      16px;
    --hf-title-small-bold-font-weight:    600;
    --hf-title-small-bold-line-height:    20px;
    --hf-title-small-bold-letter-spacing: 0.7px;

    /* ── Typography: Title Small (Source Sans Pro Regular 16) ── */
    --hf-title-small-font-family:    'ark-source-sans-pro', sans-serif;
    --hf-title-small-font-size:      16px;
    --hf-title-small-font-weight:    400;
    --hf-title-small-line-height:    20px;
    --hf-title-small-letter-spacing: 0.7px;

    /* ── Typography: Hyperlink M (Source Sans Pro SemiBold 18) ── */
    --hf-hyperlink-m-font-family:    'ark-source-sans-pro', sans-serif;
    --hf-hyperlink-m-font-size:      18px;
    --hf-hyperlink-m-font-weight:    600;
    --hf-hyperlink-m-line-height:    24px;
    --hf-hyperlink-m-letter-spacing: 0.4px;

    /* ── Site layout ──
       Mirror of Experience Builder → Site Spacing → Max Content Width.
       Builder enforces the cap on every page-content region; this token
       exists only for full-bleed bars (header logo/help) whose centering
       arithmetic needs the value as a literal. Update BOTH places if the
       Builder slider ever changes. */
    --portal-site-max-width: 1400px;
}


/* ============================================================
   2. FONT FACES
   Fonts are stored in arkAssets/fonts (latin subset, woff2).
   Referenced via Salesforce static resource path:
   /sfsites/c/resource/arkAssets/fonts/<filename>
   Font-family names use the 'ark-' prefix per project convention.
   ============================================================ */

/* ─── Public Sans ─── */

@font-face {
    font-family:  'ark-public-sans';
    font-style:   normal;
    font-weight:  400;
    font-display: swap;
    src: url('/mrp/sfsites/c/resource/arkAssets/fonts/ark-public-sans-regular-400.woff2') format('woff2');
}

/* ─── Source Sans Pro ─── */

@font-face {
    font-family:  'ark-source-sans-pro';
    font-style:   normal;
    font-weight:  400;
    font-display: swap;
    src: url('/mrp/sfsites/c/resource/arkAssets/fonts/ark-source-sans-pro-regular-400.woff2') format('woff2');
}

@font-face {
    font-family:  'ark-source-sans-pro';
    font-style:   normal;
    font-weight:  600;
    font-display: swap;
    src: url('/mrp/sfsites/c/resource/arkAssets/fonts/ark-source-sans-pro-semibold-600.woff2') format('woff2');
}

@font-face {
    font-family:  'ark-source-sans-pro';
    font-style:   normal;
    font-weight:  700;
    font-display: swap;
    src: url('/mrp/sfsites/c/resource/arkAssets/fonts/ark-source-sans-pro-bold-700.woff2') format('woff2');
}

/* ─── Source Serif Pro ─── */

@font-face {
    font-family:  'ark-source-serif-pro';
    font-style:   normal;
    font-weight:  700;
    font-display: swap;
    src: url('/sfsites/c/resource/arkAssets/fonts/ark-source-serif-pro-bold-700.woff2') format('woff2');
}


/* ============================================================
   3. TYPOGRAPHY
   No color declarations here — use sections 4 & 5 for color.
   ============================================================ */

/* ─── Headings ─── */

.ark-heading-1 {
    font-family:    var(--hf-heading-1-font-family);
    font-size:      var(--hf-heading-1-font-size);
    font-weight:    var(--hf-heading-1-font-weight);
    line-height:    var(--hf-heading-1-line-height);
    letter-spacing: var(--hf-heading-1-letter-spacing);
    font-style:     normal;
}

/* ─── Page title / subtitle (form screens) ───
   Source: Figma 111:3384 / 111:3385 (Reporter Intake header).
   Color is intentionally baked in here (single variant per design).
   JSON literal letter-spacing wins over the Heading-1 token (Miss 11). */
.ark-page-title {
    font-family:    var(--hf-heading-1-font-family);
    font-size:      32px;
    font-weight:    700;
    line-height:    40px;
    letter-spacing: 0.224px;
    color:          var(--portal-blue-tints-blue-3);
    font-style:     normal;
    margin:         0;
}

.ark-page-subtitle {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      15px;
    font-weight:    600;
    line-height:    24px;
    letter-spacing: 0.105px;
    color:          var(--portal-neutral-grey-80);
    font-style:     normal;
    margin:         0;
}

/* Inline red asterisk inside subtitles / labels (Figma 111:3385 <span text-[red]>). */
.ark-required-asterisk {
    color: red;
}

.ark-heading-2 {
    font-family:    var(--hf-heading-2-font-family);
    font-size:      var(--hf-heading-2-font-size);
    font-weight:    var(--hf-heading-2-font-weight);
    line-height:    var(--hf-heading-2-line-height);
    letter-spacing: var(--hf-heading-2-letter-spacing);
    font-style:     normal;
}

.ark-heading-4 {
    font-family:    var(--hf-heading-4-font-family);
    font-size:      var(--hf-heading-4-font-size);
    font-weight:    var(--hf-heading-4-font-weight);
    line-height:    var(--hf-heading-4-line-height);
    letter-spacing: var(--hf-heading-4-letter-spacing);
    font-style:     normal;
}

/* ─── Body ─── */

.ark-body-regular {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      var(--hf-paragraph-body-regular-font-size);
    font-weight:    var(--hf-paragraph-body-regular-font-weight);
    line-height:    var(--hf-paragraph-body-regular-line-height);
    letter-spacing: var(--hf-paragraph-body-regular-letter-spacing);
    font-style:     normal;
}

.ark-body-small-bold {
    font-family:    var(--hf-body-small-bold-font-family);
    font-size:      var(--hf-body-small-bold-font-size);
    font-weight:    var(--hf-body-small-bold-font-weight);
    line-height:    var(--hf-body-small-bold-line-height);
    letter-spacing: var(--hf-body-small-bold-letter-spacing);
    font-style:     normal;
}

.ark-body-xs {
    font-family:    var(--hf-paragraph-body-xs-font-family);
    font-size:      var(--hf-paragraph-body-xs-font-size);
    font-weight:    var(--hf-paragraph-body-xs-font-weight);
    line-height:    var(--hf-paragraph-body-xs-line-height);
    letter-spacing: var(--hf-paragraph-body-xs-letter-spacing);
    font-style:     normal;
}

.ark-base-text-desktop {
    font-family:    var(--base-text-desktop-font-family);
    font-size:      var(--base-text-desktop-font-size);
    font-weight:    var(--base-text-desktop-font-weight);
    line-height:    var(--base-text-desktop-line-height);
    letter-spacing: var(--base-text-desktop-letter-spacing);
    font-style:     normal;
}

/* ─── Titles ─── */

.ark-title-small-bold {
    font-family:    var(--hf-title-small-bold-font-family);
    font-size:      var(--hf-title-small-bold-font-size);
    font-weight:    var(--hf-title-small-bold-font-weight);
    line-height:    var(--hf-title-small-bold-line-height);
    letter-spacing: var(--hf-title-small-bold-letter-spacing);
    font-style:     normal;
}

.ark-title-small {
    font-family:    var(--hf-title-small-font-family);
    font-size:      var(--hf-title-small-font-size);
    font-weight:    var(--hf-title-small-font-weight);
    line-height:    var(--hf-title-small-line-height);
    letter-spacing: var(--hf-title-small-letter-spacing);
    font-style:     normal;
}

/* ─── Links / Hyperlinks ─── */

.ark-hyperlink-m {
    font-family:     var(--hf-hyperlink-m-font-family);
    font-size:       var(--hf-hyperlink-m-font-size);
    font-weight:     var(--hf-hyperlink-m-font-weight);
    line-height:     var(--hf-hyperlink-m-line-height);
    letter-spacing:  var(--hf-hyperlink-m-letter-spacing);
    font-style:      normal;
    text-decoration: underline;
}


/* ============================================================
   4. BACKGROUND COLORS
   ============================================================ */

/* Utility */
.ark-bg-utility-black-800        { background-color: var(--utility-black-800); }
.ark-bg-utility-black-400        { background-color: var(--utility-black-400); }
.ark-bg-utility-gray             { background-color: var(--utility-gray); }

/* Legacy */
.ark-bg-legacy-white             { background-color: var(--legacy-white); }
.ark-bg-legacy-royal             { background-color: var(--legacy-royal); }

/* Primary */
.ark-bg-primary-100              { background-color: var(--primary-100); }
.ark-bg-primary-500              { background-color: var(--primary-500); }
.ark-bg-primary-900              { background-color: var(--primary-900); }

/* CA */
.ark-bg-ca-main-black            { background-color: var(--ca-main-black); }
.ark-bg-ca-main-primary          { background-color: var(--ca-main-primary); }
.ark-bg-ca-main-primary-dark     { background-color: var(--ca-main-primary-dark); }
.ark-bg-ca-success-700           { background-color: var(--ca-success-700); }
.ark-bg-ca-primary-100           { background-color: var(--ca-primary-100); }
.ark-bg-ca-primary-300           { background-color: var(--ca-primary-300); }

/* Portal Blue Tints */
.ark-bg-portal-blue-3            { background-color: var(--portal-blue-tints-blue-3); }

/* Portal Neutrals */
.ark-bg-portal-neutral-white     { background-color: var(--portal-neutral-white); }
.ark-bg-portal-neutral-grey-90   { background-color: var(--portal-neutral-grey-90); }
.ark-bg-portal-neutral-grey-60   { background-color: var(--portal-neutral-grey-60); }
.ark-bg-portal-neutral-grey-40   { background-color: var(--portal-neutral-grey-40); }
.ark-bg-portal-neutral-grey-20   { background-color: var(--portal-neutral-grey-20); }

/* Portal / Workflow */
.ark-bg-wf-light-gray            { background-color: var(--wf-light-gray); }

/* Status */
.ark-bg-status-danger            { background-color: var(--portal-status-danger); }
.ark-bg-status-success           { background-color: var(--portal-status-success); }

/* Brand Green */
.ark-bg-brand-green              { background-color: var(--brand-green); }

/* Nav Button Navy */
.ark-bg-nav-btn-navy             { background-color: var(--nav-btn-navy); }


/* ============================================================
   5. TEXT COLORS
   ============================================================ */

/* Utility */
.ark-text-utility-black-800         { color: var(--utility-black-800); }
.ark-text-utility-black-400         { color: var(--utility-black-400); }

/* Legacy */
.ark-text-legacy-white              { color: var(--legacy-white); }
.ark-text-legacy-royal              { color: var(--legacy-royal); }

/* Primary */
.ark-text-primary-500               { color: var(--primary-500); }
.ark-text-primary-900               { color: var(--primary-900); }

/* CA */
.ark-text-ca-main-black             { color: var(--ca-main-black); }
.ark-text-ca-main-primary           { color: var(--ca-main-primary); }
.ark-text-ca-main-primary-dark      { color: var(--ca-main-primary-dark); }
.ark-text-ca-success-700            { color: var(--ca-success-700); }

/* Portal Blue Tints */
.ark-text-portal-blue-3             { color: var(--portal-blue-tints-blue-3); }

/* Portal Neutrals */
.ark-text-portal-neutral-grey-90    { color: var(--portal-neutral-grey-90); }
.ark-text-portal-neutral-grey-80    { color: var(--portal-neutral-grey-80); }
.ark-text-portal-neutral-grey-60    { color: var(--portal-neutral-grey-60); }
.ark-text-portal-neutral-grey-40    { color: var(--portal-neutral-grey-40); }

/* Status */
.ark-text-danger                     { color: var(--portal-status-danger); }
.ark-text-status-success             { color: var(--portal-status-success); }

/* Brand Green */
.ark-text-brand-green                { color: var(--brand-green); }

/* Nav Button Navy */
.ark-text-nav-btn-navy               { color: var(--nav-btn-navy); }


/* ============================================================
   6. MARGINS & PADDINGS
   (None defined yet — add as multiples of 4px when required)
   ============================================================ */


/* ============================================================
   7. STRUCTURAL — Cards, Boxes, Patterns
   ============================================================ */

/* ─── Tip / Info Banner ─── */

.ark-tip-box {
    background-color: var(--ca-primary-100);
    border:           1px solid var(--ca-primary-300);
    border-radius:    10px;
    padding:          20px;
    width:            100%;
    box-sizing:       border-box;
}

/* Yellow/amber variant (e.g. MRP Welcome hotline callout). Reuses .ark-tip-box. */
.ark-tip-box--warning {
    background-color: var(--ark-color-tip-warning-bg);
    border-color:     var(--ark-color-tip-warning-border);
}

/* Red/danger variant (e.g. MRP Post-Login deletion notice). Reuses .ark-tip-box.
   Source: Figma 344:7754 — bg CA-Danger/100, border CA-Danger/300, icon CA-Danger/700. */
.ark-tip-box--danger {
    background-color: var(--ark-color-tip-danger-bg);
    border-color:     var(--ark-color-tip-danger-border);
}

.ark-tip-box-content {
    display:     flex;
    align-items: center;
    gap:         20px;
}

.ark-tip-box-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    flex-shrink:     0;
}

/*
 * Tip banner icon — rendered at natural SVG dimensions (25 × 33.33px) inside
 * the 40×40 container, matching Figma's inset-[8.33%_18.75%] on the _shape layer:
 *   left/right inset: 18.75% × 40px = 7.5px  → width  = 40 − 15   = 25px
 *   top/bottom inset:  8.33% × 40px = 3.33px  → height = 40 − 6.67 ≈ 33px
 */
.ark-tip-icon {
    display: block;
    width:   25px;
    height:  33px;
}

.ark-tip-list {
    list-style:  disc;
    padding-left: 24px;
    margin:      0;
}

.ark-tip-list li {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      var(--hf-paragraph-body-regular-font-size);
    font-weight:    var(--hf-paragraph-body-regular-font-weight);
    line-height:    var(--hf-paragraph-body-regular-line-height);
    letter-spacing: 0.15px;
    color:          var(--ca-main-black);
}


/* ─── Form section card (collapsible) ───
   Source: Figma 111:3386 (Card 1) / 111:3387 (header) / 111:3391 (title) / 111:3398 (body).
   White card, drop-shadow 0/4/8/rgba(0,63,94,0.1), radius 10, padding 40, gap 12. */
.ark-form-card {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    gap:              12px;
    width:            100%;
    background-color: var(--legacy-white);
    border-radius:    10px;
    padding:          40px;
    box-shadow:       0 -2px 6px rgba(0, 63, 94, 0.08),
                      0  2px 6px rgba(0, 63, 94, 0.08);
    box-sizing:       border-box;
}

/* Header button — h2 + chevron row, full-width clickable.
   Figma 111:3387 (header), 111:3396 (full-width 2px hairline beneath title row). */
.ark-form-card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    width:           100%;
    padding:         0 0 12px 0;
    background:      none;
    border:          none;
    border-bottom:   2px solid #C4CED1;
    cursor:          pointer;
    text-align:      left;
}

/* Vertical pipe between title and chevron — Figma 111:3394 imgDivider1 (2×28 #C4CED1, round caps). */
.ark-form-card__divider {
    flex:          0 0 auto;
    align-self:    center;
    width:         2px;
    height:        28px;
    border-radius: 1px;
    background-color: #C4CED1;
}

/* Chevron — Figma 111:3395 _shape (imgShape2 = arrow_down_ios, 20×12 glyph in 24×24 box). */
.ark-form-card__chevron {
    flex:                0 0 auto;
    display:             inline-block;
    width:               24px;
    height:              24px;
    background-image:    url('/mrp/sfsites/c/resource/arkAssets/assets/ark-chevron-down.svg');
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     20px 12px;
    transition:          transform 0.2s ease;
}
.ark-form-card__header[aria-expanded="false"] .ark-form-card__chevron {
    transform: rotate(-90deg);
}

/* Title text \u2014 SS Pro SemiBold 20 / 24 / 0.14px / #1d2528 (JSON 111:3391). */
.ark-form-card__title {
    flex:           1 1 auto;
    margin:         0;
    font-family:    var(--hf-heading-4-font-family);
    font-size:      20px;
    font-weight:    600;
    line-height:    24px;
    letter-spacing: 0.14px;
    color:          var(--portal-neutral-grey-90);
    font-style:     normal;
}

/* Body \u2014 fields container, 24px row gap, 55px right padding (JSON 111:3398). */
.ark-form-card__body {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    width:          100%;
    padding-right:  55px;
    box-sizing:     border-box;
}

/* ─── Form row layout ───
   Source: Figma 111:3399 / 111:3404 / 111:3423 / 111:3429 — every horizontal
   row inside a card body is `flex gap-[32px] items-start`.
   Replaces slds-grid/slds-gutters_small (12px) which under-shoots the spec. */
.ark-form-row {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    flex-start;
    gap:            24px 32px;   /* row-gap (wrap) | column-gap */
    width:          100%;
}

/* Two adjacent inputs that share a single column slot (Prefix+Other Prefix,
   First+Middle, Last+Suffix, Approximate Age+Months/Years). 8px between them
   per Figma 111:3400 / 111:3405 gap-[8px].
   align-items:flex-start so labels stay top-aligned even when one cell shows
   a required-field error message and the sibling does not (otherwise flex-end
   pushes the no-error label DOWN by the height of the sibling's error slot).
   `flex: 1 1 428px` so paired groups grow/shrink with the card width. */
.ark-form-row__pair {
    display:        flex;
    align-items:    flex-start;
    gap:            8px;
    flex:           1 1 260px;
    min-width:      0;
}

/* Default cell — Figma 428px basis (111:3402/3403/3406/3424/3425/3430/3431);
   grows/shrinks with row so cards stay fluid at any card width. */
.ark-form-row__cell {
    flex:           1 1 260px;
    min-width:      0;
}

/* Narrow cell — Prefix / Suffix fixed at 128px per Figma 111:3401 / 111:3407 w-[128px]. */
.ark-form-row__cell_narrow {
    flex:           0 0 128px;
    min-width:      0;
}

/* Single-column row (Relationship, Work Email) — Figma 111:3591/3595 + 111:3432
   428px basis; `flex: 1 1 428px` so the field grows/shrinks with card width.
   ~50% inside a 2-up paired layout, full width when alone in a row. */
.ark-form-row__cell_half {
    flex:           1 1 260px;
    min-width:      0;
}

/* Inside a paired wrapper, the wide cell fills whatever room is left after the
   narrow 128px cell + 8px gap (i.e. 428 - 128 - 8 = 292px). */
.ark-form-row__pair > .ark-form-row__cell {
    flex:           1 1 auto;
}

/* Full-width row cell — single element spans the row (Figma 16:1037 w-full,
   used for address-different checkbox row in arfocusAllegedVictim). */
.ark-form-row__cell_full {
    flex:           0 0 100%;
    max-width:      100%;
    min-width:      0;
}




/* ============================================================
   8. INPUT CLASSES
   Radio, Checkbox, Toggle, Input, Combobox
   Source: Figma MRP node 247:4460 (Parents/Guardians/Siblings form)
   ============================================================ */

/* ─── Form Input / Combobox field overrides ─── */
/* Applied globally inside .ark-pg-accordion to match Figma:
   2px #c4c4c4 border, 10px radius, 60px height, 15px font */

.ark-pg-accordion lightning-input .slds-input,
.ark-pg-accordion lightning-combobox .slds-combobox__form-element .slds-combobox__input {
    border:        2px solid #c4c4c4 !important;
    border-radius: 10px !important;
    height:        60px !important;
    font-family:   var(--hf-paragraph-body-regular-font-family) !important;
    font-size:     var(--hf-paragraph-body-regular-font-size) !important;
    color:         var(--utility-black-800) !important;
}

/* Required asterisk — red */
.ark-pg-accordion .slds-required {
    color: var(--portal-status-danger) !important;
}

/* Age unknown checkbox — navy label text */
.ark-age-unknown-check .slds-form-element__label {
    color:       var(--ca-main-primary-dark) !important;
    font-family: var(--hf-paragraph-body-regular-font-family) !important;
    font-size:   14px !important;
}

/* Manual mode checkbox — muted teal-grey label text */
.ark-manual-mode-check .slds-form-element__label {
    color:       #51646d !important;
    font-family: var(--hf-paragraph-body-regular-font-family) !important;
    font-size:   14px !important;
}

/* Default checkbox — near-black label text (Figma 16:1076 #1d2528) */
.ark-checkbox-default .slds-form-element__label {
    color:       #1d2528 !important;
    font-family: var(--hf-paragraph-body-regular-font-family) !important;
    font-size:   14px !important;
}

/* Sibling Yes/No radio group layout — horizontal */
.ark-sibling-radio .slds-radio_button-group,
.ark-sibling-radio .slds-form-element__control {
    display:     flex !important;
    flex-direction: row !important;
    gap:         12px !important;
}

/* Each Yes/No option reserves a 78px-wide box (24px circle + 10px gap + 54px
   label allocation per Figma 247:4527/4528 `w-[54px]`) so the gap between
   "Yes" label end and "No" circle reads as Figma intends. */
.ark-sibling-radio .slds-radio {
    min-width: 88px !important;
}
.ark-sibling-radio .slds-radio__label {
    gap: 10px !important;
}

/* Sibling Yes/No radio labels — Figma 247:4527/4528 (SS Pro Regular 15/24 black 0.15px).
   No SLDS hook for radio label typography; falling back to internal-DOM override (Miss 8). */
.ark-sibling-radio .slds-radio__label .slds-form-element__label,
.ark-sibling-radio .slds-radio .slds-form-element__label,
.ark-sibling-radio .slds-radio__label span:not(.slds-radio_faux) {
    font-family:    var(--hf-paragraph-body-regular-font-family) !important;
    font-size:      15px !important;
    font-weight:    400 !important;
    line-height:    24px !important;
    letter-spacing: 0.15px !important;
    color:          #000 !important;
}


/* ─────────────────────────────────────────────────────────────
   Portal-wide input skins — Figma 111:3381 (Reporter Intake)
   Apply by adding `ark-input-text` / `ark-input-combobox` /
   `ark-input-textarea` to the lightning component host.

   Width is intentionally NOT set here. Column width stays on
   the parent SLDS grid (`slds-size_*`) or per-screen wrapper.

   Best-practice note (Rule 4.3 / Miss 8): these target internal
   SLDS DOM (`.slds-input`, `.slds-form-element__label`,
   `.slds-required`, `lightning-helptext` button, combobox
   chevron). No SLDS styling hooks exist for label child-order,
   helptext icon asset, or combobox chevron asset, so falling
   back to internal-DOM `!important` overrides.
   ───────────────────────────────────────────────────────────── */

/* === Label (SS Pro SemiBold 15 / 24 / 0.105px / #1d2528) === */
.ark-input-text .slds-form-element__label,
.ark-input-combobox .slds-form-element__label,
.ark-input-textarea .slds-form-element__label {
    font-family:    var(--hf-paragraph-body-regular-font-family) !important;
    font-size:      15px !important;
    font-weight:    600 !important;
    line-height:    24px !important;
    letter-spacing: 0.105px !important;
    color:          var(--portal-neutral-grey-90) !important;
    margin-bottom:  10px !important; /* JSON: parent flex-col gap-[10px] between label and shell */
}

/* === Required asterisk (SS Pro Regular 20 / 20 / 0.2px / #b80000) === */
.ark-input-text .slds-required,
.ark-input-combobox .slds-required,
.ark-input-textarea .slds-required {
    font-family:    var(--hf-paragraph-body-regular-font-family) !important;
    font-size:      20px !important;
    font-weight:    400 !important;
    line-height:    20px !important;
    letter-spacing: 0.2px !important;
    color:          var(--portal-status-danger) !important;
    margin-right:   5px !important; /* JSON: gap-[5px] between * and label text */
}

/* === Input shell — text/email/tel/number/search/password ===
   bg #fff, border 2px #c4c4c4, radius 10, h 60, padding 16 all sides.
   Padding math: shell 60h − 2·2px borders − 2·16px padding = 24px content
   area = exact line-height of value text → vertically centered with no flex
   tricks. Figma's `py-[20px]` was tuned for a flex `items-center` shell,
   but `lightning-combobox` renders `.slds-input_faux` as a <button> (and
   <input>s of course don't honour flex), so explicit padding is the only
   reliable way to centre the value in both element types. (Earlier attempts
   at py-20 clipped the text bottom; padding:0 made the faux <button> top-
   align "Other"/"Female" with the chevron appearing to stack below.) */
.ark-input-text .slds-input,
.ark-input-combobox .slds-combobox__input,
.ark-input-combobox .slds-input_faux,
.ark-input-combobox input.slds-input {
    background-color: var(--legacy-white) !important;
    border:           2px solid #c4c4c4 !important;
    border-radius:    10px !important;
    height:           60px !important;
    padding:          16px !important;
    box-sizing:       border-box !important;
    /* === Value text (SS Pro Regular 15 / 24 / 0.15px / #262626) === */
    font-family:      var(--hf-paragraph-body-regular-font-family) !important;
    font-size:        15px !important;
    font-weight:      400 !important;
    line-height:      24px !important;
    letter-spacing:   0.15px !important;
    color:            var(--utility-black-800) !important;
}

/* === Combobox value text — reserve right padding for chevron ===
   Best-practice note (Rule 4.3 step 5 / Miss 8): no SLDS hook for
   value-text right padding. Chevron is 20x20 at right:12px → reserve
   36px (12 + 20 + 4 gap). Figma 111:3401 calls for a 28x28 chevron
   but that leaves only ~52px of text room in the 128px Prefix cell
   ('ASP Sr....' truncated). 20x20 still reads clearly on a 60px shell
   and gives ~12px more text room across every combobox. */
.ark-input-combobox .slds-combobox__input,
.ark-input-combobox .slds-input_faux,
.ark-input-combobox input.slds-input {
    padding-right: 36px !important;
}

/* === Combobox shell-wrapper height fix ===
   Best-practice note (Rule 4.3 step 5 / Miss 8): SLDS wraps the combobox
   <input> in `.slds-combobox_container` → `.slds-combobox` →
   `.slds-combobox__form-element`, each of which constrains the visible
   height. Without forcing 60px on the full chain the input renders ~36px
   even though `.slds-combobox__input` itself is 60px (Figma 111:3401
   shell `h-[60px]`). No SLDS hook exists — internal-DOM override required. */
.ark-input-combobox .slds-combobox_container,
.ark-input-combobox .slds-combobox,
.ark-input-combobox .slds-combobox__form-element,
.ark-input-combobox .slds-form-element__control {
    height:     60px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
}

/* Textarea — multi-line: carries the shell appearance but allows vertical resize.
   Removed from the combined input-shell selector above so the 60px hard height
   cap doesn't apply. min-height keeps the Figma floor; resize: vertical is the
   SLDS default and is reasserted explicitly so the drag handle is never lost. */
.ark-input-textarea .slds-textarea {
    background-color: var(--legacy-white) !important;
    border:           2px solid #c4c4c4 !important;
    border-radius:    10px !important;
    min-height:       60px !important;
    padding:          16px !important;
    box-sizing:       border-box !important;
    resize:           vertical !important;
    font-family:      var(--hf-paragraph-body-regular-font-family) !important;
    font-size:        15px !important;
    font-weight:      400 !important;
    line-height:      24px !important;
    letter-spacing:   0.15px !important;
    color:            var(--utility-black-800) !important;
}

/* === Combobox: selected value color (#1d2528 per JSON when filled) === */
.ark-input-combobox .slds-combobox__input-value,
.ark-input-combobox .slds-combobox__input.slds-has-input-focus,
.ark-input-combobox .slds-combobox__input:not([placeholder-shown]) {
    color: var(--portal-neutral-grey-90) !important;
}

/* === Placeholder color #555 (utility/black/600) ===
   JSON shows placeholder only on combobox `Select`. Same color
   applied to text inputs for consistency (per user OK). */
.ark-input-text .slds-input::placeholder,
.ark-input-textarea .slds-textarea::placeholder,
.ark-input-combobox .slds-combobox__input::placeholder,
.ark-input-combobox .slds-input::placeholder {
    color:   var(--utility-black-600) !important;
    opacity: 1 !important;
}

/* === Disabled + Readonly state — shared visual skin === */
.ark-input-text .slds-input[disabled],
.ark-input-text .slds-input:disabled,
.ark-input-text .slds-input[readonly],
.ark-input-text .slds-input:read-only,
.ark-input-textarea .slds-textarea[disabled],
.ark-input-textarea .slds-textarea:disabled,
.ark-input-textarea .slds-textarea[readonly],
.ark-input-textarea .slds-textarea:read-only,
.ark-input-combobox .slds-combobox__input[disabled],
.ark-input-combobox .slds-combobox__input:disabled,
.ark-input-combobox .slds-input[disabled],
.ark-input-combobox .slds-input:disabled {
    background-color: var(--portal-neutral-grey-20) !important;
    border-color:     var(--portal-neutral-grey-70) !important;
    color:            var(--portal-neutral-grey-70) !important;
    -webkit-text-fill-color: var(--portal-neutral-grey-70) !important; /* Safari disabled-input override */
    opacity:          1 !important;
}
/* Combobox locked/read-only state — applied via stateComboboxClass getter
   when readOnly=true. Reuses the same grey tokens as the disabled skin
   above so locked comboboxes match locked text inputs visually.
   pointer-events:none prevents the dropdown from opening. */
.ark-input-combobox--locked .slds-combobox__form-element,
.ark-input-combobox--locked .slds-combobox__input,
.ark-input-combobox--locked .slds-input {
    background-color:        var(--portal-neutral-grey-20) !important;
    border-color:            var(--portal-neutral-grey-70) !important;
    color:                   var(--portal-neutral-grey-70) !important;
    -webkit-text-fill-color: var(--portal-neutral-grey-70) !important;
    opacity:                 1 !important;
    pointer-events:          none !important;
    cursor:                  not-allowed !important;
}

/* §8 — Address search locked state (disabled prop / readonly prop / manual mode).
   readonly is used instead of disabled so NVDA can still read the field value.
   The --locked modifier is added by searchShellClass getter in arfocusAddressInput.js
   when isSearchDisabled is true. Compound 3-class selector beats the 2-class
   white-bg override (.ark-input-search .slds-input[readonly]) regardless of
   source order. */
.ark-input-search .ark-input-search__shell--locked.ark-input-text .slds-input[readonly] {
    background-color:        var(--portal-neutral-grey-20) !important;
    border-color:            var(--portal-neutral-grey-70) !important;
    color:                   var(--portal-neutral-grey-70) !important;
    -webkit-text-fill-color: var(--portal-neutral-grey-70) !important;
    cursor:                  not-allowed !important;
    opacity:                 1 !important;
}
/* Manual mode toggle — read-only visual state.
   Uses opacity + pointer-events instead of the HTML disabled attribute
   so NVDA can still focus and announce the checkbox (disabled removes
   the element from the accessibility tree entirely). */
.ark-manual-mode-toggle--readonly {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
/* === Error state — reserve left padding for SLDS error icon ===
   Best-practice note (Rule 4.3 step 5 / Miss 8): no SLDS styling hook
   exists for error-state padding-left or error-icon sizing on
   `lightning-input`. When validation fails SLDS injects a
   `<lightning-primitive-icon>` with `data-key="error"` inside
   `.slds-form-element__control.slds-input-has-icon.slds-input-has-icon_left`.
   Our base skin sets `padding: 16px !important` on `.slds-input`,
   which clobbers the left padding SLDS normally reserves for that
   icon — the icon and the typed value then collide at x=16px.
   `.slds-has-error` is on the form-element ancestor and isn't always
   added by `lightning-input` (the host gets `invalid` instead), so
   we trigger off `.slds-input-has-icon_left` which is only present
   when SLDS is actively rendering the icon. Internal-DOM override
   with !important is the only path. */
.ark-input-text .slds-input-has-icon_left .slds-input,
.ark-input-textarea .slds-input-has-icon_left .slds-textarea {
    padding-left: 36px !important; /* 8 (gutter) + 16 (icon) + 12 (gap before text) */
}
.ark-input-text .slds-input-has-icon_left > lightning-primitive-icon,
.ark-input-textarea .slds-input-has-icon_left > lightning-primitive-icon {
    position:      absolute !important;
    left:          8px !important;
    top:           50% !important;
    width:         16px !important;
    height:        16px !important;
    margin-top:    0 !important;
    transform:     translateY(-50%) !important;
    pointer-events: none !important;
}
.ark-input-text .slds-input-has-icon_left svg.slds-input__icon,
.ark-input-textarea .slds-input-has-icon_left svg.slds-input__icon {
    width:         16px !important;
    height:        16px !important;
    left:          8px !important;
    top:           50% !important;
    margin-top:    0 !important;
    transform:     translateY(-50%) !important;
    fill:          var(--portal-error, #b80000) !important;
}

/* === field-level-help icon swap → ark-info-icon.svg (20×20) ===
   Hide SLDS utility:info SVG, paint our SVG as background on the
   helptext button. Selector best-effort against current SLDS DOM.
   Figma label flex: gap-[8px] items-center between label text and
   info icon. Gap is owned by the label's `margin-right:8px` below
   (no `margin-left` on the button) to avoid 16px double-gap. */
.ark-input-text lightning-helptext button,
.ark-input-combobox lightning-helptext button,
.ark-input-textarea lightning-helptext button {
    width:            20px !important;
    height:           20px !important;
    min-width:        20px !important;
    padding:          0 !important;
    background-color: transparent !important;
    background-image: url('/mrp/sfsites/c/resource/arkAssets/assets/ark-info-icon.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size:  20px 20px !important;
    border:           none !important;
    box-shadow:       none !important;
    margin-left:      0 !important;
    margin-top:       0 !important;
    margin-bottom:    0 !important;
}
.ark-input-text lightning-helptext button .slds-icon,
.ark-input-text lightning-helptext button lightning-primitive-icon,
.ark-input-text lightning-helptext button svg,
.ark-input-combobox lightning-helptext button .slds-icon,
.ark-input-combobox lightning-helptext button lightning-primitive-icon,
.ark-input-combobox lightning-helptext button svg,
.ark-input-textarea lightning-helptext button .slds-icon,
.ark-input-textarea lightning-helptext button lightning-primitive-icon,
.ark-input-textarea lightning-helptext button svg {
    display:    none !important;
    visibility: hidden !important;
}
/* Move helptext inline next to label text (JSON I111:3424;5:29348;19658:118848:
   `flex gap-[8px] items-center`). lightning-combobox/input renders
   <lightning-helptext> as a SIBLING of the label inside .slds-form-element.
   Use flex-wrap on the form-element so label + helptext share row 1 with
   align-items:center (icon middle aligns to label cap-height middle, not
   inline-baseline midpoint), and the input control wraps to row 2 via
   flex-basis:100%. Best-practice note (Rule 4.3 / Miss 8): no SLDS hook
   for label-row layout — internal-DOM fallback. */
.ark-input-text .slds-form-element,
.ark-input-combobox .slds-form-element,
.ark-input-textarea .slds-form-element {
    display:     flex !important;
    flex-wrap:   wrap !important;
    align-items: center !important;
    row-gap:     10px !important;
}
.ark-input-text .slds-form-element__label,
.ark-input-combobox .slds-form-element__label,
.ark-input-textarea .slds-form-element__label {
    display:       inline-flex !important;
    align-items:   center !important;
    margin:        0 2px 0 0 !important;  /* lightning-input wraps the label text in inner spans + a trailing whitespace node that flex can't collapse; the visible gap to the icon ends up ~6px on top of margin. 2px right margin lands on the Figma 8px spec (I111:3424;...;19658:118848 gap-[8px]). */
    vertical-align: baseline !important;
}
.ark-input-text lightning-helptext,
.ark-input-combobox lightning-helptext,
.ark-input-textarea lightning-helptext {
    display:        inline-flex !important;
    align-items:    center !important;
    align-self:     center !important;  /* SLDS .slds-form-element__icon defaults to align-self:flex-start which beats parent align-items:center; reset to center per Figma I111:3424;...;19658:118848 items-center. */
    padding:        0 !important;       /* SLDS .slds-form-element__icon ships padding: 0.125rem 0 0 0.25rem; clear so the 8px gap is owned solely by label margin-right. */
    margin:         0 !important;
    line-height:    0 !important;
}
.ark-input-text .slds-form-element__control,
.ark-input-combobox .slds-form-element__control,
.ark-input-textarea .slds-form-element__control {
    flex:       0 0 100% !important;
    max-width:  100% !important;
    margin-top: 10px !important;
}

/* === Collapse SLDS empty error/help slot below input shell ===
   Best-practice note (Rule 4.3 / Miss 8): targets internal SLDS DOM
   `.slds-form-element__help`. SLDS reserves this slot under every
   lightning-input/combobox for future error text; when empty it still
   occupies ~24px line-height, which doubles the visual gap between
   ark-form-row siblings (Figma 111:3398 spec is 24px gap). No SLDS
   styling hook exists for this — falling back to internal-DOM override.
   When an actual validation message appears the slot fills with text
   and the rule below no longer matches (`:empty`). */
.ark-form-row .slds-form-element__help:empty {
    display:     none !important;
    min-height:  0 !important;
    margin:      0 !important;
    padding:     0 !important;
}

/* === Cross-field error message under input shell ===
   Best-practice note (Rule 4.3 / Miss 8): targets raw SLDS utility classes
   `.slds-text-color_error.slds-text-body_small` rendered as a sibling
   `<div>` after `.ark-input-text` / `.ark-input-combobox` / `.ark-input-textarea`.
   Used for cross-field validations (e.g. "Daycare OR address OR phone is
   required", "DOB OR Age unknown is required") that can't be expressed via
   `message-when-value-missing`, so they don't render inside SLDS's own
   `.slds-form-element__help` slot. Without this rule the sibling div uses
   `slds-text-body_small` default 13px/18px with no top margin tuning and
   sits ~20-25px below the input shell instead of the ~4px that native
   SLDS errors use. Matches the native error spacing across AV/AO/PGC/Sibling
   cross-field error sites. No SLDS hook exists — internal-DOM fallback. */
.ark-input-text + .slds-text-color_error,
.ark-input-combobox + .slds-text-color_error,
.ark-input-textarea + .slds-text-color_error {
    display:        block !important;
    margin:         -11px 0 14px 0 !important; /* see §0 2026-05-14 — claws back ~15px SLDS hidden padding-bottom; compensates so Age-unknown checkbox under DOB doesn't crowd up */
    padding:        0 !important;
    font-size:      12px !important;
    line-height:    16px !important;
}

/* === Helper text under input shell ===
   Figma I238:4079;5:29348;19051:11319 (Address Line 1 / Address Line 2):
   SS Pro Regular 12 / 16 / 0.4px / #3b3a48. Same hidden-padding-bottom
   failure mode as the cross-field error rule above (see §0 2026-05-14)
   — lightning-input ships ~15px hidden padding-bottom on an inner
   wrapper, so margin-top:10px rendered as ~25px visible. -11px claws
   it back to ~4px effective, matching the cross-field error spacing. */
.ark-field-help {
    margin:         -11px 0 14px 0 !important;
    padding:        0 !important;
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      12px;
    font-weight:    400;
    line-height:    16px;
    letter-spacing: 0.4px;
    color:          #3b3a48;
}

/* === DOB helper text — error-state color flip ===
   Static `<p class="ark-field-help">Date of birth or Age unknown is
   required (Format:12/31/2024)</p>` rendered below each DOB input
   (arfocusAllegedVictim, arfocusAllegedOffender, arfocusPgcSiblings
   parent + sibling). Resting state inherits .ark-field-help gray; on
   required-state validation failure the LWC swaps in the _error
   modifier and the line turns red to mimic the standard SLDS required
   error styling. No layout shift — both states render the same `<p>`
   in the same slot (Rule -2 reserved error space). */
.ark-field-help_error {
    color: var(--portal-error, #b80000) !important;
}

/* === DOB date input: suppress native "Format: M/D/YYYY" helper ===
   lightning-input[type="date"] renders its format hint into
   `.slds-form-element__help` — the same slot SLDS uses for validation
   errors. With the unified static `<p class="ark-field-help">` below
   the input owning the message, the native slot is redundant and was
   producing duplicate text on resting state. Hide the slot entirely
   on the dedicated `.ark-input-dob` class only (Rule -3 — not anchored
   to shared `.ark-input-text`). Custom range errors (future date /
   pre-1908) render in a separate `<div class="slds-text-color_error">`
   slot below, unaffected by this rule. Internal-DOM fallback per
   Rule 4.3 step 5 / Miss 8 — no SLDS hook exists for suppressing the
   date-format hint. */
.ark-input-dob .slds-form-element__help {
    display: none !important;
}

/* === Combobox chevron swap → ark-keyboard-arrow-down.svg (20×20) ===
   Hide SLDS utility:down SVG, paint our SVG behind. Figma 111:3401
   spec is 28×28 but that leaves too little room for the value text in
   narrow cells (Prefix 128px → 'ASP Sr....' truncated). Reduced to
   20×20 at right:12px paired with `padding-right:36px` on the value.
   SLDS default places `.slds-input__icon` at `top:50%;
   margin-top:-0.5rem`; cleared and translateY(-50%) for 60px shell. */
.ark-input-combobox .slds-combobox__form-element .slds-icon-utility-down,
.ark-input-combobox .slds-combobox__form-element .slds-input__icon {
    background-image: url('/mrp/sfsites/c/resource/arkAssets/assets/ark-keyboard-arrow-down.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size:   20px 20px !important;
    width:             20px !important;
    height:            20px !important;
    top:               50% !important;
    margin-top:        0 !important;
    transform:         translateY(-50%) !important;
    right:             12px !important;
}
.ark-input-combobox .slds-combobox__form-element .slds-icon-utility-down svg,
.ark-input-combobox .slds-combobox__form-element .slds-input__icon svg {
    display:    none !important;
    visibility: hidden !important;
}


/* === Combobox dropdown options — match Race multi-select panel ===
   No SLDS styling hook exists for listbox option typography
   (--slds-c-combobox-listbox-* is not public); falling back to
   internal-DOM override per Rule 4.3 step 5 / Miss 8. Anchored on
   .slds-listbox (Rule -3) so the resting input shell + chevron are
   not affected, and the dropdown panel position/width remain SLDS-
   default. Typography mirrors .ark-input-multiselect__option:
   SS Pro Regular 15/24/0.15 #1d2528. */
.ark-input-combobox .slds-listbox .slds-listbox__option,
.ark-input-combobox .slds-listbox lightning-base-combobox-item {
    padding:        10px 16px !important;
    min-height:     0 !important;
    font-family:    var(--hf-paragraph-body-regular-font-family) !important;
    font-size:      15px !important;
    font-weight:    400 !important;
    line-height:    24px !important;
    letter-spacing: 0.15px !important;
    color:          #1d2528 !important;
}
.ark-input-combobox .slds-listbox .slds-listbox__option .slds-truncate,
.ark-input-combobox .slds-listbox .slds-listbox__option .slds-media__body {
    font:  inherit !important;
    color: inherit !important;
}
.ark-input-combobox .slds-listbox .slds-listbox__option:hover,
.ark-input-combobox .slds-listbox .slds-listbox__option:focus {
    background-color: var(--portal-neutral-grey-20, #f3f2f2) !important;
}
.ark-input-combobox .slds-listbox .slds-listbox__option_has-meta[aria-selected="true"],
.ark-input-combobox .slds-listbox .slds-listbox__option.slds-is-selected {
    background-color: #e5f1fe !important;
    font-weight:      600 !important;
}
.ark-input-combobox .slds-listbox .slds-listbox__option .slds-media__figure lightning-primitive-icon svg {
    fill: #002b61 !important;
}


/* ─────────────────────────────────────────────────────────────
   ark-input-search — typeahead address / search field skin
   Figma 111:3425 (Reporter Intake Work Address). Pair with
   `ark-input-text` on the wrapper to inherit label + shell
   typography; this block adds the trailing magnifier asset,
   typeahead dropdown, clear button, and spinner positioning.

   Used by: c-arfocus-address-input (native <input class="slds-input">).
   ───────────────────────────────────────────────────────────── */

/* Component host stretches across the parent grid column. */
c-arfocus-address-input {
    display: block;
}

/* Label → helptext gap. arfocusAddressInput's <label> wraps `{label}` as a
   raw text node (no inner spans / trailing whitespace like native
   lightning-input produces), so the §8 `.ark-input-* lightning-helptext
   { padding:0 !important }` rule leaves the icon flush against the label
   text. 6px padding-left here restores a visible gap matching the Race /
   Gender field-level-help spacing. */
.ark-input-search lightning-helptext {
    padding-left: 9px !important;
}

/* Typeahead wrapper — anchors the dropdown. */
.ark-input-search .ark-input-search__typeahead {
    position: relative;
}

/* Input shell wrapper — anchors the magnifier / clear button. */
.ark-input-search .ark-input-search__shell {
    position:    relative;
    display:     flex;
    align-items: center;
    width:       100%;
}

/* Reserve right-side room for the 28px magnifier (or clear) icon. */
.ark-input-search .slds-input {
    padding-right: 56px !important; /* 16 (px-16) + 28 (icon) + 12 gap */
    padding-left:  16px !important;
}

/* Read-only / address-selected appearance — keep shell, dim slightly.
   Exclude [disabled] so the disabled-state greying (#eaeaea bg, #51646d
   border/text) defined for .ark-input-text wins when the address input
   is both readonly (an address has been selected) AND disabled (the row
   is offender-linked on the Parent/Guardian/Caregiver screen). */
.ark-input-search .slds-input[readonly]:not([disabled]) {
    background-color: var(--legacy-white) !important;
    cursor:           default;
}

/* Disabled-state styling for the typeahead input — matches the
   .ark-input-text disabled skin so offender-linked PGC rows (and any
   other consumer that passes disabled=true to c-arfocus-address-input)
   render with the same greyed appearance as the rest of the locked
   card. Needed because the host <div> carries both .ark-input-text and
   .ark-input-search; without this rule the later [readonly] rule used
   to win the cascade tie and leave the field looking editable. */
.ark-input-search .slds-input[disabled],
.ark-input-search .slds-input:disabled {
    background-color:        var(--portal-neutral-grey-20) !important;
    border-color:            var(--portal-neutral-grey-70) !important;
    color:                   var(--portal-neutral-grey-70) !important;
    -webkit-text-fill-color: var(--portal-neutral-grey-70) !important;
    cursor:                  not-allowed;
    opacity:                 1 !important;
}

/* Magnifier — Figma I111:3425;5:29348;19961:32683 (28×28 box, _shape inset 12.5% → 21px glyph centered). */
.ark-input-search .ark-input-search__icon {
    position:            absolute;
    right:               16px;
    top:                 50%;
    transform:           translateY(-50%);
    width:               28px;
    height:              28px;
    background-image:    url('/mrp/sfsites/c/resource/arkAssets/assets/ark-search-icon.svg');
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     21px 21px; /* JSON inset-12.5% → 75% of 28 */
    pointer-events:      none;
    z-index:             1;
}

/* Clear (X) button — sits where the magnifier would, only when an address is selected. */
.ark-input-search .ark-input-search__clear {
    position:        absolute;
    right:           12px;
    top:             50%;
    transform:       translateY(-50%);
    width:           28px;
    height:          28px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      none;
    border:          none;
    border-radius:   50%;
    color:           var(--portal-neutral-grey-70, #51646d);
    cursor:          pointer;
    padding:         0;
    z-index:         2;
}

.ark-input-search .ark-input-search__clear:hover {
    background-color: var(--portal-neutral-grey-20, #eaeaea);
    color:            var(--utility-black-800, #181818);
}

.ark-input-search .ark-input-search__clear:focus {
    outline:    none;
    box-shadow: 0 0 0 2px var(--ca-main-primary-dark);
}

/* Spinner — sits to the left of the magnifier/clear icon while loading
   so the two never overlap. Magnifier/clear occupy right:12-16px in a
   28px box → spinner anchored at right:52px = 16 + 28 + 8px gap. */
.ark-input-search .ark-input-search__spinner {
    position:  absolute;
    right:     52px;
    top:       50%;
    transform: translateY(-50%);
    width:     20px;
    height:    20px;
    z-index:   2;
}

/* Typeahead dropdown — anchored under the input shell. */
.ark-input-search .ark-input-search__dropdown {
    position:         absolute;
    top:              calc(100% + 4px);
    left:             0;
    right:            0;
    z-index:          9999;
    max-height:       250px;
    overflow-y:       auto;
    background-color: var(--legacy-white);
    border:           1px solid #c4c4c4;
    border-radius:    10px;
    box-shadow:       0 4px 8px 0 rgba(0, 63, 94, 0.10);
}

.ark-input-search .ark-input-search__option {
    padding:          12px 16px;
    cursor:           pointer;
    background-color: var(--legacy-white);
    color:            var(--utility-black-800, #1d2528);
    font-family:      var(--hf-paragraph-body-regular-font-family);
    font-size:        15px;
    line-height:      24px;
    letter-spacing:   0.15px;
    border-bottom:    1px solid var(--portal-neutral-grey-20, #f3f2f2);
}

.ark-input-search .ark-input-search__option:last-child {
    border-bottom: none;
}

.ark-input-search .ark-input-search__option:hover {
    background-color: var(--portal-neutral-grey-20, #f3f2f2);
}

.ark-input-search .ark-input-search__option:focus {
    background-color: #e5f1fe;
    outline:          none;
}

/* Active typeahead row (keyboard-navigated via aria-activedescendant
   OR JS-added .--focused). Mirrors `.ark-input-combobox` selected state
   verbatim — same bg, text color, weight as the picklist dropdown row.
   !important per Miss 8 — overrides SLDS / Experience Cloud bundled
   `[aria-selected="true"]` default that otherwise paints SLDS brand blue. */
.ark-input-search .ark-input-search__option[aria-selected="true"],
.ark-input-search .ark-input-search__option--focused {
    background-color: #e5f1fe !important;
    color:            #1d2528 !important;
    font-weight:      600 !important;
}

.ark-input-search .ark-input-search__option--empty {
    color:       var(--portal-neutral-grey-70, #706e6b);
    font-style:  italic;
    cursor:      default;
}

.ark-input-search .ark-input-search__option--empty:hover {
    background-color: var(--legacy-white);
}


/* ─────────────────────────────────────────────────────────────
   ark-input-multiselect — multi-select picklist with pill display
   Figma 16:1024 (arfocusAllegedVictim Race field). Pair with
   `ark-input-combobox` on the same wrapper to inherit
   label/shell/chevron/helptext skins from §8 above; this block
   only adds the pill row, pill chip, and dropdown panel that
   are unique to the multi-select pattern.

   Used by: c-arfocus-multi-select-picklist.
   ───────────────────────────────────────────────────────────── */

c-arfocus-multi-select-picklist {
    display: block;
}

/* Anchor the dropdown to the input shell. Both the trigger wrapper
   AND its `.slds-combobox` ancestor get `position: relative` because
   SLDS / Experience-Cloud brand css resets one or the other to
   `static` at higher specificity, which would let the dropdown escape
   to the page-level offset parent (visible mis-render: dropdown shifts
   left of the input and shrinks to content width). */
.ark-input-multiselect .slds-combobox_container,
.ark-input-multiselect .slds-combobox,
.ark-input-multiselect .slds-dropdown-trigger {
    position: relative !important;
    /* Kill SLDS-default padding on these wrappers — when present it
       sits between the input shell bottom and the absolutely-positioned
       dropdown panel (panel anchored at `top: 100%` of this container),
       producing a visible gap between the input and the open options
       list. Setting padding to 0 keeps `top: 100%` flush against the
       shell, with the intended 4px breathing room owned by the panel's
       own `margin-top`. */
    padding:  0 !important;
}

/* Race column layout — Figma 16:1085 `flex flex-col gap-[10px]`.
   Wrapper owns shell→pills spacing via flex `gap`. To keep that the
   ONLY contributor (no double-up), the inner `.slds-form-element`'s
   SLDS-bundled `margin-bottom` is zeroed below — otherwise it stacks
   on top of the wrapper gap and roughly doubles the visible distance. */
.ark-input-combobox.ark-input-multiselect {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.ark-input-combobox.ark-input-multiselect > .slds-form-element {
    margin-bottom: 0 !important;
}

/* Neutralize SLDS/Experience-Cloud bundled bottom spacing on the
   form-element stack inside the multiselect wrapper. Pills sit as a
   flex SIBLING of `.slds-form-element` and the only intended spacer
   between shell and pills is the wrapper's `gap: 10px` above. SLDS
   ships margin-bottom on `.slds-form-element` and padding-bottom on
   `.slds-combobox__form-element` / `.slds-form-element__control`
   which stack on top of the 10px gap and inflate the visible shell→
   pills distance. Rule 4.3 step 5 / Miss 8 internal-DOM fallback —
   no SLDS hook exists for these properties. */
.ark-input-multiselect > .slds-form-element,
.ark-input-multiselect .slds-form-element__control,
.ark-input-multiselect .slds-combobox__form-element {
    margin-bottom:  0 !important;
    padding-bottom: 0 !important;
}

/* Readonly trigger input remains clickable. */
.ark-input-multiselect input.slds-combobox__input[readonly] {
    cursor: pointer;
}

/* Error state — mirror native lightning-combobox: red border on the
   trigger shell and red help/error text below. The host LWC adds
   `slds-has-error` to `.slds-form-element` only when validation fails,
   so this rule never affects the resting state. No SLDS hook covers
   custom-DOM combobox error styling, so we paint it here per Rule 4.3. */
.ark-input-multiselect .slds-has-error input.slds-combobox__input,
.ark-input-multiselect .slds-has-error input.slds-combobox__input:focus,
.ark-input-multiselect .slds-has-error input.slds-combobox__input:hover {
    border-color: #ba0517;
    box-shadow:   inset 0 0 0 1px #ba0517;
}
.ark-input-multiselect .slds-has-error .slds-form-element__help {
    color:       #ba0517 !important;
    /* Negative margin-top pulls the error line up under the input shell.
       SLDS ships padding-bottom on `.slds-dropdown-trigger_click` (the
       middle layer between `.slds-form-element__control` and the visible
       `.slds-combobox__form-element` input row) which adds ~11px of
       invisible space below the input. Easier to pull the help up than
       hunt every SLDS middle-layer container that owns the gap. The
       compensating `margin-bottom` restores the form-element's natural
       vertical extent so the next form row (Gender) keeps its normal
       inter-row gap instead of crowding up against the error line.
       Result: ~4px above + ~14px below the error text, matching the
       native lightning-combobox error pattern. Rule 4.3 step 5 / Miss 8
       internal-DOM fallback. */
    margin-top:    -7px   !important;
    margin-bottom: 14px   !important;
    font-size:     0.75rem !important;
    line-height:   1.25   !important;
}

/* Override the shared `.ark-input-combobox .slds-form-element__control
   { margin-top: 10px !important }` rule above. The multiselect wrapper
   carries BOTH `ark-input-combobox` and `ark-input-multiselect`, so it
   inherits the 10px gap and visibly drops the Race input shell ~10px
   below the label compared with sibling lightning-combobox fields
   (Ethnicity). Higher specificity (extra `.ark-input-multiselect`
   qualifier) wins over the shared rule. */
.ark-input-multiselect .slds-form-element__control {
    margin-top: 0 !important;
}

/* Chevron — no override needed. The shared §8 rule
   `.ark-input-combobox .slds-combobox__form-element .slds-input__icon`
   paints ark-keyboard-arrow-down.svg as a background-image on the
   empty `.ark-input-multiselect__chevron` span (20×20, centered with
   top:50%; translateY(-50%); right:12px). The chevron span MUST be
   empty (no inner lightning-icon) — adding a child element stacks a
   second SVG on top and breaks vertical centering inside the 60px
   shell. Background-image with `background-position: center` is
   centered by definition. */

/* Pills row — Figma I16:1024;24800:2231 (gap-8 items-center, w-full).
   The 10px gap to the shell above is owned by the wrapper's flex `gap`
   (see `.ark-input-combobox.ark-input-multiselect`) so no margin-top
   needed. margin-bottom keeps Figma 16:1073 24px inter-row gap parity
   with non-pill rows (whose implicit gap comes from §8 `:empty` help
   slot which doesn't apply once pills render). */
.ark-input-multiselect__pills {
    display:        flex;
    flex-wrap:      wrap;
    gap:            8px;
    align-items:    center;
    width:          100%;
    margin-bottom:  14px;
}

/* Pill chip — Figma I16:1024;24800:2232;21294:117305:
   bg-white, border-2 #c4c4c4, drop-shadow [1 4 5 rgba(115,115,115,0.25)],
   gap-4, p-10, rounded-8, items-center. Pill text SS Pro SemiBold
   14/20/0.14px #1d2528 (;21288:9358). Shell is a passive container —
   close-button inside handles the click. */
.ark-multiselect-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    background:     var(--legacy-white, #fff);
    border:         2px solid #c4c4c4;
    border-radius:  8px;
    padding:        10px;
    box-shadow:     1px 4px 5px rgba(115, 115, 115, 0.25);
}

.ark-multiselect-pill__label {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      14px;
    font-weight:    600;
    line-height:    20px;
    letter-spacing: 0.14px;
    color:          var(--portal-neutral-grey-90, #1d2528);
    white-space:    nowrap;
}

/* Pill close button — lightning-button-icon utility:close, sized 16×16
   per Figma I16:1024;24800:2232;21294:117305;21288:9360 (size-16,
   _shape inset-20.83% → ~9.6px glyph). SLDS Styling Hooks neutralise
   button chrome (Rule 4.2); internal-DOM `!important` (Rule 4.3 step 5)
   on the inner <button> + .slds-button covers padding/size hooks SLDS
   does not expose. */
.ark-multiselect-pill lightning-button-icon {
    --slds-c-button-color-background:        transparent;
    --slds-c-button-color-background-hover:  transparent;
    --slds-c-button-color-background-active: transparent;
    --slds-c-button-color-border:            transparent;
    --slds-c-button-color-border-hover:      transparent;
    --slds-c-button-shadow:                  none;
    /* NOTE 2026-05-19 Lakshmi — do NOT suppress --slds-c-button-shadow-focus
       here. Pill close buttons are in the Tab order (keyboard users land on
       them after the multiselect dropdown closes so they can remove values
       before moving on). The :focus-visible rule below paints an explicit
       outline so the ring is clearly visible against the white pill chip. */
    --slds-c-icon-color-foreground-default:  var(--portal-neutral-grey-90, #1d2528);
    line-height: 0;
}
.ark-multiselect-pill lightning-button-icon button,
.ark-multiselect-pill lightning-button-icon .slds-button {
    width:       16px !important;
    height:      16px !important;
    min-width:   16px !important;
    padding:     0 !important;
    border:      none !important;
    line-height: 0 !important;
}
/* Keyboard focus ring on the pill close button. Matches the native SLDS
   lightning-input focus state used by the Daycare / SSN / First Name fields
   on this screen — solid 1px #1589ee ring — so the pill X visually pairs
   with the adjacent form inputs the user is tabbing through.
   `:focus-visible` only, so mouse clicks do not trigger the ring. */
.ark-multiselect-pill lightning-button-icon button:focus-visible,
.ark-multiselect-pill lightning-button-icon .slds-button:focus-visible {
    outline:        1px solid #1589ee !important;
    outline-offset: 1px !important;
    box-shadow:     none !important;
    border-radius:  2px !important;
}
.ark-multiselect-pill lightning-button-icon .slds-button__icon,
.ark-multiselect-pill lightning-button-icon svg {
    width:  10px !important;   /* inset-20.83% of 16px ≈ 9.6 → 10px (sub-px rounded) */
    height: 10px !important;
}

/* Dropdown panel — anchored to input shell, scrollable list of options.
   Visual treatment matches ark-input-search dropdown (radius-10 / soft
   shadow / 1px #c4c4c4 border) for consistency portal-wide. `!important`
   on position/width overrides SLDS `.slds-dropdown` defaults that
   otherwise let the dropdown collapse to option-content width. */
.ark-input-multiselect .ark-input-multiselect__panel {
    position:      absolute !important;
    top:           100% !important;
    left:          0 !important;
    right:         0 !important;
    /* SLDS base `.slds-dropdown` ships `transform: translateX(-50%)` for
       its centered-dropdown variant. We anchor with left/right instead,
       so the inherited transform shifts the panel ~half its width to
       the left and the options slide under the side-nav (only the right
       tail of each label peeks out). Reset transform here. */
    transform:     none !important;
    z-index:       7001;
    width:         100% !important;
    min-width:     100% !important;
    max-width:     100% !important;
    box-sizing:    border-box;
    max-height:    240px;
    overflow-x:    hidden;
    overflow-y:    auto;
    margin-top:    4px;
    padding:       4px 0;
    background:    var(--legacy-white, #fff);
    border:        1px solid #c4c4c4;
    border-radius: 10px;
    box-shadow:    0 4px 8px rgba(0, 63, 94, 0.1);
}

.ark-input-multiselect__list {
    list-style: none;
    margin:     0;
    padding:    0;
    width:      100%;
}

.ark-input-multiselect__option {
    cursor:         pointer;
    padding:        10px 16px;
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      15px;
    font-weight:    400;
    line-height:    24px;
    letter-spacing: 0.15px;
    color:          var(--portal-neutral-grey-90, #1d2528);
    display:        flex;
    align-items:    center;
    gap:            8px;
    width:          100%;
    box-sizing:     border-box;
}

.ark-input-multiselect__option:hover {
    background-color: var(--portal-neutral-grey-20, #f3f2f2);
}

.ark-input-multiselect__option_selected {
    background-color: #e5f1fe;
    font-weight:      600;
}

/* Active option highlight (keyboard-navigated via ArrowUp/Down in
   arfocusMultiSelectPicklist.handleKeyDown). User requirement 2026-05-18:
   grey background + blue left border — distinct from the `_selected` blue-bg
   state so the keyboard cursor stays visible even when arrowing over the
   currently-selected row. `padding-left: 13px` (=16 − 3) compensates for the
   3px border so the label text does not shift horizontally between focused
   and unfocused rows. !important per Miss 8 — overrides SLDS/Experience
   Cloud bundled defaults that target the same custom DOM node. */
.ark-input-multiselect__option--focused {
    background-color: var(--portal-neutral-grey-20, #f3f2f2) !important;
    border-left:      3px solid #0176d3 !important;
    padding-left:     13px !important;
    color:            #1d2528 !important;
    font-weight:      600 !important;
}

/* Selected + keyboard-focused (user arrowed onto the row they already have
   selected). Keep the selected blue-bg so the checkmark stays meaningful,
   but add the blue left border so the keyboard cursor is still visible. */
.ark-input-multiselect__option_selected.ark-input-multiselect__option--focused {
    background-color: #e5f1fe !important;
    border-left:      3px solid #0176d3 !important;
    padding-left:     13px !important;
}

.ark-input-multiselect__option-check {
    flex:        0 0 16px;
    width:       16px;
    height:      16px;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    --slds-c-icon-color-foreground-default: #002b61;
}

.ark-input-multiselect__option-label {
    flex:          1 1 auto;
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}


/* ─────────────────────────────────────────────────────────────
   ark-manual-mode-toggle — "Can't find address? Switch to
   manual mode" row label (Figma 111:3428: SS Pro Regular 14 /
   18 / tracking 0.14px / #51646d).

   Targets the label text inside <lightning-input type="checkbox">.
   Checkbox box itself uses SLDS default; only typography is
   overridden here.
   ───────────────────────────────────────────────────────────── */
.ark-manual-mode-toggle .slds-checkbox__label .slds-form-element__label,
.ark-manual-mode-toggle .slds-form-element__label,
.ark-manual-mode-toggle .slds-checkbox__label {
    font-family:    var(--hf-paragraph-body-regular-font-family) !important;
    font-size:      14px !important;
    font-weight:    400 !important;
    line-height:    18px !important;
    letter-spacing: 0.14px !important;
    color:          #1d2528 !important;
}

/* Checkbox box skin — neutralise the Experience Cloud community brand-blue
   highlight on .slds-checkbox_faux. SLDS styling hooks (Rule 4.3 step 4)
   used in preference to internal-DOM overrides. Unchecked: white bg + blue
   border. Checked: white bg + blue border + blue tick (no fill). */
.ark-manual-mode-toggle {
    --slds-c-checkbox-color-background:          var(--legacy-white, #ffffff);
    --slds-c-checkbox-color-border:              var(--ca-main-primary-dark, #003464);
    --slds-c-checkbox-color-background-checked:  var(--legacy-white, #ffffff);
    --slds-c-checkbox-color-border-checked:      var(--ca-main-primary-dark, #003464);
    --slds-c-checkbox-mark-color-foreground:     var(--ca-main-primary-dark, #003464);
    --slds-c-checkbox-radius-border:             3px;
    --slds-c-checkbox-shadow-focus:              0 0 3px var(--ca-main-primary-dark, #003464);
}

/* Border-width: no SLDS hook exists for checkbox border-width; falling back to
   internal-DOM override per Rule 4.3 step 5 / Miss 8. Matches portal input
   standard of 2px (ark-input-text / ark-input-combobox shells). */
.ark-manual-mode-toggle .slds-checkbox_faux {
    border-width: 2px !important;
}


/* ============================================================
   9. BUTTONS
   ============================================================ */

/* Outline button — white bg, navy border, rounded, shadowed */
.ark-btn-outline {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    height:          56px;
    padding:         16px 20px;
    background-color: var(--legacy-white);
    border:          3px solid var(--ca-main-primary-dark);
    border-radius:   10px;
    box-shadow:      var(--hf-button-ds-shadow);
    font-family:     var(--hf-heading-4-font-family);
    font-size:       var(--hf-heading-4-font-size);
    font-weight:     var(--hf-heading-4-font-weight);
    line-height:     28px;
    letter-spacing:  var(--hf-heading-4-letter-spacing);
    color:           var(--ca-main-primary-dark);
    text-align:      center;
    white-space:     nowrap;
    cursor:          pointer;
    text-decoration: none;
    overflow:        hidden;
    transition:      background-color 0.15s ease;
}

.ark-btn-outline:hover,
.ark-btn-outline:focus {
    background-color: var(--primary-100);
}

.ark-btn-outline:focus {
    outline:        2px solid var(--ca-main-primary-dark);
    outline-offset: 2px;
}


/* ─── Form Page Navigation Buttons (node 247:4460) ─── */
/* Navy = #002b61 (--nav-btn-navy); used on Cancel, Previous, Add, Next */

/* Cancel button — text/ghost style, no border */
.ark-btn-cancel button,
.ark-btn-cancel .slds-button {
    background-color: transparent !important;
    border:           none !important;
    box-shadow:       none !important;
    color:            var(--nav-btn-navy) !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        var(--hf-heading-4-font-size) !important;
    font-weight:      var(--hf-heading-4-font-weight) !important;
    line-height:      28px !important;
    text-transform:   none !important;
    padding:          16px 20px !important;
    border-radius:    10px !important;
}

.ark-btn-cancel button:hover,
.ark-btn-cancel .slds-button:hover {
    background-color: var(--portal-neutral-grey-40) !important;
    text-decoration:  none !important;
}

/* Previous button — outline navy, white background, shadow */
.ark-btn-previous button,
.ark-btn-previous .slds-button {
    background-color: var(--legacy-white) !important;
    border:           3px solid var(--nav-btn-navy) !important;
    border-radius:    10px !important;
    box-shadow:       var(--hf-button-ds-shadow) !important;
    color:            var(--nav-btn-navy) !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        var(--hf-heading-4-font-size) !important;
    font-weight:      var(--hf-heading-4-font-weight) !important;
    line-height:      28px !important;
    text-transform:   none !important;
    padding:          0 20px !important;
    height:           56px !important;
    white-space:      nowrap;
}

.ark-btn-previous button:hover,
.ark-btn-previous .slds-button:hover {
    background-color: var(--primary-100) !important;
}

.ark-btn-previous button:focus,
.ark-btn-previous .slds-button:focus {
    outline:        2px solid var(--nav-btn-navy) !important;
    outline-offset: 2px !important;
}

/* Next button — solid legacy-royal (#154570) with white text */
.ark-btn-next button,
.ark-btn-next .slds-button {
    background-color: var(--legacy-royal) !important;
    border:           none !important;
    border-radius:    10px !important;
    box-shadow:       var(--hf-button-ds-shadow) !important;
    color:            var(--legacy-white) !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        var(--hf-heading-4-font-size) !important;
    font-weight:      var(--hf-heading-4-font-weight) !important;
    line-height:      28px !important;
    text-transform:   none !important;
    padding:          0 20px !important;
    height:           56px !important;
    white-space:      nowrap;
}

.ark-btn-next button:hover,
.ark-btn-next .slds-button:hover {
    background-color: var(--portal-blue-tints-blue-3) !important;
}

.ark-btn-next button:focus,
.ark-btn-next .slds-button:focus {
    outline:        2px solid var(--legacy-white) !important;
    outline-offset: 2px !important;
}

/* Add Person/Sibling button — outline navy, white bg, shadow */
.ark-btn-add-person button,
.ark-btn-add-person .slds-button {
    background-color: var(--legacy-white) !important;
    border:           3px solid var(--nav-btn-navy) !important;
    border-radius:    10px !important;
    box-shadow:       var(--hf-button-ds-shadow) !important;
    color:            var(--nav-btn-navy) !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        var(--hf-heading-4-font-size) !important;
    font-weight:      var(--hf-heading-4-font-weight) !important;
    line-height:      28px !important;
    text-transform:   none !important;
    padding:          0 20px !important;
    height:           56px !important;
    white-space:      nowrap;
}

.ark-btn-add-person button:hover,
.ark-btn-add-person .slds-button:hover {
    background-color: var(--primary-100) !important;
}

.ark-btn-add-person button:focus,
.ark-btn-add-person .slds-button:focus {
    outline:        2px solid var(--nav-btn-navy) !important;
    outline-offset: 2px !important;
}

/* Card delete button — bare icon, navy color */
.ark-card-delete-btn button,
.ark-card-delete-btn .slds-button {
    color:      var(--portal-neutral-grey-90) !important;
    background: transparent !important;
    border:     none !important;
    box-shadow: none !important;
    padding:    4px !important;
}

.ark-card-delete-btn button:hover,
.ark-card-delete-btn .slds-button:hover {
    color: var(--portal-status-danger) !important;
}

/* Card chevron expand/collapse button — no longer used; accordion handles expand/collapse natively */


/* ─── Wizard footer buttons ───
   Source: Figma I111:3435;5:28703;22370:30615 / 30617 / 30620 (Reporter Intake footer).
   Apply to <lightning-button> via class. Internal-DOM overrides per Miss 8. */

/* Cancel — text-only navy button, no bg, no border. */
.ark-btn-cancel-text button,
.ark-btn-cancel-text .slds-button {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    padding:          16px 20px !important;
    background-color: transparent !important;
    border:           none !important;
    box-shadow:       none !important;
    border-radius:    10px !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        20px !important;
    font-weight:      600 !important;
    line-height:      24px !important;
    letter-spacing:   0.14px !important;
    color:            var(--nav-btn-navy) !important;
    text-align:       center !important;
    white-space:      nowrap !important;
    cursor:           pointer !important;
}

/* Previous — outlined navy button, white bg, 1px navy border, drop shadow.
   Shared by wizard Previous (Figma 111:3435) and Success page Print / Return
   to Homepage (Figma 303:3709 / 303:3853) — same hf/button outlined variant.
   Padding 15/19 + 1px border = same 56px outer height as Next-primary (which
   uses 16/20 padding + no border), so the two buttons sit at identical size. */
.ark-btn-previous-outline button,
.ark-btn-previous-outline .slds-button {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    padding:          15px 19px !important;
    background-color: var(--legacy-white) !important;
    border:           1px solid var(--nav-btn-navy) !important;
    box-shadow:       var(--hf-button-ds-shadow) !important;
    border-radius:    10px !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        20px !important;
    font-weight:      600 !important;
    line-height:      24px !important;
    letter-spacing:   0.14px !important;
    color:            var(--nav-btn-navy) !important;
    text-align:       center !important;
    white-space:      nowrap !important;
    cursor:           pointer !important;
}

/* Disabled state — Previous and Next must visually communicate non-interactive
   state. Component CSS uses !important throughout, so disabled rules also need
   !important to win the cascade over the default rules above. */
.ark-btn-previous-outline button:disabled,
.ark-btn-previous-outline button[disabled],
.ark-btn-previous-outline .slds-button:disabled,
.ark-btn-previous-outline .slds-button[disabled] {
    background-color: var(--legacy-white) !important;
    border-color:     #c9c9c9 !important;
    color:            #a8a8a8 !important;
    box-shadow:       none !important;
    cursor:           not-allowed !important;
    opacity:          0.65 !important;
    pointer-events:   none !important;
}

/* Next — filled navy button, white text, drop-shadow. */
.ark-btn-next-primary button,
.ark-btn-next-primary .slds-button {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    padding:          16px 20px !important;
    background-color: var(--nav-btn-navy) !important;
    border:           none !important;
    box-shadow:       var(--hf-button-ds-shadow) !important;
    border-radius:    10px !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        20px !important;
    font-weight:      600 !important;
    line-height:      24px !important;
    letter-spacing:   0.14px !important;
    color:            var(--legacy-white) !important;
    text-align:       center !important;
    white-space:      nowrap !important;
    cursor:           pointer !important;
}

.ark-btn-next-primary button:disabled,
.ark-btn-next-primary button[disabled],
.ark-btn-next-primary .slds-button:disabled,
.ark-btn-next-primary .slds-button[disabled] {
    background-color: #c9c9c9 !important;
    color:            #6b6b6b !important;
    box-shadow:       none !important;
    cursor:           not-allowed !important;
    opacity:          0.65 !important;
    pointer-events:   none !important;
}

/* Keyboard focus indicator — WCAG 2.4.7. The base rules above set
   `box-shadow !important` for the drop-shadow, which suppresses
   SLDS's default box-shadow focus ring. Restore visible focus with
   a 3px navy outline sitting 2px outside the button so it lands on
   the white card / footer background and contrasts equally well
   against both the outlined (white) Previous and filled (navy)
   Next backgrounds. `:focus-visible` ensures mouse clicks do not
   trigger the ring — keyboard / programmatic focus only. */
.ark-btn-previous-outline button:focus-visible,
.ark-btn-previous-outline .slds-button:focus-visible,
.ark-btn-next-primary button:focus-visible,
.ark-btn-next-primary .slds-button:focus-visible {
    outline:        3px solid var(--nav-btn-navy) !important;
    outline-offset: 2px !important;
}


/* ============================================================
   10. LINKS
   (None defined yet)
   ============================================================ */


/* ============================================================
   11. TABS
   (None defined yet)
   ============================================================ */


/* ============================================================
   12. MODALS
   (None defined yet)
   ============================================================ */


/* ============================================================
   13. TOAST / ALERTS
   (None defined yet)
   ============================================================ */


/* ============================================================
   14. TABLE
   (None defined yet)
   ============================================================ */


/* ============================================================
   15. COMMON COMPONENT SPECIFIC STYLES
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   15.1  c-arfocus-collapsible-card
   Reusable accordion card with two-line summary header (title +
   subtitle), optional delete action, and slotted body. Built on
   the SLDS accordion blueprint (slds-accordion__section / __summary
   / __summary-action / __summary-content / __content with
   aria-expanded + aria-controls).

   Visual divergence from the SLDS default: the chevron sits on the
   right (separate lightning-button-icon, not the inline summary-
   action SVG) with a vertical pipe + delete control before it,
   matching the design reference (Figma 16:1002 form-card pattern).
   ──────────────────────────────────────────────────────────── */

/* Reset the SLDS accordion list chrome — we render one section per
   instance, so the <ul>/<li> wrappers carry no list semantics. */
.ark-collapsible-card .slds-accordion,
.ark-collapsible-card .slds-accordion__list-item {
    margin:     0;
    padding:    0;
    list-style: none;
}

.ark-collapsible-card .slds-accordion__section {
    padding: 0;
    border:  none;
}

/* Closed-state shell — Figma 16:1002 (white 1023×94, radius 10,
   shadow 0 4px 8px rgba(0,63,94,0.1), padding 20, gap 20). */
.ark-collapsible-card_closed .slds-accordion__section {
    height:           94px;
    background-color: var(--legacy-white);
    border-radius:    10px;
    padding:          20px;
    box-shadow:       0 -2px 6px rgba(0, 63, 94, 0.08),
                      0  2px 6px rgba(0, 63, 94, 0.08);
    box-sizing:       border-box;
}

/* Open-state shell — same chrome as .ark-form-card §7 (white,
   radius 10, shadow, 40px padding, 12px gap). */
.ark-collapsible-card_open .slds-accordion__section {
    background-color: var(--legacy-white);
    border-radius:    10px;
    padding:          40px;
    box-shadow:       0 -2px 6px rgba(0, 63, 94, 0.08),
                      0  2px 6px rgba(0, 63, 94, 0.08);
    box-sizing:       border-box;
}

/* Summary row — title block grows, actions block stays right. */
.ark-collapsible-card__summary {
    display:     flex !important;
    align-items: center;
    gap:         20px;
    width:       100%;
    margin:      0;
    padding:     0;
}

.ark-collapsible-card_open .ark-collapsible-card__summary {
    border-bottom:  2px solid var(--portal-neutral-grey-30, #C4CED1);
    padding-bottom: 24px;
    margin-bottom:  12px;
}

/* Heading wraps the title block — no interactive chrome. The chevron
   lightning-button-icon is the only toggle (Rule 4.2 strict OOTB). */
.ark-collapsible-card__title-block {
    flex:           1 1 auto;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            2px;
    min-width:      0;
    margin:         0;
    padding:        0;
}

/* Title — SS Pro SemiBold 20/24/0.14 #003464 (Figma I16:1002;20224:11268
   when closed; same family at expanded card title slot when open).
   Rendered as <h3> — reset default margins. */
.ark-collapsible-card__title {
    font-family:    var(--hf-heading-4-font-family);
    font-size:      20px;
    font-weight:    600;
    line-height:    24px;
    letter-spacing: 0.14px;
    color:          #003464;
    margin:         0;
    padding:        0;
}

/* Open-state title color override — JSON node 16:1008 specifies
   `text-[color:var(--portal-neutral-colours/grey-90,#1d2528)]`. */
.ark-collapsible-card_open .ark-collapsible-card__title {
    color: var(--portal-neutral-grey-90, #1d2528);
}

/* Subtitle — SS Pro Regular 14/18/0.14 #000 (Figma I16:1002;20224:11269). */
.ark-collapsible-card__subtitle {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      14px;
    font-weight:    400;
    line-height:    18px;
    letter-spacing: 0.14px;
    color:          #000;
    margin:         0;
}

/* Actions block (delete + pipe + chevron) — fixed-width column on the
   right of the summary row. */
.ark-collapsible-card__actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        0 0 auto;
}

/* Vertical pipe — 2×28 #C4CED1 (Figma 111:3394 imgDivider1 /
   I16:1002;22576:1023). */
.ark-collapsible-card__divider {
    flex:             0 0 auto;
    align-self:       center;
    width:            2px;
    height:           28px;
    border-radius:    1px;
    background-color: #C4CED1;
}

/* Delete icon — tinted to legacy/royal #154570 via SLDS Styling Hooks
   (Rule 4.3 step 4). */
.ark-collapsible-card__delete {
    --slds-c-icon-color-foreground:         var(--legacy-royal, #154570);
    --slds-c-icon-color-foreground-default: var(--legacy-royal, #154570);
}

/* Chevron sizing — match the 24×24 spec (Figma I16:1002;22576:967). */
.ark-collapsible-card__chevron {
    width:  24px;
    height: 24px;
}

/* Body content — slotted children sit beneath the summary. */
.ark-collapsible-card__content {
    display: block;
    padding: 0;
    margin:  0;
}


/* ─────────────────────────────────────────────────────────
   15.2  arfocusDataTable — Salesforce + Portal variants
   Source: Figma 625:5125 (Portal Reports table).
   All chrome lives here; component .css is empty.
   ──────────────────────────────────────────────────────── */

/* Salesforce variant — page-size combobox width cap. */
.page-size-select {
    max-width: 5rem;
}

/* Salesforce variant — page number buttons uniform width. */
.page-button {
    min-width: 2rem;
}

/* Salesforce variant — loading overlay min-height. */
.slds-is-relative {
    min-height: 6rem;
}

/* ───── Portal variant (Figma 625:5125) ───── */

/* Card — Figma I625:5125;638:5396: white, radius 10, padding 16/32,
   shadow 0/4/8 rgba(0,63,94,0.1), stack gap 16. No border. Width is
   fluid (Rule -1). */
.portal-table-wrapper {
    background:     #fff;
    border:         none;
    border-radius:  10px;
    padding:        16px 32px;
    box-shadow:     0 4px 8px 0 rgba(0,63,94,0.1);
    display:        flex;
    flex-direction: column;
    gap:            16px;
    box-sizing:     border-box;
}

/* Header row — title left, actions right. Card stack gap owns spacing. */
.portal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin:          0;
}

.portal-header-left {
    flex: 1;
}

/* "Reports" — Figma I625:5125;...22572:2955: SS Pro SemiBold 24/32
   #000 tracking 0.168. `!important` on every property: rendered as
   `<h2>` and Experience Cloud's default heading styles win otherwise
   (Miss 8 — internal-DOM fallback / EC brand stylesheet cascade). */
.portal-title {
    margin:         0                                  !important;
    font-family:    'ark-source-sans-pro', sans-serif  !important;
    font-size:      24px                               !important;
    font-weight:    600                                !important;
    line-height:    32px                               !important;
    letter-spacing: 0.168px                            !important;
    color:          #000                               !important;
}

.portal-header-right {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Print button — same skin as Review/Documents print: white bg /
   3px #002b61 / radius 10 / shadow 1/4/10 rgba(115,115,115,0.25) /
   SS Pro SemiBold 20/28 #002b61 capitalize / h 56 / pad 16 20 / gap 10. */
.portal-print-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    height:           56px;
    padding:          16px 20px;
    background-color: #fff;
    border:           3px solid #002b61;
    border-radius:    10px;
    box-shadow:       1px 4px 10px 0 rgba(115,115,115,0.25);
    color:            #002b61;
    font-family:      'ark-source-sans-pro', sans-serif;
    font-weight:      600;
    font-size:        20px;
    line-height:      28px;
    letter-spacing:   0.14px;
    text-transform:   capitalize;
    cursor:           pointer;
}

.portal-print-btn:hover {
    background: #f0f4f8;
}

/* Search input wrapper. */
.portal-search {
    margin-bottom: 0;
    max-width:     20rem;
}

/* Error banner. */
.portal-error {
    padding:       12px 16px;
    margin:        0;
    background:    #fef1f1;
    border:        1px solid #ea4335;
    border-radius: 4px;
    color:         #c5221f;
    font-size:     14px;
}

.portal-table-body {
    min-height: 4rem;
}

.portal-empty-state {
    padding:    32px;
    text-align: center;
    color:      #706e6b;
}

/* Pagination — Figma I625:5125;...20004:20431: right-aligned, no
   border-top (card stack gap of 16 separates it from the table). */
.portal-pagination {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    padding:         0;
    margin:          0;
    border-top:      none;
}

/* Pager controls — Figma 21303:1374: gap 16. */
.portal-pagination-controls {
    display:        flex;
    align-items:    center;
    gap:            16px;
    font-family:    'ark-source-sans-pro', sans-serif;
    font-size:      16px;
    line-height:    20px;
    letter-spacing: 0.112px;
    color:          #1d2528;
}

/* Prev button — Figma 21288:7118: bg #eaeaea, radius 5, 32×32, p4. */
.portal-page-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    padding:         4px;
    background:      #eaeaea;
    border:          none;
    border-radius:   5px;
    color:           #1d2528;
    cursor:          pointer;
}

.portal-page-btn:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
}

.portal-page-btn:not(:disabled):hover {
    background: #d8d8d8;
}

/* Next button — Figma 21288:7754: bg #154570, white chevron, radius 5,
   shadow 1/4/10 rgba(115,115,115,0.25). */
.portal-page-btn-next {
    background: #154570;
    color:      #fff;
    box-shadow: 1px 4px 10px 0 rgba(115,115,115,0.25);
}

.portal-page-btn-next:not(:disabled):hover {
    background: #0f3556;
}

/* Page input — Figma 21288:8152: bg white, 1px #c4ced1, radius 5,
   53×32, p4, SS Pro SemiBold 16/20 #1d2528 center tracking 0.112. */
.portal-page-input {
    width:           53px;
    height:          32px;
    text-align:      center;
    background:      #fff;
    border:          1px solid #c4ced1;
    border-radius:   5px;
    padding:         4px;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-size:       16px;
    font-weight:     600;
    line-height:     20px;
    letter-spacing:  0.112px;
    color:           #1d2528;
    -moz-appearance: textfield;
    box-sizing:      border-box;
}

.portal-page-input::-webkit-outer-spin-button,
.portal-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin:             0;
}

.portal-page-label {
    white-space: nowrap;
}

/* View All — Figma 22660:1008: SS Pro SemiBold 16/20 #154570
   tracking 0.112. No underline by default; underline on hover. */
.portal-view-all {
    color:           #154570;
    text-decoration: none;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-size:       16px;
    font-weight:     600;
    line-height:     20px;
    letter-spacing:  0.112px;
    margin-left:     0;
}

.portal-view-all:hover {
    text-decoration: underline;
}

/* ───── Inner lightning-datatable chrome (Figma 625:5125) ─────
   Under Experience Cloud's synthetic shadow DOM, static-resource CSS
   reaches the inner <table> when selectors are anchored on light-DOM
   custom-element host nodes. Host chain:
       c-arfocus-portal-reports-table → c-arfocus-data-table → c-arfocus-custom-datatable
   Scoping to this chain confines the override to the portal Reports
   table only — Salesforce variant + any other datatable consumer
   unaffected. Pattern reference: CARES Theme (docs/ThemePortal.txt
   §Table css). Targets internal SLDS DOM — not strict best practice;
   no SLDS hooks exist for lightning-datatable cell typography. All
   rules !important per Miss 8 (SLDS-bundled styles load after this
   file). Caveat: if Salesforce flips Experience Cloud to native
   shadow DOM, these selectors will need to be re-routed. */

/* Flatten the datatable's outer container — SLDS adds margin + border
   that conflict with the card padding above. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .dt-outer-container {
    margin: 0    !important;
    border: none !important;
}

/* Suppress horizontal scroll on the Reports table — per requirement
   "Horizontal scroll on your report not needed". lightning-datatable
   defaults the outer container + sticky-header container + .slds-scrollable_x
   to overflow-x:auto, producing a scrollbar when column widths exceed the
   card. Force overflow-x:visible and table-layout:fixed so columns share
   the available card width instead of summing to natural widths.
   Host-chain selector scopes this strictly to the portal Reports table
   (same synthetic-shadow leak pattern as the rules above; Miss 8 — no
   SLDS hook exists for datatable overflow). */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .dt-outer-container,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-scrollable_x,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table_header-fixed_container {
    overflow-x: hidden !important;
}
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table {
    table-layout: fixed !important;
    width:        100%  !important;
}

/* Narrow viewport (tablet / phone, also iPad Pro portrait 1024px):
   flip the table from proportional (desktop) to fixed-width + horizontal
   scroll so columns stay readable instead of being crushed into the card.
   Paired with arfocusPortalReportsTable.js NARROW_BREAKPOINT_PX (1200) +
   NARROW_COLUMN_WIDTHS (160/220/200/160/240 = 980). CSS bound is
   NARROW_BREAKPOINT_PX - 0.02 to avoid a 1px overlap with desktop.
   Miss 8 — no SLDS hook exists for datatable overflow / table-layout. */
@media (max-width: 1199.98px) {
    c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .dt-outer-container,
    c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-scrollable_x,
    c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table_header-fixed_container {
        overflow-x: auto !important;
    }
    c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table {
        table-layout: auto  !important;
        min-width:    980px !important;
        width:        auto  !important;
    }
}

/* Neutralise every border SLDS draws around the table / thead / thead row,
   so the only divider under the header is the single `th { border-bottom }`
   rule below. Without this, the `.slds-table_bordered` outer border + a
   thead-level border stack on top of the th border-bottom and render as a
   visible double line. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table thead,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table thead tr {
    border:        none !important;
    border-top:    none !important;
    border-bottom: none !important;
}

/* Sticky-header scroll container — SLDS gives this a gray default bg
   that shows through as a sliver to the left of the first column.
   Force white so the gutter blends with the table. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table_header-fixed_container {
    background-color: #fff !important;
}

/* Header cells — Figma I625:5125;…20004:19955 etc.: border-bottom
   1px #728a92, padding 10/16, white bg.
   lightning-datatable uses `.slds-table_header-fixed` (sticky header),
   which renders each header label twice: once as the real <th> AND
   once as a `.slds-cell-fixed` overlay inside it. Putting border-bottom
   on BOTH renders as a double line. Put the visible border on the
   `.slds-cell-fixed` overlay only (it's the element the user actually
   sees), and zero the th's own border. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table thead tr th {
    background-color: #fff !important;
    border-top:       none !important;
    border-bottom:    none !important;
    padding:          0 16px !important;
}
/* Sortable headers wrap the label in <a class="slds-th__action"> which
   SLDS gives its own padding-inline (~12px). That pushes the header
   text right of the body td (which starts at td padding-left:16px).
   Zero the action's inline padding so header text aligns with body. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table thead tr th .slds-th__action {
    padding-left:  0 !important;
    padding-right: 0 !important;
}
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table thead tr th .slds-cell-fixed {
    background-color: #fff !important;
    border-top:       none !important;
    border-bottom:    1px solid #728a92 !important;
}

/* Header text — SS Pro SemiBold 16/20 #1d2528 tracking 0.112. Covers
   both sortable headers (label wrapped in `<a class="slds-th__action">`)
   and non-sortable headers (plain `<span class="slds-truncate">`).
   All anchor pseudo-states per Miss 5. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action:hover,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action:focus,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action:visited,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action:active,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table thead tr th .slds-truncate,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table thead tr th span {
    background-color: #fff !important;
    font-family:      'ark-source-sans-pro', sans-serif !important;
    font-size:        16px !important;
    font-weight:      600 !important;
    line-height:      20px !important;
    letter-spacing:   0.112px !important;
    color:            #1d2528 !important;
    text-decoration:  none !important;
}

/* Suppress the resting-state border / box-shadow on the sortable-header
   <a> while preserving the keyboard focus ring (`:not(.slds-has-focus)`
   per CARES pattern). */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .dt-outer-container table thead tr lightning-primitive-header-factory:not(.slds-has-focus) a.slds-th__action {
    border:     none !important;
    box-shadow: none !important;
    outline:    none !important;
}

/* Sort chevron — Figma 20004:27147: 16px dark icon, always visible on
   sortable columns. SLDS renders it as lightning-primitive-icon → svg. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .dt-outer-container table thead tr lightning-primitive-header-factory lightning-primitive-icon svg {
    fill:   #1d2528 !important;
    width:  16px !important;
    height: 16px !important;
}

/* Body cells — Figma 20004:19956 etc.: border-bottom 1px #c4ced1,
   padding 8/16, row height 40. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td {
    border-top:     none !important;
    border-bottom:  1px solid #c4ced1 !important;
    padding:        8px 16px !important;
    height:         40px !important;
    vertical-align: middle !important;
}

/* Body cell text — SS Pro Regular 16/20 #1d2528 tracking 0.112. Covers
   the inner formatter components SLDS injects for standard cell types
   (text, date-time, number, url) plus plain truncated spans. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-base-formatted-text,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-text,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-date-time,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-number,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-url,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td .slds-truncate,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th lightning-base-formatted-text {
    font-family:    'ark-source-sans-pro', sans-serif !important;
    font-size:      16px !important;
    font-weight:    400 !important;
    line-height:    20px !important;
    letter-spacing: 0.112px !important;
    color:          #1d2528 !important;
}

/* Strip SLDS's default top/bottom borders on the bordered-table variant —
   the card and the per-row border-bottom above own the dividers. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table_bordered {
    border-bottom: none !important;
}
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table_bordered tbody th,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable .slds-table_bordered tbody td {
    border-top: none !important;
}

/* URL-type cells (Confirmation Number + Actions) — Figma I625:5125;…1481:32996:
   SS Pro SemiBold 18/24 #154570 underlined tracking 0.4. SLDS renders
   `lightning-formatted-url` → inner <a>; Experience Cloud brand-link
   stylesheet uses !important so every property here also requires it
   (Miss 5). All link pseudo-states covered. */
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-url a,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th lightning-formatted-url a,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-url a:hover,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th lightning-formatted-url a:hover,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-url a:focus,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th lightning-formatted-url a:focus,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-url a:visited,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th lightning-formatted-url a:visited,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-url a:active,
c-arfocus-portal-reports-table c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th lightning-formatted-url a:active {
    font-family:     'ark-source-sans-pro', sans-serif !important;
    font-size:       18px !important;
    font-weight:     600 !important;
    line-height:     24px !important;
    letter-spacing:  0.4px !important;
    color:           #154570 !important;
    text-decoration: underline !important;
}




/* ────────────────────────────────────────────────────────────
   15.3  Documents — inner-table chrome
   Figma node 33:5012 (Documents step). Mirrors the §15.2
   Portal Reports chrome pattern (synthetic-shadow leak via
   light-DOM host tags). Differences from §15.2:
   - Document Name link styled inline by arfocusFileLinkCell
     (#002b61 SS Pro SemiBold 16/24 underline 0.4) — no
     lightning-formatted-url rules needed here.
   - Actions column uses lightning-button-icon (bare) — no
     URL-link styling needed.
   - Body cell typography is SS Pro Regular 16/24 #1d2528
     tracking 0.16 (Reports uses lh 20 / tracking 0.112).
   - Header chrome (borders, padding, typography) matches
     Reports exactly.
   Selectors target internal SLDS DOM (no public hooks for
   datatable cell typography) — !important per Miss 8.
   ──────────────────────────────────────────────────────── */

c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .dt-outer-container {
    margin: 0    !important;
    border: none !important;
}

/* Host element of c-arfocus-data-table is inline by default. Parent
   .ark-documents-screen__list-stack uses `align-items:flex-end` (to
   right-pin the Upload-Document button), which would otherwise shrink
   this host to content width and shove it right. Force block + 100%. */
c-arfocus-documents .ark-documents-screen__list-stack > c-arfocus-data-table {
    display: block;
    width:   100%;
}

c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .slds-table,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .slds-table thead,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .slds-table thead tr {
    border:        none !important;
    border-top:    none !important;
    border-bottom: none !important;
}

c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .slds-table_header-fixed_container {
    background-color: #fff !important;
}

/* Header cells — same chrome as Portal Reports (§15.2). */
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table thead tr th {
    background-color: #fff !important;
    border-top:       none !important;
    border-bottom:    none !important;
    padding:          0 16px !important;
}
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table thead tr th .slds-th__action {
    padding-left:  0 !important;
    padding-right: 0 !important;
}
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table thead tr th .slds-cell-fixed {
    background-color: #fff !important;
    border-top:       none !important;
    border-bottom:    1px solid #728a92 !important;
}

/* Header text — SS Pro SemiBold 16/20 #1d2528 tracking 0.112. */
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action:hover,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action:focus,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action:visited,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table lightning-primitive-header-factory .slds-th__action:active,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table thead tr th .slds-truncate,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table thead tr th span {
    background-color: #fff !important;
    font-family:      'ark-source-sans-pro', sans-serif !important;
    font-size:        16px !important;
    font-weight:      600 !important;
    line-height:      20px !important;
    letter-spacing:   0.112px !important;
    color:            #1d2528 !important;
    text-decoration:  none !important;
}

c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .dt-outer-container table thead tr lightning-primitive-header-factory:not(.slds-has-focus) a.slds-th__action {
    border:     none !important;
    box-shadow: none !important;
    outline:    none !important;
}

/* Sort chevron — utility:expand_all 16px #1d2528 (Figma 33:5012). */
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .dt-outer-container table thead tr lightning-primitive-header-factory lightning-primitive-icon svg {
    fill:   #1d2528 !important;
    width:  16px !important;
    height: 16px !important;
}

/* Body cells — same border/padding rhythm as Reports. */
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td {
    border-top:     none !important;
    border-bottom:  1px solid #c4ced1 !important;
    padding:        8px 16px !important;
    height:         40px !important;
    vertical-align: middle !important;
}

/* Body cell text — Figma 33:5012: SS Pro Regular 16/24 #1d2528 tracking 0.16.
   Differs from Reports (§15.2 uses lh 20 / tracking 0.112). */
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-base-formatted-text,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-text,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-date-time,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-formatted-number,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td .slds-truncate,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr th lightning-base-formatted-text {
    font-family:    'ark-source-sans-pro', sans-serif !important;
    font-size:      16px !important;
    font-weight:    400 !important;
    line-height:    24px !important;
    letter-spacing: 0.16px !important;
    color:          #1d2528 !important;
}

c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .slds-table_bordered {
    border-bottom: none !important;
}
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .slds-table_bordered tbody th,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable .slds-table_bordered tbody td {
    border-top: none !important;
}

/* Delete action button-icon — Figma 33:5012: 16px utility icon, bare
   variant, #1d2528 fill (matches body text). */
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-button-icon button,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-primitive-cell-button .slds-button_icon-bare {
    color: #1d2528 !important;
}
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-button-icon svg,
c-arfocus-documents c-arfocus-data-table c-arfocus-custom-datatable table tbody tr td lightning-primitive-cell-button svg {
    fill:   #1d2528 !important;
    width:  16px !important;
    height: 16px !important;
}


/* ─────────────────────────────────────────────────────────────
   15.4  Print-only banner (.ark-print-banner) — shared component
   Hidden in normal flow; visible only inside @media print blocks
   (one per screen — see §16.3 ReportPreview, §16.16 ReviewSummary).
   Used to render a "Mandated Reporter Portal" header at the top
   of every printed page. Preview also shows CHRIS Referral #.
   ───────────────────────────────────────────────────────────── */
.ark-print-banner {
    display: none;
}
.ark-print-banner__brand {
    margin:         0 0 4px 0;
    font-family:    'ark-source-sans-pro', sans-serif;
    font-weight:    600;
    font-size:      18px;
    line-height:    24px;
    letter-spacing: 0.18px;
    color:          #002b61;
}
.ark-print-banner__meta {
    margin:         0 0 16px 0;
    font-family:    'ark-source-sans-pro', sans-serif;
    font-weight:    400;
    font-size:      14px;
    line-height:    20px;
    letter-spacing: 0.14px;
    color:          #3b3a48;
    border-bottom:  1px solid #c4c4c4;
    padding-bottom: 8px;
}

/* Portable `slds-no-print` polyfill.
   SLDS ships a `slds-no-print` utility in core, but the SLDS 1 utility
   sheet is not fully loaded on this Experience Cloud (LWR) site, so the
   class is a no-op in print preview. Define it here in testTheme so every
   `slds-no-print` placed on chrome / banners / wizard footers / edit
   pencils actually hides in print. Sits in §15.4 because it is a shared
   print utility used by every screen + chrome LWC. */
@media print {
    .slds-no-print { display: none !important; }

    /* Some browsers (Chromium with "Headers and footers" off but the
       legacy print stylesheet hint on) auto-append `(href)` after every
       <a> in print. Suppress so confirmation-number cells in the Your
       Reports table don't print as "2402915 (/mrp/ar-re...)". */
    a[href]::after,
    a[href]::before { content: none !important; display: none !important; }
}

/* Suppress the browser-injected URL / date / page-number headers and
   footers that Chrome renders inside the @page margin band. Setting the
   page margin to 0 leaves no room for them to render. The chrome LWCs
   (arfocusMrpHeader / arfocusMrpFooter) and reporter screens already
   carry their own inner padding, so content does not bleed to the page
   edge. Users can still override by toggling "Headers and footers" in
   Chrome's print dialog if they want them back. */
@page { margin: 0; }

/* Re-assert flex layout on the MRP header logo bar in print. SLDS
   `.slds-grid` + `.slds-grid_align-spread` utility classes that drive
   `display:flex; justify-content:space-between` on screen are
   unreliable in Chrome real-print on LWR (same root cause as the
   slds-no-print polyfill above). Without this re-assertion the bar
   collapses to default block layout and both logos cluster at the
   left edge of the page. Single-property fix — no width/host/flex
   spacer tampering needed; the bar already spans the page width
   correctly from its base layout, only the flex distribution is lost. */
@media print {
    .ark-mrp-header__logo-bar {
        display:         flex          !important;
        justify-content: space-between !important;
        width:           100vw         !important;
        margin-inline:   0             !important;
        box-sizing:      border-box    !important;
    }
}


/* ============================================================
   16. SCREEN SPECIFIC STYLES
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   16.0  Reporter screens — shared shell (ark-reporter-screen*)
   Reused across every reporter wizard page (Reporter Intake,
   Victim Family, Alleged Victims, Alleged Offender, Narrative,
   Documents, Review). Pairs with .ark-form-card (§7) + .ark-form-footer.
   Source: Figma 111:3378 (Body bg) / 111:3380 (Content Area) /
   111:3381 (Content stack) / 111:3382 (Header).
   ──────────────────────────────────────────────────────────── */

/* Page wrapper — paints the white page background that all reporter
   screens share, and applies the Figma Content Area padding
   (pl-40 pr-32 py-40 from JSON 111:3380). White bg comes from the
   parent Body node 111:3378 and is forced here so cards float on
   white instead of the platform's default gray chrome. */
.ark-reporter-screen {
    width:            100%;
    padding:          40px 32px 40px 40px;
    background-color: var(--portal-neutral-white);
    box-sizing:       border-box;
}

/* Vertical stack inside the page — separates page header, every
   form card, and the footer with a uniform 40px gap (JSON 111:3381). */
.ark-reporter-screen__content {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            40px;
    width:          100%;
}

/* Page heading block — stacks the page title (h1) above the
   subtitle paragraph with a 20px gap (JSON 111:3382). */
.ark-reporter-screen__header {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            20px;
    width:          100%;
}

/* Form footer row — Cancel pinned left, Previous+Next pinned right,
   20px gap between the two right-side buttons. Used on every
   reporter screen that has wizard navigation.
   Source: Figma I111:3435;5:28703;22370:30612 / 30616. */
.ark-form-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    width:           100%;
    padding:         10px;
    border-top:      2px solid #C4CED1;
    margin-top:      10px;
    box-sizing:      border-box;
}

.ark-form-footer__left {
    display:     flex;
    align-items: center;
}

.ark-form-footer__right {
    display:     flex;
    align-items: center;
    gap:         20px;
}


/* ────────────────────────────────────────────────────────────
   16.1  MRP Your Reports (ark-mrp-your-reports)
   Source: Figma MRP – node-id 625:5115
   ──────────────────────────────────────────────────────────── */

/* Page wrapper — full-width content area matching Figma Content Area padding.
   max-width 1400px + auto inline margin matches the portal-wide container cap
   (see .portal-container__layout / .ark-mrp-resources / .ark-postlogin). */
.ark-your-reports-page {
    background-color: var(--portal-neutral-white);
    width:            100%;
    /* Self-cap to site width — component is dropped directly into a Builder
       page region and does NOT sit under .portal-container__layout, so the
       site-wide 1400px cap must be enforced here (verified DevTools 2026-05-17:
       <main> + .content-container ancestors have no width cap). */
    max-width:        var(--portal-site-max-width);
    margin-inline:    auto;
    padding:          40px 32px 40px 40px;
    box-sizing:       border-box;
    display:          flex;
    flex-direction:   column;
    gap:              28px;
}

/* Page title section */
.ark-page-title-section {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    width:          100%;
}

/* Blue underline divider below page heading */
.ark-heading-divider {
    width:            100px;
    height:           4px;
    background-color: var(--portal-blue-tints-blue-3);
    border:           none;
    margin:           0;
}

/* Reports section — print area + table */
.ark-reports-section {
    display:        flex;
    flex-direction: column;
    gap:            28px;
    width:          100%;
}

/* Print button row — right-aligned, above the table card */
.ark-reports-print-area {
    display:         flex;
    justify-content: flex-end;
    width:           100%;
}

/* When the print-area is nested inside the page-title row (Your Reports
   header restructure), it must NOT span the full width or it wraps the
   button onto a new line below the H1. Reset to content-width. */
.ark-page-title-section__row .ark-reports-print-area {
    width: auto;
}

/* Override portal-table-wrapper shadow/border to match Figma hf/Selection/DS shadow */
/* moved to §15.2 — see arfocusDataTable portal variant block */


/* ────────────────────────────────────────────────────────────
   16.2  MRP Success Page (ark-mrp-success)
   Source: Figma MRP – node-id 303:3057
   ──────────────────────────────────────────────────────────── */

/* Success icon wrapper — contains the custom ark-check-circle SVG (41.67×41.67 shape in a 50×50 frame) */
/* No background: the SVG itself carries the green circle and checkmark */
.ark-success-icon-wrapper {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           50px;
    height:          50px;
    flex-shrink:     0;
}

/* Scales the inner SVG to fill ~83.33% of the 50px container (Figma inset-[8.33%]) */
.ark-success-icon {
    width:  83.33%;
    height: 83.33%;
    display: block;
}

/* Outer body section — light gray full-width band */
.ark-success-page {
    background-color: var(--wf-light-gray);
    width:            100%;
    display:          flex;
    justify-content:  center;
    padding:          48px 145px;
    box-sizing:       border-box;
}

/* Centered content column */
.ark-success-content {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             40px;
    padding:         0 22px;
    border-radius:   20px;
    max-width:       943px;
    width:           100%;
}

/* Results message wrapper */
.ark-success-message {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
}

/* Icon + heading block */
.ark-success-header {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    max-width:      558px;
}

/* Page heading */
.ark-success-title {
    font-family:    var(--hf-heading-1-font-family);
    font-size:      var(--hf-heading-1-font-size);
    font-weight:    var(--hf-heading-1-font-weight);
    line-height:    var(--hf-heading-1-line-height);
    letter-spacing: 0.224px;
    color:          var(--primary-500);
    text-align:     center;
    font-style:     normal;
}

/* Horizontal rule divider — Figma 303:3699 (#B3C5CF / --primary-100) */
.ark-success-divider {
    width:         100%;
    max-width:     834px;
    border:        none;
    border-top:    1px solid var(--primary-100);
    margin:        16px auto;
}

/* Body copy block */
.ark-success-body {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      var(--hf-paragraph-body-regular-font-size);
    font-weight:    var(--hf-paragraph-body-regular-font-weight);
    line-height:    var(--hf-paragraph-body-regular-line-height);
    letter-spacing: 0.15px;
    color:          var(--primary-900);
    text-align:     center;
    width:          100%;
    max-width:      899px;
}

/* Confirmation number — larger semi-bold */
.ark-confirmation-number {
    font-family:    var(--hf-heading-4-font-family);
    font-size:      24px;
    font-weight:    600;
    line-height:    32px;
    letter-spacing: 0.168px;
    color:          var(--primary-900);
    display:        block;
    text-align:     center;
}

/* Action button row */
.ark-success-actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    flex-wrap:       wrap;
}

/* Print stylesheet — when the user prints the success confirmation page,
   hide the action buttons (Print / Return to Homepage) so the printed
   output contains only the receipt content. */
@media print {
    .ark-success-actions {
        display: none !important;
    }
}


/* ────────────────────────────────────────────────────────────
   16.3  MRP Report Preview Page (ark-mrp-report-preview)
   Source: Figma MRP – node-id 261:7087
   ──────────────────────────────────────────────────────────── */

/* Page wrapper modifier — sits on the same element as .ark-reporter-screen.
   Inherits padding/bg/width from the shell; only overrides the inner stack
   gap from the shell default (40px) to the Figma 575:3223 spec (28px).
   Width capping is handled at the Experience Builder site-spacing level,
   so no max-width is applied here. */
.ark-report-preview-page > .ark-reporter-screen__content {
    gap: 28px;
}

/* Additional Information (CHRIS amendment) block.
   Two children — the textarea (Figma 575:3670) and the right-aligned
   Submit button row (Figma 575:3225) — separated by 28px per the parent
   Content Area gap (575:3223). Validation follows the narrative-screen
   primitive (no character counter, `message-when-value-missing` on
   `<lightning-textarea>`); help-slot is left in normal flow so error
   text pushes the Submit row down on blur-without-input. */
.ark-report-additional-info {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            28px;
    width:          100%;
    padding-bottom: 24px;
}

/* Submit button row — pin to the right edge per Figma 575:3225
   (items-end on the parent column container). */
.ark-report-additional-info__submit {
    display:         flex;
    justify-content: flex-end;
    width:           100%;
}

/* Print button area — right-aligned */
.ark-report-print-area {
    display:         flex;
    justify-content: flex-end;
    width:           100%;
}

/* Main white card — rounded, shadowed, inner gap 24px.
   Dual shadow (top + bottom) mirrors `.ark-form-card` so the top edge of
   the card sits visibly above the page background (the line above the
   first section header). Single-side bottom shadow was invisible against
   the white page background. */
.ark-report-card {
    background-color: var(--legacy-white);
    border-radius:    10px;
    padding:          40px;
    box-shadow:       0 -2px 6px rgba(0, 63, 94, 0.08),
                      0  2px 6px rgba(0, 63, 94, 0.08);
    display:          flex;
    flex-direction:   column;
    gap:              24px;
    width:            100%;
    box-sizing:       border-box;
}

/* Title + Print row — H1 on the left, Print button on the right,
   blue heading-divider sits beneath the whole row. Wraps on narrow
   viewports so the Print drops below the title. Generic — reused by
   .ark-report-preview-page and .ark-your-reports-page. */
.ark-page-title-section__row {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             20px;
    width:           100%;
    flex-wrap:       wrap;
}

/* Section wrapper — title row + body */
.ark-report-section {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          100%;
}

/* Section title row: contains span + hr */
.ark-section-title-row {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          100%;
}

/* Section title text — Heading 4 style (SemiBold 20px) */
.ark-section-title {
    font-family:    var(--hf-heading-4-font-family);
    font-size:      var(--hf-heading-4-font-size);
    font-weight:    var(--hf-heading-4-font-weight);
    line-height:    var(--hf-heading-4-line-height);
    letter-spacing: 0.14px;
    color:          var(--ca-main-black);
    font-style:     normal;
    white-space:    nowrap;
}

/* Section horizontal rule — full-width 2px navy divider (Figma stroke #003464) */
.ark-section-hr {
    width:      100%;
    border:     none;
    border-top: 2px solid var(--ca-main-primary-dark);
    margin:     0;
}

/* Section body — symmetric horizontal indent (Figma 261:7098 px-[24px]) */
/* Used by: Reporter Info, Victim Family, Alleged Victims */
.ark-section-body {
    padding:        0 24px;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          100%;
    box-sizing:     border-box;
}

/* Section fields — no indent (same level as card padding) */
/* Used by: Alleged Offenders, Parents/Guardians, Narrative */
.ark-section-fields {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          100%;
}

/* Person group — contains person header + field rows */
.ark-person-group {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          100%;
}

/* Person name + role header */
.ark-person-header {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    width:          100%;
}

/* Sub-divider between persons within a section — 1px gray (Figma stroke #A4A3AB) */
.ark-sub-divider {
    width:      100%;
    border:     none;
    border-top: 1px solid var(--ca-gray-400);
    margin:     0;
}

/* Field row — 2-column layout, gap 24px */
.ark-field-row {
    display: flex;
    gap:     24px;
    width:   100%;
}

/* Field column — equal-width flex child */
.ark-field-col {
    flex:           1 0 0;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

/* Field label — SemiBold 18px, dark gray */
.ark-field-label {
    font-family:    var(--hf-heading-4-font-family);
    font-size:      18px;
    font-weight:    600;
    line-height:    24px;
    letter-spacing: 0.126px;
    color:          var(--ca-gray-900);
    font-style:     normal;
    display:        block;
}

/* Field value — Regular 18px, black */
.ark-field-value {
    font-family:    var(--hf-heading-4-font-family);
    font-size:      18px;
    font-weight:    400;
    line-height:    24px;
    letter-spacing: 0.18px;
    color:          var(--ca-main-black);
    font-style:     normal;
    display:        block;
    min-height:     28px;
}

/* Age unknown row — checkbox icon + label inline */
.ark-age-unknown-row {
    display:     flex;
    gap:         10px;
    align-items: flex-start;
}

/* Checkbox icon wrapper — 26×26 container matching Figma size */
.ark-age-checkbox-wrapper {
    width:       26px;
    height:      26px;
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     3px;  /* ~12.5% inset of 26px */
    box-sizing:  border-box;
}

/* Checkbox icon image (ark-check-box.svg) */
.ark-age-checkbox-img {
    width:   100%;
    height:  100%;
    display: block;
}

/* Age unknown label text — Body regular 15px */
.ark-age-unknown-label {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      var(--hf-paragraph-body-regular-font-size);
    font-weight:    var(--hf-paragraph-body-regular-font-weight);
    line-height:    var(--hf-paragraph-body-regular-line-height);
    letter-spacing: 0.15px;
    color:          var(--ca-main-black);
    font-style:     normal;
}

/* Print mode — arkMrpReportPreview.
   Chrome (arfocusMrpHeader/Footer/PortalLeftNav/FlowNavigator) and the
   Print button itself are hidden via OOTB `slds-no-print` on each root.
   Targets internal Experience Cloud DOM (`.portal-container__layout`) to
   reset the left-nav padding gutter — not strict Salesforce best practice;
   falling back because no public hook exists for that wrapper. */
@media print {
    .ark-print-banner { display: block !important; }

    .portal-container__layout {
        padding-left:  0    !important;
        padding-right: 0    !important;
        max-width:     none !important;
    }

    .ark-report-preview-page {
        padding: 24px !important;
    }

    .ark-report-card {
        print-color-adjust:         exact !important;
        -webkit-print-color-adjust: exact !important;
        box-shadow:                 none  !important;
        border:                     1px solid #c4c4c4 !important;
    }

    /* Section-level break-inside:avoid removed — it was pushing entire sections
       to the next page when they didn't fit, leaving large blank gaps on the
       previous page. Atomic break rules below keep section headings and person
       cards intact without forcing whole-section page jumps. */
    .ark-section-title-row {
        break-inside:      avoid !important;
        break-after:       avoid !important;
        page-break-inside: avoid !important;
        page-break-after:  avoid !important;
    }
    .ark-person-group {
        break-inside:      avoid !important;
        page-break-inside: avoid !important;
    }

    /* Re-assert 2-column field rows in print. §17 mobile media query
       flips `.ark-field-row` to `flex-direction: column` below the
       mobile breakpoint, and Chrome's print viewport (~8.5in = 816px)
       triggers that breakpoint — so without this override the Preview
       prints as a single tall column instead of the 2-col layout shown
       on screen. Same pattern as §16.16 `.ark-review-fields` re-assert. */
    .ark-field-row {
        display:        flex !important;
        flex-direction: row  !important;
        gap:            24px !important;
    }
    .ark-field-col {
        flex: 1 0 0 !important;
    }

    .ark-heading-divider,
    .ark-section-hr {
        print-color-adjust:         exact !important;
        -webkit-print-color-adjust: exact !important;
    }
}


/* ────────────────────────────────────────────────────────────
   16.4  MRP Parents, Guardians, Caregiver & Siblings
         (ark-mrp-parents-guardians)
   Source: Figma MRP – node-id 247:4460
   Layout: Uses slds-grid / slds-col / slds-gutters throughout.
   Custom classes below are restricted to color, shadow, border,
   typography, and structural details that SLDS cannot provide.
   ──────────────────────────────────────────────────────────── */

/* Page wrapper — bg-color + padding only (flex layout via slds-grid on children) */
.ark-parents-guardians-page {
    background-color: var(--portal-neutral-white);
    padding:          40px 32px 40px 40px;
    width:            100%;
    box-sizing:       border-box;
}

/* Page subtitle — SemiBold 15px, grey-80 */
.ark-pg-subtitle {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      var(--hf-paragraph-body-regular-font-size);
    font-weight:    600;
    line-height:    24px;
    letter-spacing: 0.105px;
    color:          var(--portal-neutral-grey-80);
    font-style:     normal;
    margin:         0;
}

/* Form card — duplicate of §7 .ark-form-card removed 2026-05-13 by
   Lakshmi: it overrode the §7 box-shadow (cascade wins last) so card
   shadow bumps were silently lost. §7 .ark-form-card is the canonical
   declaration. */

/* Card title — SemiBold 20px, grey-90 */
/* Kept as utility class for future use */
.ark-card-title {
    font-family:    var(--hf-heading-4-font-family);
    font-size:      var(--hf-heading-4-font-size);
    font-weight:    var(--hf-heading-4-font-weight);
    line-height:    28px;
    letter-spacing: 0.14px;
    color:          var(--portal-neutral-grey-90);
    font-style:     normal;
    margin:         0;
}

/* Vertical pipe divider between delete icon and chevron in card header */
/* Kept as utility class for future use */
.ark-vert-divider {
    width:            1px;
    height:           36px;
    background-color: var(--portal-neutral-grey-40);
    flex-shrink:      0;
}

/* Horizontal rule under card header title row */
/* Kept as utility class for future use */
.ark-card-header-hr {
    width:      100%;
    border:     none;
    border-top: 1px solid var(--portal-neutral-grey-40);
    margin:     0;
}

/* Card body — right-padding to match Figma content area inset */
/* Used inside lightning-accordion-section default slot */
.ark-card-body {
    padding-right: 55px;
    width:         100%;
    box-sizing:    border-box;
}

/* Nav footer — top divider + button row wrapper */
.ark-pg-nav-footer {
    width: 100%;
}

/* Footer horizontal divider above nav buttons */
.ark-pg-nav-hr {
    width:      100%;
    border:     none;
    border-top: 1px solid var(--portal-neutral-grey-40);
    margin:     0;
}

/* ── Accordion Card Overrides (ark-pg-accordion) ── */
/* Override lightning-accordion-section internals to render as design-system cards.
   Relies on testTheme loading globally, which pierces synthetic shadow DOM. */

/* Remove accordion container default border/background */
.ark-pg-accordion .slds-accordion {
    padding: 0;
}

/* Each section = one card */
.ark-pg-accordion .slds-accordion__section {
    background-color: var(--legacy-white);
    border-radius:    10px;
    box-shadow:       0px 4px 8px rgba(0, 63, 94, 0.1);
    margin-bottom:    24px;
    border:           none !important;
    overflow:         hidden;
}

/* Card header (accordion summary) — Fix 3: ensure border-bottom separator + left/right padding */
.ark-pg-accordion .slds-accordion__summary {
    background-color: var(--legacy-white) !important;
    padding:          20px 40px !important;
    border:           none !important;
    border-bottom:    1px solid var(--portal-neutral-grey-40) !important;
    display:          flex !important;
    align-items:      center !important;
}

/* Card title typography — Fix 4: order:1 + flex:1 moves title to left, chevron pushed right */
.ark-pg-accordion .slds-accordion__summary-action .slds-accordion__summary-content {
    font-family:    var(--hf-heading-4-font-family);
    font-size:      var(--hf-heading-4-font-size);
    font-weight:    var(--hf-heading-4-font-weight);
    line-height:    28px;
    letter-spacing: 0.14px;
    color:          var(--portal-neutral-grey-90);
    order:          1;
    flex:           1;
}

/* Fix 4: Full-width flex on the summary-action button so order works correctly */
.ark-pg-accordion .slds-accordion__summary-action {
    display:         inline-flex !important;
    width:           100% !important;
    align-items:     center !important;
}

/* Fix 4: Move chevron icon to the right (order: 2, after title text) */
.ark-pg-accordion .slds-accordion__summary-action lightning-primitive-icon {
    order:          2;
    display:        inline-flex;
    align-items:    center;
    padding-left:   16px;    /* space for the vertical separator */
    position:       relative;
    flex-shrink:    0;
}

/* Fix 4: Vertical separator line rendered before the chevron icon */
.ark-pg-accordion .slds-accordion__summary-action lightning-primitive-icon::before {
    content:          '';
    position:         absolute;
    left:             0;
    top:              50%;
    transform:        translateY(-50%);
    width:            1px;
    height:           24px;
    background-color: var(--portal-neutral-grey-40);
}

/* Fix 4: Remove SLDS default left-margin that was intended for left-side icon placement */
.ark-pg-accordion .slds-accordion__summary-action .slds-button__icon_left {
    margin-right: 0 !important;
    margin-left:  0 !important;
}

/* Card body (accordion content) — padding to match Figma */
.ark-pg-accordion .slds-accordion__content {
    padding:  40px;
    overflow: visible; /* allow combobox/dropdown to render outside */
}



/* ────────────────────────────────────────────────────────────
   16.5  MRP Header (ark-mrp-header)
   Source: Figma MRP – node-id 310:4037
   Tokens used: --utility-gray, --utility-black-400, --utility-black-800,
                --legacy-royal, --legacy-white
   Font:        ark-source-sans-pro (400/600/700)
   ──────────────────────────────────────────────────────────── */

/* Custom-element host — c-arfocus-mrp-header defaults to display:inline,
   so the LWC shrinks to content width and the gray/navy bars stop short
   of the viewport edges on wider / zoomed-out windows. Tag-name selector
   from global CSS targets the host element itself (light DOM-side). */
c-arfocus-mrp-header {
    display: block;
    width:   100%;
}

/* Logo bar — utility-gray strip with subtle bottom divider.
   Full-bleed bg; content padded so it aligns with the 1400px-capped
   .portal-container__layout below. The padding-inline max() keeps a
   46px minimum and grows to centre content within 1400px on wider
   viewports. */
.ark-mrp-header__logo-bar {
    background-color: var(--utility-gray);
    border-bottom:    1px solid var(--utility-black-400);
    padding-block:    5px;
    /* 1400 reference comes from --portal-site-max-width (mirror of Builder
       Site Spacing cap) — keeps full-bleed bar content aligned with the
       page-content column underneath. */
    padding-inline:   max(46px, calc((100% - var(--portal-site-max-width)) / 2 + 46px));
    justify-content:  space-between;
    gap:              43px;
}

.ark-mrp-header__logo-img {
    width:   auto;
    display: block;
}

.ark-mrp-header__logo-img_dhs    { height: 52px; }   /* Figma 52.129 × 52.129 */
.ark-mrp-header__logo-img_police { height: 61px; }   /* Figma 52.903 × 60.928 */

/* Right action cluster — flex-fills the row, content pushed to the right.
   gap-24 between Home, Your Reports and the profile icon button. */
.ark-mrp-header__actions {
    flex:            1 1 0;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             24px;
}

/* Home / Your Reports — SS Pro SemiBold 20 / lh 24 / tracking 0.14 / #002b61.
   !important on color & text-decoration: Experience Cloud brand-link stylesheet
   loads after this Static Resource and would otherwise win on every <a>.
   :hover/:focus paints a light-gray pill to match the profile-icon button's
   native SLDS hover affordance (consistency across the action cluster).
   Resting padding + radius reserve the pill area so hover does not reflow
   neighbors. */
.ark-mrp-header__action-link {
    font-family:     'ark-source-sans-pro', sans-serif;
    font-size:       20px;
    font-weight:     600;
    line-height:     24px;
    letter-spacing:  0.14px;
    color:           var(--nav-btn-navy) !important;
    text-decoration: none !important;
    white-space:     nowrap;
    padding:         6px 10px;
    border-radius:   4px;
    transition:      background-color 0.12s ease-out;
}

.ark-mrp-header__action-link:hover,
.ark-mrp-header__action-link:focus {
    color:            var(--nav-btn-navy) !important;
    text-decoration:  none !important;
    background-color: #f3f3f3;
}

.ark-mrp-header__action-link:visited,
.ark-mrp-header__action-link:active {
    color:           var(--nav-btn-navy) !important;
    text-decoration: none !important;
}

/* Profile icon button — 44×44 hit area, 38×38 inner glyph (3px inset).
   Bare button: no background, no border. Inner SVG renders at full button
   minus padding. */
.ark-mrp-header__profile-button {
    width:            44px;
    height:           44px;
    padding:          3px;
    background:       transparent;
    border:           none;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
}

.ark-mrp-header__profile-icon {
    width:   38px;
    height:  38px;
    display: block;
}

/* Profile dropdown — Figma 337:5321.
   265px wide, white bg, 2px solid #003464 border, 10px radius,
   px-2 py-12, gap-4 between items. SLDS slds-dropdown is absolute-positioned;
   override its default padding/border/width so the visual matches Figma. */
.ark-mrp-header__profile {
    position: relative;
}

.ark-mrp-header__dropdown {
    width:            265px;
    min-width:        265px;
    background-color: var(--legacy-white);
    border:           2px solid #003464;
    border-radius:    10px;
    padding:          12px 2px;
    margin-top:       4px;
}

.ark-mrp-header__dropdown .slds-dropdown__list {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        0;
    margin:         0;
}

.ark-mrp-header__dropdown .slds-dropdown__item {
    padding: 0;
}

/* Menu items — SS Pro Regular 15 / lh 24 / tracking 0.15, padding 8/20.
   !important on color: Experience Cloud brand-link stylesheet would otherwise
   recolor every <a>. */
.ark-mrp-header__menu-item {
    display:         block;
    padding:         8px 20px;
    background:      var(--legacy-white);
    font-family:     'ark-source-sans-pro', sans-serif;
    font-size:       15px;
    font-weight:     400;
    line-height:     24px;
    letter-spacing:  0.15px;
    color:           #1d2528 !important;
    text-decoration: none !important;
}

.ark-mrp-header__menu-item:hover,
.ark-mrp-header__menu-item:focus,
.ark-mrp-header__menu-item:visited,
.ark-mrp-header__menu-item:active {
    color:           #1d2528 !important;
    text-decoration: none !important;
}

.ark-mrp-header__menu-item_danger,
.ark-mrp-header__menu-item_danger:hover,
.ark-mrp-header__menu-item_danger:focus,
.ark-mrp-header__menu-item_danger:visited,
.ark-mrp-header__menu-item_danger:active {
    color: #b91b37 !important;
}

/* Help bar — dark navy strip below logo bar.
   Full-bleed bg; content aligned with 1400px column via padding-inline. */
.ark-mrp-header__help-bar {
    background-color: var(--legacy-royal);
    color:            var(--legacy-white);
    padding-block:    12px;
    /* 1400 reference comes from --portal-site-max-width (mirror of Builder
       Site Spacing cap) — keeps full-bleed bar content aligned with the
       page-content column underneath. */
    padding-inline:   max(46px, calc((100% - var(--portal-site-max-width)) / 2 + 46px));
    font-family:      var(--hf-paragraph-body-regular-font-family);
    font-size:        var(--hf-paragraph-body-regular-font-size);
    line-height:      var(--hf-paragraph-body-regular-line-height);
    letter-spacing:   0.15px;                       /* Figma 310:5480 outer paragraph tracking */
}

.ark-mrp-header__help-text,
.ark-mrp-header__support-text {
    flex:    1 1 0;
    margin:  0;
    color:   var(--legacy-white);
}

.ark-mrp-header__help-text {
    letter-spacing: 0.15px;                         /* Figma 310:5480 outer paragraph tracking */
}

.ark-mrp-header__support-text {
    text-align:     right;
    font-size:      var(--hf-paragraph-body-xs-font-size);
    line-height:    var(--hf-paragraph-body-xs-line-height);
    letter-spacing: var(--hf-paragraph-body-xs-letter-spacing);
}

.ark-mrp-header__support-help {
    font-size:      var(--hf-paragraph-body-xs-font-size);
    line-height:    var(--hf-paragraph-body-xs-line-height);
    letter-spacing: var(--hf-paragraph-body-xs-letter-spacing);
}

/* "Access training here" — SemiBold 16 / lh 24 / tracking 0.4 / underlined.
   Token --hf-title-small-bold-* gives 16/600 but lh 20 + tracking 0.7, so the
   line-height and letter-spacing are set literally per Figma 310:5480 inner span.
   !important is required: Experience Cloud applies a site-level brand link color
   to every <a> tag from a stylesheet that loads after this Static Resource. */
.ark-mrp-header__help-link {
    color:           var(--legacy-white) !important;
    font-family:     var(--hf-title-small-bold-font-family);
    font-size:       var(--hf-title-small-bold-font-size);
    font-weight:     var(--hf-title-small-bold-font-weight);
    line-height:     24px;
    letter-spacing:  0.4px;
    text-decoration: underline !important;
    margin-left:     4px;
}

.ark-mrp-header__help-link:hover,
.ark-mrp-header__help-link:focus,
.ark-mrp-header__help-link:visited,
.ark-mrp-header__help-link:active {
    color:           var(--legacy-white) !important;
    text-decoration: underline !important;
}

/* Hotline number + support email — Bold 12, underlined. !important required (see note above). */
.ark-mrp-header__support-link {
    color:           var(--legacy-white) !important;
    font-weight:     700;
    text-decoration: underline !important;
}

.ark-mrp-header__support-link:hover,
.ark-mrp-header__support-link:focus,
.ark-mrp-header__support-link:visited,
.ark-mrp-header__support-link:active {
    color:           var(--legacy-white) !important;
    text-decoration: underline !important;
}


/* ────────────────────────────────────────────────────────────
   16.6  MRP Welcome (ark-mrp-welcome)
   Source: Figma MRP – node-id 22:12388 / 22:12393 / 22:12404
   Tokens: --legacy-royal (title + rule), --primary-700 (login bg),
           --legacy-white, --ca-main-black,
           --ark-color-tip-warning-* (callout via .ark-tip-box--warning)
   Reuses: .ark-tip-box, .ark-tip-icon, ark-tip-info-icon-warning.svg
   ──────────────────────────────────────────────────────────── */

.ark-mrp-welcome {
    display: block;
}

.ark-mrp-welcome__title {
    font-family:    var(--hf-heading-1-font-family);
    font-size:      var(--hf-heading-1-font-size);
    font-weight:    var(--hf-heading-1-font-weight);
    line-height:    var(--hf-heading-1-line-height);
    letter-spacing: var(--hf-heading-1-letter-spacing);
    color:          var(--nav-btn-navy) !important;  /* Experience Cloud h1 brand override (Miss 5) */
    margin:         0 0 14px 0;                   /* Figma 22:12395 gap=14 */
}

.ark-mrp-welcome__title-rule {
    width:            100px;
    height:           4px;
    background-color: var(--legacy-royal);
    margin:           0 0 24px 0;                  /* Figma 22:12394 gap=24 */
    border:           0;
}

/* ────────────────────────────────────────────────────────────
   Non-production environment marker.
   Rendered as a <span class="ark-env-label"> inside the H1 title of
   arfocusMrpWelcome and arfocusPostLoginLanding when
   MRP_Portal_Config__mdt.Environment_Label has a non-blank value
   (Page=Global). Production omits/inactivates the CMDT row so the
   span never renders. Yellow highlight + red bold per design.

   FALLBACK — NOT strict Salesforce best practice (Rule 4.3 step 5 / Miss 5).
   The parent <h1> (.ark-mrp-welcome__title and .ark-postlogin__title) sets
   color via !important to beat the Experience Cloud brand stylesheet that
   loads after this Static Resource. A plain non-!important color on the
   child span loses the cascade fight. !important + element-qualified
   compound selector is the only way to enforce the yellow/red marker.
   ──────────────────────────────────────────────────────────── */
.ark-env-label,
h1 span.ark-env-label,
section h1 span.ark-env-label {
    display:          inline                !important;
    margin-left:      0.25em                !important;
    padding:          0 0.25em              !important;
    background-color: #fff700               !important;
    color:            #e60000               !important;
    font-weight:      700                   !important;
    /* Inherit heading font-family / size / line-height from the parent <h1>
       so the marker scales with the title across breakpoints. */
    font-family:      inherit               !important;
    font-size:        inherit               !important;
    line-height:      inherit               !important;
    letter-spacing:   normal                !important;
    white-space:      nowrap                !important;
    text-decoration:  none                  !important;
}

.ark-mrp-welcome__body {
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      var(--hf-paragraph-body-regular-font-size);
    line-height:    var(--hf-paragraph-body-regular-line-height);
    letter-spacing: 0.15px;                     /* Figma 22:12402 tracking-[0.15px] literal (Miss 11 rule 3: node value overrides token) */
    color:          var(--wf-dark-gray);        /* Figma 22:12402 #3D3D3D */
}

/* FALLBACK — NOT strict Salesforce best practice (per Rule 4.3 step 5 / Miss 8).
   No SLDS Styling Hook exists for text color or letter-spacing inside a manual-DOM
   div. We set the defaults on the wrapper so runs without inline styles inherit
   #3D3D3D / 0.15px (Figma 22-12386-Updated 22:12402). Inline styles from the CMDT
   row (MRP_Portal_Config__mdt.Welcome_BodyRichText) MUST win on individual <p>,
   <strong>, <a> etc. — so DO NOT add !important color/letter-spacing rules on
   inner elements here. Only `font-family` / `font-size` / `line-height` are
   forced because brand stylesheets re-skin those and they're not author-tunable
   per run. */
.ark-mrp-welcome__body,
.ark-mrp-welcome__body lightning-formatted-rich-text,
.ark-mrp-welcome__body p,
.ark-mrp-welcome__body span,
.ark-mrp-welcome__body a,
.ark-mrp-welcome__body strong,
.ark-mrp-welcome__body b,
.ark-mrp-welcome__body em,
.ark-mrp-welcome__body i,
.ark-mrp-welcome__body li {
    font-family: var(--hf-paragraph-body-regular-font-family) !important;
    font-size:   var(--hf-paragraph-body-regular-font-size)   !important;
    line-height: var(--hf-paragraph-body-regular-line-height) !important;
}

.ark-mrp-welcome__body p {
    margin: 0 0 16px 0 !important;
}

.ark-mrp-welcome__body p:last-child {
    margin-bottom: 0 !important;
}

/* FALLBACK — NOT strict Salesforce best practice (per Rule 4.3 step 5 / Miss 8).
   SLDS Styling Hooks cover button color / border / radius, but NOT fixed width,
   custom padding, font-size, line-height, or box-shadow. Figma 22:12404 mandates
   all of these (201px, 16/20 padding, drop shadow, SemiBold 20/24).
   `!important` required: SLDS button styles bundle after this Static Resource
   (Miss 3) and Experience Cloud brand-button theme loads after that (Miss 5). */
.ark-btn-mrp-login button,
.ark-btn-mrp-login .slds-button,
.ark-btn-mrp-login .slds-button_brand {
    background-color: var(--primary-700) !important;
    border-color:     var(--primary-700) !important;
    color:            var(--legacy-white) !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        20px !important;
    font-weight:      600 !important;
    line-height:      24px !important;
    letter-spacing:   0.7px !important;
    padding:          16px 20px !important;
    border-radius:    10px !important;
    box-shadow:       1px 4px 10px rgba(115, 115, 115, 0.25) !important;
    width:            201px !important;
    text-transform:   none !important;
}

.ark-btn-mrp-login button:hover,
.ark-btn-mrp-login .slds-button:hover,
.ark-btn-mrp-login .slds-button_brand:hover,
.ark-btn-mrp-login button:focus,
.ark-btn-mrp-login .slds-button:focus,
.ark-btn-mrp-login .slds-button_brand:focus,
.ark-btn-mrp-login button:active,
.ark-btn-mrp-login .slds-button:active,
.ark-btn-mrp-login .slds-button_brand:active {
    background-color: var(--primary-900) !important;
    border-color:     var(--primary-900) !important;
    color:            var(--legacy-white) !important;
    text-decoration:  none !important;
}

/* Keyboard focus ring — WCAG 2.4.7. Base rule sets box-shadow !important which
   suppresses SLDS's default box-shadow focus ring. Restore with outline only on
   :focus-visible so mouse clicks do not trigger the ring. Matches §9 pattern. */
.ark-btn-mrp-login button:focus-visible,
.ark-btn-mrp-login .slds-button:focus-visible,
.ark-btn-mrp-login .slds-button_brand:focus-visible {
    outline:        3px solid var(--nav-btn-navy) !important;
    outline-offset: 2px !important;
}


/* ────────────────────────────────────────────────────────────
   16.7  MRP Resources (ark-mrp-resources)
   Source: Figma MRP – node-id 22:12406 / 22:12407 (in design_context.json)
   Container 22:12406 → flex-col, gap:40, items-center, pt:40 pb:48 px:56, bg-white
   Title    22:12407 → Source Serif Pro Bold 32, color #002b61, leading 40,
                       tracking 0.224, text-center, w:1328
   Link styles use ONLY tokens defined in 22-12386/design_context.json
   styles dict:
     - "hf/Hyperlink M"  → Source Sans Pro SemiBold 18, lineHeight 24,
                           letterSpacing 0.4   (.ark-hyperlink-m)
     - "primary/300"     → #4D798E             (--primary-300)
   The link list itself is dynamic (CMD-driven); no list-specific values
   are added — defaults / SLDS / inherited gap from container apply.
   ──────────────────────────────────────────────────────────── */

.ark-mrp-resources {
    display:        flex;                  /* 22:12406 flex flex-col items-center */
    flex-direction: column;
    align-items:    center;
    padding:        40px 56px 48px 56px;   /* 22:12406 pt=40 pb=48 px=56 */
    background:     var(--legacy-white);   /* 22:12406 bg white */
    /* Self-cap to site width — standalone component, NOT under .portal-container__layout
       (verified DevTools 2026-05-17: <main> + .content-container ancestors have no
       width cap), so the site-wide 1400px cap is enforced here. */
    max-width:      var(--portal-site-max-width);
    margin-inline:  auto;
    width:          100%;
    box-sizing:     border-box;
}

/* FALLBACK — NOT strict Salesforce best practice (per Rule 4.3 step 5 / Miss 5).
   Element-qualified compound selector + !important required: Experience Cloud
   brand stylesheet styles <h2> with !important via higher-specificity selectors
   and loads after this Static Resource. Selector below is 0,2,2 to beat
   brand selectors of the form `.x h2` (0,1,1). All values are taken
   verbatim from the 22:12407 JSON node — nothing inferred. */
section.ark-mrp-resources h2.ark-mrp-resources__title,
.ark-mrp-resources h2.ark-mrp-resources__title {
    margin:         0 0 40px 0 !important;                      /* 22:12406 gap=40 between children */
    color:          var(--nav-btn-navy) !important;              /* 22:12407 #002b61 */
    font-family:    var(--hf-heading-1-font-family) !important;  /* 22:12407 Source Serif Pro Bold */
    font-size:      var(--hf-heading-1-font-size) !important;    /* 22:12407 32px */
    font-weight:    var(--hf-heading-1-font-weight) !important;  /* 22:12407 700 */
    line-height:    var(--hf-heading-1-line-height) !important;  /* 22:12407 leading 40 */
    letter-spacing: 0.224px !important;                          /* 22:12407 tracking-[0.224px] (literal node value, not token) */
    font-style:     normal !important;                            /* 22:12407 not-italic */
    text-align:     center !important;                            /* 22:12407 text-center */
}

/* Link list container — Figma Frame 21346 (Layout panel, Dev Mode):
   Flow Horizontal, Width Fill (1328px), Height Hug, Gap 88px.
   Authoritative values from user-supplied Figma Dev Mode screenshot;
   not inferred from rendered output. */
.ark-mrp-resources__list {
    display: flex;            /* Frame 21346 Flow: Horizontal */
    gap:     88px;            /* Frame 21346 Gap: 88px */
    /* width auto — block hugs content; section's align-items:center centers it horizontally (user-confirmed). */
}

.ark-mrp-resources__col {
    flex:           0 0 auto;     /* let columns hug content so list centers as a block */
    display:        flex;
    flex-direction: column;
    row-gap:        16px;         /* user-confirmed: restored prior working value (node 22:12408 not in export) */
}

/* Reset only — Experience Cloud community list styles add a border-bottom
   divider + padding to every <li> on the page. No divider exists in the
   Figma 22:12406 node, so we strip the brand-injected styling.
   FALLBACK — NOT strict Salesforce best practice (Rule 4.3 step 5 / Miss 5). */
.ark-mrp-resources ul.ark-mrp-resources__col,
.ark-mrp-resources ul.ark-mrp-resources__col > li.ark-mrp-resources__item {
    margin:     0 !important;
    padding:    0 !important;
    border:     0 !important;
    background: transparent !important;
    list-style: none !important;
}

/* Link styling — uses ONLY tokens defined in 22-12386/design_context.json:
     "hf/Hyperlink M" + "primary/300".
   FALLBACK — NOT strict Salesforce best practice (Rule 4.3 step 5 / Miss 5).
   `!important` + element-qualified compound selectors required: Experience
   Cloud brand-link stylesheet styles every <a> with its own color/font/weight
   and loads after this Static Resource. */
.ark-mrp-resources a.ark-mrp-resources__link,
.ark-mrp-resources a.ark-mrp-resources__link:link,
.ark-mrp-resources a.ark-mrp-resources__link:visited,
.ark-mrp-resources a.ark-mrp-resources__link:hover,
.ark-mrp-resources a.ark-mrp-resources__link:focus,
.ark-mrp-resources a.ark-mrp-resources__link:active {
    color:           var(--primary-300) !important;                                /* primary/300 #4D798E */
    font-family:     var(--hf-hyperlink-m-font-family) !important;                 /* hf/Hyperlink M */
    font-size:       var(--hf-hyperlink-m-font-size) !important;                   /* hf/Hyperlink M 18 */
    font-weight:     var(--hf-hyperlink-m-font-weight) !important;                 /* hf/Hyperlink M 600 */
    line-height:     var(--hf-hyperlink-m-line-height) !important;                 /* hf/Hyperlink M 24 */
    letter-spacing:  var(--hf-hyperlink-m-letter-spacing) !important;              /* hf/Hyperlink M 0.4 */
    text-decoration: underline !important;
    background:      transparent !important;
    border:          0 !important;
    padding:         0 !important;
    margin:          0 !important;
    word-break:      break-word;
}


/* ────────────────────────────────────────────────────────────
   16.8  MRP Hero (ark-mrp-hero)
   Source: Figma MRP – node-id 22:12405 (image 3)
   Spec  : height 437px, flex:1 0 0 within parent Hero row,
           border-bottom-left-radius 40px,
           border-top-right-radius 40px,
           object-fit cover.
   ──────────────────────────────────────────────────────────── */

/* Outer wrapper: stacks Login/Register button above the hero image,
   center-aligned, with a 25px gap. Button top aligns with the "Welcome to"
   heading top in the adjacent column (no extra margin offset). */
.ark-mrp-hero-card {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-end;
    gap:             25px;
}

.ark-mrp-hero {
    display:        block;
    width:          100%;
    height:         437px;        /* Figma 22:12405 fixed height */
    overflow:       hidden;
    border-bottom-left-radius: 40px;
    border-top-right-radius:   40px;
}

.ark-mrp-hero__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    pointer-events: none;          /* Figma 22:12405 — image is decorative */
}


/* ────────────────────────────────────────────────────────────
   16.9  MRP Footer (ark-mrp-footer)
   Source: Figma MRP – node-id 22:12619 "Beta statewide footer"
   Container 22:12619           → bg #ededed (utility/gray), h:56, w:1440
   Inner    I22:12619;659:60943 → flex items-center justify-between,
                                  absolute left-1/2 top-13 -translate-x-1/2,
                                  w:316
   Text     I22:12619;659:60949 → Public Sans Regular 18 / lh 32 / weight 400 /
                                  color #002b61 / whitespace-nowrap
   Reuses tokens: --utility-gray, --base-text-desktop-*, --nav-btn-navy
   ──────────────────────────────────────────────────────────── */

.ark-mrp-footer {
    display:          block;
    width:            100%;
    height:           56px;                   /* 22:12619 h-[56px] */
    background-color: var(--utility-gray);    /* 22:12619 bg #ededed */
    position:         relative;               /* anchor for absolutely-positioned inner per Figma */
}

.ark-mrp-footer__inner {
    position:        absolute;                /* I22:12619;659:60943 absolute */
    left:            50%;                     /* left-1/2 */
    top:             13px;                    /* top-[13px] */
    transform:       translateX(-50%);        /* -translate-x-1/2 */
    display:         flex;                    /* flex */
    align-items:     center;                  /* items-center */
    justify-content: center;                  /* single child (copyright only) — center within 316px box */
    width:           316px;                   /* w-[316px] */
}

/* FALLBACK — NOT strict Salesforce best practice (per Rule 4.3 step 5 / Miss 8).
   `lightning-formatted-text` injects an inner <span>/<lightning-base-formatted-text>
   that has its own bundled SLDS typography styles loaded after this Static
   Resource. No SLDS Styling Hook exists for its inner text, so we target the
   internal DOM with !important. The Experience Cloud brand stylesheet also styles
   <p>/<span> with !important; matching that here.
   `.ark-mrp-footer__version` (left-end version label) shares the SAME typography
   as the centered copyright — it is added to this selector list rather than
   duplicated so both read as one footer treatment. Position-only deltas for the
   version label live in the small block below. */
.ark-mrp-footer .ark-mrp-footer__inner,
.ark-mrp-footer .ark-mrp-footer__inner lightning-formatted-text,
.ark-mrp-footer .ark-mrp-footer__inner lightning-base-formatted-text,
.ark-mrp-footer .ark-mrp-footer__inner span,
.ark-mrp-footer .ark-mrp-footer__version {
    color:           var(--nav-btn-navy)                 !important;  /* I22:12619;659:60949 #002b61 */
    font-family:     var(--base-text-desktop-font-family) !important; /* Public Sans */
    font-size:       var(--base-text-desktop-font-size)   !important; /* 18px */
    font-weight:     var(--base-text-desktop-font-weight) !important; /* 400 */
    line-height:     var(--base-text-desktop-line-height) !important; /* 32px */
    letter-spacing:  var(--base-text-desktop-letter-spacing) !important; /* 0 */
    white-space:     nowrap                              !important;  /* whitespace-nowrap */
    text-decoration: none                                !important;
}

/* Version label — position only; typography inherited from the shared rule above. */
.ark-mrp-footer .ark-mrp-footer__version {
    position: absolute;                       /* anchor to .ark-mrp-footer (relative) */
    top:      13px;                           /* match .ark-mrp-footer__inner baseline */
    left:     32px;                           /* portal gutter */
}

/* Mobile (≤640px) — Figma 22:12619 specifies desktop only. On narrow viewports
   the absolutely-centered 316px copyright box collides with the absolutely-pinned
   version label (both share top:13px). Stack them vertically: version on top,
   copyright underneath, both statically positioned within a flex column. Desktop
   cascade above is untouched. */
@media (max-width: 640px) {
    .ark-mrp-footer {
        height:          auto;
        min-height:      56px;
        padding:         8px 16px;
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        gap:             4px;
    }
    .ark-mrp-footer .ark-mrp-footer__inner,
    .ark-mrp-footer .ark-mrp-footer__version {
        position:  static;
        top:       auto;
        left:      auto;
        transform: none;
        width:     auto;
    }
    .ark-mrp-footer .ark-mrp-footer__inner {
        text-align: center;
    }
}

/* ────────────────────────────────────────────────────────────
   16.10  MRP Post-Login Landing (ark-postlogin)
   Source: Figma MRP – node-id 344:7740 "Report - Homepage post-login"
     Body wrapper 344:7743 → bg #fafafa, px 32 py 40, w 1440
     Welcome stack 344:7748 → flex-col, gap 24, w-full
       Welcome Message 344:7749 → flex-col gap 14, h 72, w-full
         Title 344:7751 → hf/Heading 1, tracking 0.224 (literal, Miss 11), color #002b61
         Rule  344:7753 → bg #265c76 (primary-400), 100×4
       Tip   344:7754 → .ark-tip-box.ark-tip-box--danger, p 20, rounded 10
         Tip text I344:7754;19797:42684 → SS Pro Regular 15 / lh 24 / tracking 0.15 / #000
       Body row 344:7756 → flex gap 24, items-start, w-full
         Left  344:7757 → flex-1, SS Pro Regular 14 / lh 24 / tracking 0.14 / #3d3d3d
         Right 344:7758 → w 552, flex-col gap 24
           Ack panel → c-arfocus-acknowledgement-panel (untouched, interactive)
           Hero  344:7767 → h 249, rounded-bl 40, rounded-tr 40
   Reuses tokens: --legacy-white, --nav-btn-navy, --primary-400, --ca-danger-*,
                  --wf-dark-gray, --portal-neutral-grey-70, --hf-heading-1-*,
                  --hf-paragraph-body-regular-*, --hf-paragraph-body-small-* (via literal),
                  --hf-button-ds-shadow.
   ──────────────────────────────────────────────────────────── */

.ark-postlogin {
    display:          block;
    background-color: #fafafa;                 /* 344:7743 bg */
    padding:          40px 32px;               /* 344:7743 py-40 px-32 */
    /* Self-cap to site width — standalone component, NOT under .portal-container__layout
       (verified DevTools 2026-05-17: <main> + .content-container ancestors have no
       width cap), so the site-wide 1400px cap is enforced here. */
    max-width:        var(--portal-site-max-width);
    margin-inline:    auto;
    box-sizing:       border-box;
}

.ark-postlogin__welcome {
    display:        flex;
    flex-direction: column;
    gap:            24px;                      /* 344:7748 gap-24 */
    width:          100%;
}

.ark-postlogin__welcome-message {
    display:        flex;
    flex-direction: column;
    gap:            14px;                      /* 344:7749 gap-14 */
    width:          100%;
}

.ark-postlogin__title {
    margin:         0;
    font-family:    var(--hf-heading-1-font-family);
    font-size:      var(--hf-heading-1-font-size);
    font-weight:    var(--hf-heading-1-font-weight);
    line-height:    var(--hf-heading-1-line-height);
    letter-spacing: 0.224px;                   /* 344:7751 literal tracking (Miss 11 — overrides token 0.7) */
    font-style:     normal;
    color:          var(--nav-btn-navy);       /* 344:7751 #002b61 */
}

/* FALLBACK — NOT strict Salesforce best practice (Rule 4.3 step 5 / Miss 5).
   Experience Cloud brand stylesheet styles every <h1> with its own color and
   loads after this Static Resource; element-qualified compound selector with
   !important is the only way to enforce Figma 344:7751. */
section.ark-postlogin h1.ark-postlogin__title {
    color:           var(--nav-btn-navy)         !important;
    font-family:     var(--hf-heading-1-font-family) !important;
    font-size:       var(--hf-heading-1-font-size)   !important;
    font-weight:     var(--hf-heading-1-font-weight) !important;
    line-height:     var(--hf-heading-1-line-height) !important;
    letter-spacing:  0.224px                       !important;
    text-decoration: none                          !important;
}

.ark-postlogin__title-rule {
    width:            100px;                    /* 344:7753 w-100 */
    height:           4px;                      /* 344:7753 h-4 */
    background-color: var(--primary-400);       /* 344:7753 #265c76 */
    margin:           0;
    border:           0;
}

/* Tip text inside the ark-tip-box--danger card (344:7754).
   FALLBACK — NOT strict Salesforce best practice (Rule 4.3 step 5 / Miss 8).
   `lightning-formatted-rich-text` injects an inner <p>/<span> with its own
   bundled SLDS typography that loads after this Static Resource; no styling
   hook exists for its inner text, so we target the internal DOM directly. */
.ark-postlogin__tip-text,
.ark-postlogin__tip-text p,
.ark-postlogin__tip-text span {
    margin:         0                            !important;
    color:          var(--ca-main-black)         !important; /* I344:7754;19797:42684 #000 */
    font-family:    var(--hf-paragraph-body-regular-font-family) !important; /* SS Pro Regular */
    font-size:      15px                         !important; /* literal */
    font-weight:    400                          !important;
    line-height:    24px                         !important;
    letter-spacing: 0.15px                       !important; /* literal (Miss 11 — overrides token 1px) */
    font-style:     normal                       !important;
}

.ark-postlogin__tip-text p + p {
    margin-top:     12px                         !important; /* I344:7754;19797:42684 mb-[12px] between paras */
}

/* Two-column body row (344:7756). 8/12 + 4/12 SLDS grid is the closest
   responsive equivalent of Figma's flex-1 + fixed 552px (Rule 4.8 — do not
   hardcode widths). Layout is applied directly via SLDS classes on the element;
   no rule needed here. */

.ark-postlogin__instructions {
    margin:         0 0 24px 0;
    font-family:    var(--hf-paragraph-body-regular-font-family); /* SS Pro Regular */
    font-size:      14px;                       /* 344:7757 text-14 */
    font-weight:    400;
    line-height:    24px;
    letter-spacing: 0.14px;                     /* 344:7757 tracking-0.14 (literal) */
    color:          var(--wf-dark-gray);        /* 344:7757 #3d3d3d */
}

/* FALLBACK — NOT strict Salesforce best practice (Rule 4.3 step 5 / Miss 8 / Miss 12).
   Same reasoning as tip-text: enforce typography on `lightning-formatted-text`
   inner host tags AND inner <span>/<p>. The host tags
   `lightning-formatted-text` / `lightning-base-formatted-text` sit between the
   <p class="ark-postlogin__instructions"> and the inner <span>; the Experience
   Cloud brand stylesheet styles those host tags directly so we must too. */
.ark-postlogin__instructions,
.ark-postlogin__instructions lightning-formatted-text,
.ark-postlogin__instructions lightning-base-formatted-text,
.ark-postlogin__instructions span,
.ark-postlogin__instructions p {
    color:          var(--wf-dark-gray)          !important;
    font-family:    var(--hf-paragraph-body-regular-font-family) !important;
    font-size:      14px                         !important;
    line-height:    24px                         !important;
    letter-spacing: 0.14px                       !important;
    font-style:     normal                       !important;
    font-weight:    400                          !important;
}

/* Disclaimer paragraph — separate Figma node distinct from the surrounding
   instructions block. Source: Figma 344:7740 sibling <p> after 344:7757:
     font-family Source Sans Pro SemiBold (weight 600), leading-24,
     color #728a92 (Portal Colours/Neutrals/Grey 60), whitespace pre-wrap.
   FALLBACK — internal-DOM override per Miss 8 / Miss 12. */
.ark-postlogin__disclaimer,
.ark-postlogin__disclaimer lightning-formatted-text,
.ark-postlogin__disclaimer lightning-base-formatted-text,
.ark-postlogin__disclaimer span,
.ark-postlogin__disclaimer p {
    margin:         0                            !important;
    color:          var(--portal-neutral-grey-60) !important; /* #728a92 */
    font-family:    var(--hf-paragraph-body-regular-font-family) !important;
    font-size:      14px                         !important;
    font-weight:    600                          !important; /* SemiBold */
    line-height:    24px                         !important;
    letter-spacing: normal                       !important;
    font-style:     normal                       !important;
    white-space:    pre-wrap                     !important;
}

.ark-postlogin__aside {
    display:        flex;
    flex-direction: column;
    gap:            24px;                       /* 344:7758 gap-24 */
}

.ark-postlogin__hero {
    width:                       100%;
    height:                      249px;          /* 344:7767 h-249 */
    overflow:                    hidden;
    border-bottom-left-radius:   40px;           /* 344:7767 rounded-bl-40 */
    border-top-right-radius:     40px;           /* 344:7767 rounded-tr-40 */
}

.ark-postlogin__hero img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;                            /* 344:7767 object-cover */
    pointer-events: none;
}

/* Section bullet list rendered by c-arfocus-report-section-list inside the
   post-login instructions block. Source: Figma 344:7757 children
     <ul class="list-disc mb-[20px]"> with each <li class="mb-0 ms-[21px]">.
   Inherits typography from the surrounding paragraph (SS Pro Regular 14 / 24 /
   tracking 0.14 / #3d3d3d) but explicitly applied here so the child component
   does not depend on parent cascade reaching its synthetic shadow. */
.ark-postlogin-section-list {
    list-style: disc outside;
    margin:     0 0 20px 0;                       /* 344:7757 ul mb-20 */
    padding:    0 0 0 21px;                       /* 344:7757 li ms-21 (applied as ul padding-left) */
}

.ark-postlogin-section-list__item {
    margin:         0;                            /* 344:7757 li mb-0 */
    display:        list-item;
    color:          var(--wf-dark-gray);          /* 344:7757 #3d3d3d */
    font-family:    var(--hf-paragraph-body-regular-font-family); /* SS Pro Regular */
    font-size:      14px;
    font-weight:    400;
    line-height:    24px;                         /* 344:7762 etc. li span leading-24 */
    letter-spacing: 0.14px;                       /* 344:7757 tracking-0.14 (literal) */
    font-style:     normal;
}

/* ---------- Acknowledgement Panel (c-arfocus-acknowledgement-panel) ----------
   Source: Figma 344:7742 → 344:7759 (rows + button).
   Rows 344:7760 / 344:7763: 26px checkbox, 4px gap, label SS Pro Regular 14/18 #1D2528 tracking 0.14.
   Row 2 inner link 344:7765: SS Pro SemiBold 16/24 #154570 underline tracking 0.4; trailing "." #51646D.
   Button 344:7766: bg #002B61, white SS Pro SemiBold 20/24 tracking 0.14, padding 16/20, radius 10,
                    shadow 1px 4px 10px rgba(115,115,115,0.25), fixed width 201px.
   Best-practice note (Rule 4.3): button color/border/text/radius use SLDS styling hooks (step 4 — preferred).
   Button width/padding/font-size/shadow and checkbox box size/gap have NO styling hook → fallback to
   internal-DOM overrides with !important (Rule 4.3 step 5, Miss 8). All host-tag selectors included so
   Experience Cloud brand stylesheets cannot win the cascade. */
.ark-ack-panel {
    background:      transparent;
    border:          none;
    padding:         0;
    box-shadow:      none;
    display:         flex;                            /* 344:7759 flex-col */
    flex-direction:  column;
    align-items:     flex-start;                      /* 344:7759 items-start */
    gap:             16px;                            /* 344:7759 gap-16 (rows + button) */
}

.ark-ack-row {
    display:     flex;
    align-items: center;                          /* 344:7760 items-center */
    gap:         4px;                             /* 344:7760 gap-4 */
    margin:      0;                               /* gap on parent handles row spacing */
}
/* Zero out lightning-input host bottom margin so .ark-ack-panel gap is exact. */
.ark-ack-row__checkbox,
.ark-ack-row__checkbox .slds-form-element {
    margin: 0 !important;
}

.ark-ack-row__label {
    flex:           1 1 auto;
    color:          var(--portal-neutral-grey-90);  /* #1D2528 */
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      14px;
    line-height:    18px;                         /* 344:7762 leading-18 */
    letter-spacing: 0.14px;
    font-weight:    400;
    font-style:     normal;
}

.ark-ack-row__link {
    color:              var(--legacy-royal) !important;   /* #154570 */
    font-family:        var(--hf-paragraph-body-regular-font-family) !important;
    font-size:          16px !important;
    font-weight:        600 !important;           /* SS Pro SemiBold */
    line-height:        24px !important;
    letter-spacing:     0.4px !important;
    text-decoration:    underline !important;
    text-decoration-skip-ink: none;
}
.ark-ack-row__link:hover,
.ark-ack-row__link:focus,
.ark-ack-row__link:visited,
.ark-ack-row__link:active {
    color:              var(--legacy-royal) !important;
    text-decoration:    underline !important;
}

.ark-ack-row__label-trail {
    color: var(--portal-neutral-grey-70);         /* #51646D */
}

/* Acknowledgement checkbox — SLDS Styling Hooks (Rule 4.3 step 4).
   Always white box with #154570 (legacy royal) border. When checked,
   border stays royal and the tick is also royal (no fill change).
   Replaces the previous SVG-asset background-image override. */
.ark-ack-row__checkbox {
    --slds-c-checkbox-color-background:          var(--legacy-white, #ffffff);
    --slds-c-checkbox-color-border:              var(--legacy-royal, #154570);
    --slds-c-checkbox-color-background-checked:  var(--legacy-white, #ffffff);
    --slds-c-checkbox-color-border-checked:      var(--legacy-royal, #154570);
    --slds-c-checkbox-mark-color-foreground:     var(--legacy-royal, #154570);
    --slds-c-checkbox-radius-border:             2px;
    --slds-c-checkbox-shadow-focus:              0 0 0 2px rgba(21, 69, 112, 0.35);
}
/* No SLDS hook for checkbox border-width — internal-DOM fallback (Miss 8). */
.ark-ack-row__checkbox .slds-checkbox_faux {
    border-width: 2px !important;
}

/* New Report button (Figma 344:7766).
   Color/border/text/radius via SLDS styling hooks (Rule 4.3 step 4). */
.ark-ack-panel__actions {
    display:         flex;
    justify-content: flex-start;
    /* margin-top removed — .ark-ack-panel parent gap handles 16px above button (344:7759 gap-16) */
}

.ark-ack-new-report-btn {
    --slds-c-button-brand-color-background:        #002B61;
    --slds-c-button-brand-color-background-hover:  #002B61;
    --slds-c-button-brand-color-background-active: #002B61;
    --slds-c-button-brand-color-background-focus:  #002B61;
    --slds-c-button-brand-color-border:            #002B61;
    --slds-c-button-brand-color-border-hover:      #002B61;
    --slds-c-button-brand-color-border-active:     #002B61;
    --slds-c-button-brand-color-border-focus:      #002B61;
    --slds-c-button-text-color:                    var(--legacy-white);
    --slds-c-button-text-color-hover:              var(--legacy-white);
    --slds-c-button-text-color-active:             var(--legacy-white);
    --slds-c-button-text-color-focus:              var(--legacy-white);
    --slds-c-button-radius-border:                 10px;
}

/* Width / padding / shadow / label typography have no styling hook → Miss 8 fallback. */
.ark-ack-new-report-btn .slds-button,
.ark-ack-new-report-btn button {
    width:         201px !important;              /* 344:7766 w-201 */
    padding:       16px 20px !important;          /* 344:7766 px-20 py-16 */
    border-radius: 10px !important;
    box-shadow:    1px 4px 10px 0 rgba(115, 115, 115, 0.25) !important; /* hf/Button/DS */
    line-height:   24px !important;
    height:        auto !important;
}
.ark-ack-new-report-btn .slds-button .slds-button__label,
.ark-ack-new-report-btn button .slds-button__label,
.ark-ack-new-report-btn .slds-button > span {
    font-family:    var(--hf-paragraph-body-regular-font-family) !important; /* SS Pro */
    font-size:      20px !important;              /* 344:7766 text-20 */
    font-weight:    600 !important;               /* SemiBold */
    line-height:    24px !important;
    letter-spacing: 0.14px !important;
    color:          var(--legacy-white) !important;
    white-space:    nowrap;
}

/* Keyboard focus ring — WCAG 2.4.7. Base rule sets box-shadow !important which
   suppresses SLDS's default box-shadow focus ring. Matches §9 pattern. */
.ark-ack-new-report-btn button:focus-visible,
.ark-ack-new-report-btn .slds-button:focus-visible {
    outline:        3px solid var(--nav-btn-navy) !important;
    outline-offset: 2px !important;
}


/* ============================================================
   16.11  Portal Left-Nav Stepper (ark-portal-nav) — Figma 111:3379
   ============================================================ */
.ark-portal-nav {
    box-sizing:       border-box;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              24px;                       /* I111:3379;6:2660 gap-[24px] */
    width:            345px;                      /* w-[345px] */
    padding:          40px;                       /* p-[40px] */
    background-color: #ffffff;
    box-shadow:       2px 7px 10px rgba(0, 63, 94, 0.2);
    min-height:       100%;
}

/* Title block — gap 8px between heading and divider (I111:3379;6:2788). */
.ark-portal-nav__title-block {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            8px;
    width:          280px;
}

/* Title — Source Serif Pro Bold 20/28 #1D2528 tracking 0.14 (I111:3379;6:2791). */
.ark-portal-nav__title {
    margin:         0;
    width:          100%;
    font-family:    var(--hf-heading-1-font-family, 'Source Serif Pro', serif);
    font-size:      20px;
    font-weight:    700;
    line-height:    28px;
    letter-spacing: 0.14px;
    color:          #1D2528;
}

/* Divider under title — 2px full-width (I111:3379;6:2796).
   NOTE: imgDivider color not exposed in JSON; #C4CED1 retained from prior implementation. */
.ark-portal-nav__divider {
    width:            100%;
    height:           2px;
    background-color: #C4CED1;
    border-radius:    1px;
}

/* Steps list — flex-col gap-24 items-start (I111:3379;294:3768). */
.ark-portal-nav__steps {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            24px;
    width:          280px;
}

.ark-portal-nav__step {
    position: relative;
    width:    100%;
}

/* Tab card — h-50 w-280 px-8 py-4 gap-10 rounded-5 (I111:3379;294:3341 / 294:3624). */
.ark-portal-nav__card {
    box-sizing:    border-box;
    display:       flex;
    align-items:   center;
    gap:           10px;
    width:         280px;
    height:        50px;
    padding:       4px 8px;
    background:    #ffffff;
    border:        none;
    border-left:   5px solid transparent;
    border-radius: 5px;
    cursor:        pointer;
    text-align:    left;
    transition:    background-color 0.15s ease, border-color 0.15s ease;
}

.ark-portal-nav__card:hover  { background-color: #f3f3f3; }
.ark-portal-nav__card:focus  { outline: 2px solid #0176d3; outline-offset: -2px; }

/* Active card — navy 5px left bar (I111:3379;294:3341 border-[#002b61] border-l-5). */
.ark-portal-nav__card--active { border-left-color: #002B61; }

/* Locked card — NOT in Figma export; opacity inferred. */
.ark-portal-nav__card--locked         { cursor: not-allowed; opacity: 0.5; }
.ark-portal-nav__card--locked:hover   { background-color: #ffffff; }

.ark-portal-nav__card-text {
    display:        flex;
    flex-direction: column;
    flex:           1 1 0;
    min-width:      0;
}

/* Inactive label — SS Pro Regular 15/24 #323E43 tracking 0.15 (I111:3379;294:3624;294:3309). */
.ark-portal-nav__label {
    font-family:    var(--hf-paragraph-body-regular-font-family, 'Source Sans Pro', sans-serif);
    font-size:      15px;
    font-weight:    400;
    line-height:    24px;
    letter-spacing: 0.15px;
    color:          #323E43;
}

/* Active label — SS Pro SemiBold 15/24 #1D2528 tracking 0.105 (I111:3379;294:3341;294:3324). */
.ark-portal-nav__label--active {
    font-weight:    600;
    color:          #1D2528;
    letter-spacing: 0.105px;
}

/* Status text — SS Pro Regular 14/18 #323E43 tracking 0.14 (294:3325 / 294:3310). */
.ark-portal-nav__status-text {
    font-family:    var(--hf-paragraph-body-regular-font-family, 'Source Sans Pro', sans-serif);
    font-size:      14px;
    font-weight:    400;
    line-height:    18px;
    letter-spacing: 0.14px;
    color:          #323E43;
}

/* Completed / active status — same #323E43 as base per design. */
.ark-portal-nav__status-text--completed { color: #323E43; }
.ark-portal-nav__status-text--active    { color: #323E43; }

/* Status icon — size-28 (294:3326 / 294:3311). */
.ark-portal-nav__circle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            0 0 auto;
}
.ark-portal-nav__svg {
    width:  28px;
    height: 28px;
}


/* ============================================================
   16.12  Alleged Victim screen — multi-card patterns
   Source: Figma 16:990 / 518:3322 (populated read-only family address).
   Each victim is rendered as <c-arfocus-collapsible-card> (§15.1)
   wrapping the .ark-form-row form body. Only patterns unique to this
   screen live here.
   ============================================================ */

/* Card body inner right-padding — JSON 16:1015 specifies `pr-[55px]` on
   the content stack inside the open card (16:1003 has p-[40px], plus
   55px on the right of the content). Scoped to this screen so the
   common component's content area stays flush by default. */
.ark-alleged-victim-screen .ark-collapsible-card_open .ark-collapsible-card__content {
    padding-right: 55px;
}

/* Mobile override — at ≤1024px the 55px right-padding shrinks inputs
   inside the card by 55px vs. unconstrained screens like Victim Family
   (iPhone SE input width: 144px on AV vs 199px on VF). Reset to the
   common card body padding so AV mobile inputs match the rest of the
   wizard. Desktop 55px (Figma 16:1015) unchanged. */
@media (max-width: 1024px) {
    .ark-alleged-victim-screen .ark-collapsible-card_open .ark-collapsible-card__content {
        padding-right: 16px;
    }
}

/* Each victim is rendered inside <div key=...> — that div is the flex item
   inside .ark-reporter-screen__content (align-items:flex-start) and would
   otherwise shrink to content, leaving the collapsed summary card narrow. */
.ark-victim-card-wrapper {
    width: 100%;
}

/* Bare icon buttons inside the collapsible-card actions area (delete +
   chevron). SLDS Styling Hooks strip the background/border/shadow chrome
   so the glyph reads as a plain icon. Fallback rule on inner button /
   .slds-button targets internal SLDS DOM (Rule 4.3 step 5) because no
   styling hook covers padding on the inner element. */
.ark-icon-btn {
    --slds-c-button-color-background:           transparent;
    --slds-c-button-color-background-hover:     transparent;
    --slds-c-button-color-background-active:    transparent;
    --slds-c-button-color-border:               transparent;
    --slds-c-button-color-border-hover:         transparent;
    --slds-c-button-color-border-active:        transparent;
    --slds-c-button-shadow:                     none;
    --slds-c-button-shadow-focus:               none;
    --slds-c-icon-color-foreground-default:     #154570;
}
.ark-icon-btn button,
.ark-icon-btn .slds-button {
    border:           none !important;
    background-color: transparent !important;
    box-shadow:       none !important;
    padding:          0 !important;
}

/* Populated read-only family address — visually mirrors .ark-input-text shell
   (white bg, 2px #c4c4c4 border, 10px radius, 60px height) so it sits flush
   alongside the other inputs in the row. Text color matches input value (#262626).
   margin-bottom: 18px reserves the same vertical space as a sibling lightning-input's
   empty helper-text slot, so the next row sits at the same rhythm as other rows. */
.ark-address-populated {
    display:          flex;
    align-items:      center;
    width:            100%;
    min-height:       60px;
    margin-bottom:    18px;
    padding:          0 16px;
    background-color: var(--legacy-white);
    border:           2px solid #c4c4c4;
    border-radius:    10px;
    box-sizing:       border-box;
    font-family:      var(--hf-paragraph-body-regular-font-family);
    font-size:        15px;
    line-height:      24px;
    letter-spacing:   0.15px;
    color:            var(--utility-black-800);
}

/* Add-Victim outline button row — sits between cards stack and footer. */
.ark-btn-add-victim {
    margin-top: 32px;
}


/* ============================================================
   16.13  Alleged Offender screen — multi-card patterns
   Source: Figma 16:1048. Each offender is rendered as
   <c-arfocus-collapsible-card> (§15.1) wrapping the .ark-form-row
   form body. Layout mirrors §16.12 (Alleged Victim).
   ============================================================ */

/* Card body inner right-padding — JSON 16:1073 specifies `pr-[55px]`. */
.ark-alleged-offender-screen .ark-collapsible-card_open .ark-collapsible-card__content {
    padding-right: 55px;
}

/* Mobile override — see §16.12 AV note. The 55px right-padding shrinks
   inputs by 55px on ≤1024px; reset to common card body padding so AO
   mobile inputs match the rest of the wizard. */
@media (max-width: 1024px) {
    .ark-alleged-offender-screen .ark-collapsible-card_open .ark-collapsible-card__content {
        padding-right: 16px;
    }
}


/* ============================================================
   16.14  PGC + Siblings screen — multi-card patterns
   Source: Figma 19:1957 (collapsed gate) + 247:4460 (expanded
   sibling state). PGC entries render as <c-arfocus-collapsible-card>
   (§15.1) wrapping .ark-form-row body. Sibling card is one outer
   collapsible-card containing the radio gate + inline per-sibling
   blocks (each with its own delete icon). Layout mirrors §16.13.
   ============================================================ */

/* Card body inner right-padding — JSON 518:5958 specifies `pr-[55px]`. */
.ark-pgc-screen .ark-collapsible-card_open .ark-collapsible-card__content {
    padding-right: 55px;
}

/* Mobile override — see §16.12 AV note. */
@media (max-width: 1024px) {
    .ark-pgc-screen .ark-collapsible-card_open .ark-collapsible-card__content {
        padding-right: 16px;
    }
}

/* Inline per-sibling block inside the Sibling Information card.
   Vertical separator between consecutive siblings. */
.ark-pgc-screen .ark-sibling-block {
    padding-top: 24px;
}
.ark-pgc-screen .ark-sibling-block + .ark-sibling-block {
    border-top: 1px solid var(--neutral-200, #e5e7eb);
    margin-top: 24px;
}

/* PGC cards stack — JSON 247:4471 specifies uniform `gap-[32px]` between
   every card AND the Add button. Overrides the §16.12 reporter-screen
   40px default + the §16.x ark-btn-add-victim 32px margin-top so the
   gap above and below the Add button is symmetric. */
.ark-pgc-screen .ark-reporter-screen__content {
    gap: 32px;
}
.ark-pgc-screen .ark-btn-add-victim {
    margin-top: 0;
}


/* ============================================================
   16.15  Narrative screen — tip box + collapsible card
   Source: Figma 33:4361. One <c-arfocus-collapsible-card> (§15.1)
   wrapping the .ark-form-row body. Tip box (33:4373) sits above
   the card. Layout mirrors §16.13 / §16.14.
   ============================================================ */

/* Card body inner right-padding — JSON 33:4386 specifies `pr-[55px]`. */
.ark-narrative-screen .ark-collapsible-card_open .ark-collapsible-card__content {
    padding-right: 55px;
}

/* Mobile override — see §16.12 AV note. */
@media (max-width: 1024px) {
    .ark-narrative-screen .ark-collapsible-card_open .ark-collapsible-card__content {
        padding-right: 16px;
    }
}

/* Tip box: light blue background, blue border, lightbulb icon left,
   body text right with a red-highlight inline run.
   Reuses .ark-tip-box / .ark-tip-box-content / .ark-tip-box-icon / .ark-tip-icon
   (§7) — bg/border/radius/padding/icon sizing all match Figma 33:4373 verbatim.
   Only narrative-specific body typography + red highlight live here.
   JSON I33:4373;1652:41454: SS Pro Regular 15 / lh 24 / tracking 0.15 / black.
   JSON inline span: text #c60c0c. */
.ark-narrative-screen .ark-narrative-tip__body {
    flex: 1 1 auto;
    margin: 0;
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.15px;
}
.ark-narrative-screen .ark-narrative-tip__highlight {
    color: #c60c0c;
}

/* Narrative textarea resting height — narrative field ONLY (data-field="narrative").
   Sets the rendered floor to 300px per user request 2026-06-16. Optional
   textareas (Risk Factors / Who Else Knows / Family Resources) are unaffected
   and keep the §8 60px default. `resize: vertical` from §8 still applies —
   drag handle preserved; this only raises the floor.
   Internal-DOM override (Rule 4.3 step 5 / Miss 8) — no SLDS hook exists for resting min-height. */
.ark-narrative-screen .ark-input-textarea[data-field="narrative"] .slds-textarea {
    min-height: 300px !important;
}


/* ============================================================
   16.16  Review & Submit screen (ark-review-screen)
   Source: Figma 105:3811. Read-only summary card with per-section
   edit pencil. Reuses ark-reporter-screen shell + ark-form-footer.
   ============================================================ */

/* Title styling reused from shared classes — HTML uses
   `<h1 class="ark-heading-1 ark-text-portal-blue-3">` plus a sibling
   `.ark-heading-divider` (100×4 #134e81 underline) inside
   `.ark-page-title-section`. Same pattern as arkMrpReportPreview /
   arfocusDocuments / arkMrpYourReports. No screen-specific override
   needed for the title.
 */

/* Subtitle — Figma I105:3816;...22377:2425: SS Pro Regular 15 / lh 24
   / tracking 0.15 / black. Default ark-page-subtitle is SemiBold #323e43
   so we override the regular weight + color. */
.ark-review-screen .ark-review__subtitle {
    color:           #000;
    font-weight:     400;
    letter-spacing:  0.15px;
}

/* Print button row — right-aligned print button above the review card. */
.ark-review-screen .ark-review__print-row {
    display:         flex;
    justify-content: flex-end;
    width:           100%;
}

/* Print button skin — Figma 133:3911: white bg, 3px #002b61 border,
   radius 10, shadow, padding 16/20, h 56, gap 10, label SS Pro
   SemiBold 20/24/0.14 #002b61 capitalize. Targets internal SLDS DOM
   on lightning-button (no SLDS hook covers border-width 3px or
   text-transform), per Rule 4.3 step 5. */
.ark-btn-print button,
.ark-btn-print .slds-button {
    height:          56px !important;
    padding:         16px 20px !important;
    background-color:#fff !important;
    border:          1px solid #002b61 !important;
    border-radius:   10px !important;
    box-shadow:      1px 4px 10px 0 rgba(115,115,115,0.25) !important;
    color:           #002b61 !important;
    font-family:     'ark-source-sans-pro', sans-serif !important;
    font-weight:     600 !important;
    font-size:       20px !important;
    line-height:     28px !important;
    letter-spacing:  0.14px !important;
    text-transform:  capitalize !important;
    gap:             10px !important;
}
.ark-btn-print .slds-button__icon {
    fill:            #002b61 !important;
    width:           24px !important;
    height:          24px !important;
    margin-right:    0 !important;
}

/* Keyboard focus ring — WCAG 2.4.7. Base rule sets box-shadow !important which
   suppresses SLDS's default box-shadow focus ring. Matches §9 pattern. */
.ark-btn-print button:focus-visible,
.ark-btn-print .slds-button:focus-visible {
    outline:        3px solid var(--nav-btn-navy) !important;
    outline-offset: 2px !important;
}

/* Banners */
.ark-review-screen .ark-review-banner {
    width:         100%;
    border-radius: 10px;
    padding:       16px 20px;
    font-family:   'ark-source-sans-pro', sans-serif;
    font-weight:   600;
    font-size:     16px;
    line-height:   24px;
    box-sizing:    border-box;
}
.ark-review-screen .ark-review-banner--success {
    background:    #e6f4ec;
    border:        1px solid #158655;
    color:         #0b5a3a;
}
.ark-review-screen .ark-review-banner--info {
    background:    #e7eef9;
    border:        1px solid #a3bee7;
    color:         #134e81;
}

/* Card — Figma 105:6050: white, padding 40, radius 10, gap 24 between
   sections. Width is fluid (RULE -1) — Figma 1023 is a basis, not a cap.
   Shadow matches `.ark-form-card` (dual top+bottom) so the Review card has
   the same visible hairline above its top edge as PGC/AV/VictimFamily. */
.ark-review-screen .ark-review-card {
    width:           100%;
    background-color:#fff;
    border-radius:   10px;
    padding:         40px;
    box-shadow:      0 -2px 6px rgba(0, 63, 94, 0.08),
                     0  2px 6px rgba(0, 63, 94, 0.08);
    display:         flex;
    flex-direction:  column;
    gap:             24px;
    box-sizing:      border-box;
}

/* Section block */
.ark-review-screen .ark-review-section {
    display:         flex;
    flex-direction:  column;
    gap:             16px;
    width:           100%;
}
.ark-review-screen .ark-review-section__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}
.ark-review-screen .ark-review-section__title {
    margin:          0;
    color:           #000;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-weight:     600;
    font-size:       20px;
    line-height:     24px;
    letter-spacing:  0.14px;
}
.ark-review-screen .ark-review-section__rule {
    width:           100%;
    height:          1px;
    background-color:#c4c4c4;
}

/* Sibling Information sub-block inside the PGC + Siblings section. Smaller
   weight than the section title so the visual hierarchy stays parent → child. */
.ark-review-screen .ark-review-subsection {
    display:         flex;
    flex-direction:  column;
    gap:             16px;
    width:           100%;
}
.ark-review-screen .ark-review-subsection__title {
    margin:          0;
    color:           #000;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-weight:     600;
    font-size:       18px;
    line-height:     24px;
    letter-spacing:  0.14px;
}

/* Edit pencil button — bare lightning-button-icon themed to #1d2528. */
.ark-review-screen .ark-review-section__edit {
    --slds-c-icon-color-foreground:         #1d2528;
    --slds-c-icon-color-foreground-default: #1d2528;
}
.ark-review-screen .ark-review-section__edit .slds-button__icon {
    width:  24px;
    height: 24px;
    fill:   #1d2528;
}

/* Fields grid — 2 columns, 16px row gap, 24px column gap (Figma 105:6055). */
.ark-review-screen .ark-review-fields {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    column-gap:            24px;
    row-gap:               16px;
    width:                 100%;
}
.ark-review-screen .ark-review-field {
    display:         flex;
    flex-direction:  column;
    gap:             2px;
    min-width:       0;
}
.ark-review-screen .ark-review-field--long {
    grid-column:     1 / -1;
}
.ark-review-screen .ark-review-field__label {
    margin:          0;
    color:           #3b3a48;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-weight:     600;
    font-size:       18px;
    line-height:     24px;
    letter-spacing:  0.126px;
}
.ark-review-screen .ark-review-field__value {
    margin:          0;
    color:           #000;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-weight:     400;
    font-size:       18px;
    line-height:     24px;
    letter-spacing:  0.18px;
    word-break:      break-word;
}
.ark-review-screen .ark-review-field__value--long {
    white-space:     pre-wrap;
}

/* Per-person block — separated from the previous person by a 1px
   #c4c4c4 divider (Figma node 109:3952 imgDivider2). */
.ark-review-screen .ark-review-person {
    display:         flex;
    flex-direction:  column;
    gap:             16px;
    width:           100%;
}
.ark-review-screen .ark-review-person + .ark-review-person {
    border-top:      1px solid #c4c4c4;
    padding-top:     16px;
}
.ark-review-screen .ark-review-person__head {
    display:         flex;
    flex-direction:  column;
    gap:             2px;
}
.ark-review-screen .ark-review-person__name {
    margin:          0;
    color:           #3b3a48;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-weight:     600;
    font-size:       18px;
    line-height:     24px;
    letter-spacing:  0.126px;
}
.ark-review-screen .ark-review-person__role {
    margin:          0;
    color:           #000;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-weight:     400;
    font-size:       18px;
    line-height:     24px;
    letter-spacing:  0.18px;
}

/* Age unknown checkbox — readonly visual (Figma 109:4042 hf/radio-check). */
.ark-review-screen .ark-review-age-unknown {
    margin:          0;
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    color:           #000;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-weight:     400;
    font-size:       15px;
    line-height:     24px;
    letter-spacing:  0.15px;
}
.ark-review-screen .ark-review-age-unknown__box {
    flex:            0 0 auto;
    width:           20px;
    height:          20px;
    border:          2px solid #002b61;
    border-radius:   3px;
    background:      #002b61;
    position:        relative;
}
.ark-review-screen .ark-review-age-unknown__box::after {
    content:         "";
    position:        absolute;
    left:            5px;
    top:             1px;
    width:           5px;
    height:          10px;
    border:          solid #fff;
    border-width:    0 2px 2px 0;
    transform:       rotate(45deg);
}

.ark-review-screen .ark-review-empty {
    margin:          0;
    color:           #51646d;
    font-family:     'ark-source-sans-pro', sans-serif;
    font-size:       15px;
    line-height:     24px;
}

/* Print mode — arfocusReviewSummary.
   Chrome (arfocusMrpHeader/Footer/PortalLeftNav/FlowNavigator) is hidden
   via OOTB `slds-no-print` on each chrome LWC root. Inside the review
   screen itself, the print row, success banner, additional-info card,
   wizard footer, and per-section edit pencils are also hidden — some via
   slds-no-print on the wrapper, edit pencils via the explicit selector
   below (kept for resilience even when slds-no-print is absent).
   Targets internal Experience Cloud DOM (`.portal-container__layout`) to
   reset the left-nav padding gutter — not strict Salesforce best practice;
   falling back because no public hook exists for that wrapper. */
@media print {
    .ark-print-banner { display: block !important; }

    .portal-container__layout {
        padding-left:  0    !important;
        padding-right: 0    !important;
        max-width:     none !important;
    }

    .ark-review-screen {
        padding: 24px !important;
    }

    .ark-review-screen .ark-review__print-row,
    .ark-review-screen .ark-review-footer,
    .ark-review-screen .ark-review-section__edit,
    .ark-review-screen .ark-review-card--additional-info,
    .ark-review-screen .ark-review-banner--success {
        display: none !important;
    }

    .ark-review-screen .ark-review-card {
        print-color-adjust:         exact !important;
        -webkit-print-color-adjust: exact !important;
        box-shadow:                 none  !important;
        border:                     1px solid #c4c4c4 !important;
    }

    .ark-review-screen .ark-review-fields {
        display:               grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap:            24px !important;
        row-gap:               16px !important;
    }

    /* .ark-review-screen .ark-review-section,
    .ark-review-screen .ark-review-person {
        break-inside:      avoid !important;
        page-break-inside: avoid !important;
    } */

    .ark-review-screen .ark-heading-divider,
    .ark-review-screen .ark-review-section__rule {
        print-color-adjust:         exact !important;
        -webkit-print-color-adjust: exact !important;
    }
}


/* ============================================================
   16.17  Documents (Optional) screen (ark-documents-screen)
   Source: Figma 33:5012 (page) + 275:3183 (upload modal).
   Reuses ark-reporter-screen shell + ark-page-title-section +
   ark-heading-divider + ark-form-footer.
   ============================================================ */

/* Subtitle override — JSON I33:5017;90:5025;2777:13973;22377:2425
   `font-Source_Sans_Pro:Regular leading-24 text-[15px] text-#1d2528 tracking-0.15`.
   Shared `.ark-page-subtitle` is SemiBold; documents uses Regular. */
.ark-documents-screen .ark-page-subtitle {
    font-weight:    400;
    color:          var(--portal-neutral-grey-90, #1d2528);
    letter-spacing: 0.15px;
}

/* Bold black NOTICE block under the subtitle — per user request 2026-05-18.
   Paragraph-separated CSAM upload prohibition. Font family / size / line-
   height / letter-spacing match the documents subtitle (Source Sans Pro
   15/24/0.15) so the block reads as a continuation of the page intro.
   16px stacking gap between paragraphs and 16px above the block (1-line
   space below the subtitle). The first paragraph ("NOTICE:") stays black
   for emphasis; the remaining paragraphs use the Review Summary field
   label color (#3b3a48) per user request. */
.ark-documents-screen__notice {
    margin-top:     16px;
    font-family:    var(--hf-paragraph-body-regular-font-family);
    font-size:      15px;
    line-height:    24px;
    letter-spacing: 0.15px;
    color:          #3b3a48;
    font-weight:    700;
}
.ark-documents-screen__notice p {
    margin: 0 0 16px 0;
}
.ark-documents-screen__notice p:first-child {
    color: #000;
}
.ark-documents-screen__notice p:last-child {
    margin-bottom: 0;
}

/* Inline emphasis inside the documents subtitle ("support" in the
   "Any uploaded documents should support …" sentence). Bold + Review
   Summary field label color (#3b3a48) per user request. */
.ark-documents-screen .ark-page-subtitle strong {
    color:       #3b3a48;
    font-weight: 700;
}

/* Tighten the page header → list-stack gap on the documents screen.
   Default `.ark-reporter-screen__content` gap is 40px; with the NOTICE
   block extending the header height, 40px reads as too loose between the
   final NOTICE paragraph and the confirm checkbox. Reduce to 20px per
   user request 2026-05-18. */
.ark-documents-screen .ark-reporter-screen__content {
    gap: 20px;
}

/* Wrapper around confirm-row + table — JSON 275:3190 gap-[28px] items-end
   width 1016. Aligns the right-pinned Upload Document button with the
   table card's right edge. */
.ark-documents-screen__list-stack {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            28px;
    width:          100%;
    max-width:      1016px;
}

/* Confirm-checkbox + Upload-button row — JSON 574:3214 flex items-center
   justify-between w-full. */
.ark-documents-screen__confirm-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    width:           100%;
}

/* Confirm checkbox label typography — JSON 574:3216
   SS Pro Regular 14/18/0.14 #1d2528. Targets internal lightning-input
   label per Rule 4.3 step 5 (no SLDS hook covers checkbox-label font).
   Not strict Salesforce best practice — fallback because no hook. */
.ark-documents-screen__confirm-checkbox .slds-checkbox__label .slds-form-element__label,
.ark-documents-screen__confirm-checkbox .slds-form-element__label {
    font-family:    'ark-source-sans-pro', sans-serif !important;
    font-weight:    400 !important;
    font-size:      14px !important;
    line-height:    18px !important;
    letter-spacing: 0.14px !important;
    color:          var(--portal-neutral-grey-90, #1d2528) !important;
    margin:         0 !important;
}

/* Upload Document outline button — JSON 33:5020 white bg, 3px #002b61
   border, r10, shadow 1/4/10 rgba(115,115,115,0.25), p16/20, label SS
   Pro SemiBold 20/24/0.14 #002b61. Same chrome as .ark-btn-print on
   Review screen. Targets internal SLDS DOM (Rule 4.3 step 5 — no hook
   covers border-width 3px or text capitalization). */
.ark-documents-screen .ark-btn-upload-doc button,
.ark-documents-screen .ark-btn-upload-doc .slds-button {
    height:           56px !important;
    padding:          16px 20px !important;
    background-color: #fff !important;
    border:           3px solid #002b61 !important;
    border-radius:    10px !important;
    box-shadow:       1px 4px 10px 0 rgba(115,115,115,0.25) !important;
    color:            #002b61 !important;
    font-family:      'ark-source-sans-pro', sans-serif !important;
    font-weight:      600 !important;
    font-size:        20px !important;
    line-height:      24px !important;
    letter-spacing:   0.14px !important;
    text-transform:   none !important;
}

/* Disabled state — mirrors .ark-btn-previous-outline disabled treatment
   (faded white bg, gray border, gray label, no shadow, opacity 0.65,
   pointer-events:none). Applied when the confirm-checkbox is unchecked. */
.ark-documents-screen .ark-btn-upload-doc button:disabled,
.ark-documents-screen .ark-btn-upload-doc button[disabled],
.ark-documents-screen .ark-btn-upload-doc .slds-button:disabled,
.ark-documents-screen .ark-btn-upload-doc .slds-button[disabled] {
    background-color: var(--legacy-white) !important;
    border-color:     #c9c9c9 !important;
    color:            #a8a8a8 !important;
    box-shadow:       none !important;
    cursor:           not-allowed !important;
    opacity:          0.65 !important;
    pointer-events:   none !important;
}

/* ─── Upload Document modal (Figma 275:3322) ─────────────────
   Built on SLDS modal blueprint. Backdrop + dialog. */

/* Modal width override — Figma JSON 275:3322 w-[640px]. Fluid down to
   the viewport on mobile, capped at 640px on desktop. Targets internal
   SLDS DOM (Rule 4.3 step 5 — no hook covers modal max-width). */
.ark-upload-modal__container {
    width:     calc(100vw - 32px) !important;
    max-width: 640px !important;
    padding:   0 !important;
    margin:    0 auto !important;
}

/* SLDS modal __header / __content / __footer defaults add padding,
   center-align, borders, and a colored bg that conflict with the
   Figma layout (white p-20 modal with custom hr dividers between
   sections). Reset to neutral so our own .ark-upload-modal__* rules
   own the spacing. Targets internal SLDS DOM (Rule 4.3 step 5 — no
   hook covers modal section paddings). */
.ark-upload-modal .slds-modal__header {
    padding:       20px 20px 16px 20px !important;
    border-bottom: none !important;
    background:    #fff !important;
    text-align:    left !important;
}
.ark-upload-modal .slds-modal__content {
    padding:    24px 20px !important;
    background: #fff !important;
}
.ark-upload-modal .slds-modal__footer {
    padding:    24px 20px 20px 20px !important;
    border-top: none !important;
    background: #fff !important;
}

/* Modal title — JSON I275:3322;19756:36994 SS Pro SemiBold 24/32/0.168
   #1d2528. Left-aligned per Figma (title is flex-1 in subheader row). */
.ark-upload-modal__title {
    font-family:    'ark-source-sans-pro', sans-serif;
    font-size:      24px;
    font-weight:    600;
    line-height:    32px;
    letter-spacing: 0.168px;
    color:          var(--portal-neutral-grey-90, #1d2528);
    margin:         0;
    text-align:     left;
}

/* Dropzone — Figma JSON I275:3322;19798:27761 2px dashed #c4c4c4 r10.
   Figma content area is h-[140px] (42 icon + 12 gap + ~80 text), with
   py-[24px] outer padding → ~188px total. Replicating that vertical
   rhythm so the box is visually taller than wide-and-short. */
.ark-upload-modal__dropzone {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           100%;
    padding:         48px 24px;
    min-height:      240px;
    border:          2px dashed #c4c4c4;
    border-radius:   10px;
    box-sizing:      border-box;
    gap:             16px;
    text-align:      center;
    cursor:          pointer;
}

/* Native file <input> sits inside the <label> but must not be visible
   or interactable on its own — the whole label IS the click target. */
.ark-upload-modal__file-input {
    position: absolute;
    width:    1px;
    height:   1px;
    padding:  0;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0, 0, 0, 0);
    border:   0;
}

/* Cloud-upload icon — Figma JSON I275:3322;19798:27761;19933:28935
   42×42 wrapper with inner SVG. The supplied SVG is 39×28 viewBox;
   render at 42px width so the icon visually matches the Figma frame
   while preserving aspect ratio. */
.ark-upload-modal__icon {
    width:   42px;
    height:  auto;
    display: block;
}

/* Dropzone primary line "Upload Document" — SS Pro SemiBold 16/20
   #1d2528. */
.ark-upload-modal__dropzone-title {
    font-family:    'ark-source-sans-pro', sans-serif;
    font-size:      16px;
    font-weight:    600;
    line-height:    20px;
    letter-spacing: 0.112px;
    color:          var(--portal-neutral-grey-90, #1d2528);
    margin:         0;
}

/* Dropzone legend lines — SS Pro Regular 14/18/0.14 #1d2528.
   Figma JSON I275:3322;19798:27761;19756:37020 uses `whitespace-pre`
   on a `w-[441px]` absolutely-positioned content area, so the format
   line renders on ONE line even though the dashed box's padded inner
   area is narrower (276px). Replicating with white-space: nowrap so
   the line stays single-line and visually overflows the padding,
   matching the Figma render. */
.ark-upload-modal__legend {
    font-family:    'ark-source-sans-pro', sans-serif;
    font-size:      14px;
    font-weight:    400;
    line-height:    18px;
    letter-spacing: 0.14px;
    color:          var(--portal-neutral-grey-90, #1d2528);
    margin:         0;
    white-space:    nowrap;
}

/* Modal divider — 2px #c4c4c4. Figma JSON I275:3322;19756:36997 +
   I275:3322;19756:37021 — divider sits INSIDE the modal's p-20 stack,
   so visually inset 20px on both sides (600px wide in a 640px modal).
   Achieved via horizontal margins since the hr sits at the dialog-body
   level (between SLDS __header / __content / __footer which each have
   their own 20px horizontal padding). */
.ark-upload-modal__divider {
    width:            auto;
    height:           2px;
    border:           none;
    background-color: #c4c4c4;
    margin:           0 20px;
}

/* Modal action row — JSON I275:3322;19756:37022 flex items-start
   justify-end gap-[16px] w-full. */
.ark-upload-modal__actions {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             16px;
    width:           100%;
}

/* Modal Upload (solid) button — overrides ark-btn-next-primary's bg
   to #002b61 per JSON I275:3322;19756:37024 bg-[#002b61]. The shared
   class uses #154570 (legacy royal). Targets internal SLDS DOM (Rule
   4.3 step 5 — solid-button bg hook does exist but border + height
   both need overrides too). */
.ark-upload-modal .ark-btn-modal-upload button,
.ark-upload-modal .ark-btn-modal-upload .slds-button {
    height:           48px !important;
    padding:          10px 20px !important;
    background-color: #002b61 !important;
    border:           none !important;
    border-radius:    10px !important;
    box-shadow:       1px 4px 5px 0 rgba(115,115,115,0.25) !important;
    color:            #fff !important;
    font-family:      'ark-source-sans-pro', sans-serif !important;
    font-weight:      600 !important;
    font-size:        20px !important;
    line-height:      24px !important;
    letter-spacing:   0.14px !important;
    text-transform:   none !important;
}

/* Disabled state for the modal Upload (solid) button. The base skin
   above sets background-color #002b61 !important for ALL states, which
   (exactly like the §9 ark-btn-next-primary case) steamrolls SLDS native
   disabled styling and leaves a disabled button looking identical to an
   enabled one. Mirror the ark-btn-next-primary disabled treatment (grey
   fill, faded label, no shadow, opacity 0.65, pointer-events:none) so the
   button visibly greys out while no file is staged
   (disabled={uploadConfirmDisabled}). Must live in this global theme file
   — component-scoped CSS cannot reach the inner <button> of a base
   lightning-button. */
.ark-upload-modal .ark-btn-modal-upload button:disabled,
.ark-upload-modal .ark-btn-modal-upload button[disabled],
.ark-upload-modal .ark-btn-modal-upload .slds-button:disabled,
.ark-upload-modal .ark-btn-modal-upload .slds-button[disabled] {
    background-color: #c9c9c9 !important;
    color:            #6b6b6b !important;
    box-shadow:       none !important;
    cursor:           not-allowed !important;
    opacity:          0.65 !important;
    pointer-events:   none !important;
}

/* Modal Cancel (outline) button — JSON I275:3322;19756:37023. Same
   outline pattern as .ark-btn-previous (3px navy border, white bg,
   ds-shadow, heading-4 font tokens) so the modal Cancel looks
   identical to other portal outline buttons — only height differs
   (h48 per Figma vs h56 on form-page buttons). */
.ark-upload-modal .ark-btn-modal-cancel button,
.ark-upload-modal .ark-btn-modal-cancel .slds-button {
    height:           48px !important;
    padding:          10px 20px !important;
    background-color: var(--legacy-white) !important;
    border:           3px solid var(--nav-btn-navy) !important;
    border-radius:    10px !important;
    box-shadow:       var(--hf-button-ds-shadow) !important;
    color:            var(--nav-btn-navy) !important;
    font-family:      var(--hf-heading-4-font-family) !important;
    font-size:        var(--hf-heading-4-font-size) !important;
    font-weight:      var(--hf-heading-4-font-weight) !important;
    line-height:      24px !important;
    letter-spacing:   var(--hf-heading-4-letter-spacing) !important;
    text-transform:   none !important;
}


/* ============================================================
   16.18  Portal Form Container layout (.portal-container*)
   Source: arfocusPortalFormContainer (parent shell hosting
           c-arfocus-portal-left-nav + dynamic step LWC).
   Migrated from component CSS per Rule 4. Stacks at <=1024px
   in §17 to align with rest of portal breakpoint.
   ============================================================ */
/* Custom elements default to display:inline; without this host rule the
   LWC shrinks to its content width and every child max-width/width:100%
   resolves against that shrunk width — causing the wizard to render as
   a narrow centered column instead of filling the host page region. */
c-arfocus-portal-form-container {
    display: block;
    width:   100%;
}

.portal-container {
    width:            100%;
    min-height:       100vh;
    background-color: #ffffff;
}

.portal-container__loading {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    min-height:      400px;
    /* Match post-load .portal-container__layout footprint so the container
       width is fixed during spinner mode. Centered 1400px column to align
       with the MRP header column. 46px (header logo gutter) + 345px (sidebar
       slot) on the left so the spinner sits over the future content column.

       `max-width:1400px; margin-inline:auto` is load-bearing — verified via
       DevTools 2026-05-17 that <main> + .content-container ancestors of
       .portal-container__layout do NOT carry a width cap, so without this
       rule the wizard would stretch full-viewport on wide monitors. Keep. */
    width:           100%;
    max-width:       1400px;
    margin-inline:   auto;
    padding-left:    391px;
    box-sizing:      border-box;
}

.portal-container__error {
    display:          flex;
    align-items:      center;
    background-color: #fef1ee;
    border:           1px solid #ea001e;
    border-radius:    0.25rem;
    margin:           1rem;
    color:            #ea001e;
}

.portal-container__layout {
    display:       flex;
    min-height:    100vh;
    width:         100%;
    /* `max-width:1400px; margin-inline:auto` is load-bearing — verified via
       DevTools 2026-05-17 that <main> + .content-container ancestors do NOT
       carry a width cap, so without this rule the wizard would stretch
       full-viewport on wide monitors. Wizard column alignment with the navy
       header bar also depends on this. Keep. */
    max-width:     1400px;
    margin-inline: auto;
    /* No inline padding — the wizard column (sidebar + form) must span
       edge-to-edge to match the navy header bar's outer edges (viewport
       edge under 1400, or 1400 cap above). The sidebar's own internal
       padding handles the AR-logo alignment; the form's .ark-reporter-screen
       handles its own internal padding. width:100% prevents the flex layout
       from shrinking to children's intrinsic width when the content area
       is briefly empty. */
    box-sizing:    border-box;
}

.portal-container__sidebar {
    flex:      0 0 345px;
    max-width: 345px;
    z-index:   1;
}

.portal-container__content {
    flex:       1 1 auto;
    min-width:  0;
    overflow-y: auto;
}

.portal-container__step-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      200px;
}


/* ============================================================
   17. MEDIA QUERIES
   ============================================================ */

/* === Long-label inline helptext — screen-scoped (Reporter Intake) ===
   For fields where the label is long enough that §8's `inline-flex` label
   layout pushes the (i) helptext to its own line, this overrides label +
   helptext to pure inline flow so the (i) icon sits with the LAST WORD
   of the wrapping label text. Visually identical to §8 for short labels
   (label still fits one line, (i) still renders inline); only changes
   behavior when the label width would otherwise force (i) to wrap.
   Desktop unaffected — at desktop widths no Reporter Intake label is wide
   enough to trigger §8's wrap, so this rule and §8 produce identical output.
   Best-practice note (Rule 4.3 / Miss 8): targets internal SLDS DOM
   (`.slds-form-element__label`, `.slds-required`, `lightning-helptext`,
   `.slds-form-element__icon`) — no SLDS styling hook controls label-row
   inline-vs-block flow. Falling back to internal-DOM override.
   Same pattern will be replicated for `.ark-victim-family-screen` and
   `.ark-narrative-screen` after device validation on Reporter Intake. */
.ark-reporter-screen .ark-input-text .slds-form-element__label,
.ark-reporter-screen .ark-input-combobox .slds-form-element__label,
.ark-reporter-screen .ark-input-textarea .slds-form-element__label {
    display:     inline !important;
    align-items: initial !important;
    margin:      0 !important;
}
.ark-reporter-screen .ark-input-text .slds-form-element__label .slds-required,
.ark-reporter-screen .ark-input-combobox .slds-form-element__label .slds-required,
.ark-reporter-screen .ark-input-textarea .slds-form-element__label .slds-required {
    display: inline !important;
}
.ark-reporter-screen .ark-input-text lightning-helptext,
.ark-reporter-screen .ark-input-combobox lightning-helptext,
.ark-reporter-screen .ark-input-textarea lightning-helptext {
    display:        inline-block !important;
    vertical-align: middle !important;
    margin:         0 0 0 6px !important;
    line-height:    0 !important;
}
.ark-reporter-screen .ark-input-text lightning-helptext .slds-form-element__icon,
.ark-reporter-screen .ark-input-combobox lightning-helptext .slds-form-element__icon,
.ark-reporter-screen .ark-input-textarea lightning-helptext .slds-form-element__icon {
    display:    inline-block !important;
    margin:     0 !important;
    padding:    0 !important;
    align-self: initial !important;
}

@media (max-width: 1024px) {
    .ark-success-page {
        padding: 48px 48px;
    }

    .ark-success-content {
        max-width: 100%;
    }

    /* Report Preview — reduce card padding on medium screens */
    .ark-report-preview-page {
        padding: 32px 24px 32px 32px;
    }

    .ark-report-card {
        padding: 32px;
    }

    /* Parents/Guardians — reduce outer padding */
    .ark-parents-guardians-page {
        padding: 32px 24px 32px 32px;
    }

    .ark-pg-accordion .slds-accordion__section {
        /* reduce card padding at tablet */
    }

    .ark-pg-accordion .slds-accordion__content {
        padding: 32px 24px;
    }

    .ark-pg-accordion .slds-accordion__summary {
        padding: 16px 32px;
    }

    .ark-card-body {
        padding-right: 24px;
    }

    /* Review & Submit — at tablet, ease card padding but keep 2-col grid. */
    .ark-review-screen .ark-review-card {
        padding: 32px;
    }
}

/* Mobile-only summary button + progress bar — hidden on desktop. The
   mobile-summary <button> and its progress child are rendered in the
   LWC at every viewport; this base rule keeps them out of the desktop
   layout. The @media (max-width: 768px) block below re-enables them. */
.ark-portal-nav__mobile-summary,
.ark-portal-nav__mobile-progress {
    display: none;
}

@media (max-width: 768px) {
    /* ─── Upload Document modal — mobile reflow ─── */
    .ark-upload-modal__title             { font-size: 20px; line-height: 28px; }
    .ark-upload-modal__divider           { margin: 0 16px !important; }
    .ark-upload-modal .slds-modal__header  { padding: 16px 16px 12px 16px !important; }
    .ark-upload-modal .slds-modal__content { padding: 20px 16px !important; }
    .ark-upload-modal .slds-modal__footer  { padding: 20px 16px 16px 16px !important; }
    .ark-upload-modal__actions {
        flex-direction: column !important;
        align-items:    stretch !important;
        gap:            12px !important;
    }
    .ark-upload-modal__actions .ark-btn-modal-upload { order: 1; }
    .ark-upload-modal__actions .ark-btn-modal-cancel { order: 2; }
    .ark-upload-modal__actions lightning-button,
    .ark-upload-modal__actions .slds-button {
        width:     100% !important;
        font-size: 16px !important;
        height:    44px !important;
    }
    .ark-upload-modal__dropzone { padding: 24px 12px !important; min-height: 180px !important; }
    .ark-upload-modal__legend   { white-space: normal !important; }

    .ark-success-page {
        padding: 32px 24px;
        min-height: unset;
    }

    .ark-success-title {
        font-size:   24px;
        line-height: 32px;
    }

    .ark-success-divider {
        max-width: 100%;
    }

    .ark-success-actions {
        flex-direction: column;
        width:          100%;
    }

    .ark-btn-return {
        width: 100%;
    }

    .ark-btn-return button,
    .ark-btn-return .slds-button {
        width: 100% !important;
    }

    /* Report Preview — stack field columns on mobile */
    .ark-report-preview-page {
        padding: 24px 16px;
    }

    .ark-report-card {
        padding: 24px 16px;
    }

    .ark-field-row {
        flex-direction: column;
        gap:            12px;
    }

    .ark-section-title {
        white-space: normal;
    }

    .ark-report-print-area button,
    .ark-report-print-area .slds-button {
        width: 100% !important;
    }

    /* Parents/Guardians — stack on mobile */
    .ark-parents-guardians-page {
        padding: 24px 16px;
    }

    /* Collapsible card (shared) — tighten on mobile so the title block
       (e.g. "Parent/Guardian/Caregiver") never overflows under the
       bin/divider/chevron actions on narrow viewports. */
    .ark-form-card {
        padding: 24px 16px;
    }

    .ark-collapsible-card__title {
        overflow-wrap: anywhere;
        word-break:    break-word;
    }

    .ark-collapsible-card__summary {
        gap: 12px;
    }

    .ark-collapsible-card__actions {
        gap: 4px;
    }

    .ark-pg-accordion .slds-accordion__content {
        padding: 24px 16px;
    }

    .ark-pg-accordion .slds-accordion__summary {
        padding: 16px;
    }

    .ark-card-body {
        padding-right: 0;
    }

    /* Stack all half-width columns to full width on mobile */
    .ark-parents-guardians-page .slds-size_1-of-2 {
        flex:      0 0 100%;
        max-width: 100%;
    }

    /* Stack nav buttons vertically on mobile */
    .ark-pg-nav-footer .slds-grid_align-spread {
        flex-direction: column;
        align-items:    stretch;
        gap:            12px;
    }

    .ark-pg-nav-footer .slds-no-flex {
        flex-direction: column;
    }

    .ark-btn-previous button,
    .ark-btn-previous .slds-button,
    .ark-btn-next button,
    .ark-btn-next .slds-button,
    .ark-btn-cancel button,
    .ark-btn-cancel .slds-button {
        width: 100% !important;
    }

    /* MRP Header — stack help bar vertically on mobile, tighten side padding.
       !important needed: slds-grid utilities apply display/alignment with equal
       specificity and load after this Static Resource. */
    .ark-mrp-header__help-bar {
        flex-direction: column !important;
        align-items:    flex-start !important;
        padding:        12px 16px !important;
        gap:            8px;
    }

    .ark-mrp-header__help-text,
    .ark-mrp-header__support-text {
        flex:          0 0 auto;
        text-align:    left !important;
        overflow-wrap: anywhere;
    }

    /* MRP Welcome — title sizing, callout padding, full-width button */
    .ark-mrp-welcome__title {
        font-size:   24px;
        line-height: 32px;
    }

    .ark-mrp-welcome .ark-tip-box {
        padding: 16px;
    }

    .ark-mrp-welcome .ark-tip-box-content {
        gap: 12px;
    }

    .ark-mrp-welcome .ark-tip-box-content,
    .ark-mrp-welcome__body {
        overflow-wrap: anywhere;
    }

    /* Tighten tip→button gap on narrow screens (overrides slds-m-top_xx-large = 48px). */
    .ark-mrp-welcome .ark-btn-mrp-login {
        margin-top: 32px !important;
    }

    .ark-btn-mrp-login,
    .ark-btn-mrp-login button,
    .ark-btn-mrp-login .slds-button,
    .ark-btn-mrp-login .slds-button_brand {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* MRP Resources — stack the two-column link list into a single column.
       Desktop spec (§16.7) uses flex-row + 88px gap which collapses on
       narrow viewports; below 1024px we switch to a single column with
       reduced section padding so links sit one per line edge-to-edge. */
    .ark-mrp-resources {
        padding: 32px 16px 40px 16px;
    }

    .ark-mrp-resources__list {
        flex-direction: column;
        gap:            16px;
        width:          100%;
        align-items:    flex-start;
    }

    .ark-mrp-resources__col {
        width: 100%;
    }

    /* Documents (Optional) — stack the confirm-checkbox + Upload Document
       button (desktop §16.17 is a flex-row space-between that crashes on
       narrow viewports). Table layout left untouched per user. */
    .ark-documents-screen__list-stack {
        align-items: stretch;
    }

    .ark-documents-screen__confirm-row {
        flex-direction: column;
        align-items:    stretch;
        gap:            12px;
    }

    /* Portal Form Container — stack sidebar above content on tablet/mobile.
       Desktop (§16.18) places left-nav + form side-by-side as a 345px /
       1fr flex row; below 1024px we flip to a vertical stack so the page
       fits without horizontal scroll. */
    .portal-container__layout {
        flex-direction: column;
        padding-left:   16px;
        padding-right:  16px;
    }

    .portal-container__sidebar {
        flex:          0 0 auto;
        max-width:     100%;
        border-right:  none;
        border-bottom: 1px solid #d8dde6;
    }

    .portal-container__content {
        /* Tightens the content-side gap from the viewport edge so it
           closely matches the sidebar-side gap (which only inherits the
           16px outer gutter from .portal-container__layout). 5px keeps a
           hairline breathing strip between the card edge and the viewport
           while reclaiming ~22px of input width per row on narrow phones.
           Net at 360px viewport: form-card inner width ≈ 254px (was 232). */
        padding: 5px;
    }

    /* Loading state mirrors the stacked layout: drop the desktop 345px
       sidebar reservation so the spinner sits at the left edge of the
       narrow viewport (still flex-start aligned, never centered). */
    .portal-container__loading {
        padding-left: 1rem;
    }

    /* Portal Left-Nav — desktop spec (§16.11) hard-codes 345px / 280px
       widths from Figma 111:3379. On narrow viewports clamp to 100% so
       the nav card never exceeds the viewport (was a primary cause of
       horizontal page scroll + apparent header bleed). */
    .ark-portal-nav {
        width:      100%;
        max-width:  100%;
        padding:    0;
        box-shadow: none;
    }

    /* Hide the "New Report Form" title block on mobile — Figma mobile nav
       (741:8557) does not include the heading; tapping the summary bar
       reveals the step list directly. */
    .ark-portal-nav__title-block {
        display: none;
    }

    /* ─── Mobile collapsible left-nav summary (Figma 741:8557 / 743:8678 /
       959:3827). All rules below are mobile-only. ─── */
    .ark-portal-nav {
        background-color: #FFFFFF;
    }

    .ark-portal-nav__mobile-summary {
        display:          flex;
        flex-wrap:        wrap;
        align-items:      center;
        justify-content:  space-between;
        /* Full-bleed: <button> is inline-block by default and shrink-wraps
           when width is auto, so an explicit viewport width is required.
           `width:100vw` + symmetric `margin-left/right: calc(50% - 50vw)`
           bleeds past any ancestor padding (Experience Cloud column,
           slds-card, etc.) and pins both edges to the viewport. */
        width:            100vw;
        max-width:        100vw;
        margin-left:      calc(50% - 50vw);
        margin-right:     calc(50% - 50vw);
        padding:          12px 16px;
        gap:              12px;
        min-height:       86px;
        background-color: #E0E8EC;
        border:           none;
        cursor:           pointer;
        box-sizing:       border-box;
    }

    .ark-portal-nav__mobile-summary--expanded {
        background-color: #FFFFFF;
        /* When expanded, the progress bar sits at the bottom edge of the
           summary (Figma 959:3827) — cancel the 12px bottom padding so the
           bar visually meets the first list row with no extra gap. Also
           drop the 86px min-height so the button hugs its content;
           otherwise `align-content: stretch` inflates the flex rows and
           the slack lands as dead space between the icon row and the
           wrapped progress bar. */
        min-height:     auto;
        padding-bottom: 0;
    }

    .ark-portal-nav__mobile-summary-text {
        display:        flex;
        flex-direction: column;
        gap:            6px;
        min-width:      0;
        flex:           1 1 auto;
        text-align:     left;
    }

    .ark-portal-nav__mobile-counter {
        font-size:   12px;
        font-weight: 500;
        line-height: 15px;
        color:       #323E43;
    }

    .ark-portal-nav__mobile-label {
        font-size:      15px;
        font-weight:    600;
        line-height:    100%;
        letter-spacing: -0.23px;
        color:          #1D2528;
    }

    .ark-portal-nav__mobile-status {
        font-size:      12px;
        font-weight:    600;
        line-height:    100%;
        letter-spacing: -0.15px;
        color:          #28807C;
    }

    /* Collapsed: status text on the LEFT column (under label). Expanded:
       hide the left-column status, show the right-column status next to
       the chevron. Status icon stays visible in BOTH states (Figma 959:3827). */
    .ark-portal-nav__mobile-summary--expanded .ark-portal-nav__mobile-status {
        display: none;
    }

    .ark-portal-nav__mobile-summary--expanded .ark-portal-nav__mobile-status-right {
        display: inline-block;
    }

    /* Expanded: status icon moves to the LEFT of the summary bar (Figma
       959:3827). Promote indicators' children into the parent flex by
       setting display:contents on indicators, then order:-1 on the icon
       to pull it before the text block. Push status-right + chevron to
       the far right via margin-left:auto on status-right. Targets
       internal SLDS flex behavior — not strict best practice; fallback
       because we keep one DOM with two visual layouts. */
    .ark-portal-nav__mobile-summary--expanded .ark-portal-nav__mobile-indicators {
        display: contents;
    }

    .ark-portal-nav__mobile-summary--expanded .ark-portal-nav__mobile-status-right {
        margin-left: auto;
    }

    .ark-portal-nav__mobile-summary--expanded .ark-portal-nav__mobile-chevron {
        margin-left: 8px;
    }

    .ark-portal-nav__mobile-status-right {
        display:        none;
        font-size:      15px;
        font-weight:    600;
        line-height:    100%;
        letter-spacing: -0.15px;
        color:          #28807C;
        white-space:    nowrap;
    }

    .ark-portal-nav__mobile-indicators {
        display:     flex;
        align-items: center;
        gap:         8px;
        flex:        0 0 auto;
    }

    .ark-portal-nav__mobile-status-icon {
        width:        32px;
        height:       32px;
        order:        -1;
        margin-right: 0;
    }

    /* CSS-rendered chevron — 10×10 square with right + bottom borders
       rotated 45° gives a clean down-chevron without an SVG asset.
       The --expanded rotation flips it to point up. */
    .ark-portal-nav__mobile-chevron {
        display:          inline-block;
        width:            10px;
        height:           10px;
        border-right:     2px solid #1D2528;
        border-bottom:    2px solid #1D2528;
        transform:        translateY(-2px) rotate(45deg);
        transform-origin: center;
        transition:       transform 0.15s ease;
    }

    .ark-portal-nav__mobile-summary--expanded .ark-portal-nav__mobile-chevron {
        transform: translateY(2px) rotate(-135deg);
    }

    /* Progress bar — lives INSIDE the summary button as a third child.
       Wraps to its own row via the parent's `flex-wrap: wrap` +
       `flex: 0 0 100%`. Hidden until expanded via --visible modifier. */
    .ark-portal-nav__mobile-progress {
        display:          none;
        flex:             0 0 100%;
        order:            3;
        height:           6px;
        margin-top:       8px;
        background-color: #D9D9D9;
        border-radius:    999px;
        overflow:         hidden;
    }

    .ark-portal-nav__mobile-progress--visible {
        display: block;
    }

    .ark-portal-nav__mobile-progress-fill {
        display:          block;
        height:           100%;
        background-color: #28807C;
        transition:       width 0.2s ease;
    }

    /* Mobile-only: hide the step-list region until the summary button is
       expanded. JS toggles --expanded on the wrapping <div>. Desktop is
       unaffected (rule only lives inside @media). */
    .ark-portal-nav__list-region {
        display: none;
    }

    .ark-portal-nav__list-region--expanded {
        display:      block;
        /* Full-bleed same as `.mobile-summary`: escape Experience Cloud
           column padding so rows extend edge-to-edge instead of sitting
           indented within the column gutters. */
        width:        100vw;
        max-width:    100vw;
        margin-left:  calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        box-sizing:   border-box;
    }

    /* Desktop §16.11 caps `.ark-portal-nav__steps` at 280px with a
       24px inter-row gap. On mobile the list spans the full width and
       rows are separated by their own 1px bottom border (no extra gap). */
    .ark-portal-nav__steps {
        width: 100% !important;
        gap:   0 !important;
    }

    /* Active step row — light-blue background on mobile (Figma 959:3827).
       Desktop §16.11 only changes the left bar color; mobile gets the
       full-row tint to make the active step pop in the expanded list,
       and the desktop navy left-bar indicator is removed (Figma mobile
       has no left-bar — just the tinted band + the right-side status icon).
       Tint is `#e5f1fe` to reuse the portal-wide selected-state blue
       (combobox/picklist/address-search active option — §8). */
    .ark-portal-nav__card--active {
        background-color: #e5f1fe !important;
        border-left-color: transparent !important;
    }

    /* Step row — desktop is 280×50 with rounded corners (pill-card look).
       Mobile is full-width, no radius, taller touch target, with a
       1px hairline divider between rows (Figma 959:3827). */
    .ark-portal-nav__card {
        width:         100% !important;
        height:        auto !important;
        min-height:    64px !important;
        padding:       16px !important;
        border-radius: 0 !important;
        border-left:   0 !important;
        border-bottom: 1px solid #E5E5E5 !important;
    }

    .ark-portal-nav__steps > .ark-portal-nav__step:last-child .ark-portal-nav__card {
        border-bottom: 0 !important;
    }

    .ark-portal-nav__label {
        font-weight: 600 !important;
        color:       #1D2528 !important;
    }

    /* MRP Header logo bar — desktop spec uses 22px 46px padding + 43px
       gap which forces overflow at <360px viewports with two logos and
       the action cluster. Tighten padding/gap and allow wrap so the
       header never extends past the viewport edge. Nav stays inline
       between the two logos (DOM is DHS → nav → police), shrinking via
       `flex: 0 1 auto`. Only wraps when truly out of room (<~360px). */
    .ark-mrp-header__logo-bar {
        padding:   12px 16px !important;
        gap:       12px !important;
        flex-wrap: wrap;
    }

    /* Mobile (≤768px): nav (Home / Your Reports / profile) drops to a
       second row, centered. DHS + police logos stay on row 1 at the
       left/right corners via inherited `justify-content: space-between`.
       `order: 3` is required because DOM is DHS → nav → police; without
       it the police logo (last child) wraps alone and looks misaligned.
       `flex: 0 0 100%` makes the nav claim the full row. */
    .ark-mrp-header__actions {
        flex:            0 0 100% !important;
        order:           3 !important;
        gap:             12px !important;
        justify-content: center !important;
    }

    /* Form rows — desktop spec (§7) builds rows from .ark-form-row +
       .ark-form-row__pair with cells flex-basis 428/128px. Below 1024px
       the card body is too narrow to host two cells side-by-side
       (especially Prefix 128 + Other Prefix, which collapses the wide
       cell to a stub). Stack every cell full-width so each input gets
       the full row. Desktop layout (>1024px) unchanged. */
    .ark-form-row,
    .ark-form-row__pair {
        flex-direction: column;
        flex-wrap:      nowrap;
        gap:            16px;
        align-items:    stretch;
    }

    .ark-form-row__cell,
    .ark-form-row__cell_half,
    .ark-form-row__cell_narrow,
    .ark-form-row__cell_full,
    .ark-form-row__pair,
    .ark-form-row__pair > .ark-form-row__cell {
        flex:      0 0 100%;
        max-width: 100%;
        width:     100%;
    }

    /* Wizard footer — desktop spec (§16.x ark-form-footer) splits Cancel
       (left) from Previous + Next (right) via justify-content: space-between.
       At ≤768px stack the footer into three full-width rows in this order:
         row 1: Next (primary)
         row 2: Previous (outline)
         row 3: Cancel (text)
       DOM order is __left (Cancel) then __right (Previous, Next); we re-order
       visually via flex `order` so the primary action sits on top, mirroring
       common mobile wizard patterns.
       FALLBACK — NOT strict Salesforce best practice (Rule 4.3 step 5 / Miss 8):
       width 100% on the inner button / .slds-button targets internal SLDS DOM
       because no SLDS Styling Hook exists for lightning-button width. !important
       needed: Experience Cloud brand-button stylesheet sets width and loads
       after this Static Resource (Miss 5). Same pattern as the §9 ark-btn-*
       skins already use for height/padding/colors. */
    .ark-form-footer {
        flex-direction: column;
        align-items:    stretch;
        gap:            12px;
        padding:        12px 0;
    }

    .ark-form-footer__left,
    .ark-form-footer__right {
        width: 100%;
    }

    .ark-form-footer__left {
        justify-content: center;
        order:           3;
    }

    .ark-form-footer__right {
        flex-direction: column;
        gap:            12px;
        order:          1;
    }

    .ark-form-footer__right .ark-btn-next-primary {
        order: 1;
    }

    .ark-form-footer__right .ark-btn-previous-outline {
        order: 2;
    }

    .ark-form-footer__right .ark-btn-previous-outline,
    .ark-form-footer__right .ark-btn-next-primary {
        flex:      0 0 auto;
        width:     100%;
        min-width: 0;
    }

    .ark-form-footer__left .ark-btn-cancel-text button,
    .ark-form-footer__left .ark-btn-cancel-text .slds-button,
    .ark-form-footer__right .ark-btn-previous-outline button,
    .ark-form-footer__right .ark-btn-previous-outline .slds-button,
    .ark-form-footer__right .ark-btn-next-primary button,
    .ark-form-footer__right .ark-btn-next-primary .slds-button {
        width:     100% !important;
        max-width: 100% !important;
        /* Release desktop `white-space: nowrap !important` so long labels
           (e.g. "Abandon Report and Return Home" on Review & Submit) wrap
           inside the full-width stacked button instead of clipping. */
        white-space: normal !important;
    }

    /* Reporter screen shell — desktop spec (§16.0) uses 40px padding;
       on narrow viewports drop to 16px so the white card frame doesn't
       eat horizontal real-estate. Affects every reporter wizard step
       AND arfocusReviewSummary (which reuses ark-reporter-screen). */
    .ark-reporter-screen {
        padding: 24px 16px;
    }

    .ark-reporter-screen__content {
        gap: 24px;
    }

    /* Review & Submit — mobile responsive overrides (Figma 105:3811).
       Card padding tightens, 2-col field grid collapses to 1-col,
       section titles scale down, print button stretches full-width. */
    .ark-review-screen .ark-review-card {
        padding: 24px 16px;
        gap:     20px;
    }

    .ark-review-screen .ark-review-section__title {
        font-size:   20px;
        line-height: 28px;
    }

    .ark-review-screen .ark-review-fields {
        grid-template-columns: 1fr;
        column-gap:            0;
        row-gap:               12px;
    }

    .ark-review-screen .ark-review__print-row {
        justify-content: stretch;
    }

    .ark-btn-print,
    .ark-btn-print button,
    .ark-btn-print .slds-button {
        width:     100% !important;
        max-width: 100% !important;
    }

    .ark-review-screen .ark-review-banner {
        padding: 12px 16px;
    }

    .ark-review-screen .ark-review-section__head {
        align-items:    flex-start;
    }

    /* Review & Submit footer — exception to the wizard footer pattern.
       Default mobile (.ark-form-footer) keeps Previous+Next side-by-side
       in __right at 50/50; "Abandon Report and Return Home" is too long
       for half a 360px viewport and clips. Force ALL three review-footer
       buttons to stack full-width on mobile, scoped to .ark-review-footer
       so other wizard screens are unaffected. */
    .ark-review-footer .ark-form-footer__right {
        flex-direction: column;
        gap:            12px;
    }

    .ark-review-footer .ark-form-footer__right .ark-btn-previous-outline,
    .ark-review-footer .ark-form-footer__right .ark-btn-next-primary {
        width: 100%;
        flex:  0 0 auto;
    }

    /* Review & Submit mobile order — Abandon (previous-outline) ABOVE
       Submit (next-primary), mirroring the desktop layout where Abandon
       sits to the LEFT of Submit. Overrides the wizard-wide default
       (Next on top) for this screen only. */
    .ark-review-footer .ark-form-footer__right .ark-btn-previous-outline {
        order: 1;
    }
    .ark-review-footer .ark-form-footer__right .ark-btn-next-primary {
        order: 2;
    }
}