/* Data Visualisation block — frontend.
 *
 * Container shell mirrors the field shell used elsewhere in krskrt-forms:
 *   1px #dedede border · #fff background · 5px border-radius
 */

.kf-viz {
    position:       relative;
    box-sizing:     border-box;
    border:         1px solid #dedede;
    background:     #fff;
    border-radius:  5px;
    padding:        12px;
    margin:         0 auto;
    overflow:       hidden;
}

.kf-viz.is-unconfigured,
.kf-viz.is-error {
    color:       #aaa;
    font-style:  italic;
    text-align:  center;
}

.kf-viz-canvas {
    position: relative;
    width:    100%;
    height:   100%;
    min-height: 120px;
}

/* ------------------------------------------------------------------
 * Phrase cloud (pure CSS — no canvas, crisp at any DPI)
 * ----------------------------------------------------------------- */
.kf-viz--wordcloud .kf-viz-canvas {
    display:        flex;
    flex-wrap:      wrap;
    align-content:  center;      /* centre rows when few tags; JS fitting
                                    ensures we never overflow              */
    align-items:    center;
    justify-content:center;
    gap:            6px 12px;
    height:         100%;
    min-height:     0;           /* override base min-height:120px         */
    overflow:       hidden;      /* clip sub-pixel dust; JS fit does the rest */
    padding:        8px;
    box-sizing:     border-box;
}

.kf-viz-tag {
    display:     inline-block;
    font-weight: 700;
    line-height: 1;
    white-space: normal;     /* allow long phrases to wrap at spaces    */
    word-break:  break-word; /* break runs with no spaces               */
    max-width:   100%;       /* never push past the container edge      */
    text-align:  center;     /* centre text within a wrapped tag        */
    text-wrap:   balance;    /* equalise line lengths — no ragged edges */
    cursor:      default;
    transition:  opacity 0.3s ease;
}

/* ------------------------------------------------------------------
 * Text masonry
 *  - CSS columns; each item is a card; container scrolls vertically.
 *  - New items prepended at the top; older ones drift down naturally.
 * ----------------------------------------------------------------- */
.kf-viz--masonry .kf-viz-canvas {
    column-gap:     10px;
    overflow-x:     hidden;
    overflow-y:     auto;
    max-height:     100%;
    height:         100%;
    box-sizing:     border-box;
    padding-right:  4px; /* leave space for scrollbar */
}
.kf-viz--masonry .kf-viz-item {
    break-inside:           avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside:      avoid;
    background:             #fff;
    border:                 1px solid #dedede;
    border-radius:          5px;
    padding:                8px 10px;
    margin:                 0 0 8px;
    color:                  #00374a;
    font-size:              14px;
    line-height:            1.35;
    overflow:               hidden;
    display:                -webkit-box;
    -webkit-box-orient:     vertical;
}
.kf-viz--masonry .kf-viz-item.is-new {
    animation: kfVizFadeIn 0.4s ease-out both;
}
@keyframes kfVizFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
 * Bar charts (horizontal + vertical)
 * ----------------------------------------------------------------- */
.kf-viz--bar-h .kf-viz-canvas {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    overflow-y:     auto;
    max-height:     100%;
}
.kf-viz--bar-h .kf-viz-bar {
    display:       flex;
    align-items:   center;
    gap:           10px;
    color:         #00374a;
    font-size:     14px;
}
.kf-viz--bar-h .kf-viz-bar-label {
    flex:          0 0 35%;
    text-align:    right;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.kf-viz--bar-h .kf-viz-bar-track {
    flex:          1 1 auto;
    height:        20px;
    background:    #f4f4f4;
    border:        1px solid #dedede;
    border-radius: 5px;
    overflow:      hidden;
    position:      relative;
}
.kf-viz--bar-h .kf-viz-bar-fill {
    height:        100%;
    background:    #00374a;
    border-radius: 4px 0 0 4px;
    transition:    width 0.4s ease;
}
.kf-viz--bar-h .kf-viz-bar-count {
    flex:          0 0 auto;
    font-weight:   700;
    min-width:     2.5ch;
    text-align:    left;
}

.kf-viz--bar-v .kf-viz-canvas {
    display:        flex;
    flex-direction: row;
    align-items:    flex-end;
    justify-content:center;
    gap:            8px;
    height:         100%;
    overflow:       hidden;
    padding-bottom: 4px;
}
.kf-viz--bar-v .kf-viz-bar {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    flex:           1 1 0;
    min-width:      0;
    height:         100%;
    color:          #00374a;
    font-size:      13px;
}
.kf-viz--bar-v .kf-viz-bar-track {
    flex:          1 1 auto;
    width:         100%;
    background:    #f4f4f4;
    border:        1px solid #dedede;
    border-radius: 5px;
    overflow:      hidden;
    display:       flex;
    align-items:   flex-end;
}
.kf-viz--bar-v .kf-viz-bar-fill {
    width:         100%;
    background:    #00374a;
    transition:    height 0.4s ease;
}
.kf-viz--bar-v .kf-viz-bar-count {
    font-weight: 700;
}
.kf-viz--bar-v .kf-viz-bar-label {
    font-size:     12px;
    text-align:    center;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    width:         100%;
}

/* Bare style — strips the card shell for clean page integration */
.kf-viz--bare {
    border:        none;
    background:    transparent;
    border-radius: 0;
    box-shadow:    none;
    padding:       0;
}

/* Empty-state hint shown briefly while the first fetch is in flight. */
.kf-viz-empty {
    display:        flex;
    align-items:    center;
    justify-content:center;
    height:         100%;
    min-height:     100px;
    color:          #aaa;
    font-style:     italic;
    font-size:      14px;
}