/* flair.css — pad flair (1.99ir, padflair.js): the chip next to a name, the pad's "Your flair here" card, the settings hub's Flair tab */
.ufl { display: inline-flex; align-items: center; gap: 3px; max-width: 14em; margin: 0 2px 0 4px; padding: 0 7px; border-radius: 999px;
       background: var(--fl, #66bb6a); color: var(--fli, #111) !important; font: 600 11px/18px var(--ds-font); letter-spacing: 0;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-transform: none; }
.ufl-e { font-size: 12px; line-height: 1; flex: none; }
/* 1.99xm: the name is its own span (padflair.html / postHtml / the page-JS chips) - text-overflow needs a block, not a flex
   container's bare text run, so a long flair now ends in "…" (full name in the chip's title) instead of being cut mid-letter */
.ufl-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 1.99xm: a name line with a flair (post header, comment head) stays ONE line and the pad name always shows: the flair gives
   way first (down to its emoji + "…"), then the author's name; the pad keeps at least a few letters and ellipsizes, the time
   and Follow never move. Nothing pushes the card wider than the screen. */
.fp-meta, .cm > .cm-head { overflow: hidden; padding: 4px; margin: -4px; }   /* the padding keeps focus rings inside the clip */
.fp-meta > .ufl, .cm-head > .ufl { flex: 0 1000 auto; min-width: 2.7em; margin: 0 0 0 2px; }
.fp-meta > .fp-author, .cm-head > .fp-author { flex: 0 40 auto; min-width: 8ch; }
.fp .fp-meta > .fp-where { flex: 0 1 auto; min-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .fp .fp-meta, .cm > .cm-head { gap: 4px; }
  .fp-meta > .fp-author, .cm-head > .fp-author { min-width: 6ch; }
  .fp .fp-meta > .fp-where { min-width: 8ch; }
}
.pfl { margin: 10px 0 12px; padding: 10px 12px; border: 1px solid #262b28; border-radius: 10px; background: #121513; display: flex; flex-wrap: wrap;
       align-items: center; gap: 8px 12px; font: 13px/1.5 var(--ds-font); color: #bbb; }
.pfl b { color: #ddd; }
.pfl select { background: #0d0d0d; color: #eee; border: 1px solid var(--ds-line-strong); border-radius: 6px; padding: 4px 6px; font: inherit; max-width: 100%; }
.pfl .pfl-msg { color: var(--ds-text-muted); font-size: 12px; }
.pfl .pfl-msg.err { color: #ff8a80; }
/* the settings hub */
.fl-list { display: grid; gap: 8px; margin: 8px 0 12px; padding: 0; list-style: none; }
.fl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--ds-line); border-radius: 8px; background: #111; }
.fl-row .fl-meta { color: var(--ds-text-muted); font-size: 12px; }
.fl-row .grow { flex: 1 1 auto; }
.fl-form { display: grid; gap: 8px; }
.fl-form .fl-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.fl-form label { display: grid; gap: 3px; font-size: 12px; color: #aaa; min-width: 0; }
.fl-form input[type=text] { min-width: 0; width: 12em; max-width: 100%; }
.fl-form input[name=emoji] { width: 4.5em; }
.fl-form input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--ds-line-strong); border-radius: 6px; background: none; }
.fl-form .ck { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #ccc; }
.fl-sw { display: flex; flex-wrap: wrap; gap: 5px; }
.fl-sw button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; }
.fl-sw button:focus-visible, .fl-sw button:hover { border-color: #fff; }
.fl-people { width: 100%; border-collapse: collapse; font-size: 13px; }
.fl-people td { padding: 6px 4px; border-top: 1px solid #222; vertical-align: middle; }
.fl-msg { min-height: 1.2em; font-size: 13px; color: var(--ds-text-muted); }
.fl-msg.err { color: #ff8a80; }
@media (max-width: 520px) { .fl-form input[type=text] { width: 100%; } .fl-form .fl-fields > label { flex: 1 1 100%; } }
/* 1.99wq: post flair (padflair.js postHtml) - a squarer label before a post's title; the pad feed's flair filter bar; the composer picker */
.pfl-post { display: inline-flex; align-items: center; gap: 4px; max-width: 16em; margin: 0 6px 0 0; padding: 1px 8px; border-radius: 6px;
            background: var(--fl, #66bb6a); color: var(--fli, #111) !important; font: 700 11.5px/18px var(--ds-font); text-decoration: none !important;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; flex: none; }
a.pfl-post:hover, a.pfl-post:focus-visible { filter: brightness(1.12); outline: none; box-shadow: 0 0 0 2px #0008, 0 0 0 3px var(--fl, #66bb6a); }
.pfl-post .ufl-e { font-size: 12.5px; }
.pfl-bar .ftg-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pfl-bar .pfl-post { margin: 0; }
.fc-flair { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 600 12px/1.4 var(--ds-font); color: #aaa; }
.fc-flair[hidden] { display: none; }
.fc-flair select, .fp-editf select[name=flair] { background: #0d0d0d; color: #eee; border: 1px solid var(--ds-line-strong); border-radius: 6px; padding: 4px 6px; font: inherit; max-width: 100%; }
.ftag.own { border-color: #3d6b47; }