/*
 * Help drawer geometry, motion and the scrim.
 *
 * A real stylesheet shipped through FilamentAsset rather than a pushed
 * <style>: the drawer is included in a widget that loads through wire:init,
 * by which point the layout has already rendered its style stack, so the
 * push was silently dropped there and the panel came out unstyled.
 *
 * Every value here is the design's own, from the frames in
 * tasks/docs-update/Design system priority clarification.
 */

/* Above Filament's topbar and sidebar, and above the Lead Tracker
   client drawer's z-50, so help stacks over both. */
.help-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* The scrim. Heavier behind the mobile sheet than behind the side panel,
   because the sheet covers 90% of the screen and the remaining strip should
   read as out of play. */
.help-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 32, 46, 0.32);
    animation: helpBackdropIn 0.2s ease-out;
}
@keyframes helpBackdropIn { from { opacity: 0 } to { opacity: 1 } }

/* Mobile first: a bottom sheet at 90% height with a rounded top. */
.help-drawer-panel {
    pointer-events: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -6px 24px rgba(20, 32, 46, 0.18);
}

/* Motion: the design's sheetUp - the sheet rises 40px rather than sliding its
   whole height, so the eye follows it instead of waiting for it. */
.help-drawer-enter { transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.help-drawer-enter-start { transform: translateY(40px); }
.help-drawer-enter-end { transform: translateY(0); }

/* From md up it becomes a fixed-width side panel at the right edge. */
@media (min-width: 768px) {
    .help-drawer-backdrop { background: rgba(20, 32, 46, 0.22); }

    .help-drawer-panel {
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 420px;
        max-width: 100vw;
        height: 100%;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-left: 1px solid #e5e7eb;
        box-shadow: -10px 0 30px rgba(20, 32, 46, 0.14);
    }

    /* slideIn: 24px and a fade, not a full-width sweep. */
    .help-drawer-enter { transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease-out; }
    .help-drawer-enter-start { transform: translateX(24px); opacity: 0.4; }
    .help-drawer-enter-end { transform: translateX(0); opacity: 1; }
}
@media (min-width: 768px) and (prefers-color-scheme: dark) {
    .help-drawer-panel { border-left-color: rgb(55 65 81); }
}

/* The entry a reader arrived at, held long enough to find and then let go. */
@keyframes helpAnchorFade {
    0%, 55% { background: #FFF6E0; box-shadow: inset 2px 0 0 #E8B54A; }
    100%    { background: transparent; box-shadow: inset 2px 0 0 transparent; }
}
.help-anchored { animation: helpAnchorFade 2.6s ease forwards; }

.help-drawer-search:focus {
    outline: none;
    border-color: #1B75BB;
    box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.14);
}

.help-prose p:last-child { margin-bottom: 0; }
.help-prose p { margin: 0 0 .5rem; }
.help-prose code { font-size: .9em; }
mark.help-hit { background: #FDF0CF; color: inherit; padding: 0 1px; }

/*
 * The (i) marker itself, defined once.
 *
 * It was drawn four different ways before this: Tailwind utilities on the
 * shared trigger, an inline-styled button in the Studio Comparison headers, a
 * 14px italic currentColor circle on its tabs, and a feather SVG on Home. Same
 * affordance, four appearances, and only some of them opened anything.
 *
 * A class rather than a Blade partial because the call sites are not all the
 * same element: some are <button>, some a <span> inside a clickable tab that
 * must not nest a button.
 *
 * inline-flex centring is the fix for the Studio Comparison headers, where an
 * inline-block button sat the glyph on the text baseline rather than in the
 * middle of its circle.
 */
.help-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1.2px solid #9ca3af;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 9.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
    /* The question-mark cursor, not the hand: this is a help affordance, and
       it is what the surrounding info labels already use. */
    cursor: help;
    transition: color .12s, border-color .12s, background-color .12s;
}
/*
 * A marker often sits immediately before a control far larger than itself: the
 * Pre-Sales Tracker's sort buttons are 36px icon-buttons beside a 14px circle,
 * and their padding box overlaps it by 4 to 8px. Without this the top few
 * pixels of the marker belong to the sort button, so clicking the right-hand
 * side of an (i) sorted the column instead of opening help. Stacking the marker
 * above its neighbours makes the whole glyph hit what it looks like it hits.
 */
.help-i { position: relative; z-index: 1; }

/*
 * Two of the eight screens write their markers into ordinary inline flow, in
 * hand-written <th> markup: Studio Comparison and the Pre-Sales Tracker. There
 * `vertical-align: middle` puts the circle on the x-height centre, which sits
 * below the centre of the capitals these headers are set in, and the marker
 * reads a pixel low.
 *
 * Everywhere else the marker is a flex item with align-items:center - Filament
 * column labels and our own flex rows - so it is already centred exactly, and
 * the same nudge pushes it a pixel high instead. Measured: 87 markers are
 * flex-centred, 68 are inline flow, and the split is by markup rather than by
 * screen. Hence the opt-in rather than a global offset.
 */
[data-help-raise] .help-i { top: -1px; }

/*
 * Filament repeats a table's column labels in the summary header row at the
 * foot of the table, and our marker rides along inside the label view - so
 * Treasury Management showed the same eleven (i)s twice, 600px apart. The one
 * in the real header is the one worth having.
 */
.fi-ta-summary-header-row .help-i { display: none; }

/*
 * The glyph is 14px, under the 24px minimum target size and smaller than
 * people aim at. This extends the hover and click area by 4px on every side
 * without changing what is drawn, so the target is about 22px.
 *
 * Deliberately modest: the Pre-Sales sort buttons sit within 4px of some
 * markers, and a wider band would start swallowing their clicks.
 */
.help-i::after {
    content: '';
    position: absolute;
    inset: -4px;
}

.help-i:hover { border-color: #1B75BB; color: #1B75BB; }
.help-i:active { border-color: #0F5C8C; background: #1B75BB; color: #fff; }
.help-i:focus { outline: none; }
.help-i:focus-visible { box-shadow: 0 0 0 3px rgba(27, 117, 187, .25); }

/*
 * For a marker sitting on a coloured ground or beside coloured text: the grey
 * reads as a smudge on the Studio Scorecard's blue header, and on a tab it
 * should follow the tab's own colour rather than fight it.
 */
.help-i--inherit {
    border-color: currentColor;
    color: inherit;
    opacity: .7;
}
.help-i--inherit:hover { border-color: currentColor; color: inherit; opacity: 1; }
.help-i--inherit:active { border-color: currentColor; color: inherit; background: rgba(255, 255, 255, .22); }

/*
 * Skeleton, shown on the drawer's first open while the screen's entries are
 * fetched. Deliberately the shape of the panel's real body - an About block
 * then four entry rows - rather than the house spinner: the reader clicked one
 * (i) to ask about one thing, and a silhouette keeps their eye where the answer
 * is about to appear. The spinner still does the job it already had, over the
 * "elsewhere in the portal" half of search, where content is arriving under a
 * heading the reader is already looking at.
 */
.help-sk {
    background: #eef1f4;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.help-sk-line {
    height: 8px;
    width: 100%;
}

.help-sk::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: help-sk-sweep 1.25s ease-in-out infinite;
}

@keyframes help-sk-sweep {
    100% { transform: translateX(100%); }
}

.dark .help-sk {
    background: rgba(255, 255, 255, .08);
}

.dark .help-sk::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
}

/* A sweep across a panel that just slid in is a lot of movement at once. */
@media (prefers-reduced-motion: reduce) {
    .help-sk::after { animation: none; }
}