/* Verified Poster Pipeline Explorer - layout
   Fixed total height (CANVAS_HEIGHT 560): toolbar 44px + body 516px.
   Wide: pipeline on the left, information panel on the right (255px).
   Under 720px: the toolbar wraps to two rows (76px). Under 600px: the panel moves below
   the pipeline. The total height is unchanged. */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
main { display: block; }

#app {
    height: 560px;
    display: flex;
    flex-direction: column;
    border: 1px solid silver;
    background: aliceblue;
}
#toolbar {
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: white;
    border-bottom: 1px solid silver;
}
#title { font-size: 19px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }

#body { flex: 1; display: flex; min-height: 0; }
#network-wrap { flex: 1; position: relative; min-width: 0; }
#network { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

#panel {
    flex: 0 0 255px;
    width: 255px;
    background: white;
    border-left: 1px solid silver;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.35;
    overflow: hidden;
}
#panel h3 { margin: 2px 0 6px 0; font-size: 17px; font-family: Menlo, Consolas, monospace; }
#panel p { margin: 0 0 7px 0; }
#panel .hint { color: dimgray; font-size: 14px; margin-bottom: 8px; }
#panel .label { font-weight: bold; }
#panel .good { color: darkgreen; font-weight: bold; }
#panel .bad { color: firebrick; font-weight: bold; }
#panel .failure {
    background: mistyrose;
    border: 1px solid lightcoral;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 6px 0 8px 0;
}
#panel .score { font-weight: bold; margin-top: 6px; }
.legend { font-size: 13px; color: #333; line-height: 1.6; }
select { font-size: 14px; padding: 4px; border-radius: 6px; border: 1px solid steelblue; max-width: 190px; }
.tool-label { font-size: 14px; white-space: nowrap; }
#panel .writes { font-family: Menlo, Consolas, monospace; font-size: 14px; background: whitesmoke; padding: 1px 4px; border-radius: 3px; }
.swatch {
    display: inline-block; width: 12px; height: 12px; border-radius: 3px;
    vertical-align: middle; margin-right: 5px; border: 1px solid #333;
}

.btn {
    font-size: 14px;
    padding: 6px 12px;
    border: 1px solid steelblue;
    border-radius: 6px;
    cursor: pointer;
    background: white;
    color: #1f5f99;
}
.btn-primary { background: steelblue; color: white; }
.btn:hover { filter: brightness(0.95); }

/* vis-network hover tooltips */
div.vis-tooltip {
    max-width: 240px;
    white-space: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.3;
    z-index: 20;
}

@media (max-width: 719px) {
    #toolbar { height: 76px; flex: 0 0 76px; flex-wrap: wrap; align-content: center; row-gap: 4px; }
    #title { flex: 0 0 100%; }
}

@media (max-width: 599px) {
    #body { flex-direction: column; }
    #network-wrap { flex: 0 0 250px; }
    #panel {
        flex: 1 1 auto;
        width: auto;
        border-left: none;
        border-top: 1px solid silver;
        font-size: 14px;
        padding: 8px 10px;
    }
    #panel h3 { font-size: 16px; margin-bottom: 4px; }
    #panel p { margin-bottom: 5px; }
    #title { font-size: 16px; }
    .legend { display: none; }
}