/*
 * OrgTree3.css
 *
 * Connector art for the OrgTree3 expandable tree. Everything is drawn with
 * currentColor -- the SVG ring/plus/minus via a mask, all the straight lines
 * (vertical spine + horizontal "elbow" branch) via gradients -- so the tree
 * is vector, transparent, and follows the page's text colour on any theme.
 *
 * The whole geometry is derived from the custom properties below. In
 * particular the horizontal elbow length is ONE knob:  --ot3-branch.
 * Override it on the .ot3 wrapper (or via OrgTree3::head($dir, '40px')).
 */

.ot3 {
    /* THE KNOB: length of the elbow to the label. Not pinned to .ot3 -- the
       default lives in the var() fallback below -- so client CSS can set
       --ot3-branch anywhere (an ancestor, :root, .ot3, or inline) and it wins,
       with no specificity fight. */
    --ot3-circle: 22px;    /* ring box (kept fixed) */
    --ot3-line:   1px;   /* connector thickness */
    --ot3-spine:  10.5px;  /* x of the vertical spine / ring centre */
    --ot3-mid:    11px;    /* y of the branch / ring centre */
    --ot3-radius: 6.4px;   /* ring radius */
    --ot3-hover:  #fa4616; /* ring colour on hover (site link-hover orange) */

    /* derived */
    --ot3-cellw: calc(var(--ot3-circle) + var(--ot3-branch, 30px)); /* guide col width */
    --ot3-cr: calc(var(--ot3-spine) + var(--ot3-radius));     /* ring right x */
    --ot3-ct: calc(var(--ot3-mid) - var(--ot3-radius));       /* ring top y */
    --ot3-cb: calc(var(--ot3-mid) + var(--ot3-radius));       /* ring bottom y */
    --ot3-lx: calc(var(--ot3-spine) - var(--ot3-line) / 2);   /* spine left x */
    --ot3-ly: calc(var(--ot3-mid) - var(--ot3-line) / 2);     /* branch top y */

    font-family: "Leelawadee UI", Arial, Helvetica, Verdana, sans-serif;
    font-size: 14px;
    color: inherit;
    text-align: left;
}

/* Responsive default for the elbow width: 10px on a small screen growing to
   40px, in 10px steps at 100px breakpoints.
   Set on :root -- not .ot3 -- so a per-tree override (.ot3 { --ot3-branch }),
   an inline style, or OrgTree3::head($dir,'NNpx') still wins cleanly. */
:root { --ot3-branch: 10px; }                            /* <= 300px */
@media (min-width: 300px) { :root { --ot3-branch: 20px; } }
@media (min-width: 400px) { :root { --ot3-branch: 30px; } }
@media (min-width: 500px) { :root { --ot3-branch: 40px; } }

/* reset the site's global table/td styling so lines stay pixel-aligned
   (OrgTree3 assumes cellpadding=0 / cellspacing=0). */
.ot3 table { border-collapse: separate; border-spacing: 0; width: auto; table-layout: auto; margin: 0; }
.ot3 td    { padding: 0; border: 0; vertical-align: top; background: none; }

.ot3 .ot3-0 { font-weight: bold; font-size: 16px; color: inherit; padding-bottom: 2px; }
.ot3 td.ot3-i { width: 10px; font-size: 1px; line-height: 1px; }
/* label: a 22px line-height puts the first line's centre on the branch (y=11) */
.ot3 td.ot3-v { font-size: 14px; line-height: 22px; padding: 0 0 0 4px; }
.ot3 td.ot3-d { font-size: 13px; }
.ot3 td.ot3-g, .ot3 td.ot3-f { width: var(--ot3-cellw); }

/* ---- glyph <img>: transparent spacer, painted currentColor, masked to the
        ring for toggles; leaves have no mask (the cell draws their lines). --- */
.ot3 img.ot3-sn, .ot3 img.ot3-sh, .ot3 img.ot3-hn,
.ot3 img.ot3-hh, .ot3 img.ot3-nn, .ot3 img.ot3-nt {
    width: var(--ot3-cellw); height: 22px; display: inline-block; vertical-align: top;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
    -webkit-mask-position: left top;  mask-position: left top;
    -webkit-mask-size: var(--ot3-circle) 22px;  mask-size: var(--ot3-circle) 22px;
}
.ot3 img.ot3-sn, .ot3 img.ot3-sh {
    cursor: pointer;
    -webkit-mask-image: url('svg/circle-plus.svg');  mask-image: url('svg/circle-plus.svg');
}
.ot3 img.ot3-hn, .ot3 img.ot3-hh {
    cursor: pointer;
    -webkit-mask-image: url('svg/circle-minus.svg'); mask-image: url('svg/circle-minus.svg');
}
.ot3 img.ot3-nn, .ot3 img.ot3-nt {
    -webkit-mask-image: none; mask-image: none; background: none;
}

/* hover: the ring (only the ⊕/⊖, not the connector lines) turns the site's
   link-hover colour. -sh/-hh are set by the JS on mouseover; the :hover on the
   normal classes covers the instant before that (and keyboard focus). */
.ot3 img.ot3-sh, .ot3 img.ot3-hh,
.ot3 img.ot3-sn:hover, .ot3 img.ot3-hn:hover,
.ot3 img.ot3-sn:focus-visible, .ot3 img.ot3-hn:focus-visible {
    background-color: var(--ot3-hover);
}

/* ---- connector lines (currentColor gradients on the guide cells) ---- */

/* vertical spine, full height: default for every .ot3-g (continuation cells,
   non-last leaf cells, the root drop line). */
.ot3 td.ot3-g {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: var(--ot3-lx) 0;
    background-size: var(--ot3-line) 100%;
}

/* non-last leaf: full spine + branch  => tee */
.ot3 td.ot3-g:has(> img.ot3-nt) {
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat, no-repeat;
    background-position: var(--ot3-spine) var(--ot3-ly), var(--ot3-lx) 0;
    background-size: calc(var(--ot3-cellw) - var(--ot3-spine)) var(--ot3-line), var(--ot3-line) 100%;
}

/* last leaf: spine down to the branch junction (NOT past it) + branch => elbow.
   The vertical stops at the middle so there's no tail hanging below. */
.ot3 td.ot3-f:has(> img.ot3-nn) {
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat, no-repeat;
    background-position: var(--ot3-spine) var(--ot3-ly), var(--ot3-lx) 0;
    background-size: calc(var(--ot3-cellw) - var(--ot3-spine)) var(--ot3-line), var(--ot3-line) calc(var(--ot3-mid) + var(--ot3-line) / 2);
}

/* non-last toggle: branch + full spine with a transparent GAP over the ring.
   The one gradient covers the top stub (above the ring) AND the run below it,
   so the stub is the same line as the spine above -- no sub-pixel jog. */
.ot3 td.ot3-g:has(> img.ot3-sn), .ot3 td.ot3-g:has(> img.ot3-sh),
.ot3 td.ot3-g:has(> img.ot3-hn), .ot3 td.ot3-g:has(> img.ot3-hh) {
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(to bottom, currentColor 0 var(--ot3-ct), transparent var(--ot3-ct) var(--ot3-cb), currentColor var(--ot3-cb));
    background-repeat: no-repeat, no-repeat;
    background-position: var(--ot3-cr) var(--ot3-ly), var(--ot3-lx) 0;
    background-size: calc(var(--ot3-cellw) - var(--ot3-cr)) var(--ot3-line), var(--ot3-line) 100%;
}

/* last toggle: branch + just the top stub (0..ring-top); nothing below. */
.ot3 td.ot3-f:has(> img.ot3-sn), .ot3 td.ot3-f:has(> img.ot3-sh),
.ot3 td.ot3-f:has(> img.ot3-hn), .ot3 td.ot3-f:has(> img.ot3-hh) {
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat, no-repeat;
    background-position: var(--ot3-cr) var(--ot3-ly), var(--ot3-lx) 0;
    background-size: calc(var(--ot3-cellw) - var(--ot3-cr)) var(--ot3-line), var(--ot3-line) var(--ot3-ct);
}

/* loading / error placeholders shown inside a branch while it fetches */
.ot3-loading, .ot3-error { font-size: 0.9em; color: rgba(128, 128, 128, 0.9); padding: 2px 0; }
.ot3-loading img { height: 1.6em; width: auto; vertical-align: middle; }
.ot3-error { color: #b23838; }

/* page navigator (sqlRows + pager). The container just lays the buttons out;
   the button look comes from linkClass/curClass (default .ot3-pg below, or the
   site's own classes, e.g. sortablelistpage / sortablelistpagedown). */
.ot3-pager { display: flex; flex-wrap: wrap; gap: 0; align-items: center; padding: 6px 0; }
/* keep size identical across normal/hover/focus so the button doesn't grow on
   hover (the site's :hover rule re-pads at higher specificity, so match it) */
.ot3-pager a,
.ot3-pager a:hover,
.ot3-pager a:focus { text-decoration: none; line-height: 1.4; padding-top: 2px; padding-bottom: 2px; }
.ot3-pager .ot3-pg-off { opacity: 0.4; pointer-events: none; }
.ot3-pg-gap { opacity: 0.5; padding: 0 2px; }

/* default pager button look (used only when no linkClass/curClass is passed) */
.ot3-pg {
    display: inline-block; min-width: 1.7em; padding: 2px 7px; text-align: center;
    border-radius: 4px; text-decoration: none; color: inherit; font-size: 13px;
    border: 1px solid rgba(128, 128, 128, 0.35);
}
.ot3-pg:hover { color: var(--ot3-hover); border-color: var(--ot3-hover); }
.ot3-pg-cur { font-weight: bold; background: rgba(128, 128, 128, 0.18); }
.ot3-pg-cur:hover { color: inherit; }