/* A profile is the collector's card beside one tab at a time. */
/* The card stays under the chrome, whatever it is: --shell-pad-top is everything fixed above the page. */
.public-profile-page { --profile-top: calc(var(--shell-pad-top) + 16px); margin: 0 auto; padding-top: 24px; padding-bottom: 16px; }
.profile-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.profile-main { min-width: 0; }
/* Over the collection, the card stands on the right (#1208). */
@media (min-width: 1000px) {
    .profile-layout:has([data-profile-panel="collection"]:not([hidden])):not(:has(.social-error, .profile-friends-door)) { grid-template-columns: minmax(0, 1fr) 300px; }
    .profile-layout:has([data-profile-panel="collection"]:not([hidden])):not(:has(.social-error, .profile-friends-door)) > .profile-card { grid-area: 1 / 2; }
    .profile-layout:has([data-profile-panel="collection"]:not([hidden])):not(:has(.social-error, .profile-friends-door)) > .profile-main { grid-area: 1 / 1; }
}

/* The card stays beside whatever the tabs show. */
.profile-card { position: sticky; top: var(--profile-top); box-sizing: border-box; display: grid; gap: 16px; max-height: calc(100dvh - var(--profile-top) - 16px); overflow: hidden auto; scrollbar-width: thin; padding: 0 20px 20px; border: 1px solid #dedbd6; border-radius: 20px; background: var(--white); box-shadow: 0 1px 0 #e9e3ee, 0 22px 44px -32px #30223e80; color: var(--text-dark); text-align: center; }
.profile-card > * { min-width: 0; }
.profile-card-crest { display: grid; justify-items: center; margin: 0 -20px; padding-top: 30px; background: linear-gradient(115deg, #8d55ef, #ff6f9e 58%, var(--pastel-yellow)) top / 100% 82px no-repeat; }
.profile-card .profile-avatar-public { width: 104px; height: 104px; border: 4px solid #fffdf9; box-shadow: 0 0 0 1px #dedbd6; font-size: 2.6rem; }
/* What changes the picture sits on its rim. */
.profile-card-crest > * { grid-area: 1 / 1; }
.profile-picture-edit { z-index: 1; display: grid; place-items: center; align-self: end; width: 32px; height: 32px; padding: 0; border: 2px solid #fffdf9; border-radius: 50%; background: #25252d; box-shadow: none; color: #fffdf9; cursor: pointer; transform: translate(38px, 2px); }
.profile-picture-edit:hover { background: #5d2bb8; transform: translate(38px, 2px); }
.profile-picture-edit:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.profile-picture-edit[hidden] { display: none; }
.profile-identity { display: grid; justify-items: center; gap: 4px; }
.profile-name-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; max-width: 100%; }
.profile-name-row h1 { min-width: 0; margin: 0; color: var(--text-dark); font-size: 1.75rem; line-height: 1.05; letter-spacing: -.02em; text-shadow: none; overflow-wrap: anywhere; }
.profile-country { display: inline-flex; flex: none; line-height: 0; }
.profile-country[hidden] { display: none; }
.profile-online { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 2px 8px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--tint-green); color: var(--success); font-size: .72rem; font-weight: 900; line-height: 1.2; }
.profile-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fbf63; }
.profile-online[hidden] { display: none; }
.profile-country img { width: 24px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 12%); object-fit: cover; }
/* Signed under the name, in the name's own ink, so it follows the card's colours. */
.profile-name-signature { display: block; min-width: 0; max-width: 100%; color: var(--text-dark); }
.profile-name-signature[hidden] { display: none; }
.profile-name-signature .signature-ink { display: block; width: auto; height: 44px; max-width: min(220px, 100%); overflow: visible; transform: rotate(-4deg); }
.profile-name-signature .signature-ink path { stroke-width: 2.4px; vector-effect: non-scaling-stroke; }
#profileSubtitle { margin: 0; color: var(--text-muted); font-size: .8rem; }
/* The title they wear (#970), under the name: small capitals in the ink, between two short rules. */
.profile-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 4px; color: var(--accent-purple); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.profile-title::before, .profile-title::after { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }
.profile-title[hidden] { display: none; }
.profile-title-choice { display: grid; gap: 4px; font-weight: 800; }
.title-admin-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.title-admin-list:empty { display: none; }
.title-admin-list li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); font-size: .82rem; font-weight: 800; }
.title-admin-list button { min-width: 26px; min-height: 26px; padding: 0; border-radius: 50%; box-shadow: none; font-size: 14px; line-height: 1; }
.profile-name-edit { display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none; color: var(--text-muted); cursor: pointer; }
.profile-name-edit:hover, .profile-name-edit[aria-expanded="true"] { border-color: #d6d1dc; background: var(--pastel-purple-light); color: var(--accent-purple); transform: none; }
.profile-name-form { box-sizing: border-box; display: grid; gap: 10px; width: 100%; margin-top: 10px; padding: 14px; border: 1px solid #dedbd6; border-radius: 12px; background: var(--white); text-align: left; }
.profile-name-form label { font-size: .8rem; font-weight: 800; }
.profile-name-form input { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #aaa5b0; border-radius: 7px; background: var(--white); color: var(--text-dark); font: inherit; font-size: 1rem; }
.profile-name-hint { color: var(--text-muted); font-size: .75rem; line-height: 1.5; }
.profile-name-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-name-actions button { padding: 9px 12px; border: 1px solid #aaa5b0; border-radius: 8px; background: var(--pastel-yellow); color: var(--text-dark); font: inherit; font-size: .8rem; font-weight: 900; cursor: pointer; }
.profile-name-actions button[type="button"] { border-color: transparent; background: transparent; color: var(--text-muted); }
.profile-name-form input:focus-visible, .profile-name-edit:focus-visible, .profile-name-actions button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.profile-name-form button:disabled, .profile-name-edit:disabled { opacity: .6; cursor: wait; }
.profile-effects { display: grid; gap: 6px; }
.profile-effects-label { font-size: .72rem; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.profile-effect-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-effect-choice { padding: 6px 12px; border: 1px solid #aaa5b0; border-radius: 999px; background: var(--white); color: var(--text-dark); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.profile-effect-choice.is-worn { border-color: var(--ink-border); background: var(--pastel-peach); }
.profile-effect-choice:disabled { cursor: progress; opacity: .6; }
.profile-photo-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--text-muted); font-size: .78rem; cursor: pointer; }
.profile-photo-toggle input { width: 16px; height: 16px; margin: 0; accent-color: #7c3aed; }
.profile-photo-toggle input:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.profile-identity-status { margin: 4px 0 0; color: var(--success); font-size: .78rem; overflow-wrap: anywhere; }
.profile-identity-status[data-error="true"] { color: var(--danger); }
.profile-name-edit[hidden], .profile-name-form[hidden], .profile-photo-toggle[hidden], .profile-identity-status:empty { display: none; }

/* The medals pinned to the card (badge-cabinet.js, `renderPinnedBadges`): the collector's three
   proudest, under their name, each the shelf's medal at two thirds; a press opens it up close.
   The owner's empty places are quiet rings that lead to the cabinet. */
.profile-card-honours { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: -6px 0 -4px; padding: 0; list-style: none; }
.profile-card-honours[hidden] { display: none; }
.badge-honour { display: block; }
.badge-honour .badge-mount { zoom: .68; }
.badge-honour.is-empty button { display: grid; place-items: center; box-sizing: border-box; width: 46px; height: 46px; margin: 0 7px 10px; padding: 0; border: 2px dashed #cbbfd6; border-radius: 50%; background: transparent; color: #a79cb3; font: inherit; font-size: 1.3rem; font-weight: 300; line-height: 1; cursor: pointer; }
.badge-honour.is-empty button:hover { border-color: #8d6cb2; background: var(--pastel-purple-light); color: var(--accent-purple); }
.badge-honour.is-empty button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.profile-card.country-paper .badge-honour.is-empty button { border-color: color-mix(in srgb, var(--ink) 35%, transparent); color: color-mix(in srgb, var(--ink) 70%, transparent); }
.profile-card.country-paper .badge-honour.is-empty button:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, #fff); color: var(--ink); }
/* The miniatures (badge-cabinet.js, `renderMiniatures`): a small medal for every other one the collector
   holds, in rows across the card under the three that hang there, the rarest first; a press opens the medal. */
.profile-card-miniatures { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 254px; margin: 0 auto; padding: 0; list-style: none; }
.profile-card-miniatures[hidden] { display: none; }
.badge-miniature button { display: block; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; filter: drop-shadow(0 1px 1px #30223e59); cursor: pointer; transition: transform 120ms ease-out; }
.badge-miniature button > svg, .badge-miniature .badge-effect-host, .badge-miniature .badge-effect-host > svg { display: block; width: 100%; height: 100%; }
.badge-miniature button:is(:hover, :focus-visible) { background: none; box-shadow: none; transform: translateY(-1px) scale(1.3); }
.badge-miniature button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.motion-reduced .badge-miniature button { transition: none; }
.motion-reduced .badge-miniature button:is(:hover, :focus-visible) { transform: none; }

.profile-card-level { display: grid; gap: 7px; padding: 12px 14px; border-radius: 12px; background: var(--bg-subtle); text-align: left; }
.profile-level-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.profile-level-title strong { font-size: 1.05rem; }
.profile-level-title span, .profile-card-level small { color: var(--text-muted); font-size: .72rem; }
.profile-card-level progress { display: block; width: 100%; height: 8px; accent-color: #7c3aed; }
/* What the XP is made of, folded under the level: one bar cut where each source ends, and each source
   named with what it brought, marked with its length's colour. */
.profile-xp-breakdown { --from-cards: #7c3aed; --from-discoveries: #ff6f9e; --from-badges: #f2b632; font-size: .72rem; }
.profile-xp-breakdown summary { width: fit-content; color: var(--text-muted); font-weight: 700; cursor: pointer; }
.profile-xp-breakdown summary:hover { color: var(--text-dark); }
.profile-xp-breakdown summary:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; border-radius: 4px; }
.profile-xp-bar { display: flex; gap: 2px; overflow: hidden; height: 8px; margin: 9px 0 8px; border-radius: 999px; }
.profile-xp-bar i { flex: 0 0 0; min-width: 0; background: var(--from-cards); }
.profile-xp-bar i:nth-child(2), .profile-xp-breakdown dl > :nth-child(2) dt::before { background: var(--from-discoveries); }
.profile-xp-bar i:nth-child(3), .profile-xp-breakdown dl > :nth-child(3) dt::before { background: var(--from-badges); }
.profile-xp-breakdown dl { display: grid; gap: 4px; margin: 0; }
.profile-xp-breakdown dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.profile-xp-breakdown dt { color: var(--text-muted); font-weight: 650; }
.profile-xp-breakdown dt::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--from-cards); }
.profile-xp-breakdown dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }

/* The collection's worth leads; the four counts sit under it two by two. */
.profile-card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #e6e1eb; border-radius: 12px; background: var(--muted-gray); }
.profile-card-stats:empty { display: none; }
.profile-card-stats article { display: grid; gap: 2px; padding: 10px 8px; background: var(--white); }
.profile-card-stats article:nth-child(2) { grid-column: 1 / -1; order: -1; }
.profile-card-stats strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.profile-card-stats article:nth-child(2) strong { font-size: 1.7rem; letter-spacing: -.02em; }
.profile-card-stats span { color: var(--text-muted); font-size: .68rem; font-weight: 650; }

.profile-wanted { display: grid; gap: 8px; text-align: left; }
.profile-wanted[hidden] { display: none; }
.profile-wanted h2 { margin: 0; color: var(--text-muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.profile-wanted-strip { display: flex; gap: 8px; overflow-x: auto; margin: 0; padding: 2px 2px 8px; list-style: none; scrollbar-width: thin; }
.profile-wanted-strip li { flex: 0 0 52px; }
.profile-wanted-strip a { display: block; color: inherit; text-decoration: none; }
.profile-wanted-strip a:hover { transform: translateY(-2px); }
.profile-wanted-strip img, .profile-wanted-artless { box-sizing: border-box; display: block; width: 52px; aspect-ratio: 11 / 16; object-fit: cover; border: 1px solid var(--ink-border); border-radius: 6px; background: var(--muted-gray); }
.profile-wanted-artless { display: grid; place-items: center; font-size: 1.2rem; }
/* The picture says which card; its name stays for whoever cannot see it. */
.profile-wanted-strip a > span:not(.profile-wanted-artless), .profile-wanted-strip small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.profile-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-card-actions > :is(button, a) { box-sizing: border-box; display: inline-flex; flex: 1 1 118px; align-items: center; justify-content: center; min-height: 40px; padding: 8px 10px; border: 1px solid #aaa5b0; border-radius: 10px; background: var(--white); box-shadow: none; color: var(--text-dark); font: inherit; font-size: .8rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.profile-card-actions > :is(button, a):hover { border-color: #8d6cb2; background: var(--pastel-purple-light); }
.profile-card-actions > .profile-action-primary { flex-basis: 100%; min-height: 46px; border: 2px solid var(--ink-border); background: var(--pastel-yellow); box-shadow: 3px 3px 0 var(--ink-shadow); font-size: .9rem; }
.profile-card-actions > .profile-action-primary:hover { border-color: var(--ink-border); background: var(--pastel-yellow); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink-shadow); }
.profile-card-actions [hidden] { display: none; }
.profile-card-actions :is(button, a, select):focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.profile-card-actions :disabled { opacity: .6; cursor: progress; }
#friendCollectorButton[aria-pressed="true"] { border-color: #6fb886; background: var(--tint-green); }
#nemesisCollectorButton[aria-pressed="true"] { border-color: var(--ink-border); background: #25252d; color: #fff; }
.profile-visibility-toggle { display: flex; flex: 1 1 100%; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: .78rem; font-weight: 800; }
.profile-visibility-toggle select { min-height: 36px; padding: 4px 8px; border: 1px solid #aaa5b0; border-radius: 8px; background: var(--white); box-shadow: none; color: var(--text-dark); font: inherit; font-weight: 800; }
.profile-card-quiet { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.profile-card-quiet :is(button, a) { padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--text-muted); font: inherit; font-size: .74rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.profile-card-quiet :is(button, a):is(:hover, :active) { background: transparent; color: var(--text-dark); transform: none; }
#blockCollectorButton[aria-pressed="true"] { color: var(--danger); }

/* A citizen's card wears their country (`country-paper`, wallet.css): its cover across the top, with
   its emblem and code in the cover's foil, its paper under everything, and its ink wherever the plain
   card is violet. Each country closes its cover the way it tools its passport's (wallet.css). */
.profile-card-emblem, .profile-card-code, .profile-citizenship { display: none; }
.profile-card.country-paper { --crest: 82px; border-color: color-mix(in srgb, var(--ink) 38%, #dedbd6); background: var(--paper), #fffdf9; }
.profile-card.country-paper .profile-card-crest { position: relative; background: linear-gradient(115deg, var(--cover), var(--cover-deep)) top / 100% var(--crest) no-repeat; }
.profile-card.country-paper .profile-card-crest > :is(.profile-card-emblem, .profile-card-code) { grid-area: auto; position: absolute; display: block; color: var(--foil); }
.profile-card-emblem { top: calc(var(--crest) / 2 - 29px); left: 22px; }
.profile-card-emblem .bouzopp-passport-emblem { display: block; width: 50px; height: 50px; }
.profile-card-code { top: calc(var(--crest) / 2 - 15px); right: 20px; font-size: .95rem; font-weight: 800; line-height: 1.2; letter-spacing: .3em; text-indent: .3em; }
.profile-card.country-paper .profile-card-crest::after { top: calc(var(--crest) - 11px); }
/* The picture stands on the cover's edge, ringed in its foil. */
.profile-card.country-paper .profile-avatar-public { z-index: 1; box-shadow: 0 0 0 2px var(--foil), 0 0 0 3px color-mix(in srgb, var(--cover-deep) 55%, transparent); }
.profile-card.country-paper .profile-picture-edit { z-index: 2; }
.profile-card.country-paper .profile-picture-edit:hover { background: var(--ink); }
.profile-card.country-paper .profile-citizenship { display: block; max-width: 100%; color: var(--ink); font-size: .66rem; font-weight: 800; letter-spacing: .12em; line-height: 1.4; text-decoration: none; text-transform: uppercase; overflow-wrap: anywhere; }
.profile-card.country-paper .profile-citizenship:hover { text-decoration: underline; text-underline-offset: 3px; }
.profile-card.country-paper .profile-citizenship[hidden] { display: none; }
.profile-card.country-paper .profile-district { font-size: .6rem; letter-spacing: .1em; }
.profile-card.country-paper .profile-district:not([href]) { cursor: default; text-decoration: none; }
.profile-card.country-paper .profile-name-signature { color: var(--ink); }
.profile-card.is-pedalistan .profile-name-row h1 { font-style: italic; font-weight: 900; }
.profile-card.is-andasmas .profile-name-row h1 { font-family: Georgia, "Times New Roman", serif; }
.profile-card.country-paper :is(.profile-name-edit:hover, .profile-name-edit[aria-expanded="true"]) { border-color: color-mix(in srgb, var(--ink) 30%, #fff); background: color-mix(in srgb, var(--ink) 10%, #fff); color: var(--ink); }
.profile-card.country-paper .profile-card-level { background: color-mix(in srgb, var(--ink) 11%, #fffdf9); }
.profile-card.country-paper :is(.profile-card-level progress, .profile-photo-toggle input) { accent-color: var(--ink); }
.profile-card.country-paper .profile-xp-breakdown { --from-cards: var(--ink); --from-discoveries: color-mix(in srgb, var(--ink) 45%, #fffdf9); --from-badges: var(--foil); }
.profile-card.country-paper .profile-xp-breakdown summary:focus-visible { outline-color: var(--ink); }
.profile-card.country-paper .profile-card-stats { border-color: color-mix(in srgb, var(--ink) 26%, #e6e1eb); background: color-mix(in srgb, var(--ink) 26%, #e6e1eb); }
.profile-card.country-paper .profile-card-actions > :is(button, a):not(.profile-action-primary):hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, #fff); }
.profile-card.country-paper :is(button, a, select, input):focus-visible { outline-color: var(--ink); }
/* By night the card is read by lamplight (wallet.css): the cover and its foil stay, the paper is the
   country's night paper and the ink its night ink, and what was mixed with the day's paper is mixed with
   the night's. */
html[data-theme="dark"] .profile-card.country-paper { --ink: var(--ink-night); border-color: color-mix(in srgb, var(--ink) 38%, #2a2c2f); background: var(--paper), var(--paper-night); box-shadow: 0 1px 0 #0000, 0 22px 44px -32px #000000b3; }
html[data-theme="dark"] .profile-card.country-paper :is(.profile-name-edit:hover, .profile-name-edit[aria-expanded="true"]) { border-color: color-mix(in srgb, var(--ink) 30%, var(--paper-night)); background: color-mix(in srgb, var(--ink) 14%, var(--paper-night)); }
html[data-theme="dark"] .profile-card.country-paper .badge-honour.is-empty button:hover { background: color-mix(in srgb, var(--ink) 14%, var(--paper-night)); }
html[data-theme="dark"] .profile-card.country-paper .profile-card-level { background: color-mix(in srgb, var(--ink) 14%, var(--paper-night)); }
html[data-theme="dark"] .profile-card.country-paper .profile-xp-breakdown { --from-discoveries: color-mix(in srgb, var(--ink) 45%, var(--paper-night)); }
html[data-theme="dark"] .profile-card.country-paper .profile-card-stats { border-color: color-mix(in srgb, var(--ink) 26%, #2a2c2f); background: color-mix(in srgb, var(--ink) 26%, #2a2c2f); }
html[data-theme="dark"] .profile-card.country-paper .profile-card-actions > :is(button, a):not(.profile-action-primary):hover { background: color-mix(in srgb, var(--ink) 14%, var(--paper-night)); }

/* A profile that cannot be shown is only its card: what went wrong, or the door to knock on. */
.profile-layout:has(.profile-card > :is(.social-error, .profile-friends-door)) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.profile-layout:has(.profile-card > :is(.social-error, .profile-friends-door)) .profile-main { display: none; }
.profile-card:has(> :is(.social-error, .profile-friends-door)) { position: static; width: min(100%, 460px); padding: 20px; }
.profile-friends-door { display: grid; gap: 14px; justify-items: center; padding: 10px; font-weight: 800; }
.profile-friends-door p { margin: 0; }
.profile-friends-door button { padding: 10px 14px; border: 2px solid var(--ink-border); border-radius: 10px; background: var(--pastel-yellow); box-shadow: 3px 3px 0 var(--ink-shadow); color: var(--text-dark); font: inherit; font-weight: 900; cursor: pointer; }

.profile-tabs { display: flex; gap: 2px; min-height: 48px; margin: 0 0 16px; overflow-x: auto; border-bottom: 1px solid #dedbd6; scrollbar-width: none; }
.profile-tabs [role="tab"] { position: relative; display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 10px 10px 0 0; background: transparent; box-shadow: none; color: var(--text-muted); font: inherit; font-size: .95rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.profile-tabs [role="tab"]::after { content: ''; position: absolute; inset: auto 10px 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.profile-tabs [role="tab"]:is(:hover, :active) { background: var(--bg-subtle); color: var(--text-dark); transform: none; }
.profile-tabs [aria-selected="true"] { color: var(--text-dark); }
.profile-tabs [aria-selected="true"]::after { background: #25252d; }
.profile-tabs [role="tab"]:focus-visible { outline: 2px solid #7c3aed; outline-offset: -3px; }
.profile-tab-count { padding: 2px 7px; border-radius: 99px; background: var(--muted-gray); color: var(--text-muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.profile-tab-count[hidden], .profile-panel[hidden] { display: none; }

/* The whole space is in view at once: the scene is never taller than what the window has left,
   under the tabs, under what arranges it, and under its tools while it is being arranged. */
.profile-panel { --showcase-reserve: calc(var(--profile-top) + var(--shell-bottom) + 86px); --showcase-tools: 0px; }
.profile-panel:has(.showcase-heading-actions :is(button, label):not([hidden])) { --showcase-reserve: calc(var(--profile-top) + var(--shell-bottom) + 140px); }
.profile-panel:has(.showcase-canvas.is-arranging) { --showcase-tools: 138px; }
.public-profile-page .profile-panel .profile-showcase { position: static; margin: 0; padding: 0; border: 0; }
.profile-panel .profile-showcase > header { flex-direction: row; align-items: center; justify-content: flex-end; min-height: 42px; margin: 0 0 12px; }
.profile-panel .profile-showcase > header:not(:has(.showcase-heading-actions :is(button, label):not([hidden]))) { display: none; }
/* The tab already says what this is; its heading stays for whoever cannot see the tab. */
.profile-panel .profile-showcase > header > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.profile-panel .showcase-heading-actions { align-items: center; }
.profile-panel .showcase-curate-action { flex-direction: row; gap: 10px; }
.public-profile-page .profile-panel .profile-showcase > header button { min-height: 36px; }
.profile-panel .showcase-preset-picker :is(select, input) { min-height: 36px; }
.profile-panel .showcase-viewport { max-width: min(100%, max(460px, calc((100dvh - var(--showcase-reserve) - var(--showcase-tools)) * 1000 / 760))); margin-inline: auto; }

/* The filters line up in columns, however many the tab has room for. */
.profile-panel .card-browser { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 12px 0; }
.profile-panel .card-browser-search { grid-column: span 2; }
.profile-panel .card-browser > button { justify-self: start; }
.public-profile-page .profile-panel .profile-collection-toolbar { margin-top: 0; }

.public-profile-page .profile-progression { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; background: transparent; }
.profile-progression summary { cursor: pointer; font-weight: 800; }
.profile-progression .badge-cabinet { margin: 0; }
/* Someone else's badges set against the visitor's (#1095, public-profile.js): two counts, each opening on the
   medals only one of them holds, which come in one after another. */
.badge-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 14px; }
.badge-compare details { padding: 10px 14px; border: 2px solid var(--ink-border); border-radius: 10px; background: var(--white); }
.badge-compare summary { font-weight: 750; cursor: pointer; }
.badge-compare details.is-empty summary { color: var(--text-muted); cursor: default; pointer-events: none; list-style: none; }
.badge-compare details.is-empty summary::-webkit-details-marker { display: none; }
.badge-compare-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.badge-compare-list .badge-miniature { animation: badge-compare-in .3s ease-out both; }
.badge-compare-list .badge-miniature:nth-child(n+2) { animation-delay: 40ms; }
.badge-compare-list .badge-miniature:nth-child(n+3) { animation-delay: 80ms; }
.badge-compare-list .badge-miniature:nth-child(n+4) { animation-delay: 120ms; }
.badge-compare-list .badge-miniature:nth-child(n+5) { animation-delay: 160ms; }
@keyframes badge-compare-in { from { opacity: 0; transform: scale(.6); } }
.motion-reduced .badge-compare-list .badge-miniature { animation: none; }
.profile-progression .social-actions { justify-content: flex-end; }

/* The picture editor: the card's art in the round frame it will be shown in, over the cards to choose from. */
.picture-editor-stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 32px; margin: 0 0 20px; }
.picture-editor-frame, .picture-editor-small { border-radius: 50%; background: radial-gradient(circle at top, var(--white), var(--pastel-purple-light) 70%); box-shadow: 0 0 0 1px #d8d0c6; }
.picture-editor-frame { width: min(240px, 60vw); height: auto; aspect-ratio: 1; cursor: grab; touch-action: none; }
.picture-editor-frame:active { cursor: grabbing; }
.picture-editor-frame.is-empty { cursor: default; }
.picture-editor-frame:focus-visible { outline: 3px solid #8060c5; outline-offset: 4px; }
.picture-editor-small { width: 36px; height: 36px; }
.picture-editor-controls { display: grid; justify-items: start; gap: 14px; }
.picture-editor-controls label { display: grid; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 650; }
.picture-editor-controls input[type="range"] { width: min(220px, 60vw); accent-color: #343b32; }
.picture-editor .picker-heading, .picture-editor .picker-tray, .picture-editor .picker-results span:last-child { display: none; }
.picture-editor .picker-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.picture-editor .picture-editor-photo { min-height: 42px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 99px; background: transparent; box-shadow: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }

.profile-admin-email { margin: 0 0 12px; font-weight: 700; overflow-wrap: anywhere; }
.profile-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-admin-actions button { padding: 10px 14px; border: 1px solid #aaa5b0; border-radius: 8px; background: var(--pastel-yellow); color: var(--text-dark); font: inherit; font-size: .85rem; font-weight: 900; cursor: pointer; }
.profile-admin-actions button[hidden] { display: none; }
.profile-admin-actions .profile-admin-act { display: contents; }
.profile-admin-actions .profile-admin-link { display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid #aaa5b0; border-radius: 8px; background: #25252d; color: #fff; font-size: .85rem; font-weight: 900; text-decoration: none; }
.profile-admin-actions button:disabled { opacity: .6; cursor: progress; }
#deleteCollectorButton { background: #ffadad; }
[data-profile-panel="admin"] .trade-composer { margin: 20px 0 0; }

/* While the space is being arranged, its items stand where the card does (showcase-layout.css). */
@media (min-width: 1000px) {
    .profile-layout:has(.showcase-canvas.is-arranging) .profile-card { visibility: hidden; }
}
/* With room beside the tabs, what arranges the space sits on their row and the scene takes the rest. */
@media (min-width: 1320px) {
    .profile-panel:has(.showcase-heading-actions :is(button, label):not([hidden])) { --showcase-reserve: calc(var(--profile-top) + var(--shell-bottom) + 86px); }
    .profile-panel .profile-showcase > header { position: relative; width: fit-content; height: 48px; margin: -64px 0 16px auto; }
}
/* A short window keeps the whole card in view: a smaller picture, the four counts on one row. */
@media (min-width: 1000px) and (max-height: 860px) {
    .profile-card { gap: 12px; padding-bottom: 16px; }
    .profile-card-crest { padding-top: 22px; background-size: 100% 64px; }
    .profile-card.country-paper { --crest: 64px; }
    .profile-card-emblem .bouzopp-passport-emblem { width: 42px; height: 42px; }
    .profile-card .profile-avatar-public { width: 84px; height: 84px; font-size: 2.1rem; }
    .profile-picture-edit, .profile-picture-edit:hover { transform: translate(31px, 2px); }
    .profile-name-row h1 { font-size: 1.5rem; }
    .profile-card-level { padding: 10px 12px; }
    .profile-card-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .profile-card-stats article { padding: 7px 3px; }
    .profile-card-stats article:nth-child(2) strong { font-size: 1.4rem; }
    .profile-card-stats span { font-size: .6rem; }
}
@media (max-width: 999px) {
    .profile-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .profile-card { position: static; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; max-height: none; padding: 20px 16px 16px; background: linear-gradient(90deg, #8d55ef, #ff6f9e 58%, var(--pastel-yellow)) top / 100% 6px no-repeat, var(--white); text-align: left; }
    .profile-card > :not(.profile-card-crest, .profile-identity) { grid-column: 1 / -1; }
    .profile-card-crest { margin: 0; padding: 0; background: none; }
    /* With no cover to wear, the country keeps the stripe, its paper and its ink. */
    .profile-card.country-paper { background: linear-gradient(90deg, var(--cover), var(--cover-deep)) top / 100% 6px no-repeat, var(--paper), #fffdf9; }
    .profile-card.country-paper .profile-card-crest { background: none; }
    .profile-card.country-paper .profile-card-crest > :is(.profile-card-emblem, .profile-card-code), .profile-card.country-paper .profile-card-crest::after { display: none; }
    .profile-card.country-paper .profile-avatar-public { box-shadow: 0 0 0 2px var(--ink); }
    .profile-card .profile-avatar-public { width: 76px; height: 76px; border-width: 3px; font-size: 2rem; }
    .profile-picture-edit, .profile-picture-edit:hover { width: 28px; height: 28px; transform: translate(28px, 2px); }
    .profile-identity { justify-items: start; }
    .profile-name-row { justify-content: flex-start; }
    .profile-name-row h1 { font-size: 1.5rem; }
    .profile-card-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
    .profile-card-stats article { padding: 8px 4px; }
    .profile-card-stats span { font-size: .62rem; }
    .profile-card-actions > :is(button, a) { flex-basis: 140px; }
}
@media (max-width: 520px) {
    .profile-tabs [role="tab"] { padding: 0 12px; font-size: .88rem; }
}