/* #legend (the fullpage's .titlebar) is display: flex row
       with fixed height 1.2em + 8px = ~21px.  The legacy 6px top
       margin was sized for a stacked two-line layout that no longer
       exists; in the row titlebar it shoves AGENT: out of the
       content band and the bar looks malformed.  Zero the margin
       and let flex centre it. */
    #legend { align-items: center; }
    /* AGENT row — same look at every level (fullpage via
       #legend-agent, per-card via .titlebar-agent on tile titlebars).
       Class selector handles both because populateTitlebar puts the
       class on every slot it creates. */
    .titlebar-agent { margin: 0; font-size: 11px; line-height: 1;
                      color: #cde; font-family: ui-monospace, monospace;
                      pointer-events: auto; cursor: pointer;
                      padding: 2px 4px; border-radius: 3px;
                      transition: background 0.12s; }
    .titlebar-agent:hover { background: rgba(136,221,192,0.08); }
    .titlebar-agent .lbl { color: #88ddc0; opacity: 0.7; margin-right: 4px; }
    .titlebar-agent-name { color: #ddc066;
                           border-bottom: 1px dotted rgba(221,192,102,0.4); }
    .titlebar-agent-name[contenteditable=true] {
      outline: 1px solid #88ddc0; outline-offset: 2px;
      background: rgba(136,221,192,0.08);
      cursor: text;
    }