/* The (?) help control.
 *
 * Standing rule in this project: an explanation goes behind a (?), never into
 * the page as prose. These pages are dense registers, and a paragraph under
 * every heading pushes the data down the screen for everyone -- including the
 * people who already know what the section is.
 *
 * This replaces the `title=` tooltip that used to carry it. A `title` never
 * appears on a touch device and never appears on keyboard focus, so on a
 * tablet, or for anyone navigating by keyboard, the app's help was simply
 * absent. That is also what made extending the rule to the customer portal
 * unsafe before, and safe now.
 *
 * SERVED TO BOTH FRONT ENDS, which is what shapes everything below:
 *
 *   * The portal does NOT load Unfold's Tailwind -- only portal.css. So this
 *     file uses no utility classes at all; every rule is written out.
 *   * The portal does NOT load the material-symbols font either, so the glyph
 *     is an inline SVG. The icon font would have rendered the literal word
 *     "help" to customers.
 *   * The two front ends name their colours differently and neither knows the
 *     other's variables, so each value falls back through both, then to a
 *     literal. var(--muted) is the portal's; var(--color-font-subtle-light) is
 *     Unfold's.
 *   * Dark mode is class-based in the back office (.dark) and media-query
 *     based in the portal, so both are handled.
 */

.lc-help {
    --lc-help-fg: var(--muted, var(--color-font-subtle-light, #737373));
    --lc-help-panel-bg: var(--surface, #ffffff);
    --lc-help-panel-fg: var(--ink, var(--color-font-default-light, #404040));
    --lc-help-border: var(--border, var(--color-base-200, #e5e5e5));

    position: relative;
    display: inline-flex;
    vertical-align: middle;
    line-height: 0;
}

/* The button. A real <button>, so it is tabbable and announces itself; the
   look is borrowed from the icon it replaces. */
.lc-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 0 0 4px;
    border: 0;
    background: none;
    color: var(--lc-help-fg);
    cursor: help;
    border-radius: 50%;
    opacity: .75;
    transition: opacity .15s;
}

.lc-help-btn:hover,
.lc-help-btn[aria-expanded="true"] { opacity: 1; }

.lc-help-btn:focus-visible {
    outline: 2px solid var(--color-primary-600, #ff3a28);
    outline-offset: 2px;
    opacity: 1;
}

.lc-help-btn svg { display: block; width: 15px; height: 15px; }

/* The panel.
   Hidden with `hidden` on the element rather than a class, so it is out of the
   accessibility tree as well as off the screen.

   FIXED, not absolute, and this is the whole point: Unfold wraps every
   fieldset's rows in `overflow-hidden`, and an absolutely positioned panel is
   clipped by that. On the last row of a section the explanation was cut off
   mid-sentence at the section's edge -- measured at 19px lost on the Product
   page, worse for longer text.

   A fixed element is not clipped by an ancestor's overflow, so the panel
   escapes the box. The cost is that `top`/`left` cannot be expressed relative
   to the button in CSS; help.js sets them from the button's rect each time it
   opens. Nothing else here relies on the button being the offset parent. */
.lc-help-panel {
    position: fixed;
    z-index: 70;
    top: 0;
    left: 0;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 10px 12px;
    background: var(--lc-help-panel-bg);
    color: var(--lc-help-panel-fg);
    border: 1px solid var(--lc-help-border);
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    cursor: auto;
}

.lc-help-panel[hidden] { display: none; }

/* Flipping near a viewport edge is done in help.js now, by adjusting the
   coordinates it sets -- a right-aligned rule cannot work against a fixed
   element positioned from the left. */

/* Long-form help -- the lead-import format documentation, chiefly. Wider, and
   its examples keep their own formatting. */
.lc-help-panel.lc-help-block { max-width: min(34rem, calc(100vw - 2rem)); }

.lc-help-panel.lc-help-block p { margin: 0 0 .5em; }
.lc-help-panel.lc-help-block p:last-child { margin-bottom: 0; }

.lc-help-panel.lc-help-block pre,
.lc-help-panel.lc-help-block code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

.lc-help-panel.lc-help-block pre {
    margin: .4em 0;
    padding: 8px;
    overflow-x: auto;
    background: var(--surface-2, var(--color-base-50, #fafafa));
    border-radius: 4px;
}

.lc-help-title {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--color-font-important-light, var(--ink, #171717));
}

/* --- Dark mode ---------------------------------------------------------- */
/* Back office: Unfold toggles a `dark` class on <html>. */
.dark .lc-help {
    --lc-help-fg: var(--color-font-subtle-dark, #a3a3a3);
    --lc-help-panel-bg: var(--color-base-800, #262626);
    --lc-help-panel-fg: var(--color-font-default-dark, #d4d4d4);
    --lc-help-border: var(--color-base-700, #404040);
}

.dark .lc-help-title { color: var(--color-font-important-dark, #f5f5f5); }

/* Portal: follows the system, and defines its own variables, so only the
   literals need restating. */
@media (prefers-color-scheme: dark) {
    .lc-help {
        --lc-help-panel-bg: var(--surface, #171717);
        --lc-help-panel-fg: var(--ink, #f5f5f5);
        --lc-help-border: var(--border, #2a2a2a);
    }
}

/* Somebody who has asked for less motion still gets the panel, just without
   the fade. */
@media (prefers-reduced-motion: reduce) {
    .lc-help-btn { transition: none; }
}

/* Centre the (?) on the label's TEXT, not on its margin box.
 *
 * `items-center` on the label row aligns the *margin* boxes of its children.
 * Django's `label_tag` comes out of Unfold carrying `mb-2`, so the label's box
 * is 8px taller at the bottom than the text it holds, and centring against it
 * put the icon 4px low on every field in the app. Visible wherever that margin
 * survives: below lg, and at any width on comfortable density (the dense rule
 * in admin_overrides.css only zeroes it from lg up).
 *
 * The margin moves to the row rather than being deleted -- below lg the label
 * sits above its input and that 8px is the gap between them. The row is the
 * label's own box, so the spacing is unchanged and only the icon moves.
 *
 * Higher specificity than `.mb-2` (0,1,1 vs 0,1,0), so it wins on either side
 * of Unfold's stylesheet -- this file's <link> order must not matter.
 *
 * `lc-help-row` goes on ONE row type only: the text/select rows in
 * fieldset_row_field.html, whose labels are the ones carrying `mb-2`. The
 * other two help rows must not have it, and both were checked rather than
 * assumed -- field.html labels come from unfold/helpers/form_label.html, and
 * a boolean's label_tag in fieldset_row_checkbox.html drops the margin class
 * too. Their labels measure `margin-bottom: 0px`, so those icons were already
 * centred and the row margin here would have been 8px of new space (it was,
 * for one round: it made every checkbox row 8px taller).
 */
.lc-help-row > label { margin-bottom: 0; }

.lc-help-row { margin-bottom: 0.5rem; }

@media (min-width: 1024px) {
    /* From lg up Unfold's compressed layout puts the label beside its input
       (`lg:flex` on the wrapper), so there is no gap below it to preserve.
       The second selector mirrors the dense rule in admin_overrides.css, which
       used to zero this same margin on the label itself. */
    .lg\:flex > .lc-help-row,
    body.lconnect-dense .field-line .lc-help-row {
        margin-bottom: 0;
    }
}

/* The app version's panel ({% app_version %}, core/templatetags/version.py):
   one fact per line, and a link to What's new for staff. Here rather than in
   either front end's sheet, because the panel is the same in both. */
.lc-version .lc-help-btn { cursor: pointer; }
.lc-version-line { display: block; }
.lc-version-line + .lc-version-line { margin-top: 2px; }
.lc-version-line code { font-size: 11px; }
/* Calm at rest, red on hover -- the rule the breakdown's links follow
   (!701: "too much red"). */
.lc-version-link {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--lc-help-border);
    text-underline-offset: 3px;
}
.lc-version-link:hover,
.lc-version-link:focus-visible {
    color: var(--primary-600, var(--color-primary-600, #ff3a28));
    text-decoration-color: currentColor;
}