/* Custom styles for your blog go here */

/* ---- interactive demos (shared look with the LSM post) ---- */

:root {
  --hot:  #ff5d5d;  /* DRAM */
  --warm: #ff9e64;  /* NVMe SSD */
  --cold: #7dcfff;  /* Object Storage */
  --durable: #4d4d4d;  /* durable — neutral dark gray */
}

/* inline temperature tokens */
.hot  { color: var(--hot);  font-weight: 700; }
.warm { color: var(--warm); font-weight: 700; }
.cold { color: var(--cold); font-weight: 700; }

/* images scale to the text column, aspect ratio preserved */
.name-plate img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem 0;
}


.lsm-demo {
    font-family: "Roboto Mono", monospace;
    font-size: 0.9rem;
    margin: 1.5rem 0;
}
.lsm-head { opacity: 1; margin-bottom: 0.6rem; }
/* the label line that sits above each row (matches the LSM post) */
.lsm-label { opacity: 0.6; margin-top: 0.5rem; }
.lsm-label b { font-weight: 700; opacity: 1; }   /* numbers stay bright above the dim label */
.lsm-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    row-gap: 0.2em;
    line-height: 1.8;
    align-content: flex-start;
    max-width: 34em;            /* predictable wrapping */
    min-height: 3.8em;          /* reserve ~2 lines so reset never shifts the page */
}
#pb-naive { min-height: 5.8em; } /* the long one: reserve ~3 lines */
.lsm-row .cell { flex: 0 0 auto; min-width: 1.6em; text-align: center; }
.lsm-demo .cur { color: #e0af68; font-weight: 700; }   /* in flight / not yet durable */
.lsm-demo .dim { color: #888; opacity: 0.4; }
.lsm-demo .hit { color: var(--durable); font-weight: 700; }   /* durable / acked */
.lsm-row .brk { opacity: 0.45; }                       /* brackets hug the cells: [1] */
.lsm-row .file { display: inline-flex; align-items: baseline; } /* one object/batch = a unit */
.lsm-row .file .cell { min-width: 0; }                 /* natural width inside brackets */
.lsm-row .file .cell + .cell { margin-left: 0.4em; }   /* space only between numbers */
.lsm-state { opacity: 0.6; }

/* memtable: newest insert just bolded (no alarming color) */
#fs-mem .memnew { font-weight: 700; }

/* fsync demo: lock both rows to a clean 9-col x 2-row lattice */
#fs-log, #fs-mem {
    display: grid;
    grid-template-columns: repeat(12, 1.9em);
    justify-content: start;
    gap: 0.2em 0.3em;
    max-width: none;
    min-height: 5.4em;          /* 3 rows, no reflow */
}
#fs-log .cell, #fs-mem .cell { min-width: 0; }   /* the grid sets the width */

/* per-number jank ascii bar: number on top, a ███░ fill underneath. a whole
   batch's bars fill together as the fsync runs = group commit, then go green. */
#fs-log .cell { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
#fs-log .bar { font-size: 0.8em; letter-spacing: -0.08em; }
#fs-log .cell.wait .num,  #fs-log .cell.flush .num  { color: var(--warm); }
#fs-log .cell.wait .bar,  #fs-log .cell.flush .bar  { color: var(--warm); opacity: 0.85; }
#fs-log .cell.dur .num { color: var(--durable); font-weight: 700; }   /* durable + acked */
#fs-log .cell.dur .bar { color: var(--durable); }
#fs-log { min-height: 8em; }   /* three rows of the taller number+bar cells */
#fs-abar { color: var(--warm); }   /* append bar — races ahead */
#fs-fbar { color: var(--durable); }   /* fsync bar — lags behind */

/* the WAL log = one ascii bar = the whole space. green durable, orange pending,
   gray empty. scales down on mobile via the .lsm-demo font media query. */
.wal-bar { letter-spacing: 0.12em; white-space: nowrap; margin: 0.2rem 0; }
.wal-bar .dur  { color: var(--durable); }   /* fsynced + durable */
.wal-bar .pend { color: var(--warm); }   /* appended, not yet durable */
.wal-bar .gray { color: #ccc; }          /* empty space */

/* write-through demo: two op bars (like the fsync demo) + object storage blocks. */
#wt-membar { color: var(--hot); }    /* memory write bar -- strobes (random writes, ~ns) */
#wt-putbar { color: var(--cold); }   /* PUT bar -- crawls (~100 ms), bound for object storage */
/* object storage: one object per PUT, op-count label above a green block */
#wt-os, #wt2-os { display: flex; flex-wrap: wrap; gap: 0.7em; align-items: flex-end; }
#wt-os .osobj, #wt2-os .osobj { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
#wt-os .ocnt, #wt2-os .ocnt { font-size: 0.8em; font-weight: 700; color: var(--durable); }  /* ops batched in this object */
#wt-os .oblk, #wt2-os .oblk { color: var(--durable); }                                      /* the durable object (one PUT) */

/* PUT demo: ascii block per write (matches Act 1). naive = wall of blocks. */
.blk.dur  { color: var(--durable); }   /* durable / committed PUT */
.blk.pend { color: var(--warm); }   /* pending in the buffer */
#pb-naive { letter-spacing: -0.06em; word-break: break-all; }  /* dense wall */

@media (max-width: 600px) {
    .lsm-demo { font-size: 0.7rem; }
}


/* read-particle demo: highlight the stage the read is sifting + the PUT arrow */
.diagram .rp { color: #a78bfa; font-weight: 700; }   /* read particle / current stage */
.diagram .dur { color: var(--durable); }   /* neutral cached block (pre-temperature demos A/B) */
.diagram .rp-located { color: #a78bfa; opacity: 0.4; font-weight: 700; }   /* manifest pointed here, not yet fetched */
.diagram .arr-on  { color: var(--cold); }            /* PUT in flight */
.diagram .arr-off { color: #ccc; }                   /* idle connector */

pre.diagram {
  line-height: 1;               /* closes vertical gaps so │ ┃ ║ connect */
  letter-spacing: 0;            /* closes horizontal gaps so ─ ━ ═ connect */
  font-family: Menlo, "DejaVu Sans Mono", "JetBrains Mono", Consolas, monospace;
}

/* reserve vertical space for the animated read demos so the 1↔2 line trial path
   doesn't shift the page. 13-row box + 1 blank + 2 trail rows = 16em (the tight
   fit that still holds the tallest state). bump if you add more trail rows. */
#read-a, #read-b, #read-c, #read-d, #read-e, #read-f, #read-g, #read-h, #read-i, #read-j, #read-y, #read-z {
  min-height: 18em;   /* 13-row box + blank + 3-row trial stack (header + 2 path rows) */
  margin: 0;
}

/* per-demo clock: small + subtle */
#wt-clock, #wt2-clock { color: #bbb; font-size: 0.85em; }

/* PLAY control under the read demos -- restarts in place, no page refresh */
.play-btn {
  display: inline-block;
  cursor: pointer;
  color: #888;
  font-family: Menlo, "DejaVu Sans Mono", Consolas, monospace;
  font-size: 0.85em;
  letter-spacing: 0.15em;
  user-select: none;
}
.play-btn:hover { color: var(--cold); }