/* ramgrid.css: the 64-frame RAM map used by the page-walk and grow-the-tree walkthroughs (same look as the X-ray boxes). */
:root { --tbl: #5b6b8c; --tbl-bg: #e6eaf3; --free: #f7f5ef; }
.ramwrap { background: #fff; border: 2px solid var(--line); border-radius: .7rem; padding: .45rem .55rem .5rem; }
.ramgrid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.rc { position: relative; aspect-ratio: 1; min-width: 0; border: 2px solid transparent; border-radius: .4rem; background: var(--free); }
.rc .n { position: absolute; left: 4px; top: 1px; font-size: .68rem; font-weight: 700; line-height: 1.2; color: #8a857a; font-variant-numeric: tabular-nums; }
.rc .ct { position: absolute; right: 4px; bottom: 2px; font-size: .68rem; font-weight: 800; line-height: 1.1; color: var(--pc); }
.rc .ic { position: absolute; right: 4px; bottom: 4px; width: 46%; max-width: 18px; height: auto; fill: #fff; stroke: var(--tbl); stroke-width: 1.6; }
.rc.k-free { border: 1.5px dashed #cfcabe; }
.rc.k-kernel { background: repeating-linear-gradient(45deg, #d9d6cf 0 4px, #cbc7be 4px 8px); border-color: #bdb8ad; }
.rc.k-kernel .n { color: #5d594f; }
.rc.k-table { background: var(--tbl-bg); border-color: var(--tbl); }
.rc.k-table .n { color: var(--tbl); }
.rc.k-data { background: color-mix(in srgb, var(--pc) 24%, white); border-color: var(--pc); }
.rc.k-data .n { color: #7a5500; }
.rc.next { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tbl); z-index: 1; }
.rc.badf { box-shadow: 0 0 0 4px var(--fault); z-index: 1; }
.rc.newf { box-shadow: 0 0 0 3px var(--new); z-index: 1; }
.rc.freed { background: #fff; border: 2px dashed var(--gone); }
.rc.freed .n { color: var(--gone); }
.rc .ord { position: absolute; left: -5px; bottom: -5px; min-width: 1.05rem; height: 1.05rem; border-radius: 1rem; background: var(--tbl); color: #fff; font-size: .66rem; font-weight: 800; display: grid; place-items: center; z-index: 2; box-shadow: 0 0 0 2px #fff; }
.rc .ord.d { background: var(--off); }
.rc .ord.x { background: var(--fault); }
.rc .tagn { position: absolute; right: -5px; top: -8px; font-size: .52rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--new); border-radius: .25rem; padding: 0 .22rem; z-index: 2; }
.rc .tagn.f { background: var(--gone); }
.ramleg { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .7rem; color: var(--muted); margin-top: .45rem; }
.ramleg i { display: inline-block; width: .85rem; height: .85rem; border-radius: .2rem; vertical-align: -2px; margin-right: .25rem; border: 2px solid; }
.ramleg .lk i { background: repeating-linear-gradient(45deg, #d9d6cf 0 3px, #cbc7be 3px 6px); border-color: #bdb8ad; }
.ramleg .lt i { background: var(--tbl-bg); border-color: var(--tbl); }
.ramleg .ld i { background: color-mix(in srgb, var(--proc-a) 24%, white); border-color: var(--proc-a); }
.ramleg .ln i { background: #fff; border-color: var(--new); }
.ramleg .lx i { background: #fff; border: 2px dashed var(--gone); }
.ramleg .lf i { background: var(--free); border: 1.5px dashed #cfcabe; }