/* Product shell uses existing IFX tokens. Header and dock occupy layout space. */
body[data-community-shell]{--community-tool-height:36px;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.app-header,.inner-header{position:relative;flex:none;z-index:100}
.app-search-row{max-width:1000px;margin:auto;display:flex;gap:8px;align-items:center;padding:4px 8px;box-sizing:border-box}
.app-search-row .brand{font-size:22px;font-weight:700;white-space:nowrap}
[data-shell-search]{flex:1;display:flex;align-items:center;gap:8px;min-width:0;margin:0}
[data-shell-search] .community-field{flex:1;min-width:0;margin:0!important}
[data-shell-search] input{margin:0!important;min-width:0;background:var(--ifx-color-surface);color:var(--ifx-color-text);border-radius:var(--ifx-radius-control);padding:8px}
[data-shell-search] button{min-height:var(--community-tool-height);background:var(--ifx-color-surface);color:var(--ifx-color-action);border:1px solid var(--ifx-color-border);text-transform:none;font:inherit}
.community-language{display:flex;align-items:center;flex:none;gap:4px;margin:0;min-width:56px}
.community-language select{width:56px;max-width:56px;margin:0;min-height:var(--community-tool-height);height:var(--community-tool-height);padding-inline:4px;background:var(--ifx-color-surface);color:var(--ifx-color-text);font:inherit}
.community-language button{margin:0;min-height:var(--community-tool-height);min-width:36px;font:inherit}
.community-language .e-control-wrapper{min-height:var(--community-tool-height);height:var(--community-tool-height);background:var(--ifx-color-surface);color:var(--ifx-color-text)}
.community-language .e-input-group{flex:none;box-sizing:border-box}
.community-language .e-input-group input.e-input{min-height:0;height:calc(var(--community-tool-height) - 2px);min-width:0;margin:0!important;padding:0 4px!important;font:inherit;box-sizing:border-box;flex:1 1 0;text-overflow:clip}
.community-language .e-input-group .e-input-group-icon{flex:0 0 20px;min-width:20px;min-height:0;height:calc(var(--community-tool-height) - 2px);padding:0!important;margin:0!important}
.community-language [hidden]{display:none!important}
.community-language :focus-visible{outline:2px solid var(--ifx-color-focus);outline-offset:2px}
.app-search-row .community-language :focus-visible,.inner-header .community-language :focus-visible{outline-color:var(--ifx-color-on-brand)}
.community-language-select.e-popup{background:var(--ifx-color-surface);color:var(--ifx-color-text);border-color:var(--ifx-color-border);font:inherit}
.community-language-select.e-popup .e-list-item{min-height:36px;line-height:36px;padding-inline:10px;font:inherit;display:flex;align-items:center}
.community-language-select.e-popup .e-list-parent{padding-block:2px}
@media(pointer:coarse){.community-language-select.e-popup .e-list-item{min-height:40px;line-height:40px}}
.community-language .error{position:absolute;top:100%;right:12px;width:min(340px,calc(100vw - 24px));background:var(--ifx-color-surface);color:var(--ifx-color-danger);padding:8px;border:1px solid var(--ifx-color-border);z-index:500}
.channel-strip{width:100%;max-width:1000px;box-sizing:border-box;margin:auto;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;gap:0;background:var(--ifx-color-surface);padding:0 8px;scrollbar-width:thin}
.site-header .channel-strip{justify-content:flex-start;align-items:stretch;gap:0}
.site-header .channel-strip a{flex:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;color:var(--ifx-color-text-muted);padding:4px 10px;min-height:44px;box-sizing:border-box;border-bottom:3px solid transparent}
.site-header .channel-strip a>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-header .channel-strip .channel-back{gap:2px;border-right:1px solid var(--ifx-color-border)}
.channel-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.site-header .channel-strip a[aria-current=page]{color:var(--ifx-color-text);font-weight:700;border-bottom-color:var(--ifx-color-action)}
.site-header .channel-strip a:focus-visible{outline:var(--ifx-focus-ring);outline-offset:-3px;outline-color:var(--ifx-color-focus)}
.site-header .channel-strip .channel-more{position:sticky;right:0;background:var(--ifx-color-surface);border-left:1px solid var(--ifx-color-border)}
.app-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior-y:contain;scroll-padding:12px;outline:none}
.app-scroll .page{width:100%;min-width:0;box-sizing:border-box;padding-bottom:24px}
.app-scroll :is(a,button,input,textarea,select,summary),.app-scroll #replies{scroll-margin:12px}
.user-dock,.post-action-bar{flex:none;display:flex;justify-content:space-around;gap:0;border-top:1px solid var(--ifx-color-border);background:var(--ifx-color-surface);padding:6px 12px calc(6px + env(safe-area-inset-bottom));z-index:100}
.user-dock a{min-height:50px;min-width:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--ifx-color-text-muted)}
.user-dock a[aria-current=page]{color:var(--ifx-color-text);font-weight:700;box-shadow:inset 0 2px var(--ifx-color-action);background:var(--ifx-color-surface-selected)}
.user-dock .dock-publish{color:var(--ifx-color-action)}
.user-dock svg,.inner-header svg,.post-action-bar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.inner-header{display:flex;align-items:center;gap:8px;padding:4px 8px;min-height:44px;box-sizing:border-box}
.inner-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header .local-back{display:flex;gap:4px;min-height:var(--community-tool-height)}.local-top{background:transparent!important;color:var(--ifx-color-on-brand)!important;border:0!important;min-width:36px;min-height:var(--community-tool-height);padding:0 6px!important}
.post-action-bar{align-items:center;min-height:50px}.post-action-bar a{display:flex;align-items:center;gap:8px;min-height:40px}.post-action-bar button{font:inherit;text-transform:none;min-height:40px}
.account-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.account-actions form{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-60px;z-index:1000;background:var(--ifx-color-surface);padding:12px}.skip-link:focus{top:12px}
.media-viewer{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:12px;background:var(--ifx-color-surface);border:1px solid var(--ifx-color-border);border-radius:12px}
.media-viewer::backdrop{background:#231b14b8}.media-viewer img{display:block;max-width:100%;max-height:calc(100dvh - 160px);object-fit:contain}.media-viewer .media-actions{display:flex;gap:12px;align-items:center;justify-content:space-between}.media-viewer button{min-height:40px;font:inherit;text-transform:none}
@media(max-width:600px){.app-search-row{padding:4px 8px;gap:6px}.app-search-row .brand{font-size:20px}.inner-header{padding:4px 8px;gap:6px}.channel-strip{padding:0 4px}.user-dock{padding-top:4px}.page>h1{margin-top:0}}
@media(max-width:420px){[data-shell-search]{flex:1;gap:4px}[data-shell-search] button{padding-inline:6px}.app-search-row{column-gap:6px}.app-search-row:has(.community-language button:not([hidden])){flex-wrap:wrap}.app-search-row:has(.community-language button:not([hidden])) .brand{flex-basis:100%}}
@media(max-height:420px){.app-search-row{padding-top:4px;padding-bottom:4px}.channel-strip a{padding-top:4px!important;padding-bottom:4px!important;min-height:36px!important}.user-dock a{min-height:38px;flex-direction:row;gap:4px}}
@media print{body[data-community-shell]{height:auto;overflow:visible;display:block}.app-scroll{overflow:visible}.user-dock,.post-action-bar{display:none}}
.post-preview-dialog{max-width:min(800px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;overflow:auto;background:var(--ifx-color-surface);color:var(--ifx-color-text);border:1px solid var(--ifx-color-border);border-radius:12px;padding:16px}
.post-preview-dialog::backdrop{background:#231b14b8}.post-preview-dialog h2{overflow-wrap:anywhere}.post-preview-dialog button{min-height:40px}
.preview-actions{position:sticky;top:0;display:flex;justify-content:flex-end;background:var(--ifx-color-surface);z-index:1;padding-bottom:8px}

/* Shared shell height; language options remain large enough to select comfortably. */
[data-community-shell] .app-search-row .community-field{min-height:var(--community-tool-height);height:var(--community-tool-height)}
[data-shell-search] input{height:var(--community-tool-height);padding:4px 6px}
.app-search-row .community-field input{height:calc(var(--community-tool-height) - 2px);min-height:0}
.site-header .inner-title{line-height:1.35}

.community-language-select.e-popup .e-list-item.e-active,.community-language-select.e-popup .e-list-item.e-item-focus{background:var(--ifx-color-surface-selected);color:var(--ifx-color-text);font-weight:700}
.community-language-select.e-popup .e-list-item:hover{background:var(--ifx-color-surface-muted);color:var(--ifx-color-text)}

/* Gallery: a consistent top-right close control, directional navigation below. */
.media-viewer{padding:6px 10px 8px;border-radius:var(--ifx-radius-panel);box-sizing:border-box;box-shadow:var(--community-paper-shadow)}
.media-viewer-heading{display:flex;justify-content:flex-end;position:sticky;top:-6px;background:var(--ifx-color-surface);z-index:1;margin-bottom:4px}
.media-viewer img{margin-inline:auto;max-height:calc(100dvh - 144px)}
.media-viewer .media-actions{justify-content:center;gap:16px;margin-top:4px}
.media-viewer button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:8px;border:1px solid var(--ifx-color-control-border);border-radius:var(--ifx-radius-control);background:var(--ifx-color-surface);color:var(--ifx-color-action);cursor:pointer}
.media-viewer .media-viewer-close{border-color:transparent}
.media-viewer button:hover:not(:disabled){background:var(--ifx-color-surface-selected)}
.media-viewer button:disabled{opacity:.4;cursor:default}
.media-viewer button:focus-visible{outline:var(--ifx-focus-ring);outline-offset:2px}
.media-viewer button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}