/* Section Highlighter CSS
   Visual debugging tool to identify functional sections */

/* Toggle Button */
.section-highlighter-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
}

.section-highlighter-toggle button {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    border: 1px solid #0f3460;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.section-highlighter-toggle button:hover {
    background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.section-highlighter-toggle button.active {
    background: linear-gradient(135deg, #e94560 0%, #c23a51 100%);
    border-color: #ff6b6b;
}

/* Info Panel */
.section-info-panel {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 300px;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid #3c3c3c;
    border-radius: 8px;
    padding: 12px;
    z-index: 999998;
    display: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.section-info-panel.active { display: block; }

.section-info-panel h4 {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #3c3c3c;
    padding-bottom: 8px;
}

.section-info-panel .section-hint {
    font-size: 10px;
    color: #888;
    font-style: italic;
    margin-bottom: 10px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    border-left: 2px solid #0e639c;
}

.section-info-filter-wrap {
    position: relative;
    margin-bottom: 8px;
}

.section-info-filter {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 26px 6px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.section-info-filter::placeholder {
    color: #777;
}

.section-info-filter:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.25);
}

.section-info-filter-clear {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    border-radius: 3px;
}

.section-info-filter-clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.section-info-panel li.filtered-out { display: none; }

.section-info-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-info-panel li {
    padding: 6px 8px;
    color: #aaa;
    font-size: 11px;
    border-radius: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.section-info-panel li:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #fff;
}

.section-info-panel li.section-found { color: #4ec9b0; }
.section-info-panel li.section-hidden { color: #666; font-style: italic; }

.section-info-panel li.not-found {
    opacity: 0.5;
    text-decoration: line-through;
    color: #f44336;
}

.section-info-panel::-webkit-scrollbar { width: 6px; }
.section-info-panel::-webkit-scrollbar-track { background: #1e1e1e; }
.section-info-panel::-webkit-scrollbar-thumb { background: #3c3c3c; border-radius: 3px; }

/* Highlight Effect — inset box-shadow */
.section-highlight {
    cursor: pointer;
    transition: box-shadow 0.15s ease;
    box-shadow: inset 0 0 0 0 rgba(255, 0, 0, 0);
}

.section-highlight:hover {
    box-shadow: inset 0 0 0 2000px rgba(255, 0, 0, 0.15);
}

.section-highlight.active-highlight {
    box-shadow: inset 0 0 0 2000px rgba(255, 0, 0, 0.2);
}

/* Suppress parent highlight when child is hovered */
.section-highlight:has(.section-highlight:hover) {
    box-shadow: inset 0 0 0 0 rgba(255, 0, 0, 0) !important;
}

.section-highlight:hover,
.section-highlight.active-highlight {
    outline: 2px solid rgba(255, 0, 0, 0.5);
    outline-offset: -2px;
}

/* model-viewer uses Shadow DOM — use outline fallback */
model-viewer.section-highlight:hover,
model-viewer.section-highlight.active-highlight {
    outline: 3px solid rgba(255, 0, 0, 0.5);
    outline-offset: 0;
}

/* Section Label (floating) */
.section-label {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    z-index: 1000000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    display: none;
    white-space: nowrap;
}

.section-label.active {
    display: block;
    animation: shLabelFadeIn 0.2s ease-out;
}

@keyframes shLabelFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Source Callout */
.section-source-callout {
    position: fixed;
    width: 420px;
    background: #1e1e1e;
    border: 1px solid #3c3c3c;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000001;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    display: none;
    overflow: hidden;
}

.section-source-callout.active {
    display: block;
    animation: shCalloutFadeIn 0.2s ease-out;
}

@keyframes shCalloutFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.section-source-callout .callout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, #e94560 0%, #c23a51 100%);
    border-bottom: 1px solid #3c3c3c;
    cursor: move;
    user-select: none;
}

/* No .section-source-callout.dragging { animation: none } — toggling animation
   off on drag-start and back on drag-end re-triggered the entrance fade-in,
   flashing the callout every time you released a drag. The 0.2s fade is done
   long before a drag begins, so there's nothing to suppress. */

.section-source-callout.dragging .callout-header {
    cursor: grabbing;
}

.section-source-callout .callout-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Two header tools, same shape: the pin (remember dragged badge positions) and
   the eye (blink the target element out). White on the header's dark band, dim
   when off so they read as available rather than as a state you are already in.

   No grayscale filter any more: these are Font Awesome glyphs inheriting
   currentColor, not emoji, so opacity alone carries the off state — and the
   filter is what would have desaturated the white back to grey. */
.section-source-callout .callout-title-pin,
.section-source-callout .callout-title-hide {
    background: none;
    border: 0;
    padding: 0 3px;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.12s, transform 0.12s, color 0.12s;
}
.section-source-callout .callout-title-pin:hover,
.section-source-callout .callout-title-hide:hover { opacity: 0.85; }
.section-source-callout .callout-title-pin.is-on {
    opacity: 1;
    transform: rotate(-20deg);
}
/* The eye lit means something on the PAGE is currently hidden — a state with a
   consequence outside this panel, so it gets a colour rather than just weight. */
.section-source-callout .callout-title-hide.is-on {
    opacity: 1;
    color: #ff2d95;
}

/* The blink itself. visibility, never display: the box stays, so nothing after
   the element moves and the only change on screen is the thing being asked
   about. !important because it has to beat whatever the app's own rules say —
   this is a debug overlay reaching into someone else's UI for a moment. */
.section-target-hidden { visibility: hidden !important; }

.section-source-callout .callout-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.section-source-callout .callout-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Kebab menu — consolidated callout actions (refresh source + copy helpers). */
.section-source-callout .callout-kebab-wrap {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}

.section-source-callout .callout-kebab {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.section-source-callout .callout-kebab:hover {
    background: rgba(255, 255, 255, 0.2);
}

.section-source-callout .callout-kebab-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    min-width: 200px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    margin-top: 3px;
}

.section-source-callout .callout-kebab-menu.open {
    display: block;
}

.section-source-callout .callout-kebab-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 12px;
    color: #111827;
    cursor: pointer;
    white-space: nowrap;
}

.section-source-callout .callout-kebab-item:hover {
    background: #eff6ff;
}

.section-source-callout .callout-body { padding: 0; display: flex; flex-direction: column; }

/* Callout Tabs */
.section-source-callout .callout-tabs {
    display: flex;
    border-bottom: 1px solid #3c3c3c;
    background: #252526;
}

.section-source-callout .callout-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: #888;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    border-bottom: 2px solid transparent;
}

.section-source-callout .callout-tab:hover { color: #ccc; background: rgba(255,255,255,0.03); }
.section-source-callout .callout-tab.active { color: #fff; border-bottom-color: #e94560; }

/* Documentation pane */
.section-source-callout .callout-doc-pane {
    height: 300px;
    overflow-y: auto;
    padding: 0;
}

.section-source-callout .callout-doc-content {
    padding: 12px;
    color: #d4d4d4;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.section-source-callout .callout-doc-pane::-webkit-scrollbar { width: 8px; }
.section-source-callout .callout-doc-pane::-webkit-scrollbar-track { background: #1e1e1e; }
.section-source-callout .callout-doc-pane::-webkit-scrollbar-thumb { background: #3c3c3c; border-radius: 4px; }

.section-source-callout .callout-textarea {
    width: 100%;
    height: 300px;
    padding: 12px;
    background: #1e1e1e;
    color: #d4d4d4;
    border: none;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

.section-source-callout .callout-textarea::-webkit-scrollbar { width: 8px; }
.section-source-callout .callout-textarea::-webkit-scrollbar-track { background: #1e1e1e; }
.section-source-callout .callout-textarea::-webkit-scrollbar-thumb { background: #3c3c3c; border-radius: 4px; }

.section-source-callout .callout-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #252526;
    border-top: 1px solid #3c3c3c;
}

.section-source-callout .callout-nav {
    display: flex;
    gap: 6px;
}

.section-source-callout .callout-nav-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 32px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.section-source-callout .callout-nav-btn:hover {
    background: rgba(78, 169, 255, 0.3);
    border-color: rgba(78, 169, 255, 0.5);
    transform: scale(1.05);
}

.section-source-callout .callout-prev:hover {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.5);
}

.section-source-callout .callout-next:hover {
    background: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.5);
}

.section-source-callout .callout-copy {
    background: #0e639c;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: background 0.2s;
}

.section-source-callout .callout-copy:hover { background: #1177bb; }

.section-source-callout .callout-frame-toggle {
    background: transparent;
    color: #ccc;
    border: 1px solid #555;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s;
}
.section-source-callout .callout-frame-toggle:hover { border-color: #ff3b30; color: #ff3b30; }
.section-source-callout .callout-frame-toggle.active {
    background: #ff3b30;
    border-color: #ff3b30;
    color: #fff;
}

/* Red frame around the element(s) the active callout targets */
.section-target-frame {
    outline: 2px solid #ff3b30 !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.35) !important;
}

/* Navigation pulse */
.section-highlight.nav-highlight {
    box-shadow: inset 0 0 0 2000px rgba(78, 169, 255, 0.4) !important;
    animation: shNavPulse 0.5s ease-out;
}

@keyframes shNavPulse {
    0%   { box-shadow: inset 0 0 0 2000px rgba(78, 169, 255, 0.6); }
    100% { box-shadow: inset 0 0 0 2000px rgba(78, 169, 255, 0.4); }
}

/* ============================================================
   Section Tags Overlay  (section-tags.js)
   Debug-only badges that label each documented UI section.
   Activated via ?tags=true, localStorage.section_tags_enabled,
   or the floating S# toggle button at the bottom-right.
   ============================================================ */
.section-tag {
  position: absolute;
  top: 0;
  left: 0;
  /* Top of everything, deliberately: a badge is documentation ABOUT the chrome,
     so any panel, flyout, dialog or overlay it disappears behind is a badge that
     cannot do its job. 2147483646 leaves exactly one step above it for the
     badge you are touching (:hover / .dragging below). */
  z-index: 2147483646;
  background: #fff200;
  color: #000;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: auto;          /* click to open the highlighter callout */
  cursor: grab;                  /* hint that the badge is draggable */
  user-select: none;
  touch-action: none;            /* let pointer drag work on touch devices */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.section-tag:hover,
.section-tag:focus-visible {
  background: #ffeb3b;
  outline: none;
  transform: scale(1.08);
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 2147483647;
}
.section-tag:active { transform: scale(0.96); }

/* Selected — by clicking the badge, or by clicking its leader line. Hotpink on
   both ends so the pair reads as one thing, and the top z-index step so the
   badge you just picked is never the one behind a panel. */
.section-tag.is-selected {
  background: #ff2d95;
  color: #fff;
  border-color: #fff;
  z-index: 2147483647;
  box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(255, 45, 149, 0.6);
}
.section-tag.is-selected:hover { background: #ff5aab; }

/* PROMOTED INTO THE TOP LAYER (section-tags.js, promoteTag). The selected badge
   is shown as a manual popover so nothing can paint over it — not a panel that
   picked 2147483647, not a modal dialog, not a z-index of a billion. It stays a
   child of the element it names; only its rendering moves. What has to be undone
   here is the UA's own [popover] box: inset:0 with margin:auto would centre the
   badge in the viewport, and fit-content sizing plus overflow:auto would box it.
   left/top come from the inline style and are VIEWPORT coordinates while it is
   up here, which is why position must be fixed and not this file's absolute. */
.section-tag[popover] {
  position: fixed;
  right: auto;
  bottom: auto;
  margin: 0;
  width: auto;
  height: auto;
  overflow: visible;
}
.section-tag.dragging {
  cursor: grabbing;
  transition: none;              /* track the pointer 1:1 — no transition lag */
  z-index: 2147483647;           /* lift the active badge above its peers */
  box-shadow: 0 0 0 1px #000, 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Floating toggle button — always visible, dimmed when off */
.section-tags-toggle-btn {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 1000002;            /* above section_highlighter toggle (999999) */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #000;
  background: #fff200;
  color: #000;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.35;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease, transform 0.15s ease;
  padding: 0;
}
.section-tags-toggle-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
.section-tags-toggle-btn.active {
  opacity: 1;
  box-shadow: 0 0 0 2px #000, 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Dynamic per-item tags (L<level>.<slot>) — placed by section-tags.js on the
   host-configured row/action elements (window.SectionTagsItemConfig).
   Top-RIGHT so they don't collide with row labels (top-left), cyan so they
   read as item-level, not section-level. */
.section-tag--item {
  top: 0;
  left: auto;
  right: 0;
  background: #00e5ff;
  font-size: 8px;
  padding: 1px 3px;
}
.section-tag--item:hover,
.section-tag--item:focus-visible {
  background: #6ef0ff;
}

/* ============================================================
   PROMOTED INTO THE TOP LAYER (section_highlighter.js, liftOverlay)
   ------------------------------------------------------------
   The callout, the info panel and the floating label are shown as MANUAL
   POPOVERS so nothing can paint over them — not a panel that picked
   2147483647, not a <dialog> opened with showModal(), which is where the
   command palette (A9) and the event detail modal (W18.4) live. A z-index,
   however large, cannot reach the top layer; this is the same lift
   js/section-tags.js gives its leader lines and its selected badge, and it
   carries the same note: showPopover() does not MOVE the node, so position,
   the drag and every selector into these elements keep working.

   What has to be undone here is the UA's own [popover] box. It is
   inset:0 + margin:auto + fit-content sizing + overflow:auto + its own
   border, padding and colours, and left unopposed it centres each of these
   in the viewport as a small scrolling box with a default border. Author
   rules beat the UA sheet at equal specificity, so only the properties the
   rules above DO NOT set need restating: the insets each element leaves to
   `auto`, the margin, the padding and the height.
   ============================================================ */
.section-source-callout[popover] {
  inset: auto;                   /* left/top come from the inline style */
  margin: 0;
  padding: 0;
  height: auto;
  max-height: none;
  border: 1px solid #3c3c3c;     /* the UA's `border: solid` is 3px currentColor */
  background: #1e1e1e;
  color: inherit;
  overflow: hidden;
}

.section-info-panel[popover] {
  top: auto;
  left: auto;
  bottom: 80px;
  right: 20px;
  margin: 0;
  padding: 12px;
  width: 300px;
  height: auto;
  border: 1px solid #3c3c3c;
  background: rgba(30, 30, 30, 0.95);
  color: inherit;
}

/* The label is centred by left:50% + translateX(-50%), so its own left must
   survive and only the other three insets are cleared. */
.section-label[popover] {
  top: 10px;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  width: auto;
  height: auto;
  padding: 8px 20px;
  border: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  overflow: visible;
}