/**
 * Shared JSON response tree.
 *
 * These rules were Post Creator's. They are here because Actions needed the
 * same tree and reinventing the look would have given users a second thing
 * to learn for an identical interaction — the same reason the tree's LOGIC
 * lives in assets/js/json-tree-mixin.js rather than being rewritten.
 *
 * Every selector is dual-named: `.pc-tree-x, .huxx-tree-x`. Post Creator's
 * markup keeps its original class names and is not touched, so this move
 * carries no visual risk to a shipped editor; new markup uses the neutral
 * `huxx-tree-` name. Collapsing to one name means editing Post Creator's
 * template — worth doing, not worth doing during a release run.
 *
 * Builder Sync still has its own separate tree (ClickUp 86cavk1cu).
 */

.pc-tree-panel, .huxx-tree-panel {
    position: sticky;
    top: 32px;
    background: #fff;
    border: 1px solid var(--huxx-gray-200);
    border-radius: var(--huxx-radius-lg);
    box-shadow: var(--huxx-shadow-sm);
    overflow: hidden;
}

.pc-tree-header, .huxx-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 12px 16px;
    background: var(--huxx-gray-50);
    border-bottom: 1px solid var(--huxx-gray-100);
}

.pc-tree-title, .huxx-tree-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--huxx-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pc-tree-body, .huxx-tree-body {
    overflow-y: auto;
    padding: 8px 0;
    flex-grow: 1;
}

.pc-tree-empty, .huxx-tree-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--huxx-gray-500);
    font-size: 13px;
}

.pc-tree-loading, .huxx-tree-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--huxx-gray-500);
    font-size: 13px;
}

.pc-tree-node, .huxx-tree-node {
    display: flex;
    /* center: keeps the smaller {N} / [N] type labels visually aligned with
       the larger 13px key/value text; otherwise flex-start top-aligns the
       short line box and the labels float high. */
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    font-size: 13px;
    font-family: var(--huxx-font-mono);
    cursor: default;
    transition: background var(--huxx-transition);
    line-height: 1.4;
}

.pc-tree-node:hover, .huxx-tree-node:hover {
    background: var(--huxx-gray-50);
}

.pc-tree-node--leaf, .huxx-tree-node--leaf {
    cursor: pointer;
}

.pc-tree-node--leaf:hover, .huxx-tree-node--leaf:hover {
    background: var(--huxx-primary-light);
}

.pc-tree-node--branch, .huxx-tree-node--branch {
    cursor: pointer;
}

.pc-tree-toggle, .huxx-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 18px; /* Match line-height of tree key text (13px * 1.4 ≈ 18px) */
    color: var(--huxx-gray-400);
    flex-shrink: 0;
    transition: transform var(--huxx-transition);
}

.pc-tree-toggle svg, .huxx-tree-toggle svg {
    flex-shrink: 0;
}

.pc-tree-toggle--expanded, .huxx-tree-toggle--expanded {
    transform: rotate(90deg);
}

.pc-tree-key, .huxx-tree-key {
    color: var(--huxx-gray-700);
    font-weight: 500;
    flex-shrink: 0;
}

.pc-tree-separator, .huxx-tree-separator {
    color: var(--huxx-gray-400);
    margin: 0 2px;
    flex-shrink: 0;
}

.pc-tree-string, .huxx-tree-string {
    color: var(--huxx-success);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-tree-number, .huxx-tree-number {
    color: var(--huxx-info);
}

.pc-tree-bool, .huxx-tree-bool {
    color: #7c3aed;
}

.pc-tree-null, .huxx-tree-null {
    color: var(--huxx-gray-400);
    font-style: italic;
}

.pc-tree-type, .huxx-tree-type {
    color: var(--huxx-gray-500);
    font-size: 11px;
}

/* Footer no longer used — navigation moved to header */

.pc-tree-nav, .huxx-tree-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.pc-tree-nav-label, .huxx-tree-nav-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--huxx-gray-500);
    white-space: nowrap;
    min-width: 32px;
    text-align: center;
}

.pc-tree-nav-btn, .huxx-tree-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fff;
    border: 1px solid var(--huxx-gray-300);
    border-radius: var(--huxx-radius-sm);
    cursor: pointer;
    color: var(--huxx-gray-600);
    padding: 0;
    font-family: inherit;
    transition: all var(--huxx-transition);
    line-height: 1;
}

.pc-tree-nav-btn svg, .huxx-tree-nav-btn svg {
    flex-shrink: 0;
}

.pc-tree-nav-btn:hover:not(:disabled), .huxx-tree-nav-btn:hover:not(:disabled) {
    background: var(--huxx-gray-50);
    border-color: var(--huxx-gray-400);
}

.pc-tree-nav-btn:disabled, .huxx-tree-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Selectable tree — rows that can be TICKED, not just read.
 *
 * The endpoint's response-field picker is the first tree here that is a
 * control rather than a reference. These rules add only what selection needs;
 * everything else above is shared unchanged, so the picker reads as the same
 * component as Post Creator's mapping tree and the Actions step editor.
 * ------------------------------------------------------------------------- */

/* Aligns a leaf's key with a branch's, where the caret occupies the space. */
.huxx-tree-spacer {
    display: inline-block;
    width: 14px;
    flex-shrink: 0;
}

.huxx-tree-check {
    width: 14px;
    height: 14px;
    margin: 0 2px 0 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--huxx-primary);
    /* Geometrically centred is not optically centred. align-items: center puts
       the box in the middle of an 18px line box, but the glyphs beside it sit
       on a baseline nearer the bottom of theirs, so a centred control reads
       high. One pixel down matches it to the text rather than to the box. */
    position: relative;
    top: 1px;
}

/* An inline SVG keeps a text baseline inside its line box, which floats the
   caret a pixel or two above the key beside it. Only visible next to a
   checkbox, which is why the other trees never needed it. */
.huxx-tree-toggle svg {
    display: block;
}

/* Declared paths, above the tree. They are the only record when no sample is
   loaded, so they need room of their own rather than sitting flush against
   the group label and the panel. */
.huxx-connect-response-chips {
    margin: 2px 0 10px;
}

/* The group's label sits tight against the panel without this — the other
   sensitive groups are flat lists, so nothing needed the gap before. */
.huxx-connect-response-fields .huxx-tree-panel {
    margin-top: 8px;
}

/* A picker scrolls; a reference panel does not need to. Twenty fields of a
   character object would otherwise push the whole accordion open. */
.huxx-connect-response-fields .huxx-tree-body {
    max-height: 320px;
}