/* Custom styles for your blog go here */

/* LSM demo */
.lsm-demo {
    font-family: "Roboto Mono", monospace;
    font-size: 0.9rem;
    margin: 1.5rem 0;
    container-type: inline-size; /* lets the row size its font to this width */
}
.lsm-head {
    opacity: 0.6;
    margin-bottom: 0.4rem;
}
.lsm-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4em;
    line-height: 1.8;
    min-height: 1.8em; /* hold one line so the layout doesn't jump when the row is empty */
    /* shrink the font so all N cells fit one line; capped at 0.9rem on wide screens.
       --lsm-n is set from JS so this auto-adjusts when the number count changes. */
    font-size: min(0.9rem, calc(47cqi / var(--lsm-n, 15)));
}
.lsm-row .cell {
    flex: 0 0 auto;
    min-width: 1.6em;
    text-align: center;
}
.lsm-demo .cur { color: #e0af68; font-weight: 700; } /* newest / probing */
.lsm-demo .dim { color: #888; opacity: 0.4; }        /* shifted / eliminated */
.lsm-demo .hit { color: #4caf50; font-weight: 700; } /* found / durable / newest */
.lsm-demo .dead { color: #e05252; text-decoration: line-through; } /* stale version, dropped by compaction */
.lsm-row .sep { display: inline-block; width: 0.9em; } /* gap between frozen SSTables */
.lsm-row .brk { opacity: 0.45; padding: 0 0.15em; } /* brackets around each sorted file */

/* wrapping rows: reserve 2 lines of height up front so wrapping never shifts the
   page, and size the font so the fullest row fits within those 2 lines */
.lsm-row.wrap {
    flex-wrap: wrap;
    row-gap: 0.2em;
    align-content: flex-start;
    min-height: 5.8em; /* reserve ~3 lines so the row's height never changes as content wraps -> no page shift */
    max-width: 30em; /* ~15 columns wide on desktop */
    font-size: min(0.9rem, calc(47cqi / var(--lsm-n, 15)));
}
.lsm-row .file { display: inline-flex; gap: 0.4em; } /* one sorted file = non-breaking group */
.lsm-row .file.frozen { opacity: 0.45; } /* the memtable currently freezing/flushing */

/* smaller numbers on phones so a full row fits */
@media (max-width: 600px) {
    .lsm-demo { font-size: 0.6rem; }
}