:root {
    --ap-radius-card: 6px;
    --ap-radius-pill: 999px;
    --ap-radius-circle: 50%;
    --ap-radius-bar: 3px;
    --ap-radius-banner: 1.5rem 1.5rem 0 0;
    --ap-radius-sidebar-active: 0 1.5rem 1.5rem 0;
    --ap-radius-timeline-chip: 2rem;
    --ap-radius-small: 0.4rem;
    --ap-purple-light: #EEEDFE;
    --ap-purple-mid: #534AB7;
    --ap-purple-dark: #3C3489;
    --ap-purple-border: #d8d5f5;
}

/* ============================================================
   TYPOGRAPHY STANDARD — DO NOT DEVIATE
   ============================================================
   Font family:  IBM Plex Sans (loaded via Google Fonts)
   Font size:    1rem  (16px) — base body size
   Font weight:  400   — ALWAYS. No exceptions in views,
                         inline styles, mockups, or new rules.
   Text color:   #435164  (var(--ap-text))

   Visual emphasis comes from COLOR + SIZE, not weight.
   Scale up a heading — don't bold it.

   The only permitted heavier weights are on existing utility
   classes (.btn, .ap-type-pill, etc.) — do not add new ones.
   If you think you need an exception, STOP and ask the user.
   ============================================================ */


/* ============================================================
   ⚠️  STANDARDIZATION — READ BEFORE PICKING ANY COLOR ⚠️
   ============================================================
   DO NOT eyeball, guess, or "pick a nice shade." Every blue,
   purple, and gray on AfterPlan has ONE canonical value below.
   Before introducing a color anywhere (inline <style>, view
   markup, mockups), look up the right token here FIRST.

   THE CANONICAL BLUES
   #5a8dee  --ap-blue        Primary actions, links, active states,
                             focus rings, sidebar bright stop,
                             button shadows
   #3b6fd8  --ap-blue-dark   Section titles ("Identity",
                             "Home Address"), hover states,
                             sidebar deep stop, login/register
                             side-pane background

   THE CANONICAL PURPLES
   #6d28d9  --ap-purple      App badges, .ap-type-pill, section
                             accents (in-app surfaces)
   #534AB7  --ap-purple-mid  Marketing card eyebrows
                             (e.g. .store-card-cat)
   #3C3489  --ap-purple-dark Marketing emphasis text
   #EEEDFE  --ap-purple-light Pill backgrounds, soft hover wash

   THE CANONICAL RGBAS (for shadows / glows / focus rings)
   rgba(90,141,238,.12)   Focus ring (input-group:focus-within)
   rgba(90,141,238,.18)   Button shadow
   rgba(90,141,238,.45)   Focused input border
   rgba(33,37,41,.14)     Panel/sidebar drop shadow
   rgba(67,89,113,.06)    Card shadow

   If you need a brand color that isn't here, STOP and ask the
   user — don't invent one. "It looked nice" is not a reason.

   The auth pages (login.php, register.php) live in the APP
   surface and must use --ap-blue / --ap-blue-dark for the
   side-pane and form chrome. They are NOT marketing pages.
   ============================================================ */


/* ============================================================
   AFTERPLAN CSS — MASTER REFERENCE
   This block is the single source of truth for the design system.
   All values used anywhere in this file must trace back here.
   Do not introduce hardcoded colors, sizes, or radii elsewhere.
   ============================================================

   COLOR PALETTE
   --ap-blue:        #5a8dee  Primary actions, links, active states
   --ap-blue-dark:   #3b6fd8  Hover states, section titles
   --ap-purple:      #6d28d9  Badges, pills, section accents (ap-type-pill)
   --ap-ink:         #435971  Headings, strong text
   --ap-text:        #435164  Body text, table cells
   --ap-muted:       #8c98a4  Labels, meta text, placeholders
   --ap-border:      #e9edf4  All borders and dividers

   TYPOGRAPHY — FIVE TIERS, NO EXCEPTIONS
   Base font size:    16px Standard / 17px Large / 18px Extra Large
   Scale variable:    --ap-scale-font  (1 / 1.0625 / 1.125)

   Tier 1 — Body        1rem      Form controls, paragraphs, alerts, table data cells
   Tier 2 — Sub-label   0.875rem  Form help text (.form-text) only
   Tier 3 — Label       0.8rem    Uppercase column headers, eyebrows, form labels, meta
   Tier 4 — Micro       0.72rem   Tiny badges, supplementary annotation chips

   BANNED: 0.83, 0.84, 0.85, 0.86, 0.87, 0.88, 0.89, 0.9, 0.91, 0.92, 0.93, 0.94, 0.95, 0.96, 0.97, 0.98, 0.99
   — collapse to nearest tier above.

   Page title:        1.75rem  (.page-title)
   Card titles:       1.1rem   (.card-title, .nav-link-ap)
   Card content:      1.15rem  (.section-card)
   Counter numbers:   2.2rem   (.ap-counter-number)
   Sidebar/nav:       fixed (not scaled — sidebar is visually isolated)
   Font weight:       400 throughout — never 500+ without explicit approval

   SPACING
   Scale variable:  --ap-scale-space  (1 / 0.92 / 1.08)
   Page padding:    1.75rem * scale
   Card padding:    1.25-1.5rem * scale
   Input padding:   0.8rem top/bottom

   BORDER RADIUS
   Large containers: 1.5rem   Content panel, sidebar, login panel
   Cards:            1.25rem  Section cards, overview cards
   Inputs/buttons:   0.9-0.95rem
   Pills/chips:      999px

   SHADOWS
   Sidebar/panels:  0 1rem 3rem rgba(33,37,41,0.14)
   Cards:           0 0.35rem 1rem rgba(67,89,113,0.06)
   Buttons:         0 0.75rem 1.5rem rgba(90,141,238,0.18)
   Focus ring:      0 0 0 0.25rem rgba(90,141,238,0.12)

   COMPONENT STANDARDS
   Text inputs:     input-group-lg with input-group-text icon -- always
   Dropdowns:       Same input-group pattern as text inputs -- always
   RTE fields:      ap_render_rte() helper -- never plain <textarea>
   Delete confirms: Bootstrap modal -- never confirm() or inline JS
   Primary action:  .ap-btn.ap-btn-primary -- never .btn-primary
   Cancel action:   .ap-btn.ap-btn-ghost
   Progress bar:    Add / Edit / View pages only (single record forms)
   Counter cards:   Index / list pages only (showProgressBar: false)
   Selected rows:   Soft blue tint -- never Bootstrap default gray
   Status pills:    .ap-type-pill -- light purple bg, dark purple text -- all badges site-wide
   Logout button:   .btn-logout-red -- muted red outline, topbar only
   Animations:      .ap-anim-ready / .ap-anim-in -- dashboard & overview entrance animations
   ============================================================ */


/* ============================================================
   MAINTENANCE RULES -- READ BEFORE EDITING
   ============================================================
   1. Every new rule must be placed in its correct numbered
      section (1-28). Do not add rules at the bottom of the file.
   2. Font-size declarations belong in Section 15 only.
      Static sections (1-14) handle color, spacing, and layout.
   3. Every new class or rule group must have a comment
      explaining what it does and where it is used.
   4. Do not introduce hardcoded color values -- use CSS
      variables from Section 1 instead.
   5. Do not add !important unless overriding Bootstrap and
      there is no other option. Comment why if you do.
   6. Keep media queries immediately after the section they
      belong to -- not grouped at the end of the file.
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */

/* Smooth scroll for in-page anchor links */
html { scroll-behavior: smooth; }

:root {
    --ap-blue:         #5a8dee;
    --ap-blue-dark:    #3b6fd8;
    --ap-purple:       #6d28d9;
    --ap-ink:          #435971;
    --ap-text:         #435164;
    --ap-muted:        #8c98a4;
    --ap-border:       #e9edf4;
    --ap-success:      #28c76f;
    --ap-success-dark: #167a44;
    --ap-danger:       #ea5455;
    --ap-danger-dark:  #b53a3b;
    --ap-scale-font:   1;
    --ap-scale-space:  1;
}


/* ============================================================
   2. BASE / RESET
   ============================================================ */

html {
    scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--ap-text);
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(90, 141, 238, 0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.10), transparent 28%),
        linear-gradient(135deg, #f8f9fa 0%, #eef3ff 46%, #f8f9fa 100%);
    color: var(--ap-text);
}

code {
    color: #6f42c1;
}


/* ============================================================
   3. APP SHELL & LAYOUT
   ============================================================ */

.app-shell {
    min-height: 100vh;
    padding: 1.25rem calc(1.25rem + 2.5px);
}

.content-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--ap-radius-banner);
    box-shadow: 0 1rem 3rem rgba(33, 37, 41, 0.10);
    min-height: calc(100vh - 2.5rem);
    overflow: hidden;
}

.page-wrap {
    padding: 1.75rem;
}

/* Keep the content card from sliding behind the fixed right-edge pills (print /
   font-scale / backup). Applied at tablet+ where the pills are visible.
   Narrower than 768px: pills are already hidden via their own media query.    */
@media (min-width: 768px) {
    .content-col {
        padding-right: 56px;
    }
}

.page-form-actions {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

@media (max-width: 991.98px) {
    .content-panel {
        min-height: auto;
        position: static;
    }
}


/* ============================================================
   4. SIDEBAR
   ============================================================ */

.sidebar-panel {
    min-height: calc(100vh - 2.5rem);
    background: linear-gradient(160deg, #3b6fd8 0%, #4a7ee0 100%);
    border-radius: 1.5rem;
    color: #fff;
    overflow: clip;
    position: relative;
    box-shadow: 0 1rem 3rem rgba(33, 37, 41, 0.14);
}

.sidebar-panel::-webkit-scrollbar {
    display: none;
}

.sidebar-panel::before,
.sidebar-panel::after {
    content: "";
    position: absolute;
    border-radius: var(--ap-radius-circle);
    z-index: -1;
    opacity: 0.16;
    filter: blur(6px);
}

.sidebar-panel::before {
    width: 16rem;
    height: 16rem;
    background: #fff;
    top: -5rem;
    right: -4rem;
}

.sidebar-panel::after {
    width: 11rem;
    height: 11rem;
    background: #d9e8ff;
    bottom: -3rem;
    left: -2rem;
}

.brand-mark {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
}

/* Sidebar logo mark */
.sidebar-logo {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
}

/* Nav section label */
.nav-section-label {
    font-size: calc(0.68rem * var(--ap-scale-font, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    padding: .5rem .25rem .1rem;
}

.nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: .25rem .25rem;
    flex-shrink: 0;
}

/* Primary nav links */
.nav-link-ap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.28rem 0.65rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    font-size: calc(0.78rem * var(--ap-scale-font, 1));
    transition: all 0.15s ease-in-out;
    font-weight: 400;
    border: 1px solid transparent;
}

.nav-link-ap:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.12);
}

.nav-link-ap.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.5rem 1rem rgba(34, 48, 62, 0.12);
}

.nav-link-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.nav-link-main > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.nav-link-ap i {
    font-size: calc(0.9rem * var(--ap-scale-font, 1));
    flex-shrink: 0;
}

/* Nav arrows and toggles */
.nav-arrow,
.nav-sub-arrow {
    font-size: 0.92rem;
    opacity: 0.7;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-link-ap.active .nav-arrow {
    opacity: 1;
}

.nav-toggle-btn[aria-expanded="true"] .nav-arrow,
.nav-sublink-toggle[aria-expanded="true"] .nav-sub-arrow {
    transform: rotate(90deg);
    opacity: 1;
}

.nav-toggle-btn,
.nav-sublink-toggle,
.nav-logout-btn {
    width: 100%;
    background: transparent;
    text-align: left;
    border-radius: 1rem;
}

/* Nav groups and submenus */
.nav-group-wrap,
.nav-nested-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nav-collapse,
.nested-collapse {
    overflow: hidden;
}

.nav-submenu {
    margin-left: 0.9rem;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nav-submenu-nested {
    margin-left: 0.45rem;
    padding-left: 0.85rem;
    border-left-color: rgba(255, 255, 255, 0.14);
}

.nav-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    color: rgba(255, 255, 255, 0.84);
    text-decoration: none;
    font-size: 0.94rem;
    line-height: 1.12;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-sublink:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.10);
}

.nav-sublink.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.16);
}

.nav-sublink-toggle {
    background: transparent;
}

/* Keys nav label — slides Digital / Physical right-to-left via JS */
.keys-label { display: inline-block; overflow: hidden; max-width: 4.8em; vertical-align: bottom; }
.keys-word { display: inline-block; }

/* Locked nav items — TU restricted sections */
.nav-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.nav-lock-icon {
    font-size: 0.9rem;
    opacity: 0.7;
}

.nav-sublink-locked {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 0.9rem;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.94rem;
    cursor: not-allowed;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-sublink-locked i {
    font-size: 0.8rem;
    order: -1;
}

/* Sub-group labels inside nav collapse (e.g. Income Sources, Investments) */
.nav-subgroup-label {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.6rem 0.9rem 0.2rem;
}

/* Two-level nested nav groups (e.g. Income Sources inside Financial) */
.nav-nested-group {
    margin: 0.1rem 0;
}

.nav-nested-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.94rem;
    line-height: 1.12;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-nested-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-nested-arrow {
    font-size: 0.8rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.nav-nested-toggle[aria-expanded="true"] .nav-nested-arrow {
    transform: rotate(90deg);
}

.nav-nested-submenu {
    padding-left: 0.75rem;
}

/* Sidebar footer CTA button for TU marketing */
.sidebar-footer-btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    border-radius: 0.75rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s;
}

.sidebar-footer-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    text-decoration: none;
}

/* Trusted User banner */
.tu-banner {
    background: rgba(139, 92, 246, 0.10);
    border-bottom: 1px solid rgba(139, 92, 246, 0.20);
    color: #6d28d9;
    font-size: 0.85rem;
    padding: 0.6rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -2px -2px 0 -2px;
    border-radius: var(--ap-radius-banner);
}

.tu-banner i {
    font-size: 1rem;
    flex-shrink: 0;
}

.impersonate-banner {
    background: #ff9f43;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: -2px -2px 0 -2px;
    border-radius: var(--ap-radius-banner);
}

/* When any top-of-panel banner is the first child of the content panel,
   the panel's translucent white border shows as a thin sliver around the
   banner's rounded corners. Removing the panel's border in this state
   lets the banner sit flush at the very top edge. */
.content-panel:has(> .impersonate-banner:first-child),
.content-panel:has(> .tu-banner:first-child),
.content-panel:has(> .owner-preview-banner:first-child),
.content-panel:has(> .demo-banner:first-child) {
    border: 0;
}

.au-user-id {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ap-muted);
}

/* Sidebar footer card */
.sidebar-footer-card {
    padding: 1rem;
    border-radius: var(--ap-radius-card);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.35rem 1rem rgba(34, 48, 62, 0.12);
    backdrop-filter: blur(6px);
    color: #ffffff;
}

.sidebar-footer-label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.sidebar-footer-title {
    font-size: 0.92rem;
    font-weight: 400;
    color: #ffffff;
}

.sidebar-footer-description {
    font-size: 0.875rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 991.98px) {
    .sidebar-panel {
        min-height: auto;
        position: static;
    }
}

/* Sidebar toggle button — fixed pill in top-left corner */
.sidebar-toggle-btn {
    position: fixed;
    top: 1.1rem;
    left: 1.1rem;
    z-index: 1050;
    width: 2.4rem;
    height: 2.4rem;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: linear-gradient(160deg, #3b6fd8 0%, #4a7ee0 100%);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(33, 37, 41, 0.18);
    transition: opacity 0.2s, transform 0.2s;
}

/* Backdrop overlay when sidebar is open on small screens */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(33, 37, 41, 0.35);
    backdrop-filter: blur(2px);
}

/* On screens ≤ 1599.98px, activate collapsed mode automatically.
   Catches every common laptop res (1280, 1366, 1440, 1536) so forms
   get full width; full always-visible sidebar only at 1600px+
   (16" MacBook Pro, external monitors). */
@media (max-width: 1599.98px) {
    .sidebar-col {
        position: fixed;
        top: 0;
        left: -440px;
        width: 400px !important;
        max-width: 400px;
        height: 100vh;
        z-index: 1045;
        padding: 1.25rem !important;
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    .sidebar-col .sidebar-panel {
        min-height: 100%;
        border-radius: 0 1.5rem 1.5rem 0;
        overflow: hidden;
    }

    .sidebar-col.sidebar-is-open {
        left: 0;
    }

    .sidebar-backdrop.is-visible {
        display: block;
    }

    .content-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .sidebar-toggle-btn {
        display: flex;
    }

    .app-shell {
        padding-left: 4rem;
    }
}

@media (max-width: 991.98px) {
    .sidebar-panel {
        min-height: 100% !important;
        position: relative !important;
    }
}


/* ============================================================
   5. TOPBAR
   ============================================================ */

.topbar {
    border-bottom: 1px solid var(--ap-border);
    background: rgba(255, 255, 255, 0.76);
    position: relative;
}

/* Topbar user chip — name + role (with optional avatar) */
.topbar-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.2;
    padding: 0.3rem 1.35rem;
    border-radius: 999px;
    background: rgba(83, 74, 183, 0.10);
    border: 1px solid rgba(83, 74, 183, 0.18);
    pointer-events: none;
}
/* Avatar version: bump left padding so the round avatar inside the
   round pill cap reads as equal whitespace to the straight text edge
   inside the right cap. */
.topbar-user-chip:has(.topbar-user-avatar) {
    padding-left: 0.9rem;
}

.topbar-user-avatar {
    flex: 0 0 1.85rem;
    width: 1.85rem;
    height: 1.85rem;
    min-width: 1.85rem;
    max-width: 1.85rem;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ap-purple-mid, #534AB7), #7c63e0);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.topbar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.topbar-user-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .topbar-user-chip {
        display: none;
    }
}

.topbar-user-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ap-purple-mid, #534AB7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    line-height: 1.15;
}

.topbar-user-role {
    font-size: 0.7rem;
    color: var(--ap-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1.15;
}

/* Topbar action row (right side) */
.topbar-actions {
    gap: 1.85rem !important;
    align-items: center;
}

/* Uniform 2.5rem height across topbar action pills */
.topbar-actions .btn-logout-red,
.topbar-actions .topbar-user-chip,
.topbar-actions .topbar-help-wrap,
.topbar-actions .ap-site-search,
.topbar-actions .ap-site-search-input-wrap {
    height: 2.5rem;
    box-sizing: border-box;
}

.topbar-actions .btn-logout-red {
    display: inline-flex;
    align-items: center;
}

.topbar-actions .topbar-help-wrap {
    width: 2.5rem;
    height: 2.5rem;
}
.topbar-actions .topbar-help-link {
    width: 2.5rem;
    height: 2.5rem;
}

/* Breadcrumb eyebrow */
.eyebrow {
    color: var(--ap-blue);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Help icon — branded "?" badge with attention pulse */
.topbar-help-wrap {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 38px;
}
.topbar-help-wrap::before,
.topbar-help-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ap-purple-mid, #534AB7);
    pointer-events: none;
    opacity: 0;
}
.topbar-help-wrap::before {
    animation: topbar-help-pulse-outer 2.35s ease-out infinite;
}
.topbar-help-wrap::after {
    animation: topbar-help-pulse-inner 2.35s ease-out infinite;
}
@keyframes topbar-help-pulse-outer {
    0%   { transform: scale(1);    opacity: 0.55; border-width: 2px; }
    80%  { transform: scale(1.8);  opacity: 0;    border-width: 1px; }
    100% { transform: scale(2);    opacity: 0;    border-width: 1px; }
}
@keyframes topbar-help-pulse-inner {
    0%   { transform: scale(1);    opacity: 0.55; border-width: 2px; }
    90%  { transform: scale(1.35); opacity: 0;    border-width: 1px; }
    100% { transform: scale(1.45); opacity: 0;    border-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    .topbar-help-wrap::before,
    .topbar-help-wrap::after { animation: none; opacity: 0; }
}
.topbar-help-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ap-purple-mid, #534AB7);
    color: #fff;
    border: 2px solid #fff;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(83, 74, 183, 0.3), 0 0 0 1px rgba(83, 74, 183, 0.15);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.topbar-help-link:hover,
.topbar-help-link:focus {
    background: var(--ap-purple-dark, #3C3489);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(83, 74, 183, 0.4), 0 0 0 1px rgba(60, 52, 137, 0.2);
}

.ap-display-scale-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    color: var(--ap-text);
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

/* Three glyph sizes so SM/MD/LG read as small-A / medium-A / large-A */
.ap-display-scale-link[data-size="sm"] { font-size: 0.75rem; }
.ap-display-scale-link[data-size="md"] { font-size: 0.98rem; }
.ap-display-scale-link[data-size="lg"] { font-size: 1.3rem; }

.ap-display-scale-link:hover {
    color: var(--ap-purple-dark, #3C3489);
    background: rgba(83, 74, 183, 0.10);
}

html[data-ap-scale="standard"] .ap-display-scale-link[data-ap-scale-target="standard"],
html[data-ap-scale="large"] .ap-display-scale-link[data-ap-scale-target="large"],
html[data-ap-scale="extra-large"] .ap-display-scale-link[data-ap-scale-target="extra-large"] {
    color: var(--ap-purple-mid, #534AB7);
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ap-purple-mid, #534AB7);
}


/* Status chip (topbar status indicator) */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--ap-radius-pill);
    background: rgba(25, 135, 84, 0.10);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.18);
    font-weight: 400;
}

.status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--ap-radius-circle);
    background: currentColor;
}

@media (max-width: 767.98px) {
    .topbar-actions {
        width: 100%;
        justify-content: flex-start !important;
    }
}

@media (max-width: 991.98px) {
    .topbar-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}


/* ============================================================
   6. PAGE HEADER & TITLES
   ============================================================ */

.page-title,
.hero-title,
.hero-stat {
    color: var(--ap-ink);
}

/* Status meta — small descriptor line below progress/overview */
.status-meta {
    color: var(--ap-muted);
}


/* ============================================================
   7. CARDS & SECTION STRUCTURE
   ============================================================ */

/* Base card styles */
.hero-card,
.section-card,
.mini-card {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-card);
    background: linear-gradient(180deg, #fafbfe 0%, #f5f7fc 45%, #f5f7fc 100%);
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

.hero-card {
    padding: 1.5rem;
}

.section-card {
    padding: 1.25rem;
}

.mini-card {
    padding: 1rem;
    height: 100%;
}

/* Section title color variants (used on Personal page sections) */
.section-title {
    color: var(--ap-blue-dark);
}


/* Section-card with progressive disclosure: collapses to a compact summary
   row (chevron disc + title + status chip) until clicked. Used on the
   Trusted Access form to hide optional/advanced sections by default.
   Auto-opens server-side when the underlying data is non-empty. */
.section-card.ap-section-collapse { padding: 0; }
.section-card.ap-section-collapse > details > summary {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: var(--ap-radius-card);
    transition: background .15s ease;
}
.section-card.ap-section-collapse > details > summary::-webkit-details-marker { display: none; }
.section-card.ap-section-collapse > details > summary:hover { background: rgba(83, 74, 183, .04); }
.section-card.ap-section-collapse > details[open] > summary {
    border-bottom: 1px solid var(--ap-border);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ap-section-collapse-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(83, 74, 183, .10);
    color: var(--ap-purple-dark, #3C3489);
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.ap-section-collapse-chev .bx {
    font-size: 1.15rem;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.section-card.ap-section-collapse > details[open] .ap-section-collapse-chev {
    background: var(--ap-purple-mid, #534AB7);
    color: #fff;
}
.section-card.ap-section-collapse > details[open] .ap-section-collapse-chev .bx { transform: rotate(90deg); }
.ap-section-collapse-head { flex: 1; min-width: 0; }
.ap-section-collapse-head h3 { margin: 0; }
.ap-section-collapse-head p { margin: .15rem 0 0; }
.ap-section-collapse-meta {
    display: flex; align-items: center; gap: .55rem; flex-shrink: 0;
}
.ap-section-collapse-chip {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: var(--ap-radius-pill);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: rgba(40, 199, 111, .12);
    color: #16a366;
    white-space: nowrap;
}
.ap-section-collapse-chip.empty { background: rgba(139, 145, 163, .12); color: #8B91A3; }
.ap-section-collapse-chip.set   { background: rgba(40, 199, 111, .12); color: #16a366; }
.ap-section-collapse-toggle {
    font-size: .82rem; color: var(--ap-purple-mid, #534AB7); font-weight: 600;
    flex-shrink: 0;
}
.section-card.ap-section-collapse > details[open] .ap-section-collapse-toggle::before { content: 'Hide'; }
.section-card.ap-section-collapse > details:not([open]) .ap-section-collapse-toggle::before { content: 'Show'; }
.ap-section-collapse-body { padding: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
    .ap-section-collapse-chev .bx { transition: none; }
}

/* Decorative accent line under section titles */
.title-accent {
    width: 2.5rem;
    height: 0.28rem;
    border-radius: var(--ap-radius-pill);
    background: linear-gradient(90deg, var(--ap-blue-dark) 0%, var(--ap-blue) 100%);
}

/* Soft-edge record cards (People, Pets, Banking index pages) */
.card.records-card,
.card.ap-soft-card {
    background: linear-gradient(180deg, #fafbfe 0%, #f5f7fc 45%, #f5f7fc 100%);
    border: 1px solid #dfe5ee !important;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--ap-radius-card) !important;
}

.card.records-card::before,
.card.ap-soft-card::before {
    content: none !important;
}

.records-card .card-title {
    color: var(--ap-ink);
    font-weight: 400;
}

/* Records-below hint link */
.ap-records-hint {
    background: rgba(109, 40, 217, 0.07);
    color: var(--ap-purple);
}

/* ── PM Import tip card ── */
.da-tip-card {
    background: var(--ap-purple-light);
    border: 1px solid var(--ap-purple-border);
    border-radius: var(--ap-radius-card);
    padding: 1.1rem 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
}
.da-tip-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: #fff;
    border: 1px solid var(--ap-purple-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ap-purple-mid);
    margin-top: 0.05rem;
}
.da-tip-icon i { font-size: 1.15rem; line-height: 1; }
.da-tip-body { flex: 1; min-width: 0; }
.da-tip-heading { font-size: 1rem; color: var(--ap-purple-dark); margin-bottom: 0.35rem; }
.da-tip-desc { font-size: 0.875rem; color: var(--ap-ink); margin-bottom: 0.75rem; line-height: 1.55; }
.da-tip-steps { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.da-tip-step {
    display: flex; align-items: flex-start; gap: 0.5rem;
    background: #fff; border: 1px solid var(--ap-purple-border);
    border-radius: var(--ap-radius-card); padding: 0.55rem 0.75rem;
    flex: 1; min-width: 180px;
}
.da-tip-step-num {
    flex-shrink: 0; width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: var(--ap-purple-mid); color: #fff; font-size: 0.72rem;
    display: flex; align-items: center; justify-content: center; margin-top: 0.1rem;
}
.da-tip-step-text { font-size: 0.8rem; color: var(--ap-text); line-height: 1.45; }
.da-tip-step-text strong { display: block; color: var(--ap-ink); font-size: 0.875rem; margin-bottom: 0.1rem; font-weight: 400; }
.da-tip-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.da-tip-pms { font-size: 0.75rem; color: var(--ap-muted); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.da-tip-pms span {
    background: rgba(255,255,255,.75); border: 1px solid var(--ap-purple-border);
    border-radius: 999px; padding: 0.15rem 0.55rem; color: var(--ap-purple-mid);
}
.da-tip-dismiss {
    position: absolute; top: 0.65rem; right: 0.75rem;
    background: none; border: none; cursor: pointer;
    color: var(--ap-muted); font-size: 1.1rem; line-height: 1;
    padding: 0.15rem; border-radius: 0.3rem; display: flex; align-items: center;
}
.da-tip-dismiss:hover { color: var(--ap-purple-dark); background: rgba(0,0,0,.04); }

/* ── Import preview table ── */
.da-preview-detected {
    font-size: 0.875rem; color: var(--ap-text);
    background: var(--ap-purple-light); border: 1px solid var(--ap-purple-border);
    border-radius: var(--ap-radius-card); padding: 0.5rem 0.85rem;
    margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.da-preview-row-unset td { background: rgba(220,38,38,.04); }
.da-preview-type-warn select { border-color: #dc2626 !important; }

/* ── Inline field editor (fixed-position dropdown) ── */
.da-inline-dropdown {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ap-radius-card);
    box-shadow: 0 4px 16px rgba(33,37,41,.14);
    padding: 0.35rem 0;
    min-width: 180px;
    max-height: min(320px, 60vh);
    overflow-y: auto;
}
.da-inline-dropdown button {
    display: block; width: 100%; text-align: left;
    background: none; border: none; padding: 0.4rem 0.9rem;
    font-size: calc(0.875rem * var(--ap-scale-font, 1)); color: var(--ap-text); cursor: pointer;
    font-family: inherit;
}
.da-inline-dropdown button:hover { background: var(--ap-purple-light); color: var(--ap-purple-dark); }
.da-legend summary {
    cursor: pointer;
    font-size: calc(0.9rem * var(--ap-scale-font, 1));
    color: var(--ap-muted);
    list-style: none; display: inline-flex; align-items: center; gap: .35rem;
    user-select: none;
}
.da-legend summary::-webkit-details-marker { display: none; }
.da-legend-body {
    margin-top: .6rem; padding: .75rem 1rem;
    background: #F8F7FF; border: 0.5px solid #CECBF6; border-radius: 8px;
    display: grid; gap: .4rem;
    font-size: calc(0.875rem * var(--ap-scale-font, 1));
    color: var(--ap-text);
}
.da-legend-body strong { color: #26215C; }
.da-inline-cell {
    cursor: pointer; white-space: nowrap;
    text-decoration: underline dotted var(--ap-muted);
    text-underline-offset: 3px;
    background: none; border: none; padding: 0;
    font: inherit; color: inherit; display: inline;
}
.da-inline-cell:hover { color: var(--ap-blue); }

/* Digital Accounts — filter bar */
.da-filter-bar { display: flex; gap: 10px; align-items: center; }
.da-filter-search-wrap { position: relative; flex: 1; min-width: 0; }
.da-filter-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--ap-muted); font-size: calc(1rem * var(--ap-scale-font, 1)); pointer-events: none;
}
.da-filter-input { padding-left: 32px !important; padding-right: 30px !important; }
.da-filter-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--ap-muted);
    font-size: calc(1.1rem * var(--ap-scale-font, 1)); line-height: 1; cursor: pointer; padding: 0 2px;
}
.da-filter-clear:hover { color: var(--ap-ink); }
.da-filter-btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
    min-width: 148px; flex-shrink: 0;
    min-height: 3rem;
    padding: 0.65rem 0.75rem;
    line-height: 1.5;
    border: 1px solid var(--ap-border); border-radius: var(--ap-radius-card);
    background: var(--bs-body-bg, #fff); cursor: pointer; white-space: nowrap;
    font-size: calc(1rem * var(--ap-scale-font, 1)); font-family: inherit;
    color: var(--ap-text); font-weight: 400;
    transition: border-color 0.15s;
}
.da-filter-btn:focus { outline: none; }
.da-filter-btn:hover { border-color: var(--ap-blue); }
.da-filter-btn.has-value { border-color: var(--ap-blue); color: var(--ap-blue); }
.da-filter-btn[data-value=""] .dd-label { color: var(--ap-muted); }
.da-filter-btn i.bx-chevron-down { font-size: calc(1rem * var(--ap-scale-font, 1)); color: var(--ap-muted); flex-shrink: 0; }
.ap-dd-group { display: flex; align-items: stretch; width: 100%; position: relative; }
.ap-dd-group .da-filter-btn { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
.ap-dd-group .da-filter-btn:hover { border-color: var(--ap-border); }
.ap-dd-group .da-filter-btn.da-act-pill { background: rgba(109,40,217,0.07); color: #6d28d9; border-color: rgba(109,40,217,0.18); }
.ap-dd-group .da-filter-btn.da-act-pill .dd-label { color: #6d28d9; }
.ap-dd-group .da-filter-btn.da-act-pill i.bx-chevron-down { color: #6d28d9; }
.ap-dd-group .da-filter-btn.da-act-pill:hover { border-color: rgba(109,40,217,0.35); }

/* Purple header bar on records list cards */
.section-card.records-card > .section-title {
    margin: -1.25rem -1.25rem 1rem;
    padding: 0.8rem 1.25rem;
    background: rgba(109, 40, 217, 0.07);
    color: var(--ap-purple);
    border-radius: var(--ap-radius-card);
}

.card.records-card > .card-body > div:first-child .card-title {
    color: var(--ap-ink);
    font-weight: 400;
}

/* Purple-on-white type pill */
.ap-type-pill {
    background: rgba(109, 40, 217, 0.07) !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(109, 40, 217, 0.18);
    font-weight: 400;
    font-size: calc(0.75rem * var(--ap-scale-font, 1));
}

/* Semantic status pill — green / amber / red variants for at-a-glance state.
   Used on the People records list to show final-message readiness. */
.ap-status-pill {
    font-size: 1em;
    font-weight: 400;
    border: 1px solid transparent;
}
.ap-status-pill-success {
    background: rgba(22, 163, 74, 0.10) !important;
    color: #15803d !important;
    border-color: rgba(22, 163, 74, 0.22);
}
.ap-status-pill-warning {
    background: rgba(217, 119, 6, 0.10) !important;
    color: #b45309 !important;
    border-color: rgba(217, 119, 6, 0.22);
}
.ap-status-pill-muted {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.20);
}


/* ============================================================
   8. OVERVIEW COMPONENT
   ============================================================ */

/* Overview card container */
.overview-card {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-card);
    background: linear-gradient(180deg, #fafbfe 0%, #f5f7fc 45%, #f5f7fc 100%);
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Left panel — descriptive copy */
.overview-copy,
.overview-body {
    padding: 0.78rem 0.95rem;
}

.overview-body > * + * {
    margin-top: 0.75rem;
}

.overview-body,
.overview-body p,
.overview-body div,
.overview-body li,
.overview-lead,
.overview-subtext {
    line-height: 1.4;
    color: var(--ap-text);
}

.overview-body p:last-child,
.overview-body ul:last-child,
.overview-body ol:last-child {
    margin-bottom: 0;
}

.overview-lead {
    line-height: 1.35;
    color: #435971;
    margin: 0;
}

.overview-subtext {
    line-height: 1.4;
    color: var(--ap-text);
}

/* Right panel — divider and progress wrap */
.overview-divider {
    border-left: 1px solid var(--ap-border);
    padding: 0.82rem 0.95rem;
}

.overview-cards-row {
    align-items: stretch;
}

/* Card label (e.g. "PEOPLE & LETTERS") */
.overview-card-label {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7b8794;
    margin-bottom: 0.24rem;
}

/* Card value (secondary display text) */
.overview-card-value {
    font-weight: 400;
    color: #435971;
    margin-bottom: 0.02rem;
}

/* Card meta (small note below value) */
.overview-card-meta {
    line-height: 1.12;
    color: var(--ap-muted);
}

/* Mini-card boxes used in counter mode */
.overview-mini-card {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-card);
    background: linear-gradient(180deg, #fafbfe 0%, #f5f7fc 45%, #f5f7fc 100%);
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08);
    padding: 0.52rem 1.25rem;
}

/* ============================================================
   9. COUNT-STYLE OVERVIEW
   ============================================================ */

.ap-overview-count-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 0;
    align-items: stretch;
}
@media (max-width: 991.98px) {
    .ap-overview-count-grid {
        grid-template-columns: 1fr;
    }
}
.ap-overview-count-copy {
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--ap-border);
}
@media (max-width: 991.98px) {
    .ap-overview-count-copy {
        border-right: none;
        border-bottom: 1px solid var(--ap-border);
    }
}
.ap-overview-count-stats {
    padding: 1.25rem 1.5rem;
}
.ap-overview-count-lead {
    color: var(--ap-text);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.7rem;
}
.ap-overview-count-body {
    color: var(--ap-text);
    font-size: 0.95rem;
    line-height: 1.65;
}
.ap-overview-count-body p {
    margin-bottom: 0.7rem;
}
.ap-overview-count-body p:last-child {
    margin-bottom: 1rem;
}

/* Feature tile grid — 2x2 layout */
.ap-overview-count-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 2.5rem;
    margin-top: 1.5625rem;
    max-width: 600px;
}
@media (max-width: 575.98px) {
    .ap-overview-count-features {
        grid-template-columns: 1fr;
    }
}
.ap-overview-count-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    line-height: 1.4;
}
.ap-overview-count-feature-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--ap-purple-light);
    color: var(--ap-purple-mid);
    border: 1px solid rgba(110, 99, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.ap-overview-count-feature-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ap-overview-count-feature-text strong {
    color: var(--ap-text);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 0.1rem;
}
.ap-overview-count-feature-text span {
    color: var(--ap-text);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Stats column — colored stat rows */
.ap-overview-stat-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    border-radius: var(--ap-radius-card);
    border: 1px solid var(--ap-border);
    margin-bottom: 0.5rem;
}
.ap-overview-stat-row:last-child {
    margin-bottom: 0;
}
.ap-overview-stat-num {
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1;
    min-width: 2rem;
    text-align: left;
}
.ap-overview-stat-label {
    font-size: 0.95rem;
}
.ap-overview-stats-divider {
    height: 1px;
    background: var(--ap-border);
    margin: 0.6rem 0 0.7rem;
}
/* Variants */
.ap-overview-stat-row-primary {
    background: #f7f7fb;
}
.ap-overview-stat-row-primary .ap-overview-stat-num { color: #435971; }
.ap-overview-stat-row-primary .ap-overview-stat-label { color: #475569; }

.ap-overview-stat-row-success {
    background: rgba(22, 163, 74, 0.06);
    border-color: rgba(22, 163, 74, 0.18);
}
.ap-overview-stat-row-success .ap-overview-stat-num,
.ap-overview-stat-row-success .ap-overview-stat-label { color: #15803d; }

.ap-overview-stat-row-warning {
    background: rgba(217, 119, 6, 0.06);
    border-color: rgba(217, 119, 6, 0.18);
}
.ap-overview-stat-row-warning .ap-overview-stat-num,
.ap-overview-stat-row-warning .ap-overview-stat-label { color: #b45309; }

.ap-overview-stat-row-danger {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.18);
}
.ap-overview-stat-row-danger .ap-overview-stat-num,
.ap-overview-stat-row-danger .ap-overview-stat-label { color: #b91c1c; }

.ap-overview-stat-row-info {
    background: rgba(90, 141, 238, 0.06);
    border-color: rgba(90, 141, 238, 0.20);
}
.ap-overview-stat-row-info .ap-overview-stat-num,
.ap-overview-stat-row-info .ap-overview-stat-label { color: #1e40af; }

.ap-overview-stat-row-purple {
    background: rgba(109, 40, 217, 0.06);
    border-color: rgba(109, 40, 217, 0.20);
}
.ap-overview-stat-row-purple .ap-overview-stat-num,
.ap-overview-stat-row-purple .ap-overview-stat-label { color: #6d28d9; }

.ap-overview-stat-row-neutral {
    background: #f7f7fb;
}
.ap-overview-stat-row-neutral .ap-overview-stat-num,
.ap-overview-stat-row-neutral .ap-overview-stat-label { color: #6b7280; }

/* Large counter numbers (counter mode only) */
.ap-counter-number {
    font-weight: 700;
    line-height: 1.1;
    color: #435971;
}

/* Icon badges used in some overview cards */
.overview-icon {
    width: 2.8rem;
    height: 2.8rem;
    margin-left: auto;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ap-radius-circle);
    font-size: 1.4rem;
}

.overview-icon.status-icon {
    background: rgba(25, 135, 84, 0.10);
    color: #198754;
}

.overview-icon.incomplete-icon {
    background: rgba(90, 141, 238, 0.10);
    color: var(--ap-blue);
}

.overview-icon.help-icon {
    background: rgba(90, 141, 238, 0.10);
    color: var(--ap-blue);
}

.overview-help-card:hover {
    border-color: rgba(90, 141, 238, 0.35);
    box-shadow: 0 0.75rem 1.5rem rgba(90, 141, 238, 0.10);
}

/* Progress bar mode (add/edit/view pages) */
.overview-progress-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.9rem;
}

.overview-progress-main {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.overview-progress-headline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.overview-progress-percent {
    font-weight: 400;
    color: #435971;
}

.overview-progress-bar {
    width: 100%;
    height: 0.75rem;
    background: #eef2f7;
    border-radius: var(--ap-radius-pill);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(67, 89, 113, 0.06);
}

.overview-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f0c419 0%, #9acb34 45%, #28a745 100%);
    border-radius: var(--ap-radius-pill);
    transition: width 0.3s ease;
}

.overview-progress-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.overview-progress-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--ap-muted);
}

.overview-progress-meta-number {
    line-height: 1;
    color: #435971;
}

.overview-progress-meta-alert .overview-progress-meta-number {
    color: var(--ap-blue);
}

@media (max-width: 991.98px) {
    .overview-divider {
        border-left: 0;
        border-top: 1px solid var(--ap-border);
    }

    .overview-progress-headline,
    .overview-progress-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ============================================================
   10. FORMS & INPUTS
   ============================================================ */

/* Labels */
.form-label {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7b8794;
    margin-bottom: 0.45rem;
}

/* Form controls — consistent height across all input types */
.form-control,
.form-select,
.input-group-lg .form-control,
.input-group-lg .form-select,
.input-group-lg .input-group-text,
.input-group-lg .btn {
    min-height: 3rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ap-text);
    font-weight: 400;
    border-radius: var(--ap-radius-card);
}
/* Must come after .input-group-lg rule to prevent shorthand from overriding the zero-radius sides */
.ap-dd-group .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }


/* input-group-text icon column matches height */
.input-group-text {
    background: #fff;
    border-right: 0;
    color: #8c98a4;
    min-width: auto;
    min-height: 3rem;
    justify-content: center;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    padding-right: 0.5rem;
}

/* Remove left border when inside input-group (icon handles it) */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-control-plaintext,
.input-group > .form-floating,
.input-group > .form-select:focus,
.input-group > .form-control:focus {
    border-left: 0;
}

/* Tighten text start position after icon */
.input-group-lg > .form-control,
.input-group-lg > .form-select {
    padding-left: 0.35rem;
}

/* Focus styles */
.form-control:focus,
.form-select:focus {
    box-shadow: none;
}

.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(90, 141, 238, 0.12);
    border-radius: 0.5rem;
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .form-select {
    border-color: rgba(90, 141, 238, 0.45);
}

.plain-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(90, 141, 238, 0.12);
    border-color: rgba(90, 141, 238, 0.45);
}

.select-input-group .form-select {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    background-position: right 1rem center;
}

.select-input-group:focus-within .input-group-text,
.select-input-group:focus-within .form-select {
    border-color: rgba(90, 141, 238, 0.45);
}

/* Placeholders — italic + thin weight to clearly distinguish from saved data.
   Standard documented at .claude/guidance/placeholder-standard.md once signed off. */
.form-control::placeholder {
    color: #a2afc0;
    opacity: 1;
    font-style: italic;
    font-weight: 300;
}

/* Date inputs */
.date-input-group .date-text-input {
    border-right: 0;
}

.date-input-group .date-end-icon {
    border-left: 0;
    border-right: 1px solid var(--ap-border);
    color: #93a0b0;
}

.date-text-input::placeholder {
    color: #a7b3c3;
    opacity: 1;
    font-style: italic;
    font-weight: 300;
}

/* Help/secure note below fields */
.secure-note {
    color: var(--ap-muted);
}

/* Buttons */
.btn-logout-red {
    border-radius: 0.5rem;
    padding: 0.85rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(163, 45, 45, 0.30);
    color: #a32d2d;
    font-size: .82em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.btn-logout-red:hover,
.btn-logout-red:focus {
    background: rgba(163, 45, 45, 0.05);
    border-color: rgba(163, 45, 45, 0.50);
    color: #a32d2d;
    text-decoration: none;
}

/* ============================================================
   11. AP BUTTON SYSTEM
   ============================================================ */

.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ap-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.ap-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(90, 141, 238, 0.18);
}

.ap-btn i,
.ap-btn .bx {
    font-size: 1.05em;
    line-height: 1;
}

/* Sizes */
.ap-btn-lg {
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
}

.ap-btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 0.4rem;
}

/* Width modifier */
.ap-btn-block {
    display: inline-flex;
    width: 100%;
}

/* Variant — primary (blue tint) */
.ap-btn-primary {
    background: rgba(90, 141, 238, 0.18);
    color: var(--ap-blue-dark);
    border-color: rgba(90, 141, 238, 0.45);
}
.ap-btn-primary:hover,
.ap-btn-primary:focus {
    background: rgba(90, 141, 238, 0.28);
    border-color: var(--ap-blue);
    color: var(--ap-blue-dark);
}

/* Variant — secondary (ink-tinted neutral) */
.ap-btn-secondary {
    background: #eef1f6;
    color: var(--ap-ink);
    border-color: #d4dae3;
}
.ap-btn-secondary:hover,
.ap-btn-secondary:focus {
    background: #e2e7ef;
    border-color: #b9c2cf;
    color: var(--ap-ink);
}

/* Variant — ghost (quietest) */
.ap-btn-ghost {
    background: #f4f6fa;
    color: var(--ap-text);
    border-color: #d4dae3;
}
.ap-btn-ghost:hover,
.ap-btn-ghost:focus {
    background: #e7ecf3;
    border-color: #b9c2cf;
    color: var(--ap-ink);
}

/* Variant — success (green tint) */
.ap-btn-success {
    background: rgba(40, 199, 111, 0.18);
    color: var(--ap-success-dark);
    border-color: rgba(40, 199, 111, 0.5);
}
.ap-btn-success:hover,
.ap-btn-success:focus {
    background: rgba(40, 199, 111, 0.28);
    border-color: var(--ap-success);
    color: var(--ap-success-dark);
}

/* Variant — danger (red tint) */
.ap-btn-danger {
    background: rgba(234, 84, 85, 0.18);
    color: var(--ap-danger-dark);
    border-color: rgba(234, 84, 85, 0.5);
}
.ap-btn-danger:hover,
.ap-btn-danger:focus {
    background: rgba(234, 84, 85, 0.28);
    border-color: var(--ap-danger);
    color: var(--ap-danger-dark);
}

/* AI assist button — exact copy of .db-getting-started-pill */
.ap-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #EEEDFE;
    color: #534AB7;
    border: 0.5px solid #AFA9EC;
    border-radius: var(--ap-radius-timeline-chip);
    padding: .3rem .85rem;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
}
.ap-ai-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--ap-radius-timeline-chip);
    border: 1.5px solid #534AB7;
    opacity: 0;
    animation: gs-pill-pulse 1.4s ease-out infinite;
}
.ap-ai-btn:hover,
.ap-ai-btn:focus {
    background: #CECBF6;
    color: #3C3489;
}

/* Disabled — same flat treatment for every variant */
.ap-btn:disabled,
.ap-btn[disabled],
.ap-btn.disabled {
    background: #f4f6fa;
    color: #b8c2cf;
    border-color: var(--ap-border);
    cursor: not-allowed;
    box-shadow: none;
}
.ap-btn:disabled:hover,
.ap-btn[disabled]:hover,
.ap-btn.disabled:hover {
    background: #f4f6fa;
    color: #b8c2cf;
    border-color: var(--ap-border);
}

/* Forms wrapping a button shouldn't break the inline-flex / wrap behavior */
form > .ap-btn {
    margin: 0;
}

/* ---- Icon-only button: .ap-iconbtn ---- */
.ap-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ap-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.ap-iconbtn i,
.ap-iconbtn .bx {
    font-size: 1.15rem;
    line-height: 1;
}

.ap-iconbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(90, 141, 238, 0.18);
}

.ap-iconbtn-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
}
.ap-iconbtn-sm i,
.ap-iconbtn-sm .bx {
    font-size: 1.25rem;
}

.ap-iconbtn-lg {
    width: 3rem;
    height: 3rem;
}
.ap-iconbtn-lg i,
.ap-iconbtn-lg .bx {
    font-size: 1.3rem;
}

/* Icon-only variants — same tint families as .ap-btn */
.ap-iconbtn-primary {
    background: rgba(90, 141, 238, 0.18);
    color: var(--ap-blue-dark);
    border-color: rgba(90, 141, 238, 0.45);
}
.ap-iconbtn-primary:hover,
.ap-iconbtn-primary:focus {
    background: rgba(90, 141, 238, 0.28);
    border-color: var(--ap-blue);
    color: var(--ap-blue-dark);
}

.ap-iconbtn-secondary {
    background: #eef1f6;
    color: var(--ap-ink);
    border-color: #d4dae3;
}
.ap-iconbtn-secondary:hover,
.ap-iconbtn-secondary:focus {
    background: #e2e7ef;
    border-color: #b9c2cf;
    color: var(--ap-ink);
}

.ap-iconbtn-ghost {
    background: #f4f6fa;
    color: var(--ap-text);
    border-color: #d4dae3;
}
.ap-iconbtn-ghost:hover,
.ap-iconbtn-ghost:focus {
    background: #e7ecf3;
    border-color: #b9c2cf;
    color: var(--ap-ink);
}

.ap-iconbtn-success {
    background: rgba(40, 199, 111, 0.18);
    color: var(--ap-success-dark);
    border-color: rgba(40, 199, 111, 0.5);
}
.ap-iconbtn-success:hover,
.ap-iconbtn-success:focus {
    background: rgba(40, 199, 111, 0.28);
    border-color: var(--ap-success);
    color: var(--ap-success-dark);
}

.ap-iconbtn-danger {
    background: rgba(234, 84, 85, 0.18);
    color: var(--ap-danger-dark);
    border-color: rgba(234, 84, 85, 0.5);
}
.ap-iconbtn-danger:hover,
.ap-iconbtn-danger:focus {
    background: rgba(234, 84, 85, 0.28);
    border-color: var(--ap-danger);
    color: var(--ap-danger-dark);
}

.ap-iconbtn:disabled,
.ap-iconbtn[disabled],
.ap-iconbtn.disabled {
    background: #f4f6fa;
    color: #b8c2cf;
    border-color: var(--ap-border);
    cursor: not-allowed;
}

.ap-reveal-btn {
    background: var(--ap-purple-light);
    border-color: var(--ap-purple-border);
    color: var(--ap-purple-mid);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.3rem;
}
.ap-reveal-btn i,
.ap-reveal-btn .bx {
    font-size: 0.9rem;
}
.ap-reveal-btn:hover,
.ap-reveal-btn:focus {
    background: #e0ddfb;
    border-color: var(--ap-purple-mid);
    color: var(--ap-purple-dark);
}

/* Toggle switch field (e.g. "Include In Final Messages") */
.ap-switch-field {
    /* height controlled by .ap-switch-panel */
}

.ap-switch-panel {
    min-height: calc(2.8rem + 3px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    border: 1px solid #dee2e6;
    border-radius: var(--ap-radius-card);
    background: #fff;
}

.ap-switch-copy {
    color: var(--ap-text);
    line-height: 1.2;
    margin-right: 0.25rem;
}

.ap-switch-panel .form-check-input {
    margin-top: 0;
    float: none;
}

.cred-entry-row .col-auto {
    align-self: flex-start;
    padding-top: 2px;
}

@media (max-width: 767.98px) {
    .ap-switch-panel {
        flex-wrap: wrap;
    }
}

/* Prominent include-in-final-messages toggle banner */
.ap-final-toggle-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(59,111,216,0.18);
    background: linear-gradient(135deg, rgba(59,111,216,0.06) 0%, rgba(111,66,193,0.04) 100%);
    margin-bottom: 1.5rem;
    transition: border-color 0.2s, background 0.2s;
}
.ap-final-toggle-banner.is-on {
    border-color: rgba(59,111,216,0.4);
    background: linear-gradient(135deg, rgba(59,111,216,0.10) 0%, rgba(111,66,193,0.07) 100%);
}

.ap-final-toggle-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background: rgba(59,111,216,0.12);
    color: #3b6fd8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.ap-final-toggle-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ap-ink);
    margin-bottom: 0.15rem;
}
.ap-final-toggle-desc {
    font-size: 0.85rem;
    color: var(--ap-muted);
    line-height: 1.3;
}
.ap-final-toggle-banner .form-check {
    padding-left: 0;
}
.ap-final-toggle-banner .form-check-input {
    width: 3rem;
    height: 1.6rem;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

/* Per-person "Hide from PTP preview" card. Amber/warning palette so it
   reads as a privacy decision distinct from the blue Final Message
   banner immediately below it. */
.ap-ptp-hide-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(217,119,6,0.18);
    background: linear-gradient(135deg, rgba(217,119,6,0.05) 0%, rgba(180,83,9,0.03) 100%);
    margin-bottom: 1rem;
    transition: border-color 0.2s, background 0.2s;
}
.ap-ptp-hide-card.is-on {
    border-color: rgba(217,119,6,0.4);
    background: linear-gradient(135deg, rgba(217,119,6,0.10) 0%, rgba(180,83,9,0.06) 100%);
}
.ap-ptp-hide-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background: rgba(217,119,6,0.14);
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.ap-ptp-hide-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ap-ink);
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.ap-ptp-hide-info {
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    padding: .25rem .75rem .25rem .6rem;
    border-radius: 999px;
    color: #92400E;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    gap: .35rem;
    margin-left: .65rem;
    position: relative;
    top: -3px;
    box-shadow: 0 0 0 0 rgba(245,158,11,.5);
    animation: apPtpReadPulse 2.4s ease-out infinite;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
    text-decoration: none;
}
.ap-ptp-hide-info:hover {
    background: #FCD34D;
    color: #78350F;
    text-decoration: none;
    transform: scale(1.04);
}
.ap-ptp-hide-info .bx {
    font-size: .85rem;
}
@keyframes apPtpReadPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.ap-ptp-visibility-list {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}
.ap-ptp-visibility-list li {
    margin-bottom: 1rem;
}
.ap-ptp-visibility-list li:last-child {
    margin-bottom: 0;
}
.ap-ptp-visibility-list strong {
    display: block;
    margin-bottom: 0.25rem;
}
.ap-ptp-hide-desc {
    font-size: 0.85rem;
    color: var(--ap-muted);
    line-height: 1.3;
}
.ap-ptp-hide-card .form-check {
    padding-left: 0;
}
.ap-ptp-hide-card .form-check-input {
    width: 3rem;
    height: 1.6rem;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

/* Unified read-only view mode (disabled fieldset) */
/*
 * VIEW MODE STANDARD (read-only record display)
 * -----------------------------------------------
 * All /view routes wrap their form in:
 *   <?php if ($isReadOnly): ?><fieldset disabled style="min-width:0;"><?php endif; ?>
 * This gives every input/select the light gray shaded look below.
 * No save or cancel buttons are shown in view mode.
 * Do not add disabled attributes to individual fields — the fieldset handles it.
 */
fieldset[disabled] .form-control,
fieldset[disabled] .form-select,
fieldset[disabled] .input-group-text {
    background-color: #f8f9fa !important;
    color: var(--ap-text) !important;
    border-color: var(--ap-border) !important;
    box-shadow: none !important;
    cursor: default;
    opacity: 1 !important;
}

/* Read-only view fields */
.ap-readonly-field {
    background-color: #f8f9fa !important;
    color: var(--ap-text);
    border-color: var(--ap-border);
    box-shadow: none !important;
    cursor: default;
    pointer-events: none;
}

.ap-readonly-textarea {
    min-height: 8.5rem;
    height: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
}

.ap-readonly-textarea[readonly] {
    cursor: default;
    caret-color: transparent;
}

.ap-readonly-letter-body {
    min-height: 16rem;
}


/* ============================================================
   12. RICH TEXT EDITOR (RTE)
   ============================================================ */

.ap-rte {
    width: 100%;
}

.ap-rte-shell {
    display: flex;
    align-items: stretch;
    border: 1px solid #d8dde6;
    border-radius: var(--ap-radius-small);
    background: #fff;
    overflow: hidden;
}

.ap-rte-icon {
    width: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 0.75rem;
    background: #fff;
    border-right: 1px solid #d8dde6;
    color: #93a0af;
    font-size: 1.2rem;
}

.ap-rte-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ap-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: #f7f8fb;
    border-bottom: 1px solid #d8dde6;
}

.ap-rte-toolbar-extra {
    margin-left: 50px;
    display: inline-flex;
    align-items: center;
    gap: 1.45rem;
}

.ap-rte-button {
    width: 3rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #7f8b99;
    border-radius: var(--ap-radius-small);
    background: #fff;
    color: #5f6b7a;
}

.ap-rte-button:hover,
.ap-rte-button:focus {
    background: #fff;
    color: #3b4552;
}

.ap-rte-button--active {
    background: #fff;
    color: var(--ap-purple);
}

.ap-rte-grammar-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 2.35rem;
    padding: 0 .85rem;
    background: #f1edfb;
    color: var(--ap-purple, #6d28d9);
    border: 1px solid #d8d5f5;
    border-radius: var(--ap-radius-small);
    font-size: .8rem;
    cursor: pointer;
    white-space: nowrap;
}
.ap-rte-grammar-btn:hover,
.ap-rte-grammar-btn:focus {
    background: #e8e2f8;
    color: var(--ap-purple-dark, #3C3489);
}

.ap-rte-divider {
    width: 1px;
    height: 16px;
    background: #dee2e6;
    margin: 0 2px;
    align-self: center;
}

.ap-rte-editor {
    padding: 1rem;
    outline: none;
    line-height: 1.6;
    color: var(--ap-text);
    font-size: 1rem;
}

.ap-rte-editor:empty:before {
    content: attr(data-placeholder);
    color: #98a2b3;
}

.ap-rte-editor p {
    margin-bottom: 0;
}

.ap-rte-editor p:last-child {
    margin-bottom: 0;
}

.ap-rte-editor ul,
.ap-rte-editor ol {
    padding-left: 1.5rem;
}

.ap-rte-editor a,
.ap-rte-display {
    color: var(--ap-text);
    font-size: 1rem;
    line-height: 1.7;
}
.ap-rte-display p {
    margin: 0;
}
.ap-rte-display p:last-child {
    margin-bottom: 0;
}
.ap-rte-display ul,
.ap-rte-display ol {
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
}
.ap-rte-display a {
    color: var(--ap-blue);
    text-decoration: underline;
}

.ap-rte-editor a:hover,
.ap-rte-display a:hover {
    color: var(--ap-purple);
}

.ap-rte-shell:focus-within {
    border-color: #5a8dee;
    box-shadow: 0 0 0 0.2rem rgba(90, 141, 238, 0.15);
}

/* Encrypted RTE footer — calm attestation strip beneath the editor.
   The shell drops its bottom rounding so the footer reads as one piece
   with the editor frame. */
.ap-rte--encrypted .ap-rte-shell {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ap-rte-footer {
    border: 1px solid #d8d5f5;
    border-top: 0;
    border-bottom-left-radius: var(--ap-radius-small);
    border-bottom-right-radius: var(--ap-radius-small);
    background: #f1edfb;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    color: var(--ap-purple);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ap-rte-footer-lock {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--bs-body-font-family);
    font-size: 1rem;
    line-height: 1;
}
/* Read-only display variant: drop borders/padding on the inner display
   block so the footer carries the only frame. */
.ap-rte-display--encrypted {
    padding: 0.75rem 0.9rem;
    border: 1px solid #d8dde6;
    border-bottom: 0;
    border-top-left-radius: var(--ap-radius-small);
    border-top-right-radius: var(--ap-radius-small);
    background: #fff;
}


/* ============================================================
   13. RECORD TABLES
   ============================================================ */

/* Base table styles shared across People, Pets, Banking */
.records-table {
    font-size: 1rem;
}

.table.records-table thead th {
    --bs-table-color: #8c98a4;
    color: #8c98a4 !important;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--ap-border) !important;
}

.records-table tbody td {
    color: var(--ap-text);
    border-bottom-color: var(--ap-border);
    font-weight: 400;
}
.records-table thead th:first-child,
.records-table tbody td:first-child { padding-left: 1.25rem; }
.records-table thead th:last-child,
.records-table tbody td:last-child  { padding-right: 1.25rem; }

/* Action buttons within tables */
.records-table .btn.btn-outline-secondary {
    color: var(--ap-text);
    border-color: #d7deea;
    background-color: #fff;
    font-weight: 400;
}

.records-table .btn.btn-outline-secondary:hover,
.records-table .btn.btn-outline-secondary:focus {
    color: var(--ap-ink);
    border-color: #c8d3e4;
    background-color: #fff;
}

.records-table .btn.btn-outline-danger {
    font-weight: 400;
}

/* Selected row highlight (Banking — overrides Bootstrap default gray) */
.records-table tbody tr.table-active,
.records-table tbody tr.table-active td,
.records-table tbody tr.table-active th {
    --bs-table-active-bg: #f4f7ff;
    --bs-table-bg: #dce8ff;
    --bs-table-accent-bg: #dce8ff;
    background-color: #dce8ff !important;
    border-bottom-color: #c8d9f8 !important;
}

/* Clickable record rows — paired with data-row-href + the global JS
   handler in afterplan.js. Action buttons / forms inside the row keep
   their normal behavior; clicking anywhere else navigates to the row's
   edit page. */
.records-table tbody tr.ap-row-link {
    cursor: pointer;
    transition: background-color .12s ease;
}
.records-table tbody tr.ap-row-link:hover {
    background-color: #f4f7ff;
}
.records-table tbody tr.ap-row-link:hover td {
    background-color: #f4f7ff;
}

.ap-cancel-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--ap-blue);
    text-decoration: none;
    font-size: 1rem;
}
.ap-cancel-link:hover { text-decoration: none; }


/* ============================================================
   14. AUTH PAGES
   ============================================================ */

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.16), transparent 34%),
        radial-gradient(circle at bottom right, rgba(111, 66, 193, 0.14), transparent 30%),
        linear-gradient(135deg, #f8f9fa 0%, #eef3ff 48%, #f8f9fa 100%);
}

.login-shell {
    min-height: 100vh;
}

.login-panel {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 1.25rem;
    box-shadow: 0 1rem 3rem rgba(33, 37, 41, 0.12);
    overflow: hidden;
}

/* Left gradient pane on login/register */
.side-pane {
    background: linear-gradient(160deg, #0b3a8f 0%, #0d6efd 42%, #6f42c1 100%);
    color: #fff;
    position: relative;
    isolation: isolate;
}

.side-pane::before,
.side-pane::after {
    content: "";
    position: absolute;
    border-radius: var(--ap-radius-circle);
    filter: blur(6px);
    opacity: 0.28;
    z-index: -1;
}

.side-pane::before {
    width: 14rem;
    height: 14rem;
    background: #fff;
    top: -4rem;
    right: -3rem;
}

.side-pane::after {
    width: 11rem;
    height: 11rem;
    background: #cfe2ff;
    bottom: -3rem;
    left: -2rem;
}

.side-pane .brand-mark {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0d6efd 0%, #6f42c1 100%);
    color: #fff;
    font-size: 1.55rem;
    box-shadow: 0 0.75rem 1.5rem rgba(13, 110, 253, 0.22);
}

.feature-chip {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    .side-pane {
        min-height: 240px;
    }
}


/* ============================================================
   15. DISPLAY SCALE / TYPOGRAPHY
   ============================================================ */

/* Scale mode definitions */
html.ap-scale-standard {
    font-size: 16px;
    --ap-scale-font: 1;
    --ap-scale-space: 1;
}

html.ap-scale-large {
    font-size: 17px;
    --ap-scale-font: 1.0625;
    --ap-scale-space: 1.0625;
}

html.ap-scale-extra-large {
    font-size: 18px;
    --ap-scale-font: 1.125;
    --ap-scale-space: 1.125;
}

/* Page title */
.page-title,
.hero-title,
.hero-stat {
    font-size: 1.75rem;
}

/* Card titles and primary nav links */
.card-title,
.nav-link-ap {
    font-size: 1.1rem;
}

/* Card/RTE content areas */
.topbar,
.hero-card,
.section-card,
.mini-card {
    font-size: 1.15rem;
}

/* Plain Bootstrap cards — match body size */
.card-body {
    font-size: 1rem;
}

/* Overview card — consistent with body, not inflated like section-card */
.overview-card,
.overview-divider,
.overview-progress-wrap,
.overview-progress-main,
.overview-progress-headline,
.overview-mini-card {
    font-size: 1rem;
}

/* Spacing scales */
.page-wrap {
    padding: calc(1.75rem * var(--ap-scale-space));
}

.hero-card {
    padding: calc(1.5rem * var(--ap-scale-space));
}

.section-card {
    padding: calc(1.25rem * var(--ap-scale-space));
}

.mini-card {
    padding: calc(1rem * var(--ap-scale-space));
}

/* Overview body text */
.overview-copy,
.overview-body,
.overview-body p,
.overview-body div,
.overview-body li,
.overview-lead,
.overview-subtext,
.overview-divider {
    font-size: 1rem;
}

/* Card subtitles and body text */
.card-title + p,
.card-title + .text-muted,
p.text-muted {
    font-size: 1rem;
}

/* Section card prose — reset from container inheritance back to body size */
.section-card p,
.section-card li,
.section-card ul,
.section-card ol {
    font-size: 1rem;
}

/* Section card headings */
.section-card h2 { font-size: 1.4rem; }
.section-card h3 { font-size: 1.2rem; }
.section-card h4 { font-size: 1.05rem; }
.section-card h5 { font-size: 0.975rem; }
.section-card h6 { font-size: 0.875rem; }

/* Form controls and buttons */
.form-control,
.form-select,
.input-group-text,
.input-group-lg .form-control,
.input-group-lg .form-select,
.input-group-lg .input-group-text,
.ap-switch-panel,
.ap-rte-toolbar,
.records-table,
.alert {
    font-size: 1rem;
}

/* Help text below fields */
.form-text {
    font-size: 0.875rem;
    color: var(--bs-tertiary-color, #9aa0ac);
}

/* Labels and meta text */
.form-label,
.overview-card-label,
.status-meta,
.status-chip,
.sidebar-footer-label,
.eyebrow {
    font-size: 0.8rem;
}

/* Overview card footer meta text */
.overview-card-meta {
    font-size: 0.875rem;
}

/* Help/secure notes */
.secure-note {
    font-size: 0.9rem;
}

/* Progress bar meta items */
.overview-progress-meta-item {
    font-size: 0.9rem;
}

/* Progress bar values and overview card values */
.overview-card-value,
.overview-progress-percent {
    font-size: 1.05rem;
}

/* Progress bar numbers */
.overview-progress-meta-number {
    font-size: 1.2rem;
}

/* Large counter numbers (index/list pages counter mode) */
.ap-counter-number {
    font-size: 2.2rem;
}



/* ============================================================
   16. DASHBOARD
   ============================================================ */

.db-wrap { }

/* Hero — Owner */
/* ── Dashboard Hero Panel (split-panel: tinted left / white right) ─────────── */
.db-hero-panel {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #F9F9FB 0%, #F1F1F5 100%);
    border: 0.5px solid #e0ddf5;
    border-radius: var(--ap-radius-card);
    margin-bottom: 1.75rem;
    /* Note: no overflow:hidden — the Preview Mode popover anchors to the
       chip inside this panel and must be allowed to extend below it.
       The tinted left panel uses matching border-radius below so its
       corners still align with the outer rounded edges. */
    /* position+z-index lift the entire panel (and its absolutely-positioned
       popover child) above later siblings like .db-section-card and
       .db-next-step, which each get their own stacking context from the
       transform-based entrance animations and would otherwise paint over
       the popover. */
    position: relative;
    z-index: 50;
}

/* ── Getting Started flash banner (sits under hero until setup is done) ───── */
.db-gs-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(100deg, #EBE8FE 0%, #DEDAFB 55%, #CFC8F7 100%);
    border: 1px solid #BDB4F0;
    border-left: 6px solid #3C3489;
    border-radius: var(--ap-radius-card);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 2px 6px rgba(60,52,137,.12);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.db-gs-banner:hover {
    box-shadow: 0 6px 18px rgba(60,52,137,.20);
    text-decoration: none;
    color: inherit;
}
.db-gs-banner-icon {
    flex-shrink: 0;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: #3C3489;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 4px 12px rgba(60,52,137,.35);
    animation: db-gs-rocket-float 2.6s ease-in-out infinite;
}
.db-gs-banner-icon i {
    animation: db-gs-rocket-wobble 2.6s ease-in-out infinite;
    display: inline-block;
}
@keyframes db-gs-rocket-float {
    0%, 100% { transform: translateY(0); box-shadow: 0 4px 12px rgba(60,52,137,.35); }
    50%      { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(60,52,137,.45); }
}
@keyframes db-gs-rocket-wobble {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .db-gs-banner-icon,
    .db-gs-banner-icon i { animation: none; }
}
.db-gs-banner-body { flex: 1; min-width: 0; }
.db-gs-banner-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: #2A2370;
    margin: 0 0 .15rem;
    line-height: 1.3;
}
.db-gs-banner-sub {
    font-size: .88rem;
    color: #4A4180;
    margin: 0 0 .55rem;
    line-height: 1.5;
}
.db-gs-banner-progress-row {
    display: flex; align-items: center; gap: .75rem;
    max-width: 540px;
}
.db-gs-banner-track {
    flex: 1;
    height: 8px;
    background: rgba(60,52,137,.18);
    border-radius: var(--ap-radius-bar, 6px);
    overflow: hidden;
}
.db-gs-banner-fill {
    height: 100%;
    background: linear-gradient(90deg, #534AB7 0%, #3C3489 100%);
    border-radius: var(--ap-radius-bar, 6px);
    transition: width .6s ease;
}
.db-gs-banner-count {
    font-size: .8rem;
    font-weight: 600;
    color: #2A2370;
    white-space: nowrap;
}
.db-gs-banner-cta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .4rem;
    background: #3C3489;
    color: #fff;
    border-radius: var(--ap-radius-pill, 999px);
    padding: .7rem 1.35rem;
    font-size: .92rem;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(60,52,137,.35);
    transition: background .15s ease;
}
.db-gs-banner:hover .db-gs-banner-cta { background: #2A2370; }
.db-gs-banner-cta i { font-size: 1.1rem; }
@media (max-width: 720px) {
    .db-gs-banner { flex-wrap: wrap; }
    .db-gs-banner-cta { width: 100%; justify-content: center; }
    .db-gs-banner-progress-row { max-width: none; }
}


/* ── Preview Mode chip + popover (Dashboard hero actions) ────────────────── */
.db-preview-wrap {
    position: relative;
    display: inline-block;
    /* Lift the entire wrap (chip + popover) above later dashboard content
       like the Suggested Next Steps section card, which otherwise paints
       over the popover due to source order. */
    z-index: 100;
}
.db-preview-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #534AB7;
    color: #fff;
    border: 0;
    border-radius: var(--ap-radius-pill, 999px);
    padding: .35rem .95rem .35rem .85rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(83,74,183,.2);
    transition: background .15s ease;
}
.db-preview-chip:hover, .db-preview-chip.is-open { background: #3C3489; }
.db-preview-chip i { font-size: 1rem; }
.db-preview-chip-caret {
    margin-left: .1rem;
}
.db-preview-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 0.5px solid #d8d5f5;
    border-radius: var(--ap-radius-card);
    box-shadow: 0 10px 30px rgba(60,52,137,.18);
    padding: 1rem 1.1rem 1.1rem;
    z-index: 100;
}
.db-preview-popover::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 32px;
    transform: rotate(45deg);
    width: 14px; height: 14px;
    background: #fff;
    border-top: 0.5px solid #d8d5f5;
    border-left: 0.5px solid #d8d5f5;
}
.db-preview-popover[hidden] { display: none; }
.db-preview-popover-title {
    color: #3C3489;
    font-weight: 600;
    font-size: .92rem;
    margin: 0 0 .25rem;
    line-height: 1.35;
}
.db-preview-popover-sub {
    color: #6c757d;
    font-size: .82rem;
    line-height: 1.45;
    margin: 0 0 .85rem;
}
.db-preview-popover-choices {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.db-preview-choice-btn {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    text-align: left;
    background: #fafafe;
    border: 0.5px solid #d8d5f5;
    border-radius: 8px;
    padding: .7rem .9rem;
    font-size: .9rem;
    color: #1a1535;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.db-preview-choice-btn:hover {
    border-color: #534AB7;
    background: #EEEDFE;
}
.db-preview-choice-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #EEEDFE;
    color: #534AB7;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.db-preview-choice-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}
.db-preview-choice-label {
    font-weight: 600;
    color: #3C3489;
    font-size: .9rem;
    line-height: 1.2;
    margin-bottom: .1rem;
}
.db-preview-choice-desc {
    color: #6c757d;
    font-size: .78rem;
    line-height: 1.4;
}
.db-hero-panel-left {
    width: 190px;
    flex-shrink: 0;
    background: #EEEDFE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 14px;
    border-right: 0.5px solid #d8d5f5;
    border-top-left-radius: var(--ap-radius-card);
    border-bottom-left-radius: var(--ap-radius-card);
}
.db-hero-panel-avatar {
    width: 114px;
    height: 114px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #d8d5f5;
}
.db-hero-panel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.db-hero-panel-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #CECBF6;
    font-size: 2.2rem;
    font-weight: 500;
    color: #3C3489;
}
.db-hero-panel-owner-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: #3C3489;
    text-align: center;
    margin: 0;
    line-height: 1.3;
}
.db-hero-panel-owner-sub {
    display: none;
}
.db-hero-panel-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 32px;
    min-width: 0;
}
.db-hero-panel-ring-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 24px 32px 24px 0;
}
.db-owner-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--purple, #534AB7);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.4rem 0.85rem;
    border: 1px solid #d6cffa;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(60, 52, 137, 0.06);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.db-owner-guide-link:hover {
    color: #fff;
    background: #3C3489;
    border-color: #3C3489;
    text-decoration: none;
}
.db-owner-guide-link i { font-size: 1rem; }
.db-hero-panel-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}
.db-hero-panel-name {
    font-size: 1.9rem;
    font-weight: 300;
    margin: 0 0 6px;
    color: #1a1535;
    line-height: 1.15;
}
.db-hero-panel-sub {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}
.db-hero-panel-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82em;
    font-weight: 400;
    color: #3C3489;
    background: #EEEDFE;
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 12px;
    width: fit-content;
}
.db-hero-panel-role-badge i {
    font-size: 1em;
    color: #7F77DD;
}
.db-hero-panel-perm-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-hero-panel-pill {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
}
.db-hero-panel-pill-section {
    background: #EEEDFE;
    color: #3C3489;
}
.db-hero-panel-pill-special {
    background: #EAF3DE;
    color: #3B6D11;
}

/* Completion ring — now sits on white bg */
.db-completion-ring {
    position: relative;
    flex-shrink: 0;
    width: 110px;
    height: 110px;
}
.db-ring-svg {
    width: 110px;
    height: 110px;
    transform: rotate(-90deg);
}
.db-ring-bg { fill: none; stroke: #e8e5f5; stroke-width: 6; }
.db-ring-fill {
    fill: none;
    stroke: #7F77DD;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dasharray 1.2s ease;
}
.db-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.db-ring-pct { font-size: 1.2rem; font-weight: 500; color: #3C3489; line-height: 1; }
.db-ring-sub { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.08em; }

/* Section cards */
.db-section-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--ap-radius-card);
    border: 1px solid rgba(0,0,0,0.07);
    padding: 1.35rem 1.5rem 1.15rem;
    transition: transform 0.18s, box-shadow 0.18s;
    height: 100%;
    cursor: pointer;
    text-decoration: none !important;
}
.db-section-card:hover { transform: translateY(-3px); }
.db-card-muted { opacity: 0.45; cursor: default; background: #f8f9fa; }
.db-card-muted:hover { transform: none; box-shadow: none; }
.db-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.db-card-icon {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.db-card-title { font-size: 1.1rem; font-weight: 500; color: #1a2540; }
.db-card-metric { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.4rem; }
.db-card-value { font-size: 1.85rem; font-weight: 600; line-height: 1; color: #1a2540; letter-spacing: -0.02em; }
.db-card-stat { font-size: 0.82rem; color: #6c757d; margin-bottom: 0.9rem; flex: 1; min-height: 1.1rem; }
/* 4-column card grid */
@media (min-width: 1200px) {
    .db-cards-5col > [class*="col"] { flex: 0 0 25%; max-width: 25%; }
}
.db-card-stat .db-fm-stat { display: inline-flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.db-card-stat .db-fm-num { font-size: 1.5rem; font-weight: 700; color: #1a2540; line-height: 1.1; }
.db-card-stat .db-fm-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; margin-top: 0.15rem; }
.db-card-stat .db-fm-divider { width: 1px; background: #e0ddf5; align-self: stretch; margin: 0 0.15rem; flex-shrink: 0; }
.db-card-stat:has(.db-fm-stat) { display: flex; align-items: center; padding: 0.5rem 0; margin-bottom: 0.75rem; }
.db-card-bar { height: 6px; background: rgba(0,0,0,0.07); border-radius: var(--ap-radius-bar); overflow: hidden; margin-top: auto; }
.db-card-bar-fill { height: 100%; border-radius: var(--ap-radius-bar); transition: width 1s ease; }

.db-card-indigo { background: rgba(67,56,202,0.07); }
.db-card-indigo .db-card-icon { background: rgba(67,56,202,0.12); color: #4338ca; }
.db-card-indigo .db-card-bar-fill { background: linear-gradient(90deg,#4338ca,#6366f1); }
.db-card-indigo:hover { border-color: rgba(67,56,202,0.25); box-shadow: 0 16px 40px rgba(67,56,202,0.12); }
.db-card-purple { background: rgba(111,66,193,0.07); }
.db-card-purple .db-card-icon { background: rgba(111,66,193,0.12); color: #6f42c1; }
.db-card-purple .db-card-bar-fill { background: linear-gradient(90deg,#6f42c1,#8b5cf6); }
.db-card-purple:hover { border-color: rgba(111,66,193,0.25); box-shadow: 0 16px 40px rgba(111,66,193,0.12); }

.db-card-blue { background: rgba(59,111,216,0.07); }
.db-card-blue .db-card-icon { background: rgba(59,111,216,0.12); color: #3b6fd8; }
.db-card-blue .db-card-bar-fill { background: linear-gradient(90deg,#3b6fd8,#5a8dee); }
.db-card-blue:hover { border-color: rgba(59,111,216,0.25); box-shadow: 0 16px 40px rgba(59,111,216,0.12); }

.db-card-teal { background: rgba(13,110,86,0.07); }
.db-card-teal .db-card-icon { background: rgba(13,110,86,0.12); color: #0d6e56; }
.db-card-teal .db-card-bar-fill { background: linear-gradient(90deg,#0d6e56,#1d9e75); }
.db-card-teal:hover { border-color: rgba(13,110,86,0.25); box-shadow: 0 16px 40px rgba(13,110,86,0.12); }

.db-card-coral { background: rgba(216,90,48,0.07); }
.db-card-coral .db-card-icon { background: rgba(216,90,48,0.12); color: #d85a30; }
.db-card-coral .db-card-bar-fill { background: linear-gradient(90deg,#d85a30,#ef9f27); }
.db-card-coral:hover { border-color: rgba(216,90,48,0.25); box-shadow: 0 16px 40px rgba(216,90,48,0.12); }

.db-card-green { background: rgba(25,135,84,0.07); }
.db-card-green .db-card-icon { background: rgba(25,135,84,0.12); color: #198754; }
.db-card-green .db-card-bar-fill { background: linear-gradient(90deg,#198754,#20c997); }
.db-card-green:hover { border-color: rgba(25,135,84,0.25); box-shadow: 0 16px 40px rgba(25,135,84,0.12); }

.db-card-muted .db-card-icon { background: rgba(0,0,0,0.05); color: #adb5bd; }
.db-card-muted .db-card-bar-fill { background: #dee2e6; }

/* Next steps */
.db-next-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(0,0,0,0.07);
    color: #1a2540;
    font-size: 0.95rem;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.db-next-step:hover {
    background: rgba(59,111,216,0.05);
    border-color: rgba(59,111,216,0.2);
    color: #3b6fd8;
    transform: translateX(4px);
}
.db-next-icon { font-size: 1.25rem; color: #3b6fd8; flex-shrink: 0; }

/* Letter attention card — dashboard warning for misconfigured letters */
.db-letter-attention-card {
    background: #fffbf0;
    border: 1px solid #f5d87a !important;
}

.db-letter-attention-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.db-letter-attention-icon {
    font-size: 1.25rem;
    color: #b8860b;
    flex-shrink: 0;
}

.db-letter-attention-card .card-title {
    color: #7a5c00;
    font-size: 1rem;
}

.db-letter-attention-group-label {
    font-size: 0.78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #a07800;
}

.db-letter-attention-group-divided {
    border-top: 1px solid #f5d87a;
    padding-top: 1rem;
    margin-top: 0.25rem;
}

.db-letter-attention-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(181,134,11,0.18);
    color: #435971;
    font-size: 0.925rem;
    transition: background 0.15s, border-color 0.15s;
}

.db-letter-attention-row:hover {
    background: rgba(245,216,122,0.25);
    border-color: rgba(181,134,11,0.35);
    color: #1a2540;
}

.db-letter-attention-row-icon {
    font-size: 1rem;
    color: #b8860b;
    flex-shrink: 0;
}

.db-letter-attention-row-name {
    flex: 1;
    font-weight: 400;
}

.db-letter-attention-row-note {
    font-size: 0.8rem;
    color: #a07800;
    flex-shrink: 0;
}

.db-ap-phase-row td { padding: 0.4rem 1rem 0.2rem; background: rgba(0,0,0,0.02); border-bottom: 0.5px solid rgba(0,0,0,0.06) !important; }
.db-ap-phase-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; }
.db-ap-node-row td { padding: 0.6rem 1rem; }
.db-ap-check { width: 15px; height: 15px; cursor: pointer; accent-color: #6f42c1; flex-shrink: 0; }

.db-table-panel-card {
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius-card) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,0.08) !important;
}

.db-st-panel-link { font-size: 0.78rem; color: #6c757d; display: flex; align-items: center; gap: 0.2rem; }
.db-st-panel-link:hover { color: #6f42c1; }
.db-st-step-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(25,135,84,0.12); color: #198754; font-size: 0.85rem; }
.db-st-step-todo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #ced4da; font-size: 1rem; }
.db-st-step-auto { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #6f42c1; font-size: 1rem; }
.db-st-pill-auto { background: rgba(111,66,193,0.1); color: #6f42c1; }

/* Dashboard stat strip */
.db-stat-strip {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: var(--ap-radius-card);
    padding: 0.9rem 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.db-stat-strip-item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex: 1;
    justify-content: center;
}
.db-stat-strip-num {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a2540;
    line-height: 1;
    letter-spacing: -0.02em;
}
.db-stat-strip-label {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
}
.db-stat-strip-div {
    width: 1px;
    height: 2rem;
    background: rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.ap-mobile-notice {
    background: #fff8e1;
    border-bottom: 1px solid #ffe082;
    color: #795548;
    font-size: 0.85rem;
    padding: 0.65rem 1.25rem;
    text-align: center;
}
@media (max-width: 767.98px) {
    .db-stat-strip {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }
    .db-stat-strip-item {
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: flex-start;
    }
    .db-stat-strip-div { display: none; }
}

/* Dashboard summary tables */
.db-table-panel-card .table-responsive {
    overflow-x: hidden;
}
.db-table-panel-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.db-table-panel-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6c757d;
}
.db-summary-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 0.6rem 1rem;
    background: transparent;
}
.db-summary-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.db-summary-table tbody td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    border: 0;
    font-size: 0.875rem;
}
.db-st-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    overflow: hidden;
}
.db-fin-chips-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin-top: 4px;
}
.db-st-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.db-st-label {
    font-weight: 400;
    color: #1a2540;
    font-size: calc(0.875rem * var(--ap-scale-font, 1));
    min-width: 0;
}
a.db-st-label:hover { color: #6f42c1; }
.db-st-count {
    font-weight: 400;
    color: #1a2540;
    font-size: calc(0.9rem * var(--ap-scale-font, 1));
}
.db-st-pct { font-weight: 400; color: var(--ap-purple); }
.db-st-zero { color: #ced4da; font-weight: 400; }

.db-fin-sep {
    font-size: .75rem;
    color: var(--ap-muted);
    margin: 0 2px;
}
.db-fin-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--ap-radius-pill);
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
}
.db-fin-chip-income { background: #E1F5EE; color: #0F6E56; }
.db-fin-chip-liab   { background: #FCEBEB; color: #A32D2D; }
.db-fin-chip-net    { background: #EEEDFE; color: #3C3489; }
.db-fin-chip-net-neg { background: #FCEBEB; color: #A32D2D; }
.db-st-progress-cell { min-width: 9em; }
.db-st-bar-wrap {
    height: 6px;
    background: rgba(0,0,0,0.07);
    border-radius: var(--ap-radius-bar);
    overflow: hidden;
    width: 90px;
}
.db-st-bar-fill {
    height: 100%;
    border-radius: var(--ap-radius-bar);
    transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
}
.db-st-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
    border-radius: var(--ap-radius-pill);
    white-space: nowrap;
}
.db-st-pill-done { background: rgba(25,135,84,0.1); color: #198754; }
.db-st-pill-empty { background: rgba(0,0,0,0.05); color: #9ca3af; }
.db-st-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(111,66,193,0.1);
    color: #6f42c1;
    font-size: 0.75rem;
    font-weight: 600;
}
.db-st-step-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a2540;
    font-size: 0.875rem;
    font-weight: 500;
}
.db-st-step-label:hover { color: #6f42c1; }
.db-st-step-icon { font-size: 1rem; color: #3b6fd8; flex-shrink: 0; }
.db-st-arrow { font-size: 1.1rem; color: #ced4da; }
.db-st-step-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(25,135,84,0.15);
    color: #198754;
    font-size: 0.85rem;
}
.db-st-row-done td { opacity: 0.55; }
.db-st-step-label { display: flex; align-items: center; gap: 0.6rem; }
.db-st-step-label-done .db-st-step-name { text-decoration: line-through; }
.db-st-step-name { display: block; font-weight: 400; color: #1a2540; font-size: calc(0.875rem * var(--ap-scale-font, 1)); line-height: 1.3; }
.db-st-step-sub { display: block; font-size: 0.75rem; color: #9ca3af; margin-top: 1px; }
.db-st-bar-pct { display: block; font-size: 0.75rem; color: #9ca3af; margin-top: 2px; }
.db-st-all-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}
.db-st-all-done-icon { font-size: 2.5rem; color: #198754; margin-bottom: 0.75rem; }
.db-st-all-done-text { color: #6c757d; font-size: 0.9rem; margin: 0; }
.db-st-nudge-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #854F0B;
    background: #FAEEDA;
    border-radius: 999px;
    padding: 2px 9px;
    margin-top: 4px;
    font-style: normal;
}

/* TU Hero — now uses .db-hero-panel (shared with owner, defined above) */

/* Stat cards (TU) */
.db-stat-card {
    border-radius: var(--ap-radius-card);
    padding: 1.75rem 2rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.db-stat-card::after {
    content: '';
    position: absolute;
    width: 8rem; height: 8rem;
    border-radius: var(--ap-radius-circle);
    background: rgba(255,255,255,0.08);
    bottom: -3rem; right: -2rem;
    pointer-events: none;
}
.db-stat-icon { font-size: 1.75rem; opacity: 0.85; margin-bottom: 0.75rem; }
.db-stat-value { font-size: 2.75rem; font-weight: 300; line-height: 1; margin-bottom: 0.35rem; }
.db-stat-label { font-size: 0.8rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.08em; }
.db-stat-purple { background: linear-gradient(135deg,#5a32a3,#8b5cf6); box-shadow: 0 8px 24px rgba(111,66,193,0.28); }
.db-stat-blue   { background: linear-gradient(135deg,#2a52b0,#5a8dee); box-shadow: 0 8px 24px rgba(59,111,216,0.28); }
.db-stat-teal   { background: linear-gradient(135deg,#0a5542,#1d9e75); box-shadow: 0 8px 24px rgba(13,110,86,0.28); }
.db-stat-coral  { background: linear-gradient(135deg,#b84820,#ef9f27); box-shadow: 0 8px 24px rgba(216,90,48,0.28); }

/* Letters CTA (TU) */
.db-letters-cta {
    background: linear-gradient(135deg,#2a52b0 0%,#6f42c1 100%);
    border-radius: 0.75rem;
    padding: 2rem 2.5rem;
    color: #fff;
    box-shadow: 0 8px 32px rgba(59,111,216,0.25);
}
.db-letters-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.db-letters-cta-title { font-size: 1.3rem; font-weight: 400; margin-bottom: 0.35rem; }
.db-letters-cta-sub { font-size: 0.9rem; opacity: 0.8; }
.db-letters-cta-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s, transform 0.15s;
    text-decoration: none;
}
.db-letters-cta-btn:hover { background: rgba(255,255,255,0.32); color: #fff; transform: translateX(3px); text-decoration: none; }

@media (max-width: 991.98px) {
    .db-hero-panel { flex-direction: column; }
    .db-hero-panel-left { width: 100%; flex-direction: row; justify-content: flex-start; padding: 20px 24px; gap: 16px; border-right: none; border-bottom: 0.5px solid #d8d5f5; }
    .db-hero-panel-owner-name, .db-hero-panel-owner-sub { text-align: left; }
    .db-hero-panel-ring-wrap { padding: 0 24px 24px; }
    .db-letters-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
    .db-summary-table thead th:last-child { display: none; }
    .db-summary-table tbody td:last-child { display: none; }
    .db-st-step-sub::after { content: ''; }
    .db-st-progress-cell { min-width: 0; }
}
/* Coming Soon */
.cs-icon {
    width: 5rem;
    height: 5rem;
    border-radius: var(--ap-radius-circle);
    background: linear-gradient(135deg, rgba(59,111,216,0.1), rgba(111,66,193,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: #3b6fd8;
    margin: 0 auto;
}

/* ============================================================
   17. ANIMATIONS
   ============================================================ */

/* Entrance animation keyframe */
@keyframes apFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Cards start hidden, animate in when JS adds ap-anim-in */
.ap-anim-ready {
    opacity: 0;
    transform: translateY(28px);
}
.ap-anim-in {
    animation: apFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger each card */
.ap-anim-in:nth-child(1)  { animation-delay: 0.05s; }
.ap-anim-in:nth-child(2)  { animation-delay: 0.12s; }
.ap-anim-in:nth-child(3)  { animation-delay: 0.19s; }
.ap-anim-in:nth-child(4)  { animation-delay: 0.26s; }
.ap-anim-in:nth-child(5)  { animation-delay: 0.33s; }
.ap-anim-in:nth-child(6)  { animation-delay: 0.40s; }
.ap-anim-in:nth-child(7)  { animation-delay: 0.47s; }
.ap-anim-in:nth-child(8)  { animation-delay: 0.54s; }
.ap-anim-in:nth-child(9)  { animation-delay: 0.61s; }
.ap-anim-in:nth-child(10) { animation-delay: 0.68s; }

/* Hero and letters CTA always animate as one block */
.db-hero-panel.ap-anim-in,
.db-letters-cta.ap-anim-in {
    animation-delay: 0s;
}

/* Overview progress bar — animates on every page via JS in afterplan.js */
.overview-progress-fill {
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Ring draw transition — override existing shorter one */
.db-ring-fill {
    transition: stroke-dasharray 1.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Reduced motion — kill everything */
@media (prefers-reduced-motion: reduce) {
    .ap-anim-ready,
    .ap-anim-in {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .overview-progress-fill {
        transition: none !important;
    }
    .db-ring-fill {
        transition: none !important;
    }
    .db-card-bar-fill {
        transition: none !important;
    }
}

/* ============================================================
   18. SITE SEARCH
   ============================================================ */

/* ─── Site Search ──────────────────────────────────────────────────────────── */

.ap-site-search {
    position: relative;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.ap-site-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 2.5rem;
    width: 2.5rem;
    background: #f3f4f8;
    border: 1px solid var(--ap-border);
    border-radius: 999px;
    overflow: clip;
    transition: width 0.28s cubic-bezier(.4, 0, .2, 1),
                background 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.ap-site-search.is-expanded .ap-site-search-input-wrap {
    width: 300px;
    background: var(--ap-surface);
    border-color: var(--ap-purple-mid, #534AB7);
    box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.12);
}

.ap-site-search-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ap-muted);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.05rem;
    transition: color 0.15s ease;
}

.ap-site-search-icon:hover,
.ap-site-search.is-expanded .ap-site-search-icon {
    color: var(--ap-purple-mid, #534AB7);
}

.ap-site-search-input {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 2.5rem 0 1.1rem;
    font-size: 0.9rem;
    color: var(--ap-text);
    outline: none;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}

.ap-site-search.is-expanded .ap-site-search-input {
    opacity: 1;
}

.ap-site-search-input::placeholder {
    color: var(--ap-muted);
}

.ap-site-search-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(33, 37, 41, 0.1);
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
    z-index: 9999;
    max-height: 320px;
    overflow-y: auto;
}

.ap-site-search-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    color: var(--ap-text);
    cursor: pointer;
    border-radius: 0.4rem;
    outline: none;
}

.ap-site-search-result:hover,
.ap-site-search-result:focus {
    background: var(--ap-hover-bg, #f4f7ff);
    color: var(--ap-primary);
}

.ap-site-search-result i {
    font-size: 1rem;
    color: var(--ap-muted);
    flex-shrink: 0;
}

.ap-site-search-no-results {
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    color: var(--ap-muted);
}

/* ============================================================
   19. TRIAL & BILLING UI
   ============================================================ */

/* ── Trial badge (dashboard hero) ─────────────────────────────────────────── */
.db-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .75rem;
}
.db-trial-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,159,67,.12);
    color: #c77a00;
    border: 0.5px solid rgba(255,159,67,.35);
    border-radius: var(--ap-radius-timeline-chip);
    padding: .3rem .85rem;
    font-size: .82em;
    font-weight: 400;
}
.db-trial-badge a {
    color: inherit;
    text-decoration: underline;
}
.db-getting-started-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #EEEDFE;
    color: #534AB7;
    border: 0.5px solid #AFA9EC;
    border-radius: var(--ap-radius-timeline-chip);
    padding: .3rem .85rem;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease;
    position: relative;
}
.db-getting-started-pill::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--ap-radius-timeline-chip);
    border: 1.5px solid #534AB7;
    opacity: 0;
    animation: gs-pill-pulse 1.4s ease-out infinite;
}
@keyframes gs-pill-pulse {
    0%   { opacity: 0.7; inset: -2px; }
    100% { opacity: 0; inset: -8px; }
}
.db-getting-started-pill:hover {
    background: #CECBF6;
    color: #3C3489;
}

/* ── Sidebar trial banner ─────────────────────────────────────────────────── */
.sidebar-trial-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .75rem .75rem 0;
    padding: .75rem 1rem;
    background: rgba(255,159,67,.1);
    border: 1px solid rgba(255,159,67,.25);
    border-radius: 0.75rem;
    font-size: .8rem;
}
.sidebar-trial-icon {
    color: #ff9f43;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.sidebar-trial-body {
    flex: 1;
    min-width: 0;
}
.sidebar-trial-title {
    font-weight: 600;
    color: var(--ap-text);
    line-height: 1.2;
}
.sidebar-trial-link {
    color: var(--ap-purple);
    font-size: .75rem;
    text-decoration: none;
}
.sidebar-trial-link:hover {
    text-decoration: underline;
}
.sidebar-trial-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    color: #9a9ab0;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 .25rem;
    line-height: 1;
    flex-shrink: 0;
}
.sidebar-trial-dismiss:hover {
    color: var(--ap-text);
}

/* ============================================================
   20. ACTION PLAN
   ============================================================ */

/* ── Action Plan ──────────────────────────────────────────────────────────── */

/* Hero */
.ap-ap-hero { margin-bottom: 0; }
.ap-ap-eyebrow    { font-size: calc(0.75rem * var(--ap-scale-font, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-ink-muted, #888); margin-bottom: 0.25rem; }
.ap-ap-hero-row   { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.ap-ap-hero-title { font-size: calc(1.5rem * var(--ap-scale-font, 1)); font-weight: 500; color: var(--ap-ink, #1a1a2e); line-height: 1.2; margin: 0; }
.ap-ap-hero-progress-track {
    width: 100%;
    height: 5px;
    background: var(--ap-border-light, #e8e5f0);
    border-radius: var(--ap-radius-bar);
    overflow: hidden;
}
.ap-ap-hero-progress-fill {
    height: 100%;
    background: var(--ap-purple-mid, #534AB7);
    border-radius: var(--ap-radius-bar);
    transition: width 0.6s ease;
}
.ap-ap-hero-progress-label { font-size: calc(0.8rem * var(--ap-scale-font, 1)); color: var(--ap-ink-muted, #888); white-space: nowrap; }

/* ── Timeline container ───────────────────────────────────────────────────── */
.ap-timeline {
    position: relative;
    padding-bottom: 3rem;
}

/* Center vertical line */
.ap-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
    transform: translateX(-50%);
    z-index: 0;
}

/* ── Phase separator ─────────────────────────────────────────────────────── */
.ap-tl-phase-sep {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2.5rem 0 1.75rem;
}
.ap-tl-phase-dot {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ap-radius-circle);
    background: var(--ap-purple, #3C3489);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.2rem * var(--ap-scale-font, 1));
    z-index: 2;
    position: relative;
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(60,52,137,0.15);
}
.ap-tl-phase-label {
    font-weight: 700;
    color: #1a2540;
    margin-top: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: calc(0.78rem * var(--ap-scale-font, 1));
}
.ap-tl-phase-sub {
    font-size: calc(0.75rem * var(--ap-scale-font, 1));
    color: #6c757d;
    margin-top: 0.1rem;
}

/* ── Node rows ───────────────────────────────────────────────────────────── */
.ap-tl-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    z-index: 1;
}

/* Left card: card takes up left half, dot sits on center line */
.ap-tl-left {
    padding-right: calc(50% + 2.5rem);
}

/* Right card: card takes up right half, dot sits on center line */
.ap-tl-right {
    padding-left: calc(50% + 2.5rem);
}

/* Dot on the center line */
.ap-tl-dot {
    position: absolute;
    left: 50%;
    top: 1.25rem;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ap-radius-circle);
    background: #fff;
    border: 2px solid #ced4da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1rem * var(--ap-scale-font, 1));
    color: #6c757d;
    z-index: 2;
    box-shadow: 0 0 0 4px #fff;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ap-tl-dot-done {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}

/* Card */
.ap-tl-card {
    position: relative;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    width: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.ap-tl-card:hover {
    box-shadow: 0 6px 24px rgba(60,52,137,0.09);
    border-color: rgba(60,52,137,0.18);
}
.ap-tl-card-done { background: #f6fff6; border-color: rgba(40,167,69,0.2); opacity: 0.88; }
.ap-tl-card-auto { background: #f8f9ff; border-color: rgba(90,141,238,0.18); }

/* Connector nub from card edge toward center dot */
.ap-tl-left .ap-tl-card::after {
    content: '';
    position: absolute;
    top: 1.75rem;
    right: -2.5rem;
    width: 2.5rem;
    height: 2px;
    background: #e2e8f0;
}
.ap-tl-right .ap-tl-card::after {
    content: '';
    position: absolute;
    top: 1.75rem;
    left: -2.5rem;
    width: 2.5rem;
    height: 2px;
    background: #e2e8f0;
}

/* Card content */
.ap-tl-card-top   { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.ap-tl-card-title { font-weight: 600; color: #1a2540; font-size: calc(0.95rem * var(--ap-scale-font, 1)); }
.ap-tl-card-done .ap-tl-card-title { text-decoration: line-through; color: #6c757d; }
.ap-tl-card-body  { font-size: calc(0.875rem * var(--ap-scale-font, 1)); color: #6c757d; margin-bottom: 0.75rem; }

/* Badges */
.ap-tl-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; flex-shrink: 0; }
.ap-tl-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: calc(0.82rem * var(--ap-scale-font, 1));
    font-weight: 400;
    padding: 0.15rem 0.55rem;
    border-radius: var(--ap-radius-timeline-chip);
}
.ap-tl-badge-data    { background: rgba(60,52,137,0.08); color: var(--ap-purple, #3C3489); }
.ap-tl-badge-empty   { background: rgba(108,117,125,0.08); color: #6c757d; }
.ap-tl-badge-auto    { background: rgba(90,141,238,0.1); color: #3b6fd8; }
@keyframes ap-badge-warning-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185,28,28,0.40); }
    50%       { box-shadow: 0 0 0 9px rgba(185,28,28,0); }
}
.ap-tl-badge-warning {
    background: rgba(192,38,38,0.09);
    color: #b91c1c;
    border: 1px solid rgba(192,38,38,0.22);
    animation: ap-badge-warning-pulse 1.8s ease-in-out infinite;
}

/* Done date */
.ap-tl-done-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: calc(0.78rem * var(--ap-scale-font, 1));
    color: #28a745;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

/* Actions */
.ap-tl-actions { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.ap-tl-check-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: calc(0.8rem * var(--ap-scale-font, 1));
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: var(--ap-radius-timeline-chip);
    border: 1.5px solid #ced4da;
    background: #fff;
    color: #6c757d;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ap-tl-check-btn:hover   { border-color: var(--ap-purple, #3C3489); color: var(--ap-purple, #3C3489); }
.ap-tl-check-btn.checked { background: #28a745; border-color: #28a745; color: #fff; }
.ap-tl-view-link {
    font-size: calc(0.8rem * var(--ap-scale-font, 1));
    color: var(--ap-purple, #3C3489);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.ap-tl-view-link:hover { text-decoration: underline; }
.ap-tl-note-btn {
    font-size: calc(0.8rem * var(--ap-scale-font, 1));
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.ap-tl-note-btn:hover { color: var(--ap-purple, #3C3489); }

/* Note area */
.ap-tl-note-area { margin-top: 0.85rem; }
.ap-tl-note-input {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    font-size: calc(0.875rem * var(--ap-scale-font, 1));
    resize: vertical;
    min-height: 72px;
    font-family: inherit;
    color: #1a2540;
}
.ap-tl-note-input:focus { outline: none; border-color: var(--ap-purple, #3C3489); box-shadow: 0 0 0 3px rgba(60,52,137,0.1); }
.ap-tl-note-footer  { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.ap-tl-note-status  { font-size: calc(0.8rem * var(--ap-scale-font, 1)); color: #6c757d; }
.ap-tl-note-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.65rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: calc(0.82rem * var(--ap-scale-font, 1));
    color: #495057;
}
.ap-tl-note-preview i    { flex-shrink: 0; color: #6c757d; margin-top: 0.1rem; }
.ap-tl-note-preview span { white-space: pre-wrap; word-break: break-word; }

/* ── Scroll-in animation ─────────────────────────────────────────────────── */
.ap-tl-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ap-tl-right { opacity: 0; transform: translateX( 40px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ap-tl-left.ap-tl-visible,
.ap-tl-right.ap-tl-visible { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .ap-tl-left, .ap-tl-right { opacity: 1; transform: none; transition: none; }
}

/* ── End cap ─────────────────────────────────────────────────────────────── */
.ap-tl-end       { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 1.5rem; }
.ap-tl-end-dot {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ap-radius-circle);
    background: var(--ap-purple, #3C3489);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.2rem * var(--ap-scale-font, 1));
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(60,52,137,0.15);
}
.ap-tl-end-label { margin-top: 0.6rem; font-size: calc(0.75rem * var(--ap-scale-font, 1)); color: #6c757d; text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Mobile: collapse to single column ──────────────────────────────────── */
@media (max-width: 767.98px) {
    .ap-timeline::before { left: 1.25rem; }

    .ap-tl-row                 { padding-left: 3.5rem !important; padding-right: 0 !important; }
    .ap-tl-dot                 { left: 1.25rem; top: 1rem; width: 2rem; height: 2rem; font-size: calc(0.85rem * var(--ap-scale-font, 1)); }
    .ap-tl-left .ap-tl-card::after,
    .ap-tl-right .ap-tl-card::after { left: -2.25rem; right: auto; width: 2.25rem; }

    .ap-tl-phase-sep  { align-items: flex-start; padding-left: 3.5rem; }
    .ap-tl-phase-dot  { position: absolute; left: 0; }

    .ap-tl-left  { transform: translateX(-20px); }
    .ap-tl-right { transform: translateX(-20px); }

    .ap-ap-hero-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* Action Plan disclaimer */
.ap-ap-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(60,52,137,0.06);
    border: 1px solid rgba(60,52,137,0.15);
    border-radius: 0.5rem;
    color: #495057;
    font-size: 0.875rem;
    padding: 0.85rem 1.1rem;
}
.ap-ap-disclaimer i {
    color: var(--ap-purple, #3C3489);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* ============================================================
   21. BANNERS & NUDGES
   ============================================================ */

/* ── Owner preview banner ─────────────────────────────────────────────────── */
.owner-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #ff9f43;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.65rem 1.5rem;
    margin: -2px -2px 0 -2px;
    border-radius: var(--ap-radius-banner);
    flex-wrap: wrap;
}
.owner-preview-banner i {
    vertical-align: -2px;
    margin-right: 0.35rem;
}
.owner-preview-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.2);
    border: 1.5px solid rgba(255,255,255,0.7);
    color: #fff;
    border-radius: var(--ap-radius-small);
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.owner-preview-exit-btn:hover {
    background: rgba(255,255,255,0.35);
}
.owner-preview-active .ap-btn-primary {
    display: none !important;
}

/* ── Deletion pending banner ──────────────────────────────────────────────── */
.deletion-pending-banner {
    background: #FCEBEB;
    border-bottom: 1px solid #F09595;
    color: #A32D2D;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-radius: var(--ap-radius-banner);
}
.deletion-pending-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1.5px solid #A32D2D;
    color: #A32D2D;
    border-radius: var(--ap-radius-small);
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.deletion-pending-cancel-btn:hover {
    background: rgba(163,45,45,0.08);
}

/* ── Dashboard deletion pending state ────────────────────────────────────── */
.db-deletion-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    background: #FCEBEB;
    border: 1px solid #F09595;
    border-radius: var(--ap-radius-card);
    margin-bottom: 1.5rem;
}
.db-deletion-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #F7C1C1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.db-deletion-icon i {
    font-size: 1.6rem;
    color: #A32D2D;
}
.db-deletion-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #791F1F;
    margin-bottom: 0.75rem;
}
.db-deletion-body {
    font-size: 0.9rem;
    color: #A32D2D;
    max-width: 480px;
    margin: 0 auto 0.5rem;
    line-height: 1.6;
}
.db-deletion-cancel-btn {
    margin-top: 1.5rem;
    background: #A32D2D;
    color: #fff;
    border: none;
    border-radius: var(--ap-radius-card);
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.db-deletion-cancel-btn:hover {
    background: #791F1F;
}
.db-deletion-note {
    font-size: 0.78rem;
    color: #A32D2D;
    opacity: 0.7;
    margin-top: 1rem;
    margin-bottom: 0;
}


.db-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #EEEDFE;
    border: 1px solid #d8d5f5;
    color: #3C3489;
    border-radius: var(--ap-radius-timeline-chip);
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
}
.db-preview-btn:hover {
    background: #CECBF6;
    border-color: #AFA9EC;
    color: #3C3489;
}

/* ── Emergency Lockout pill (dashboard hero) ──────────────────────────────── */
.db-lockout-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.db-lockout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #FCEBEB;
    border: 1px solid #F7C1C1;
    color: #791F1F;
    border-radius: var(--ap-radius-timeline-chip);
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    line-height: 1.2;
}
.db-lockout-btn:hover,
.db-lockout-btn:focus {
    background: #F7C1C1;
    border-color: #F09595;
    color: #501313;
    outline: none;
}
.db-lockout-btn-confirm {
    background: #A32D2D;
    border-color: #A32D2D;
    color: #fff;
}
.db-lockout-btn-confirm:hover,
.db-lockout-btn-confirm:focus {
    background: #791F1F;
    border-color: #791F1F;
    color: #fff;
}
.db-lockout-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #FCEBEB;
    border: 1px solid #F7C1C1;
    color: #791F1F;
    border-radius: var(--ap-radius-timeline-chip);
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: help;
    line-height: 1.2;
}
.db-lockout-popover {
    --bs-popover-max-width: 320px;
    --bs-popover-border-color: #1a2540;
    --bs-popover-bg: #1a2540;
    --bs-popover-body-color: #e8eaf0;
    --bs-popover-body-padding-x: 0.85rem;
    --bs-popover-body-padding-y: 0.7rem;
    --bs-popover-border-radius: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.5;
}
.db-lockout-popover .popover-header {
    display: none;
}
.db-lockout-popover .popover-body strong {
    color: #fff;
}
.db-lockout-popover .popover-arrow::after {
    border-bottom-color: #1a2540 !important;
    border-top-color: #1a2540 !important;
}

/* ── Action Plan preview-only label ──────────────────────────────────────── */
.ap-tl-preview-only {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #9a9ab0;
    font-style: italic;
}

/* ── Preview button tooltip ───────────────────────────────────────────────── */
.db-preview-tooltip .tooltip-inner {
    max-width: 320px;
    background: #1a2540;
    color: #e8eaf0;
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0.6rem 0.85rem;
    border-radius: 0.4rem;
    text-align: left;
}
.db-preview-tooltip .tooltip-arrow::before {
    border-bottom-color: #1a2540;
}
/* ============================================================
   22. TRUSTED ACCESS & CREDENTIALS
   ============================================================ */

/* ── Access & credentials card ────────────────────────────────────────────── */
.banking-page .card {
    border: 1px solid #e8e5f0 !important;
    border-radius: var(--ap-radius-card) !important;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important;
}

.banking-page .overview-card {
    border-radius: var(--ap-radius-card);
}

.ap-credentials-card,
.banking-page .ap-credentials-card,
.section-card.ap-credentials-card {
    border-left: 3px solid var(--ap-purple) !important;
    border-radius: var(--ap-radius-card) !important;
}

.section-card.ap-credentials-card {
    padding: 0;
    overflow: hidden;
}



/* ── Access & credentials card band ──────────────────────────────────────── */
.ap-creds-band {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--ap-purple-light);
    border-bottom: 1px solid var(--ap-purple-border);
}

.ap-creds-band > i {
    font-size: 1.1rem;
    color: var(--ap-purple-mid);
    margin-top: 1px;
    flex-shrink: 0;
}

.ap-creds-band-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ap-purple-dark);
}

.ap-creds-band-sub {
    font-size: 0.8rem;
    color: var(--ap-purple-mid);
    margin-top: 1px;
}

/* ── Sitewide shadow override — bottom only ───────────────────────────────── */
.shadow-sm,
.card.shadow-sm {
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   23. MY SECTIONS
   ============================================================ */

/* ── My Sections ──────────────────────────────────────────────────────────── */

.ms-sections-notice {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    background: #f0effe;
    border: 1px solid #ddd9fc;
    border-radius: var(--ap-radius-card);
    font-size: .875rem;
    color: var(--ap-purple-dark);
}

/* Group card — each cluster (Personal & Family, Financial, etc.) sits in
   its own white card with a light-purple header bar across the top.    */
.ms-group {
    background: #fff;
    border: 1px solid #ebebf0;
    border-radius: var(--ap-radius-card);
    overflow: clip;
    margin-bottom: .875rem;
}

.ms-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 1rem;
    background: var(--ap-purple-light);
    border-bottom: 1px solid var(--ap-purple-border);
    color: var(--ap-purple-dark);
}

.ms-group-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ms-group-count {
    font-size: .72rem;
    color: var(--ap-purple-mid);
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ms-group-count b {
    color: var(--ap-purple-dark);
    font-weight: 700;
}

/* 3-column grid inside each group card. Vertical dividers appear between
   columns; horizontal dividers between rows. Padding cells fill out the
   final row so dividers stay clean when count isn't a multiple of 3.   */
.ms-sections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

.ms-section-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .875rem;
    background: #fff;
    border-bottom: 1px solid #f2f2f6;
    border-right: 1px solid #f2f2f6;
    transition: background .12s ease;
    min-height: 3.25rem;
    box-sizing: border-box;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.ms-sections-grid > .ms-section-row:nth-child(3n) {
    border-right: none;
}

.ms-section-row:hover {
    background: #faf9ff;
}

.ms-section-row.ms-section-hidden {
    background: #fafafa;
}

.ms-section-row.ms-section-hidden .ms-section-label {
    color: #9a9ab0;
}

.ms-section-row.ms-section-pad {
    cursor: default;
    background: #fff;
}
.ms-section-row.ms-section-pad:hover { background: #fff; }

.ms-section-icon {
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ap-purple-light);
    border-radius: var(--ap-radius-small);
    color: var(--ap-purple-mid);
    font-size: 1rem;
    flex-shrink: 0;
}

.ms-section-row.ms-section-hidden .ms-section-icon {
    background: #f2f2f6;
    color: #b0b0c0;
}

.ms-section-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ap-text);
    transition: color .12s;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .ms-sections-grid { grid-template-columns: repeat(2, 1fr); }
    .ms-sections-grid > .ms-section-row:nth-child(3n) { border-right: 1px solid #f2f2f6; }
    .ms-sections-grid > .ms-section-row:nth-child(2n) { border-right: none; }
}
@media (max-width: 640px) {
    .ms-sections-grid { grid-template-columns: 1fr; }
    .ms-sections-grid > .ms-section-row { border-right: none !important; }
}

.ms-section-toggle {
    display: flex;
    align-items: center;
}

.ms-toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.ms-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ms-toggle-slider {
    display: inline-block;
    width: 2.125rem;
    height: 1.125rem;
    background: #d1d1db;
    border-radius: var(--ap-radius-pill);
    position: relative;
    transition: background .18s ease;
    flex-shrink: 0;
}

.ms-toggle-slider::after {
    content: '';
    position: absolute;
    top: .125rem;
    left: .125rem;
    width: .875rem;
    height: .875rem;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.ms-toggle-input:checked + .ms-toggle-slider {
    background: var(--ap-purple);
}

.ms-toggle-input:checked + .ms-toggle-slider::after {
    transform: translateX(1rem);
}

.ms-section-status {
    flex-shrink: 0;
}

.ms-pill {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .15rem .55rem;
    border-radius: var(--ap-radius-pill);
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}

.ms-pill-active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.ms-pill-hidden {
    background: #f4f4f8;
    color: #9a9ab0;
    border: 1px solid #e2e2ea;
}

/* ── Sidebar hidden-sections pill ────────────────────────────────────────── */

.sidebar-hidden-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .25rem 0;
    padding: .6rem 1rem;
    background: rgba(109, 40, 217, .18);
    border: 1px solid rgba(109, 40, 217, .3);
    border-radius: var(--ap-radius-pill);
    font-size: .8rem;
    font-weight: 600;
    color: #e0d8ff;
    text-decoration: none;
    transition: background .15s ease;
}

.sidebar-hidden-pill:hover {
    background: rgba(109, 40, 217, .18);
    color: #fff;
    text-decoration: none;
}

.sidebar-hidden-pill i {
    font-size: .95rem;
    flex-shrink: 0;
}

/* ============================================================
   24. ENCRYPTED FIELDS
   ============================================================ */

/* Compact 🔒 chip — sits inside an input-group at the left of an encrypted
   field. Tooltip on hover/focus describes Vault-Key protection. */
.ap-enc-badge,
.input-group-lg .ap-enc-badge,
.input-group .input-group-lg .ap-enc-badge,
.input-group-lg .input-group-text.ap-enc-badge {
    background: #EEEDFE;
    border-color: #d8d5f5;
    border-right: 0;
    padding: .375rem .65rem;
    font-size: 1.3rem;
    line-height: 1;
    cursor: help;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
        var(--bs-body-font-family);
}
.ap-enc-badge:hover,
.ap-enc-badge:focus {
    background: #e3e0fa;
    outline: none;
}

.input-group .ap-enc-badge ~ .form-control,
.input-group .ap-enc-badge ~ input.form-control,
.input-group .ap-enc-badge ~ select.form-select {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid #d8d5f5 !important;
    margin-left: 0 !important;
    min-width: 0;
}

/* Narrow-viewport advisory banner — pinned to the top of the authenticated
   app when window.innerWidth < 1280. Tells users on phones/small tablets that
   the app is built for laptops/desktops. Dismissible per session. */
.ap-narrow-banner {
    position: sticky;
    top: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .65rem 3rem .65rem 1rem;
    background: #fef3c7;
    color: #78350f;
    border-bottom: 1px solid #fcd34d;
    font-size: .9rem;
    line-height: 1.35;
    text-align: center;
}
.ap-narrow-banner i {
    font-size: 1.15rem;
    flex-shrink: 0;
}
.ap-narrow-banner-close {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #78350f;
    font-size: 1.5rem;
    line-height: 1;
    padding: .25rem .5rem;
    cursor: pointer;
    border-radius: .25rem;
}
.ap-narrow-banner-close:hover {
    background: rgba(120, 53, 15, 0.1);
}

/* Legend block shown in the overview card to explain the 🔒 pills. */
.ap-enc-legend {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5625rem;
}
.ap-enc-legend-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EEEDFE;
    border: 1px solid #d8d5f5;
    padding: .4rem .7rem;
    border-radius: .375rem;
    font-size: 1.4rem;
    line-height: 1;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
        var(--bs-body-font-family);
}
.ap-enc-legend-title {
    font-weight: 600;
    color: #334155;
    font-size: .9rem;
    line-height: 1.2;
}
.ap-enc-legend-body {
    font-size: .78rem;
    color: #64748b;
    line-height: 1.4;
}

/* Currency input wrapper — fixed "$" overlay inside the input area */
.ap-currency-input {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-width: 0;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.ap-currency-input::before {
    content: "$";
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #495057;
    font-size: 1rem;
    pointer-events: none;
    user-select: none;
    z-index: 4;
}

.ap-currency-input > .form-control {
    padding-left: 1.85rem;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid var(--bs-border-color);
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

.ap-currency-input > .form-control-lg {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}


.input-group:has(input[type="url"]) {
    position: relative;
}
.ap-url-open-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s;
    text-decoration: none;
}
.ap-url-open-btn:hover {
    color: var(--ap-purple);
}
.input-group input[type="url"].form-control {
    padding-right: 2.25rem;
    border-top-right-radius: var(--ap-radius-card) !important;
    border-bottom-right-radius: var(--ap-radius-card) !important;
}


input.form-control.ap-locked-input[disabled] {
    background-color: #f3f4f6;
    color: #6c757d;
}

.ap-rte-locked {
    pointer-events: none;
    user-select: none;
}
.ap-rte-locked .ap-rte-shell {
    background-color: #f3f4f6;
}
.ap-rte-locked .ap-rte-toolbar {
    opacity: 0.55;
}
.ap-rte-locked .ap-rte-button {
    cursor: not-allowed;
}
.ap-rte-locked .ap-rte-editor {
    background-color: transparent;
    color: #6c757d;
}


/* ============================================================
   25. INCAPACITATION
   ============================================================ */

/* ── Incapacitation: limited-view notice (TU dashboard banner) ─────────────── */

.db-incap-notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #E6F1FB;
    border-left: 4px solid #185FA5;
    border-radius: 0 var(--ap-radius-card) var(--ap-radius-card) 0;
}

.db-incap-notice-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ap-radius-circle);
    background: #B5D4F4;
    color: #0C447C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.db-incap-notice-body {
    flex: 1;
    min-width: 0;
}

.db-incap-notice-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0C447C;
    margin: 0 0 .35rem;
}

.db-incap-notice-text {
    font-size: .9rem;
    color: #185FA5;
    line-height: 1.55;
    margin: 0;
}

/* ── Incapacitation: sidebar limited-view pill ─────────────────────────────── */

.sidebar-incap-pill {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .25rem 0;
    padding: .55rem .85rem;
    background: rgba(91, 156, 235, .18);
    border: 1px solid rgba(181, 212, 244, .35);
    border-radius: var(--ap-radius-card);
    color: #e0ecff;
    text-decoration: none;
    transition: background .15s ease;
}

.sidebar-incap-pill:hover {
    background: rgba(91, 156, 235, .28);
    color: #fff;
    text-decoration: none;
}

.sidebar-incap-pill > i {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.sidebar-incap-pill-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.sidebar-incap-pill-title {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
}

.sidebar-incap-pill-link {
    font-size: .72rem;
    opacity: .85;
    line-height: 1.2;
}

/* ============================================================
   26. PRINT
   ============================================================ */

/* ── Dashboard hero: "Preview {Name}:" label sitting before the two preview buttons ── */

.db-preview-label {
    font-size: .82rem;
    font-weight: 500;
    color: #534AB7;
    margin-left: .25rem;
    align-self: center;
}

/* ── Floating Font-Scale Pill (right edge, below print pill) ─────────────── */

.ap-scale-edge-pill {
    position: fixed;
    right: 0;
    top: 156px; /* 90px print top + 56px print height + 10px gap */
    z-index: 1079;
    display: flex;
    align-items: center;
    pointer-events: none;
    transform: translateZ(0); /* force own compositing layer above backdrop-filter panel */
}

.ap-scale-edge-pill-inner {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.96);
    width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(83, 74, 183, 0.22);
    border-right: none;
    border-radius: 14px 0 0 14px;
    box-shadow: -3px 4px 14px rgba(83, 74, 183, 0.12);
    padding: 10px 0;
    gap: 4px;
}

@media (max-width: 767.98px) {
    .ap-scale-edge-pill { display: none; }
}

/* ── Backup Status Street Light (right edge, below font-scale pill) ──────── */
/* 156px scale-pill top + 124px scale-pill height + 10px gap = 290px         */

.ap-backup-pill {
    position: fixed;
    right: 0;
    top: 346px;
    z-index: 1078;
    display: flex;
    align-items: center;
    pointer-events: none;
    transform: translateX(110%) translateZ(0); /* hidden off-screen; also forces own compositing layer */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.ap-backup-pill.ap-backup-visible {
    transform: translateX(0) translateZ(0);
}

.ap-backup-pill-inner {
    pointer-events: auto;
    background: #2d2d2d;
    width: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 14px 0 0 14px;
    box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.3);
    padding: 13px 0;
    gap: 10px;
    cursor: pointer;
}

.ap-backup-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.ap-backup-dot--red    { background: #3d1a1a; }
.ap-backup-dot--yellow { background: #3d3800; }
.ap-backup-dot--green  { background: #3d4a1a; }

.ap-backup-dot--red.ap-backup-dot--active    { background: #dc2626; box-shadow: 0 0 6px rgba(220, 38, 38, .75); animation: apBackupPulseRed    4s ease-in-out infinite; }
.ap-backup-dot--yellow.ap-backup-dot--active { background: #eab308; box-shadow: 0 0 6px rgba(234, 179, 8, .75);  animation: apBackupPulseYellow 4s ease-in-out infinite; }
.ap-backup-dot--green.ap-backup-dot--active  { background: #16a34a; box-shadow: 0 0 6px rgba(22, 163, 74, .75); }

@keyframes apBackupPulseYellow {
    0%, 100% { box-shadow: 0 0 4px rgba(234, 179, 8, .4);  transform: scale(1);    }
    50%       { box-shadow: 0 0 18px rgba(234, 179, 8, 1);  transform: scale(1.15); }
}
@keyframes apBackupPulseRed {
    0%, 100% { box-shadow: 0 0 4px rgba(220, 38, 38, .4);  transform: scale(1);    }
    50%       { box-shadow: 0 0 18px rgba(220, 38, 38, 1);  transform: scale(1.15); }
}

@media (max-width: 767.98px) {
    .ap-backup-pill { display: none; }
}

/* ── Backup Hover Hint ───────────────────────────────────────────────────── */

.ap-backup-hint {
    position: fixed;
    right: 62px; /* 52px pill + 10px gap */
    top: 346px;
    z-index: 1077;
    width: 230px;
    background: #1a1a2e;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    padding: 14px 16px 12px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    pointer-events: none;
}

.ap-backup-hint-title {
    font-size: 0.82rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 6px;
}

.ap-backup-hint::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 20px;
    width: 12px;
    height: 12px;
    background: #1a1a2e;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (max-width: 767.98px) { .ap-backup-hint { display: none; } }

/* ── Dashboard panel ratio shift at extra-large font scale ─────────────── */
html[data-ap-scale="extra-large"] .db-sections-panel {
    flex: 0 0 auto;
    width: 58.333333%; /* col-lg-7 equivalent */
}
html[data-ap-scale="extra-large"] .db-steps-panel {
    flex: 0 0 auto;
    width: 41.666667%; /* col-lg-5 equivalent */
}

/* ── Text Size Onboarding Hint ───────────────────────────────────────────── */

.ap-scale-hint {
    position: fixed;
    right: 62px;
    top: 148px;
    z-index: 1078;
    width: 220px;
    background: var(--ap-purple-mid, #534AB7);
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(83, 74, 183, 0.35);
    padding: 14px 16px 12px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    animation: apScaleHintIn 0.22s ease;
}

.ap-scale-hint::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 28px;
    width: 12px;
    height: 12px;
    background: var(--ap-purple-mid, #534AB7);
    border: none;
    transform: rotate(45deg);
}

.ap-scale-hint-title {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ap-scale-hint-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0;
}
.ap-scale-hint-close:hover { color: #fff; }

@keyframes apScaleHintIn {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Floating Print Pill ─────────────────────────────────────────────────── */
/* Right-edge anchored, vertically centered. Only rendered when the page is
   in the print registry AND the viewer is allowed to print (PTP after
   passing, or admin impersonating). */

.ap-print-pill {
    position: fixed;
    right: 0;
    top: 90px;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0;
    pointer-events: none;
    transform: translateZ(0); /* force own compositing layer above backdrop-filter panel */
}

.ap-print-pill-btn {
    pointer-events: auto;
    background: #534AB7;
    color: #fff;
    width: 52px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 14px 0 0 14px;
    box-shadow: 0 6px 18px rgba(83, 74, 183, 0.35);
    text-decoration: none;
    transition: background 0.15s ease, width 0.18s ease;
    cursor: pointer;
}

.ap-print-pill-btn:hover,
.ap-print-pill-btn:focus-visible {
    background: #3C3489;
    color: #fff;
    text-decoration: none;
    outline: none;
}

.ap-print-pill-btn i.bx {
    font-size: 24px;
    line-height: 1;
}

.ap-print-pill-tooltip {
    pointer-events: none;
    background: #1a1a2e;
    color: #fff;
    padding: 9px 14px;
    border-radius: 8px 0 0 8px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 4px 12px rgba(26, 26, 46, 0.18);
    max-width: 220px;
    margin-right: -2px;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ap-print-pill-tooltip-title {
    font-weight: 500;
    margin-bottom: 1px;
}

.ap-print-pill-tooltip-sub {
    color: #b8b6c8;
    font-size: 11px;
}

.ap-print-pill:hover .ap-print-pill-tooltip,
.ap-print-pill:focus-within .ap-print-pill-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Hide on small screens — pill would crowd the content. */
@media (max-width: 767.98px) {
    .ap-print-pill {
        display: none;
    }
}

/* ── Print Chooser Modal ─────────────────────────────────────────────────── */

.ap-print-modal {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: 'IBM Plex Sans', sans-serif;
}
.ap-print-modal[hidden] {
    display: none;
}

.ap-print-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 46, 0.45);
    backdrop-filter: blur(2px);
}

.ap-print-modal-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px 22px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.ap-print-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}
.ap-print-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #EEEDFE;
    color: #534AB7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ap-print-modal-icon i.bx { font-size: 20px; }
.ap-print-modal-titles { min-width: 0; }
.ap-print-modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a2e;
    line-height: 1.3;
}
.ap-print-modal-sub {
    font-size: 12px;
    color: #6c6c84;
    margin-top: 2px;
}

.ap-print-modal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ap-print-modal-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #d8d5f0;
    background: #fafbff;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    width: 100%;
}
.ap-print-modal-option:hover,
.ap-print-modal-option:focus-visible {
    background: #f3f1fb;
    border-color: #534AB7;
    outline: none;
}
.ap-print-modal-option-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.ap-print-modal-option-icon--save  { background: #534AB7; }
.ap-print-modal-option-icon--print { background: #1a1a2e; }
.ap-print-modal-option-icon i.bx { font-size: 17px; }

.ap-print-modal-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ap-print-modal-option-title {
    font-size: 13.5px;
    font-weight: 500;
    color: #1a1a2e;
}
.ap-print-modal-option-sub {
    font-size: 11.5px;
    color: #6c6c84;
}

.ap-print-modal-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0eef7;
}
.ap-print-modal-cancel {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 12px;
    color: #6c6c84;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
}
.ap-print-modal-cancel:hover { color: #1a1a2e; background: #f4f2fa; }

/* Locked-state (non-paid owner): gray the option cards, tone the icon,
   surface the "Available with any paid plan" disclosure line. */
.ap-print-modal-locked .ap-print-modal-icon {
    background: #f0eef7;
    color: #534AB7;
}
.ap-print-modal-locked .ap-print-modal-option {
    opacity: .45;
    cursor: pointer;
    pointer-events: auto;
    background: #f7f6fb;
}
.ap-print-modal-locked .ap-print-modal-option:hover,
.ap-print-modal-locked .ap-print-modal-option:focus-visible {
    background: #f3f1fb;
    border-color: #d8d4ec;
    outline: none;
}
.ap-print-modal-upsell {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: #f4f2fa;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    color: #534AB7;
    font-weight: 500;
}
.ap-print-modal-upsell a {
    color: #3C3489;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #c8c1e8;
}
.ap-print-modal-upsell a:hover { color: #1a1a2e; border-bottom-color: #534AB7; }

.ap-print-iframe {
    position: absolute;
    width: 0;
    height: 0;
    border: 0;
    visibility: hidden;
    pointer-events: none;
}

body.ap-print-modal-open { overflow: hidden; }

/* ============================================================
   27. DEMO BANNER
   ============================================================ */

/* ── Demo banner ──────────────────────────────────────────────────────────── */
/* Rendered at the top of .content-panel for any session where users.is_demo
   is set. Visually distinct from the impersonation, owner-preview, and TU
   banners (purple/AfterPlan-branded) so the cognitive cue is clear. */
.demo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #E3E2F8;
    color: #3C3489;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.65rem 1.5rem;
    margin: -2px -2px 0 -2px;
    border-radius: var(--ap-radius-banner);
    flex-wrap: wrap;
}
.demo-banner i {
    vertical-align: -2px;
    margin-right: 0.35rem;
}

/* Hide add/delete affordances sitewide while in demo mode. Save buttons
   stay visible so visitors can interact with edit forms and see the
   "Changes aren't saved in demo mode" flash on submit. The controllers
   block writes server-side regardless — this is just about the affordance
   matching the experience.

   - a.ap-btn-primary     → Add Person, Add Pet, etc. (always anchor tags)
   - .btn-outline-danger  → inline Delete trigger buttons in lists
   - .btn-danger          → modal-confirm Delete buttons + "Delete My Account"
                            (Cancel buttons in modals are .btn-secondary, unaffected) */
body.demo-session-active a.ap-btn-primary,
body.demo-session-active .btn-danger,
body.demo-session-active .btn-outline-danger {
    display: none !important;
}

/* "Not available in demo" placeholder for sensitive sub-sections. */
.demo-locked-card {
    background: #f7f5fb;
    border: 1px dashed #c7c0e8;
    border-radius: var(--ap-radius-card);
    padding: 1.5rem 1.75rem;
    color: #534AB7;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.demo-locked-card i {
    font-size: 1.5rem;
    color: #6d28d9;
    flex-shrink: 0;
}
.demo-locked-card-text {
    font-size: 0.9rem;
}
.demo-locked-card-text strong {
    color: #3C3489;
}

/* ============================================================
   28. DASHBOARD TRUSTED PEOPLE STATUS
   ============================================================ */

/* ─── Dashboard Trusted People Status panel (PTP-only) ──────────────────── */
.db-tp-info-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: #adb5bd;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}
.db-tp-info-btn:hover { color: #6f42c1; }

.db-tp-table thead th { padding: 0.7rem 1rem; }
.db-tp-table tbody td { padding: 0.85rem 1rem; }

.db-tp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(111,66,193,0.10);
    color: #6f42c1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.db-tp-name-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.db-tp-rel-sub {
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.1;
}
.db-tp-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: .82em;
    font-weight: 400;
    color: #6f42c1;
    background: rgba(111,66,193,0.10);
    padding: 0.1rem 0.45rem;
    border-radius: var(--ap-radius-pill);
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-tp-role-pill i { font-size: 1em; }

.db-tp-email {
    font-size: 0.82rem;
    color: #495057;
    word-break: break-all;
}

.db-tp-status-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.db-tp-sent-sub {
    font-size: 0.7rem;
    color: #9ca3af;
}

.db-tp-pill-active   { background: rgba(25,135,84,0.10);  color: #198754; }
.db-tp-pill-invited  { background: rgba(59,111,216,0.10); color: #3b6fd8; }
.db-tp-pill-stale    { background: rgba(216,90,48,0.10);  color: #d85a30; }
.db-tp-pill-pending  { background: rgba(0,0,0,0.05);      color: #9ca3af; }

.db-tp-resend-btn {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.32rem 0.75rem;
    border-radius: var(--ap-radius-card);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #6f42c1;
    border-color: #6f42c1;
}
.db-tp-resend-btn:hover:not(:disabled) {
    background: #5e36a8;
    border-color: #5e36a8;
}
.db-tp-resend-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.db-tp-resend-btn i { font-size: 0.95rem; }

/* Preview-mode tag in Trusted People panel header */
.db-tp-preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #d85a30;
    background: rgba(216,90,48,0.10);
    padding: 0.18rem 0.55rem;
    border-radius: var(--ap-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-tp-preview-tag i { font-size: 0.85rem; }

/* Credential entry inputs */
.cred-account { color: var(--ap-ink) !important; }

/* ── People index: final-message progress strip + per-row CTA ───────────── */
.pm-progress-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.1rem;
    background: linear-gradient(100deg, #F4F2FF 0%, #EEEDFE 100%);
    border: 1px solid #d8d5f5;
    border-left: 4px solid #534AB7;
    border-radius: var(--ap-radius-card);
}
.pm-progress-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #534AB7;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.pm-progress-body { flex: 1; min-width: 0; }
.pm-progress-text {
    font-size: .95rem;
    color: #3C3489;
    font-weight: 500;
    margin: 0 0 .4rem;
    line-height: 1.45;
}
.pm-progress-track {
    height: 6px;
    background: rgba(83,74,183,.15);
    border-radius: var(--ap-radius-bar, 6px);
    overflow: hidden;
    max-width: 360px;
}
.pm-progress-fill {
    height: 100%;
    background: #534AB7;
    border-radius: var(--ap-radius-bar, 6px);
    transition: width .6s ease;
}
.pm-write-cta {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .85rem;
    font-weight: 500;
    background: transparent;
    color: #534AB7;
    border: 1px solid #AFA9EC;
    border-radius: var(--ap-radius-pill, 999px);
    padding: .3rem .85rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.pm-write-cta:hover {
    background: #534AB7;
    border-color: #534AB7;
    color: #fff;
    text-decoration: none;
}
.pm-write-cta i { font-size: 1.05rem; }
.pm-not-flagged {
    color: #c0c0cc;
    font-size: .85rem;
    font-style: italic;
}
.pm-role-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82em;
    font-weight: 400;
    border-radius: var(--ap-radius-pill, 999px);
    padding: .25rem .7rem;
    white-space: nowrap;
}
.pm-role-badge i { font-size: 1em; }
.pm-role-ptp {
    background: #EEEDFE;
    color: #3C3489;
    border: 1px solid #AFA9EC;
}
.pm-role-ptp i { color: #C49C0A; }
.pm-role-tp {
    background: #F6F5FC;
    color: #534AB7;
    border: 1px solid #d8d5f5;
}

/* Subtle "Clear this message" ghost link inside the Final Message card */
.ap-clear-msg-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: transparent;
    border: 0;
    color: #a83434;
    font-size: .82rem;
    font-weight: 500;
    padding: .3rem .6rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease;
}
.ap-clear-msg-link:hover {
    background: #fdecec;
    color: #832a2a;
}
.ap-clear-msg-link i { font-size: 1rem; }

/* Education modal list — give the bullet rows room to breathe */
.pm-edu-list li {
    margin-bottom: .55rem;
    line-height: 1.5;
}
.pm-edu-list li:last-child { margin-bottom: 0; }

/* ── My Sections — Mark as Reviewed status + CTA ─────────────────────────── */
.ms-review-status {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem;
    border-radius: var(--ap-radius-pill, 999px);
    font-size: .8rem;
    font-weight: 500;
}
.ms-review-status-pending {
    background: #fff7e6;
    color: #946200;
    border: 0.5px solid #f0d99b;
}
.ms-review-status-done {
    background: #e6f7ee;
    color: #1a7f4d;
    border: 0.5px solid #b9e6cf;
}
.ms-review-status i { font-size: 1rem; }
.ms-review-cta-card {
    background: linear-gradient(100deg, #F4F2FF 0%, #EEEDFE 100%);
    border: 0.5px solid #d8d5f5;
    border-left: 4px solid #534AB7;
    border-radius: var(--ap-radius-card);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.ms-review-cta-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #534AB7;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.ms-review-cta-body { flex: 1; min-width: 0; }
.ms-review-cta-title {
    color: #3C3489;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 .15rem;
}
.ms-review-cta-sub {
    color: #4a4180;
    font-size: .88rem;
    margin: 0;
    line-height: 1.5;
}
.ms-review-cta-btn {
    flex-shrink: 0;
    background: #534AB7;
    color: #fff;
    border: 0;
    border-radius: var(--ap-radius-pill, 999px);
    padding: .7rem 1.4rem;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
    box-shadow: 0 2px 6px rgba(83,74,183,.25);
    transition: background .15s ease;
}
.ms-review-cta-btn:hover { background: #3C3489; }
.ms-review-cta-btn i { font-size: 1.1rem; }
.ms-review-done-card {
    background: #f5fcf8;
    border: 0.5px solid #b9e6cf;
    border-radius: var(--ap-radius-card);
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ms-review-done-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #1a7f4d;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.ms-review-done-body { flex: 1; min-width: 0; }
.ms-review-done-title {
    color: #155e36;
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 .1rem;
}
.ms-review-done-sub {
    color: #1a7f4d;
    font-size: .85rem;
    margin: 0;
    line-height: 1.4;
}
.ms-review-done-revert {
    flex-shrink: 0;
    background: transparent;
    color: #1a7f4d;
    border: 0;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ms-review-done-revert:hover { color: #155e36; }

/* ============================================================
 * Time-budget picker (dashboard Suggested Next Steps)
 * Replaces the legacy db-st-* table inside the same col-lg-6 slot.
 * ============================================================ */
.tbp-card {
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius-card) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,0.08) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tbp-header {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 0.5px solid #f0eefb;
}
.tbp-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1535;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.2;
}
.tbp-title i {
    font-size: 1.15rem;
    color: #534AB7;
}
.tbp-subtitle {
    font-size: 0.78rem;
    color: #6f7180;
    margin: 0.25rem 0 0;
}
.tbp-chip-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem 1rem;
    border-bottom: 0.5px solid #f0eefb;
    background: #fafaff;
}
.tbp-chip {
    background: #fff;
    border: 1px solid #d8d5f5;
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.83rem;
    font-weight: 500;
    color: #3C3489;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
    white-space: nowrap;
}
.tbp-chip:hover {
    background: #EEEDFE;
    border-color: #AFA9EC;
}
.tbp-chip.is-active {
    background: #534AB7;
    border-color: #534AB7;
    color: #fff;
    box-shadow: 0 1px 2px rgba(83, 74, 183, 0.25);
}
.tbp-chip.is-disabled {
    background: #f5f3fb;
    border-color: #ece9f8;
    color: #a8aabc;
    cursor: default;
    box-shadow: none;
}
.tbp-chip.is-disabled:hover {
    background: #f5f3fb;
    border-color: #ece9f8;
    color: #a8aabc;
}
.tbp-chip.is-disabled i {
    color: #198754;
    font-size: 1rem;
    vertical-align: -2px;
    margin-left: 0.15rem;
}
.tbp-tasks {
    padding: 0.4rem 0;
    flex: 1;
}
.tbp-task {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 0.5px solid #f6f4fc;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, transform 0.12s;
    position: relative;
}
.tbp-task:last-child {
    border-bottom: none;
}
.tbp-task:hover {
    background: #fbfaff;
    text-decoration: none;
    color: inherit;
}
.tbp-task-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 7px;
    background: #EEEDFE;
    color: #3C3489;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.tbp-task-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tbp-task-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a1535;
    line-height: 1.25;
}
.tbp-task-hint {
    font-size: 0.78rem;
    color: #6f7180;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.tbp-task-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.tbp-time-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3C3489;
    background: #EEEDFE;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.tbp-task-arrow {
    color: #534AB7;
    font-size: 1.15rem;
    line-height: 1;
}
.tbp-task.is-recommended {
    background: linear-gradient(90deg, #f7f4fd 0%, #fbfaff 100%);
}
.tbp-task.is-recommended::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #534AB7;
}
.tbp-rec-badge {
    display: inline-block;
    font-size: .82em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #534AB7;
    color: #fff;
    padding: 1px 6px;
    border-radius: 999px;
    margin-right: 0.4rem;
    vertical-align: 2px;
}
.tbp-empty {
    padding: 1.5rem 1.25rem;
    text-align: center;
    color: #8a8d9e;
}
.tbp-empty-icon {
    font-size: 1.75rem;
    color: #AFA9EC;
    display: block;
    margin-bottom: 0.4rem;
}
.tbp-empty-text {
    font-size: 0.85rem;
    margin: 0;
}
.tbp-footer {
    padding: 0.6rem 1.25rem;
    background: #fafaff;
    border-top: 0.5px solid #f0eefb;
    font-size: 0.76rem;
    color: #6f7180;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tbp-footer-link {
    background: none;
    border: 0;
    padding: 0;
    color: #534AB7;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
}
.tbp-footer-link:hover {
    text-decoration: underline;
}
.tbp-footer-link i {
    font-size: 1rem;
    vertical-align: -2px;
}

/* ============================================================
   Account Backup card — Settings → Account, age-coded
   ============================================================ */
.ap-backup-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 12px;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--border, #d8dde6);
    background: #fff;
}
.ap-backup-shield {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    flex-shrink: 0;
}
.ap-backup-body {
    flex: 1;
    min-width: 0;
}
.ap-backup-status {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .15rem;
}
.ap-backup-desc {
    font-size: .9rem;
    color: #475569;
    line-height: 1.45;
}
.ap-backup-action { flex-shrink: 0; margin: 0; }

/* Fresh — green */
.ap-backup-fresh   { border-color: #bbf7d0; }
.ap-backup-fresh   .ap-backup-shield { background: #ecfdf5; color: #16a34a; }
.ap-backup-fresh   .ap-backup-status { color: #16a34a; }

/* New (no export yet, account ≤ 7 days) — soft purple, calm */
.ap-backup-new     { border-color: #d8d5f5; }
.ap-backup-new     .ap-backup-shield { background: #EEEDFE; color: #534AB7; }
.ap-backup-new     .ap-backup-status { color: #534AB7; }

/* Stale — yellow */
.ap-backup-stale   { border-color: #f3e0b5; background: #fffdf7; }
.ap-backup-stale   .ap-backup-shield { background: #fff8e6; color: #b45309; }
.ap-backup-stale   .ap-backup-status { color: #b45309; }

/* Overdue — red */
.ap-backup-overdue { border-color: #fecaca; background: #fffafa; }
.ap-backup-overdue .ap-backup-shield { background: #fef2f2; color: #b91c1c; }
.ap-backup-overdue .ap-backup-status { color: #b91c1c; }

@media (max-width: 575.98px) {
    .ap-backup-card { flex-wrap: wrap; }
    .ap-backup-action { width: 100%; }
    .ap-backup-action .ap-btn { width: 100%; }
}

/* Dashboard backup nudges */
.db-backup-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.db-backup-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.db-backup-banner-body { flex: 1; min-width: 0; }
.db-backup-banner-title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.db-backup-banner-sub { font-size: .88rem; line-height: 1.4; margin-top: .15rem; }
.db-backup-banner-cta {
    flex-shrink: 0;
    background: #b91c1c;
    color: #fff;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.db-backup-banner-cta:hover { background: #991b1b; color: #fff; }

.db-backup-pill {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem 2.5rem .75rem 1rem;
    border-radius: 10px;
    background: #fff8e6;
    border: 1px solid #f3e0b5;
    color: #7a5300;
    font-size: .88rem;
}
.db-backup-pill-icon { font-size: 1.2rem; flex-shrink: 0; color: #b45309; margin-top: 1px; }
.db-backup-pill-body { flex: 1; min-width: 0; line-height: 1.4; }
.db-backup-pill-title { font-weight: 700; }
.db-backup-pill-sub a { color: #7a5300; font-weight: 700; text-decoration: underline; }
.db-backup-pill-close {
    position: absolute;
    top: 6px; right: 10px;
    background: transparent;
    border: 0;
    color: #7a5300;
    opacity: .6;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.db-backup-pill-close:hover { opacity: 1; }

@media (max-width: 575.98px) {
    .db-backup-banner { flex-wrap: wrap; }
    .db-backup-banner-cta { width: 100%; justify-content: center; }
}

/* First-encrypted-save modal ("Back up your data") */
.ap-fxm-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: #EEEDFE;
    color: var(--ap-purple);
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--bs-body-font-family);
}
.ap-fxm-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ap-purple);
    margin: 0 0 .65rem;
    text-align: center;
}
.ap-fxm-body {
    font-size: .98rem;
    color: var(--ap-slate);
    line-height: 1.55;
    margin: 0;
    text-align: center;
}

/* Backup-overdue reminder toast (fires after high-value saves) */
.ap-backup-toast {
    position: fixed;
    bottom: 3.125rem;
    right: 6.25rem;
    transform: translateY(20px);
    z-index: 1080;
    background: var(--ap-purple);
    color: #fff;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.25);
    max-width: 400px;
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}
.ap-backup-toast.show {
    transform: translateY(0);
    opacity: 1;
}
.ap-backup-toast--muted {
    background: #198754;
    box-shadow: 0 14px 32px rgba(25, 135, 84, 0.25);
    pointer-events: none;
    visibility: hidden;
}
.ap-backup-toast--muted.show {
    opacity: 0.72;
    visibility: visible;
}
.ap-backup-toast-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.ap-backup-toast-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ap-backup-toast-body {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}
.ap-backup-toast-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .15rem;
}
.ap-backup-toast-msg {
    font-size: .88rem;
    opacity: .95;
}
.ap-backup-toast-msg a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}
.ap-backup-toast-close {
    background: transparent;
    border: 0;
    color: #fff;
    opacity: .75;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.ap-backup-toast-close:hover {
    opacity: 1;
}
@media (max-width: 575.98px) {
    .ap-backup-toast {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

/* Backup-overdue login modal */
.ap-bm-icon {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(2rem * var(--ap-scale-font, 1));
}
.ap-bm-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: calc(0.8rem * var(--ap-scale-font, 1));
    color: #b91c1c;
    margin-bottom: .9rem;
}
.ap-bm-badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #b91c1c;
    flex-shrink: 0;
}
.ap-bm-title {
    font-size: calc(1.2rem * var(--ap-scale-font, 1));
    color: #1e293b;
    margin: 0 0 .6rem;
    line-height: 1.25;
}
.ap-bm-body {
    font-size: calc(0.9rem * var(--ap-scale-font, 1));
    color: var(--ap-slate, #475569);
    line-height: 1.55;
    margin: 0;
}
.ap-bm-close {
    position: absolute;
    top: 12px; right: 14px;
    background: transparent;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--ap-muted, #94a3b8);
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
}
.ap-bm-close:hover { color: var(--ap-slate, #475569); background: #f1f5f9; }
.ap-bm-dismiss {
    background: transparent;
    border: none;
    color: var(--ap-muted, #94a3b8);
    font-size: calc(0.85rem * var(--ap-scale-font, 1));
    font-family: inherit;
    cursor: pointer;
    padding: .3rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ap-bm-dismiss:hover { color: var(--ap-slate, #475569); }

/* ============================================================
   Help Pages
   ============================================================ */

/* Layout: sticky TOC sidebar + scrollable content */
.ap-help-layout {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
}
.ap-help-toc {
    width: 180px;
    flex-shrink: 0;
    position: sticky;
    top: 1.25rem;
    background: #fff;
    border: 1px solid var(--border, #d8dde6);
    border-radius: 12px;
    padding: 1rem;
}
.ap-help-toc-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ap-slate, #475569);
    margin-bottom: .6rem;
}
.ap-help-toc nav a {
    display: block;
    font-size: .875rem;
    color: var(--ap-slate, #475569);
    text-decoration: none;
    padding: .3rem .5rem;
    border-radius: 6px;
    margin-bottom: .1rem;
    line-height: 1.4;
}
.ap-help-toc nav a:hover { background: var(--ap-bg, #f3f4f8); color: var(--ap-purple, #534AB7); }
.ap-help-toc nav a.active { background: #ede9ff; color: var(--ap-purple, #534AB7); }

/* Content column */
.ap-help-content {
    flex: 1;
    min-width: 0;
}

/* Each section card */
.ap-help-section {
    background: #fff;
    border: 1px solid var(--border, #d8dde6);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.1rem;
    scroll-margin-top: 1rem;
}
.ap-help-section:last-child { margin-bottom: 0; }
.ap-help-section .eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ap-purple, #534AB7);
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.ap-help-section .eyebrow i {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}
.ap-help-section h2 {
    font-size: 1.2rem;
    font-weight: 400;
    color: #3d4a5d;
    margin: 0 0 .75rem;
}
.ap-help-section h3 {
    font-size: 1rem;
    font-weight: 400;
    color: #3d4a5d;
    margin: 1.25rem 0 .4rem;
}
.ap-help-section h3:first-of-type {
    margin-top: .75rem;
}
.ap-help-section ul + h3,
.ap-help-section ol + h3,
.ap-help-section p + h3,
.ap-help-section p + h3:first-of-type {
    margin-top: 1.7rem;
}
.ap-help-section p {
    font-size: 1rem;
    font-weight: 300;
    color: #435164;
    line-height: 1.65;
    margin-bottom: .75rem;
}
.ap-help-section p:last-child { margin-bottom: 0; }
.ap-help-section strong,
.ap-help-section b {
    font-weight: 400;
    color: var(--ap-blue, #5a8dee);
}
.ap-help-section li {
    font-size: 1rem;
    font-weight: 300;
    color: #435164;
    line-height: 1.65;
    margin-bottom: .45rem;
}
.ap-help-section li:last-child { margin-bottom: 0; }
.ap-help-section ul,
.ap-help-section ol {
    margin: 0 0 .75rem;
    padding-left: 1.35rem;
}
.ap-help-section ul:last-child,
.ap-help-section ol:last-child { margin-bottom: 0; }

/* Trusted People section — tinted */
.ap-help-section--ptp {
    background: #faf5ff;
    border-color: #e9d8fd;
}
.ap-help-ptp-cols {
    display: flex;
    gap: 1.75rem;
    margin-top: .5rem;
}
.ap-help-ptp-col { flex: 1; }
.ap-help-ptp-col h3 {
    font-size: 1rem;
    font-weight: 400;
    color: #3d4a5d;
    margin: 0 0 .4rem;
}
.ap-help-ptp-col ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .95rem;
    font-weight: 300;
    color: #435164;
    line-height: 1.6;
}
.ap-help-ptp-col li { margin-bottom: .35rem; }

/* Save reminder info box */
.ap-help-save-tip {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: .85rem 1.1rem;
    margin-bottom: 1.1rem;
    font-size: 1rem;
    font-weight: 300;
    color: #1e40af;
    line-height: 1.5;
}
.ap-help-save-tip i { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }

/* Field guide table */
.ap-help-field-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .975rem;
}
.ap-help-field-table th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ap-slate, #475569);
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--border, #d8dde6);
}
.ap-help-field-table td {
    padding: .55rem .5rem;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: top;
    font-size: 1rem;
    font-weight: 300;
    color: #435164;
    line-height: 1.55;
}
.ap-help-field-table tr:last-child td { border-bottom: none; }
.ap-help-field-table td:first-child {
    color: var(--ap-blue, #5a8dee);
    font-weight: 400;
    width: 30%;
    white-space: nowrap;
}
.ap-help-field-group {
    font-size: .9rem;
    color: var(--ap-text, #1b1f24);
    margin: 0 0 .5rem;
}
.ap-help-field-group + .ap-help-field-table { margin-bottom: 1.25rem; }

/* Page header card */
.ap-help-header {
    background: #fff;
    border: 1px solid var(--border, #d8dde6);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.ap-help-header .eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ap-purple, #534AB7);
    margin-bottom: .3rem;
}
.ap-help-header h1 {
    font-size: 1.35rem;
    font-weight: 400;
    color: #3d4a5d;
    margin: 0 0 .35rem;
}
.ap-help-header .ap-help-lead {
    font-size: 1rem;
    font-weight: 300;
    color: #435164;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767px) {
    .ap-help-layout { flex-direction: column; }
    .ap-help-toc { width: 100%; position: static; }
    .ap-help-ptp-cols { flex-direction: column; gap: 1rem; }
}

/* ── Undo toast ──────────────────────────────────────────────────────────────
   Slides up from the bottom-center on any soft-delete action.
   JS class `.ap-undo-visible` triggers the entrance; removing it exits. */
#ap-undo-toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 1.25rem));
    z-index: 9999;
    min-width: 300px;
    max-width: 480px;
    width: max-content;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.22,.68,0,1.15);
}
#ap-undo-toast.ap-undo-visible {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.ap-undo-inner {
    background: #1e2130;
    color: #f1f3f7;
    border-radius: 12px;
    padding: .75rem 1rem .75rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
    position: relative;
    overflow: hidden;
}
.ap-undo-msg {
    flex: 1;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #e2e6ee;
}
.ap-undo-msg i { font-size: 1.1rem; color: #ea5455; flex-shrink: 0; }
.ap-undo-action {
    background: none;
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    border-radius: 7px;
    padding: .28rem .75rem;
    font-size: .82rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.ap-undo-action:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.ap-undo-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,.35);
    transform-origin: left;
}
/* ── Property badge — colored map pin, links to source property ── */
.ap-prop-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s, transform .15s;
}
.ap-prop-badge:hover { opacity: 1; transform: translateY(-1px); }
.ap-prop-badge i { font-size: 20px; line-height: 1; display: block; }