/* ==========================================================================
   Help mode

   Badges are in the markup on every page but only shown once the header's
   `?` button puts .help-mode on the body, so the dashboard stays clean until
   someone asks for help.
   ========================================================================== */

/* A badge floats over the top-right corner of whatever element it explains -
   its own layer, not text sharing the line with a title - so it reads as one
   consistent symbol wherever it lands and never crowds the label beside it.
   That element needs to establish the positioning context (position:
   relative, or the sticky table headers already do); see entry.css/home.css
   for where that is added. */
.help-badge {
    display: none;
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    z-index: 20;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    padding: 0;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    cursor: help;
    background: var(--color-surface);
    color: var(--color-help-symbol);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.help-mode .help-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.help-badge:hover,
.help-badge.active {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    transform: scale(1.1);
}

/* A panel clips its own overflow (the 3D views need that), so a badge in its
   title bar cannot escape as far as everywhere else does without being cut
   off at the panel's edge - a smaller offset keeps it inside. */
.panel-title .help-badge {
    top: -0.3rem;
    right: -0.3rem;
}

/* Floating over a corner only works when the host is big enough to spare one.
   Control rows sit 3px apart, so a floated badge lands on the row above; the
   panel-title toggles are ~23px wide, so a floated badge covers the button and
   takes its clicks. In both places the badge sits inline beside its host
   instead, at the size the line can carry. The page header is the same case:
   its links, chips and the view switch are all one line tall - matched on the
   element, since the landing table's heading row is a .header too. */
.control-item .label .help-badge,
.panel-title-actions .help-badge,
.pane-tabs .help-badge,
header .help-badge {
    position: static;
    margin-left: 0.35rem;
    width: 1.05rem;
    height: 1.05rem;
    border-width: 2px;
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Table header cells sit flush against their neighbours with no gap to
   escape into - a badge anchored to the right, as everywhere else, would
   land on top of the next column's label. Centring it above its own column
   instead only ever escapes upward, into the clear space above the table. */
th .help-badge {
    top: -0.6rem;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

th .help-badge:hover,
th .help-badge.active {
    transform: translateX(-50%) scale(1.1);
}

/* The header's `?` toggle: plain text like the nav links beside it (Theory,
   License, ...), not a button of its own - it is one more way to read the
   page, not a distinct piece of chrome. */
.help-toggle {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--color-text-inverse);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity var(--transition-base);
}

.help-toggle:hover {
    opacity: 1;
}

.help-toggle[aria-pressed="true"] {
    opacity: 1;
    text-decoration: underline;
}

/* Wraps a control that cannot itself host a nested badge (a <button> or
   <select> cannot contain another interactive element) so its help badge
   still has something to float over the corner of. */
.badge-anchor {
    position: relative;
    display: inline-flex;
}

/* Everything in the header sits on one line, and the nav's links carry a
   margin the badge beside them does not; without this the badge rides above
   the word it explains. */
header .badge-anchor {
    align-items: center;
}

/* The info panel's icon strip explains all four of its tabs at once: the tabs
   are <button>s sharing the column height, so there is no room for a badge per
   icon. It floats off the strip's outer corner, into the pane beside it. */
.tab-sidebar {
    position: relative;
}

.tab-sidebar > .help-badge {
    /* Flush with the strip, not floated above it: the panel clips its own
       overflow, so anything past this edge is cut off. */
    top: 0;
    right: -0.75rem;
}

/* The group strip stretches its items; the badge keeps its own height. */
.pane-tabs .help-badge {
    align-self: center;
}

/* Beside the panel's maximize button, in the panel's own corner. That button is
   invisible until the panel is hovered, so help mode reveals it. */
.panel-maximize-help {
    top: auto;
    right: calc(var(--gap-0) + 1.9rem);
    bottom: var(--gap-0);
}

.help-mode .panel-maximize {
    opacity: 0.8;
}


/* ==========================================================================
   The popover

   One element, reused by every badge, positioned from help.js. Fixed rather
   than absolute because the entry page pins the body to 100vh and clips it -
   an absolutely positioned popover inside a panel would be cut off.
   ========================================================================== */

.help-popover {
    position: fixed;
    z-index: 1000;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: calc(var(--gap-0) * 0.75);
    font-size: var(--font-size-small);
    line-height: 1.45;
}

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