/* The flag map: one row per flag, setters in, readers out. */

.flagmap { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.flag-sum { margin: 0 0 4px; }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(180px, 220px) 28px minmax(0, 1fr); align-items: center; gap: 0; padding: 6px 0; border-bottom: 1px dashed color-mix(in srgb, var(--line) 60%, transparent); }
.fside { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fside.in { align-items: flex-end; text-align: right; }
.fend { max-width: 100%; padding: 4px 8px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; box-shadow: 1px 1px 0 var(--shadow); }
.fend.in { border-right: 3px solid var(--act); }
.fend.out { border-left: 3px solid var(--talk); }
.fend .small { font-size: 11px; }
.fnone { font-size: 12px; color: var(--muted); font-style: italic; padding: 0 8px; }
.farrow { height: 2px; background: var(--wire); position: relative; }
.farrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--wire); border-right: 0; }
.fnode { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--talk); box-shadow: 0 2px 6px var(--shadow); min-width: 0; }
.fnode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fnode b { font: 600 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnode .fk { font: 9px/1.6 var(--pixel); color: var(--muted); -webkit-font-smoothing: none; }
.fprob { font: 9px/1.6 var(--pixel); -webkit-font-smoothing: none; }
.frow.never-set .fnode { border-top-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.frow.never-set .fprob { color: var(--warn); }
.frow.never-read .fnode { border-top-color: var(--state); background: color-mix(in srgb, var(--state) 9%, var(--panel)); }
.frow.never-read .fprob { color: var(--state); }
.frow.sel .fnode { box-shadow: 0 0 0 2px var(--accent); }
.flist { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 960px) { .frow { grid-template-columns: 1fr; } .farrow { display: none; } .fside.in { align-items: flex-start; text-align: left; } }