.page-portfolio > main { margin-top:1rem; }
.page-portfolio > main > .container.pt-3 { padding-top:0 !important; }
.page-portfolio > main > .portfolio-page.py-4 { padding-top:.5rem !important; }
.page-portfolio .portfolio-social-profile { padding-block:.5rem .75rem; margin-block-end:.75rem; }
.page-portfolio .message-dock-launcher { display:none; }

/* Keep search available during gallery playback without a large mobile gap. */
.page-portfolio .portfolio-gallery-shell { overflow-anchor:none; }
.portfolio-description-mobile { display:none; }
@media (max-width:767.98px) {
.page-portfolio .portfolio-social-profile { padding-bottom:.25rem; margin-bottom:.25rem; }
.page-portfolio .portfolio-gallery-search-tools.search-toolbar { min-height:46px; }
.page-portfolio .portfolio-gallery-search-tools :is(.showcase-gallery-search, .search-toolbar-dropdown > summary) { min-height:44px; padding-block:.375rem; }
.portfolio-description-desktop { display:none; }
.portfolio-description-mobile { display:inline; }
}

/* The biography fills the text column, including its inline edit control. */
.page-portfolio .portfolio-inline-editable-description {
    width:calc(100% + .45rem); max-width:none; margin-inline-end:0;
}
.page-portfolio .portfolio-social-profile .portfolio-inline-editable-description p,
.page-portfolio .portfolio-social-profile [data-portfolio-inline-view] > .text-secondary:not(.portfolio-kicker) { max-width:none; }
@media (max-width:575px) {
    .page-portfolio .portfolio-inline-editable-description { width:calc(100% + 80px); }
}

/* Keep the owner-only Followers entry inside the search border, like Network. */
.portfolio-gallery-search-tools { display:flex; align-items:center; flex:1 1 22rem; min-width:0; border:1px solid var(--border-control); border-radius:var(--search-radius); background:var(--bg-elevated); }
.portfolio-gallery-search-tools:focus-within { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.portfolio-gallery-search-tools .showcase-gallery-search { flex:1 1 0; width:0; border:0; background:transparent; border-radius:inherit; }
.portfolio-gallery-search-tools .showcase-gallery-search:focus { background:transparent; outline:none; box-shadow:none; }
.portfolio-gallery-search-tools .followers-entry { position:relative; flex:0 1 auto; min-width:0; max-width:calc(100% - 3rem); padding:.4rem .65rem; margin-inline-end:.125rem; border-radius:var(--search-radius); overflow-wrap:anywhere; }
.portfolio-gallery-search-tools .followers-entry::before { content:''; position:absolute; inset-inline-start:0; top:calc(50% - 10px); height:20px; border-inline-start:1px solid var(--border); }
.portfolio-gallery-search-tools .followers-entry:hover { color:var(--accent); background:var(--accent-soft); text-decoration:none; }
.portfolio-gallery-search-tools .followers-entry:focus-visible { outline-offset:-3px; }

/* On tablets and small desktops the floating logo shares the avatar's edge. */
@media (min-width:768px) and (max-width:1399px) {
    .page-portfolio > main { margin-top:2.5rem; }
}

/* Keep presence outside the editable name and independent of photo visibility. */
.portfolio-owner-line { display:flex; align-items:center; gap:.6rem; min-width:0; max-width:100%; }
.portfolio-name-actions > .portfolio-owner-line { flex:1 1 8rem; }
.portfolio-social-profile .portfolio-owner-line h1 { flex:0 1 auto; min-width:0; }
.portfolio-owner-presence { position:relative; flex:none; width:12px; height:12px; margin-block-end:.25rem; }
.portfolio-owner-presence > .user-avatar-presence { inset:1px; width:10px; height:10px; border:0; }
.portfolio-owner-presence > .user-avatar-presence.is-offline { background:var(--muted); box-shadow:none; animation:none; opacity:1; }
.portfolio-owner-line > .portfolio-message-open { margin-block-end:.25rem; }
.portfolio-owner-presence > .user-avatar-presence.is-online { animation:portfolio-presence-pulse 2.2s ease-in-out infinite; }
@keyframes portfolio-presence-pulse {
    0%, 100% { opacity:1; box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 25%, transparent); }
    50% { opacity:.2; box-shadow:0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-owner-presence > .user-avatar-presence.is-online { animation:none; }
}

.portfolio-profile-photo-option { display:flex; align-items:center; gap:10px; min-height:44px; margin:0; cursor:pointer; color:var(--text); font-size:.85rem; }
.portfolio-profile-photo-option input { width:20px; height:20px; flex:none; accent-color:var(--accent); }
.portfolio-profile-photo-option input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.portfolio-profile-photo-status { margin:0; font-size:.8rem; line-height:1.5; overflow-wrap:anywhere; color:var(--muted); }
.portfolio-profile-photo-status:empty { display:none; }
.portfolio-profile-photo-status[role="alert"] { color:var(--danger-text); }
.portfolio-guest-dialog { width:min(460px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:24px; border:1px solid var(--border-control); border-radius:16px; background:var(--card); color:var(--text); box-shadow:var(--shadow-lg); overflow-y:auto; }
.portfolio-guest-dialog::backdrop { background:rgb(9 16 30 / .45); }
.portfolio-guest-dialog h2 { margin:0 0 12px; font-size:1.15rem; }
.portfolio-guest-dialog p { font-size:.85rem; line-height:1.55; }
.portfolio-guest-dialog .form-text { color:var(--muted); }
.portfolio-guest-warning { margin-block:12px; padding:12px; border-inline-start:3px solid var(--accent); border-radius:6px; background:var(--accent-soft); }
.portfolio-guest-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-block-start:20px; }
.portfolio-guest-actions > .btn { flex:1 1 auto; }
.portfolio-guest-access-tool [hidden] { display:none; }
@media (max-width:767.98px) {
    .page-portfolio {
        --portfolio-tools-panel-top:var(--portfolio-toolbox-viewport-top);
        --portfolio-tools-panel-bottom:max(12px, env(safe-area-inset-bottom));
    }
    .page-portfolio.portfolio-header-collapsed { --portfolio-tools-panel-top:var(--portfolio-page-toolbox-collapsed-top); }
    /* Continue the desktop fan downward, without an enclosing card. */
    .page-portfolio .portfolio-toolbox-actions {
        top:calc(100% + 8px);
        right:calc((var(--portfolio-tool-size) - var(--portfolio-tool-action-size) - 16px) / 2);
        display:flex; flex-direction:column; align-items:center;
        width:calc(var(--portfolio-tool-action-size) + 16px);
        max-height:calc(100dvh / var(--profile-page-scale, 1) - var(--portfolio-tools-panel-top) - var(--portfolio-tool-size) - 8px - var(--portfolio-tools-panel-bottom));
        padding:8px; border:0; border-radius:0;
        background:transparent; box-shadow:none;
        overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
        scrollbar-width:thin; scroll-padding-block:8px;
    }
    .page-portfolio .portfolio-toolbox-action {
        flex-shrink:0;
        transform:translateY(calc((var(--portfolio-tool-index) + 1) * -.85rem)) scale(.72);
    }
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce) {
    .page-portfolio .portfolio-toolbox-actions { transition:none; }
}
/* The mobile biography normally extends beneath the avatar. With no avatar,
   it follows the profile text edge instead. */
.portfolio-social-profile[data-portfolio-photo-visible="false"]:not(:has([data-portfolio-avatar-editor])) .portfolio-inline-profile :is([data-portfolio-inline-view] > .text-secondary:not(.portfolio-kicker),.portfolio-inline-editable-description,.portfolio-inline-editor) { margin-inline-start:0; }
@media (max-width:575px) {
    /* RTL identity keeps its right-side tools gutter; the biography below it
       can use that space without moving the avatar or name. */
    [dir="rtl"] .page-portfolio .portfolio-inline-editable-description {
        width:calc(100% + 80px + 3.65rem);
        margin-inline-start:calc(-80px - 3.65rem);
    }
    [dir="rtl"] .page-portfolio .portfolio-social-profile [data-portfolio-inline-view] > .text-secondary:not(.portfolio-kicker) { margin-inline-start:calc(-80px - 3.65rem); }
    [dir="rtl"] .page-portfolio .portfolio-social-profile[data-portfolio-photo-visible="false"]:not(:has([data-portfolio-avatar-editor])) [data-portfolio-inline-view] > .text-secondary:not(.portfolio-kicker) { margin-inline-start:-3.65rem; }
}
/* Fullscreen is a mobile viewing tool for owners and visitors alike. */
.page-portfolio .portfolio-fullscreen-tool { display:none; }
.page-portfolio .portfolio-fullscreen-tool[hidden] { display:none !important; }
.page-portfolio .portfolio-fullscreen-tool:disabled { opacity:.55; cursor:wait; }
.page-portfolio .portfolio-fullscreen-feedback { right:calc(100% + .5rem); width:min(22rem, calc(100vw - var(--portfolio-tool-size) - 2rem)); margin:0; color:var(--danger-text); font-size:.8rem; line-height:1.5; }
@media (max-width:767.98px) {
    .page-portfolio .portfolio-fullscreen-tool:not([hidden]) { display:grid; }
}
.portfolio-avatar-editor { position:relative; flex:none; width:108px; margin-block-start:.3rem; }
.portfolio-avatar-trigger { position:relative; display:block; width:108px; height:108px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text); }
.portfolio-avatar-trigger .people-avatar { width:108px; height:108px; font-size:2rem; }
.portfolio-avatar-placeholder { display:grid; place-items:center; width:100%; height:100%; border:1px dashed var(--border-control); border-radius:50%; background:var(--card-soft); color:var(--muted); font-size:1.5rem; }
.portfolio-avatar-placeholder[hidden] { display:none; }
.portfolio-avatar-edit-mark { position:absolute; inset-inline-end:-3px; bottom:-3px; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--border-control); border-radius:50%; background:var(--card); color:var(--accent); box-shadow:var(--shadow-sm); }
.portfolio-avatar-edit-mark svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.portfolio-avatar-trigger:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.portfolio-avatar-actions { position:absolute; z-index:35; top:calc(100% + 8px); inset-inline-start:0; display:grid; gap:.25rem; width:245px; max-width:calc(100vw - 32px); padding:.55rem; border:1px solid var(--border-control); border-radius:12px; background:var(--card); box-shadow:var(--shadow-lg); }
.portfolio-avatar-actions[hidden] { display:none; }
.portfolio-avatar-actions::before { content:""; position:absolute; top:-9px; inset-inline:0; height:9px; }
.portfolio-avatar-actions > :is(a,button) { display:flex; align-items:center; min-height:44px; width:100%; padding:.6rem .7rem; border:0; border-radius:8px; background:transparent; color:var(--text); text-decoration:none; font-size:.82rem; text-align:start; }
.portfolio-avatar-actions > :is(a,button):is(:hover,:focus-visible) { background:var(--accent-soft); color:var(--accent); }
.portfolio-avatar-actions > :is(a,button):focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.portfolio-avatar-actions > small { padding:.2rem .7rem; color:var(--muted); font-size:.73rem; line-height:1.45; }
.portfolio-avatar-actions .portfolio-profile-photo-status { padding:.2rem .7rem; }
.portfolio-photo-check { display:inline-grid; place-items:center; flex:none; width:18px; height:18px; margin-inline-end:8px; border:1px solid var(--border-control); border-radius:4px; color:transparent; }
[data-portfolio-photo-toggle][aria-checked="true"] .portfolio-photo-check { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.portfolio-avatar-dialog { width:min(420px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:22px; border:1px solid var(--border-control); border-radius:16px; background:var(--card); color:var(--text); box-shadow:var(--shadow-lg); overflow-y:auto; }
.portfolio-avatar-dialog::backdrop { background:rgb(9 16 30 / .55); }
.portfolio-avatar-dialog h2 { margin:0 0 8px; font-size:1.15rem; }
.portfolio-avatar-help { margin:8px 0 12px; color:var(--muted); font-size:.8rem; line-height:1.5; }
.portfolio-avatar-dialog .portfolio-avatar-positioner { display:grid; justify-items:center; gap:6px; margin-block:16px; }
.portfolio-avatar-dialog .profile-avatar-preview { width:160px; height:160px; }
.portfolio-avatar-dialog .image-positioner-control { width:100%; }
.portfolio-avatar-dialog .portfolio-profile-photo-status { margin-block:10px; }
.portfolio-avatar-dialog-footer { display:flex; justify-content:flex-end; gap:8px; margin-block-start:16px; }
.portfolio-avatar-dialog [type="file"] { font-size:.8rem; width:100%; }
.portfolio-avatar-dialog .portfolio-profile-photo-option { align-items:flex-start; font-size:.8rem; line-height:1.5; }
@media (max-width:360px) { .portfolio-avatar-dialog { padding:16px; } }
@media (max-width:767.98px) {
    .portfolio-avatar-tools-shortcut { display:none !important; }
}
@media (max-width:575px) {
    .portfolio-avatar-editor, .portfolio-avatar-trigger { width:64px; }
    .portfolio-avatar-trigger { height:64px; }
    .portfolio-avatar-trigger .people-avatar { width:64px; height:64px; font-size:1.25rem; border-width:3px; }
    .portfolio-avatar-edit-mark { width:28px; height:28px; }
    .portfolio-avatar-edit-mark svg { width:15px; height:15px; }
}