/* Summer PW masthead, server plaque and panorama navigation */
html[data-summer-theme] {
    --sw-metal: #ac8957;
    --sw-fine-line: #b99a6e;
    --sw-letter: #4c382a;
    --sw-parchment: #eadabe;
    --sw-high: #f4ead7;
    --sw-low: #e0cdac;
    --sw-etch: #fff2d6b8;
    --sw-tint: #8e6845;
    --sw-action: url('/styles/summerpw/brand-nov/action-dawn.webp');
    --sw-on-action: #fff2d2;
    --sw-status-wash: rgba(249,239,217,.78);
    --sw-status-rule: rgba(112,83,48,.27);
    --sw-submit-bg: #d0bea0;
    --sw-submit-hover: #dcccad;
    --sw-submit-ink: #433421;
}
html[data-summer-theme="twilight"] {
    --sw-metal: #8198b2;
    --sw-fine-line: #64798c;
    --sw-letter: #e5e6ee;
    --sw-parchment: #2e4150;
    --sw-high: #3c5262;
    --sw-low: #253643;
    --sw-etch: #a7c6db45;
    --sw-tint: #b9d3e6;
    --sw-action: url('/styles/summerpw/brand-nov/action-twilight.webp');
    --sw-on-action: #f4efff;
    --sw-status-wash: rgba(27,45,61,.79);
    --sw-status-rule: rgba(190,207,221,.32);
    --sw-submit-bg: #3b5260;
    --sw-submit-hover: #465f6d;
    --sw-submit-ink: #eff1e8;
}
.sw-brand-img { object-fit: contain; }
#XF .summer-hero__brand, #XF .sp-portal .sp-hero h1 {
    width: clamp(275px, 29vw, 442px);
    margin: 0;
    filter: drop-shadow(0 3px 6px #1823283d);
}
#XF .summer-hero__brand img, #XF .sp-hero h1 .sw-brand-img { display: block; width: 100%; height: auto; }
#XF .sp-portal .sp-brand img { width: 119px; height: auto; }
#XF .p-nav .p-nav-smallLogo { background: none; }
#XF .p-nav .p-nav-smallLogo .sw-brand-img { display: block; opacity: 1; width: 83px; height: auto; max-height: 40px; }
.sw-server-status {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
    max-width: 100%; gap: 0; margin: 15px 0 4px; padding: 5px 11px;
    color: var(--sw-letter);
    font: 600 13px/1.4 "Segoe UI",Arial,sans-serif; white-space: nowrap;
}
.sw-server-status::before {
    content: ""; position: absolute; inset: 0 -5px; z-index: -1; pointer-events: none;
    border-radius: 50px; background: var(--sw-status-wash);
    mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.sw-server-status > span { display: inline-flex; gap: 5px; align-items: center; padding: 1px 10px; }
.sw-server-status > span + span { border-inline-start: 1px solid var(--sw-status-rule); }
.sw-server-status b { font-variant-numeric: tabular-nums; }
.sw-server-status small { font-size: .84em; color: var(--sw-letter); font-weight: 500; }
.sw-server-status__edition i { width: 9px; height: 9px; border-radius: 50%; background: #888378; border: 1px solid #625f59; }
.sw-server-status[data-status="online"] i { background: #55aa63; border-color: #377746; }
.sw-server-status[data-status="offline"] i { background: #d56960; border-color: #963e3c; }
#XF .sp-portal .sp-top {
    background: linear-gradient(to bottom,var(--sw-high),var(--sw-parchment) 67%,var(--sw-low));
    border-block: 1px solid var(--sw-fine-line); box-shadow: inset 0 1px var(--sw-etch);
}
#XF .sp-portal .sp-top a { color: var(--sw-letter); }
#XF .sp-portal .sp-nav { gap: 6px; }
#XF .sp-portal .sp-nav__button, #XF .sp-portal .sp-account {
    background: linear-gradient(150deg,var(--sw-high),var(--sw-parchment));
    border: 1px solid var(--sw-fine-line); border-radius: 4px 12px;
    padding-inline: clamp(8px,1vw,16px); min-height: 36px;
    box-shadow: inset 0 0 0 2px var(--sw-etch); font-weight: 600;
}
#XF .sp-portal .sp-nav__button::before { content: none; }
#XF .sp-portal .sp-top :is(.sp-nav__button,.sp-account):is(:hover,:focus-visible) {
    color: var(--sw-letter); background: var(--sw-high); border-color: var(--sw-tint);
}
#XF .sp-tools .summer-language.is-active {
    background: var(--sw-high); box-shadow: inset 0 -2px var(--sw-fine-line);
    color: var(--sw-letter);
}
#XF .sp-tools .summer-theme-switch__track { background: var(--sw-low); border-color: var(--sw-fine-line); }
#XF .sp-tools .summer-theme-switch__track > span { background: var(--sw-tint); }
#XF .sp-actions { gap: 8px; margin-top: 10px; width: min(100%,448px); }
#XF .sp-portal .sp-actions .sp-button {
    position: relative; isolation: isolate; min-width: 0; max-width: 218px; min-height: 46px;
    aspect-ratio: 4.2; padding: 0 15px; color: var(--sw-on-action);
    font: 700 clamp(14px,1.05vw,16px)/1.1 Georgia,"Times New Roman",serif; letter-spacing: .01em;
    background: none; border: none; text-shadow: 0 1px 2px #172426;
    filter: none; outline-offset: 2px;
}
#XF .sp-portal .sp-actions .sp-button::before {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background: var(--sw-action) center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 3px #16232150);
}
#XF .sp-portal .sp-actions .sp-button--secondary::before { filter: saturate(.64) drop-shadow(0 2px 3px #16232145); }
#XF .sp-portal .sp-actions .sp-button:is(:hover,:focus-visible)::before { filter: brightness(1.1) drop-shadow(0 2px 4px #17242a60); }
#XF .sp-portal .sp-actions .sp-button:is(:visited,:hover,:focus-visible,:active) { color: var(--sw-on-action); }
#XF .sw-footer-links, #XF .sw-page-jumps {
    color: var(--sw-letter); font: 600 13px/1.35 "Segoe UI",Arial,sans-serif;
}
#XF #footer .sw-footer-links {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    bottom: clamp(32px, 4vw, 64px);
    width: fit-content;
    max-width: calc(100% - 110px);
    margin-inline: auto;
    display: grid;
    justify-items: center;
    gap: 3px;
    text-align: center;
}
#XF #footer .sw-footer-links::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12px -34px;
    pointer-events: none;
    background: var(--sw-status-wash);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent),
                linear-gradient(to bottom, transparent, black 27%, black 76%, transparent);
    mask-composite: intersect;
}
#XF .sw-footer-brand { display: block; flex: none; }
#XF .sw-footer-brand img { display: block; width: 121px; height: auto; }
.sw-footer-links ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; gap: 1px 20px; }
#XF .sw-footer-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--sw-letter); }
#XF .sw-footer-links a:is(:hover,:focus-visible) { text-decoration: underline; color: var(--sw-letter); }

#XF[data-summer-theme][data-template^="thread_view"] .p-breadcrumbs--bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 49px;
    margin: 18px 0 0;
    padding: 6px clamp(12px, 1.7vw, 25px);
    border: 1px solid var(--sw-soft-edge);
    border-radius: 13px;
    background: linear-gradient(104deg, var(--sw-toolbar-top), var(--sw-toolbar-bottom) 70%, var(--sw-toolbar-top));
    box-shadow: inset 0 1px 0 rgba(255, 247, 218, .09);
    color: var(--sw-control-muted);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
#XF[data-template^="thread_view"] .p-breadcrumbs--bottom li { max-width: 100%; }
#XF[data-template^="thread_view"] .p-breadcrumbs--bottom a { color: var(--sw-control-text); }
#XF[data-template^="thread_view"] .p-breadcrumbs--bottom li:last-child a { font-weight: 650; }
#XF[data-template^="thread_view"] .p-breadcrumbs--bottom a:hover { text-decoration: underline; }
#XF[data-template^="thread_view"] .p-breadcrumbs--bottom a:focus-visible,
#XF .tooltip--reaction .reaction:focus-visible,
#XF .message .reactionsBar a:focus-visible {
    outline: 2px solid var(--sw-control-focus);
    outline-offset: 2px;
}
#XF[data-summer-theme] .tooltip--reaction .tooltip-content {
    padding: 3px;
    border: 1px solid var(--sw-control-edge);
    border-radius: 16px;
    background: linear-gradient(155deg, var(--sw-high), var(--sw-parchment));
    color: var(--sw-letter);
    box-shadow: inset 0 1px var(--sw-etch), 0 5px 18px rgba(22, 27, 30, .19);
}
#XF .reactTooltip .reaction {
    margin: 0;
    padding: 4px;
    border-radius: 9px;
}
#XF .reactTooltip .reaction:is(:hover, :focus-visible) {
    background: var(--sw-toolbar-hover);
    transform: scale(1.06);
}
html#XF[data-app="public"][data-summer-theme] .message .reactionsBar {
    width: fit-content;
    max-width: 100%;
    padding: 4px 10px 4px 8px;
    gap: 2px;
    border: 1px solid var(--sw-soft-edge);
    border-radius: 12px;
    background: var(--sw-toolbar-control);
    color: var(--sw-control-text);
}
#XF .message .reactionsBar .reactionSummary > li { background: var(--sw-toolbar-control); }
html#XF[data-app="public"] .message .reactionsBar .reactionsBar-link { color: var(--sw-control-text); }
#XF[data-app="public"]:not([data-template="summer_pw_portal"]) #footer.p-footer {
    margin-top: calc(0px - var(--summer-footer-lift) - clamp(56px,7vw,110px));
}
#sw-page-end { display: block; height: 0; }
.sw-page-jumps { position: fixed; right: max(10px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); z-index: 190; display: grid; gap: 5px; }
#XF .sw-page-jumps a {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    color: var(--sw-letter); background: linear-gradient(150deg,var(--sw-high),var(--sw-low));
    border: 1px solid var(--sw-metal); box-shadow: inset 0 0 0 2px var(--sw-etch),0 1px 6px #17232c38;
}
#XF .sw-page-jumps a:is(:hover,:focus-visible) { color: var(--sw-letter); background: var(--sw-high); text-decoration: none; }
#XF :is(.sw-page-jumps,.sw-footer-links,.sp-actions,.sp-top) a:focus-visible { outline: 2px solid var(--sw-tint); outline-offset: 2px; }
@media (max-width: 760px) {
    #XF .p-nav .p-nav-smallLogo { width: 70px; min-width: 0; max-width: 70px; }
    #XF .p-nav .p-nav-smallLogo .sw-brand-img { width: 70px; max-width: 100%; }
    #XF .summer-hero__brand, #XF .sp-portal .sp-hero h1 { width: clamp(210px,53vw,305px); }
    #XF .sp-portal .sp-brand img { width: 86px; }
    .sw-server-status { font-size: 12px; margin: 7px 0 4px; padding-inline: 4px; }
    .sw-server-status > span { padding-inline: 7px; }
    #XF #footer .sw-footer-links { gap: 2px; bottom: 31px; max-width: calc(100% - 86px); }
    .sw-footer-links ul { gap: 0 12px; }
    #XF .sw-footer-links a { font-size: 12px; min-height: 26px; }
    #XF .sw-footer-brand img { width: 92px; }
    .sw-page-jumps { right: 4px; bottom: 10px; gap: 3px; }
    #XF .sw-page-jumps a { width: 36px; height: 36px; }
}
@media (max-width: 480px) {
    .sw-footer-links ul { align-items: center; gap: 0 12px; text-wrap: balance; }
    #XF .sp-portal .sp-account { padding: 0; }
    #XF .sp-portal .sp-nav__button { padding-inline: 7px; min-height: 34px; }
    #XF .sp-actions { width: min(99%,385px); }
    #XF .sp-portal .sp-actions .sp-button { font-size: 14px; padding-inline: 8px; }
}
@media (max-width: 365px) {
    .sw-server-status { font-size: 11px; }
    .sw-server-status > span { padding-inline: 5px; }
    #XF .sp-portal .sp-brand img { width: 64px; }
    #XF .sp-portal .sp-nav { grid-template-columns: .75fr 1.2fr 1.05fr; gap: 4px; }
    #XF .sp-portal .sp-nav__button { font-size: 12px; padding-inline: 4px; white-space: nowrap; }
    #XF .p-nav .p-nav-smallLogo, #XF .p-nav .p-nav-smallLogo .sw-brand-img { width: 52px; }
}