/* abugida chart v003 — table + navarrows overlay support.
   Gradient defs & SVG arrow paths come from navarrows.js. */

.abugida-wrap { position: relative; width: max-content; margin: 0 auto;
                padding: 90px 120px 60px; }
.abugida { border-collapse: collapse; margin: 0 auto; }
.abugida td { text-align: center; padding: 4px 6px; min-width: 42px;
              font-size: 14px; vertical-align: middle; border: 1px solid #ccc; }
.abugida td.hdr    { font-weight: bold; }
.abugida td.rowlbl { font-size: 12px; color: #444; }
.abugida td.sublbl { font-size: 11px; color: #666; }
.abugida td.colhdr { font-weight: bold; }
.abugida td.mn     { cursor: default; }
.abugida td.mn.populated { cursor: pointer; }
.abugida .glyph { font-size: 22px; line-height: 1.1; }
.abugida .ipa   { font-size: 11px; color: #666; }
.abugida .diagonal { background: linear-gradient(to right top,
                       #fff 0%,#fff 49.5%,#888 50%,#888 50.5%,#fff 51%,#fff 100%); }
.abugida .topsep   { border-top:    1px solid #444; }
.abugida .botsep   { border-bottom: 1px solid #444; }
.abugida .leftsep  { border-left:   1px solid #444; }
.abugida .rightsep { border-right:  1px solid #444; }
.abugida .doubletop td { border-top: 4px double #222; }
.abugida td.vowlbl { writing-mode: vertical-rl;
                     font-weight: bold; font-size: 14px; color: #444;
                     border: 1px solid #ccc; }
.arrow-btn:focus { outline: none; fill: url(#arrowGradHover);
                   filter: drop-shadow(0 0 6px #ff0) drop-shadow(3px 4px 5px rgba(0,0,0,0.55)); }
.abugida td.vsub   { font-size: 11px; color: #666; border-left: 1px solid #444;
                     border-right: 1px solid #444; border-top: none; border-bottom: none; }
.abugida tr.vfirst td.vsub { border-top: 1px solid #444; }
.abugida tr.vlast  td.vsub { border-bottom: 1px solid #444; }

.abugida tr.droppable-hidden { display: none; }

/* navarrows styling (ported from $tv/read/printable.css) */
.arrow-btn {
    pointer-events: auto;   cursor: pointer;
    fill: url(#arrowGrad);  stroke: #500;  stroke-width: 1.5;
    filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.45));
    transition: filter 0.1s, transform 0.1s;
}
.arrow-btn:hover {
    fill: url(#arrowGradHover);
    filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.55));
}
.arrow-btn:active {
    fill: url(#arrowGradPress);
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}
.highlight {
    fill: rgba(255, 255, 0, 0.25);
    stroke: red; stroke-width: 2;
    pointer-events: none;
    opacity: 0; transition: opacity 0.15s;
}
.highlight.active { opacity: 1; }
#overlay { position: absolute; top: 0; left: 0; pointer-events: none;
           overflow: visible; }

/* scaled images in populated cells shouldn't swallow hover */
.abugida td[data-cell] > * { pointer-events: none; }

.hint { text-align: center; color: #888; font-size: 12px; margin-top: 8px; }