/* Profile picture + flag (appearance.js). Portraits keep their own paint; the theme picks the light or dark file. */
.pf-avatar{display:inline-grid;place-items:center;flex:none;overflow:hidden;width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1px var(--line);background:var(--surface);vertical-align:middle}
.pf-avatar img{display:block;width:100%;height:100%}
.pf-avatar .pf-light{display:none}
.pf-avatar .pf-photo,.avatar-option .pf-photo{object-fit:cover;border-radius:50%}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .pf-avatar .pf-light{display:block}:root:not([data-theme=dark]) .pf-avatar .pf-dark{display:none}}
:root[data-theme=light] .pf-avatar .pf-light{display:block}:root[data-theme=light] .pf-avatar .pf-dark{display:none}
.pf-avatar[data-size="128"]{width:128px;height:128px;border-radius:8px;box-shadow:none;border:1px solid var(--line)}
.pf-avatar[data-size="40"]{width:40px;height:40px}
@media(max-width:600px){.pf-avatar[data-size="40"]{width:32px;height:32px}}
.pf-insignia{width:100%;height:100%;color:var(--soft)}
.pf-insignia-fill{fill:currentColor;fill-opacity:.06;stroke:currentColor;stroke-opacity:.6;stroke-width:6}
.pf-avatar:is([data-size="128"],[data-size="40"]) .pf-insignia-fill{stroke-width:2}
.pf-insignia-glyph{fill:none;stroke:currentColor;stroke-width:8;stroke-linejoin:round;stroke-linecap:round}
.pf-avatar:is([data-size="128"],[data-size="40"]) .pf-insignia-glyph{stroke-width:3}
/* Flags: a 20 px box, the flag contained in it at its own proportions (20 px on its longer side), no ring. An SVG flag has no
   intrinsic size, so an auto-sized box would add no width to its row and overlap the name. */
.pf-flag{display:inline-block;flex:none;width:20px;height:20px;object-fit:contain;vertical-align:middle}
.pf-mark{display:inline-flex;align-items:center;gap:6px;margin-right:8px;vertical-align:middle}
/* Character screen: the picture and the two controls above the ledger. */
.profile-appearance{display:flex;align-items:center;gap:20px;margin:0 0 22px}
.appearance-flag{display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.appearance-dialog .secondary{min-height:44px;font:12px var(--mono)}
.appearance-dialog .primary{min-height:44px;padding:0 16px;border-radius:3px;font:12px var(--mono);background:var(--accent);border-color:var(--accent);color:var(--on-fill)}.appearance-dialog .primary:hover{background:var(--soft);border-color:var(--soft)}
#avatar-default[aria-pressed=true]{color:var(--fg);box-shadow:inset 0 -2px var(--green)}
/* Picture dialog: the two non-portrait choices on their own row under the grid; Cancel / Save on the row after it. */
.avatar-choices{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:16px}.avatar-choices .text-button{min-height:44px}
/* Pickers: 8 portraits a row on wide screens, 4 on phones; a searchable list of flags. */
.appearance-dialog{width:min(calc(100% - 32px),1160px);max-width:none;max-height:calc(100dvh - 32px);padding:var(--dialog-inset);border-radius:3px;box-sizing:border-box}
#flag-dialog{width:min(calc(100% - 32px),460px)}
.appearance-dialog h2{margin:0 0 var(--dialog-heading-after,16px)}
.avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,128px));gap:12px;justify-content:start}
@media(min-width:1200px){.avatar-grid{grid-template-columns:repeat(8,128px)}}
.avatar-option{position:relative;aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden;cursor:pointer}
.avatar-option img{display:block;width:100%;height:100%}
.avatar-option .pf-light{display:none}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .avatar-option .pf-light{display:block}:root:not([data-theme=dark]) .avatar-option .pf-dark{display:none}}
:root[data-theme=light] .avatar-option .pf-light{display:block}:root[data-theme=light] .avatar-option .pf-dark{display:none}
.avatar-option[aria-checked=true]{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green)}
.avatar-option:hover{border-color:var(--muted)}
.flag-search{width:100%;box-sizing:border-box;min-height:var(--dialog-field-height,44px);padding:0 var(--dialog-field-inset,12px);border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg);font:14px var(--sans)}
.flag-list{display:grid;margin:12px 0 0;max-height:min(52dvh,420px);overflow-y:auto;border-top:1px solid var(--line)}
.flag-option{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border:0;border-bottom:1px solid var(--tile2);background:none;color:var(--fg);font:14px var(--sans);text-align:left;cursor:pointer}
.flag-option:hover{background:var(--hover)}.flag-option[aria-checked=true]{background:var(--tile2);box-shadow:inset 2px 0 var(--green)}
.flag-none{width:20px;flex:none}
.flag-tag{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.appearance-error{color:var(--red);font-size:13px;margin:12px 0 0}.appearance-empty{color:var(--muted);font-size:13px;margin:12px 0 0}
.appearance-dialog .dialog-actions{display:flex;align-items:center;gap:var(--dialog-gap,12px);margin-top:var(--dialog-lead,20px)}.appearance-spacer{flex:1}
@media(max-width:760px){.profile-appearance{align-items:flex-start;gap:16px}.appearance-dialog{--dialog-inset:16px}.appearance-dialog .dialog-actions{flex-direction:row;flex-wrap:wrap}.appearance-dialog .dialog-actions button{width:auto}}
.bridge-owner-mark{display:inline-flex}.bridge-owner-mark .pf-mark{margin:0}