/* Loaded after isolated CSS. Only presentation-owned colours/layout are
   overridden here; authentication, visibility and API behaviour are unchanged. */
:root {
    --theme-accent: #0175bd;
    --theme-on-accent: #fff;
    --theme-accent-hover: #0067a6;
    --theme-link: #0175bd;
    --theme-soft: #eaf5fc;
    --theme-shade: #d9edf9;
}
html[data-theme] {
    --ink: #243348; --muted: #526174; --line: #dce5ef;
    --surface: #fff; --canvas: #f4f7fa; --theme-raised: #f1f5f9;
    --accent: var(--theme-accent); --accent-dark: var(--theme-accent-hover);
    --focus: var(--theme-link);
    --kendo-color-primary: var(--theme-accent);
    --kendo-color-primary-hover: var(--theme-accent-hover);
    --kendo-color-primary-active: var(--theme-accent-hover);
    --kendo-color-on-primary: var(--theme-on-accent);
    --kendo-color-surface: var(--surface); --kendo-color-app-surface: var(--canvas);
    --kendo-color-on-app-surface: var(--ink); --kendo-color-on-surface: var(--ink);
    --kendo-color-base: var(--theme-raised); --kendo-color-base-hover: var(--theme-soft);
    --kendo-color-border: var(--line); --kendo-color-subtle: var(--muted);
    color-scheme: light;
}
html[data-theme="dark"] {
    --ink: #e5edf7; --muted: #b8c5d7; --line: #475569;
    --surface: #1e293b; --canvas: #111827; --theme-raised: #29364a;
    --theme-track: #526174;
    --success: #86efac; --success-soft: #16382d;
    --danger: #fda4af; --danger-soft: #452332;
    color-scheme: dark;
}
html[data-theme] body, html[data-theme] .member-shell {
    background: var(--canvas); color: var(--ink);
    --shell-blue: var(--theme-accent); --shell-blue-dark: var(--theme-accent-hover);
}
html[data-theme] .designed-feed {
    color: var(--ink); --accent: var(--theme-accent); --accent-dark: var(--theme-accent-hover);
    --kendo-color-primary: var(--theme-accent); --kendo-color-primary-hover: var(--theme-accent-hover);
    --kendo-color-primary-active: var(--theme-accent-hover); --kendo-color-on-primary: var(--theme-on-accent);
}
html[data-theme] :is(.shell-header, .shell-search.is-open, .navigation-group, .header-preview, .side-card,
    .designed-composer, .feed-post, .member-suggestions, .suggestion-card, .feed-load-state, .empty-state,
    .recommendation-notice, .post-menu-items, .shell-signout, .shell-legal-panel, .panels-toggle, .reaction-tray,
    .interest-card) {
    background: var(--surface); color: var(--ink); border-color: var(--line);
}
html[data-theme] :is(.shell-sidebar, .header-search-form, .feed-tabs, .shared-post,
    .inline-editor, .inline-panel, .post-menu summary) { background: var(--theme-raised); color: var(--ink); border-color: var(--line); }
html[data-theme] :is(.post-body, .post-byline, .composer-controls label, .control-label, .designed-composer h2,
    .member-link, .community-suggestion, .preview-item, .identity-name, .member-suggestions h2,
    .suggestion-card, .post-action:not(.danger-command), .composer-selected, .interest-card-heading h2,
    .consent-card h2, .interest-search label, .interest-search input) { color: var(--ink); }
html[data-theme] :is(.post-meta, .post-metrics, .reaction-summary, .follow-pending, .preview-caption,
    .preview-item small, .side-card small, .panel-status, .side-card p, .feed-load-state p,
    .composer-tags legend, .composer-help, .shell-footer, .recommendation-notice, .identity-detail,
    .member-suggestions p, .suggestion-card .handle, .suggestion-card small, .composer-footer > span,
    .feed-heading .eyebrow, .interests-heading p:not(.eyebrow), .interest-card-heading p,
    .consent-card > p, .consent-choice, .search-status) { color: var(--muted); }
html[data-theme] .shell-sidebar .member-link { color: var(--ink); }
/* With Menu Backgrounds off, every panel title follows the selected colour.
   The default selected colour is Tremblr blue. */
html[data-theme] :is(.shell-sidebar .navigation-group h2, .shell-legal-panel h2) {
    background: var(--theme-accent); color: var(--theme-on-accent);
}
html[data-theme] :is(.feed-heading a, .feed-reason, .feed-load-link, .feed-load-state h2,
    .post-action span, .post-menu-items button, .shell-footer a, .shell-public-links a, .shell-legal-panel a,
    .side-card a:not(.panel-link), .preview-item, .panels-toggle, .member-suggestions header a,
    .identity-name:hover, .composer-controls label span, .control-label span) { color: var(--theme-link); }
html[data-theme] :is(.header-search-submit, .header-signout, .preview-retry, .feed-load-button,
    .panel-link, .side-card button:not(.secondary), .count, .feed-tab.active,
    .interest-tag.selected, .primary-link, .shell-mobile-navigation, .member-suggestions button) {
    background: var(--theme-accent); color: var(--theme-on-accent); border-color: transparent;
}
html[data-theme] :is(.header-search-submit, .header-signout, .preview-retry, .feed-load-button,
    .panel-link, .side-card button:not(.secondary), .primary-link):hover:not(:disabled) {
    background: var(--theme-accent-hover); color: var(--theme-on-accent);
}
html[data-theme] .shell-actions .shell-icon-button { background: var(--theme-raised); color: var(--muted); }
html[data-theme] .shell-actions :is(.shell-icon-button.active, .header-signout) { background: var(--theme-accent); color: var(--theme-on-accent); }
html[data-theme] .shell-actions .shell-icon-button:hover { background: var(--theme-soft); color: var(--theme-link); }
html[data-theme] :is(.preview-item.unread, .preview-item:hover, .interest-links a, .post-action:hover,
    .post-action.active, .member-initial, .header .navigation-icon, .post-menu-items button, .identity-avatar,
    .card-tag, .suggestion-avatar, .view-profile, .designed-composer h2 span, .composer-selected button) {
    background: var(--theme-soft); color: var(--theme-link); border-color: var(--line);
}
html[data-theme] .navigation-group a.member-link.active,
html[data-theme] .navigation-group a.member-link.active .navigation-icon {
    background: var(--theme-accent); color: var(--theme-on-accent);
}
html[data-theme] .mobile .member-link, html[data-theme] .mobile .navigation-icon { color: var(--theme-on-accent); }
html[data-theme] .mobile a.member-link:hover { background: var(--theme-accent-hover); }
html[data-theme] :is(.side-card button.secondary, .feed-tab:not(.active)) { background: var(--theme-raised); color: var(--ink); }
html[data-theme] :is(.preview-item, .request-card + .request-card, .community-suggestion + .community-suggestion, .post-actions) { border-color: var(--line); }
html[data-theme] .preview-heading, html[data-theme] .side-card > header {
    background: var(--theme-accent); color: var(--theme-on-accent);
}
html[data-theme] :is(.preview-heading, .side-card > header) :is(h2, a, button) { color: var(--theme-on-accent); }
/* Menu Backgrounds on adopts the template's coloured/shaded menu surfaces,
   rather than forcing the fixed blue title bands used when OFF. */
html[data-header-background="true"] :is(.shell-header, .header-preview) {
    background: var(--theme-soft);
}
/* Menu Backgrounds on removes the title bands and grades each complete
   panel, rather than merely recolouring its header row. */
html[data-header-background="true"] :is(.shell-sidebar .navigation-group, .side-card, .shell-legal-panel) {
    background: linear-gradient(135deg, var(--theme-shade), var(--theme-soft));
}
html[data-header-background="true"] :is(.shell-sidebar .navigation-group h2, .shell-legal-panel h2,
    .preview-heading, .side-card > header) {
    background: transparent; color: var(--ink);
}
html[data-header-background="true"] :is(.preview-heading, .side-card > header) :is(h2, button) { color: var(--ink); }
html[data-header-background="true"] :is(.preview-heading, .side-card > header) a { color: var(--theme-link); }
html[data-header-background="true"] .preview-heading button { border-color: var(--line); }
/* Branding is deliberately independent of theme/accent selection. */
html[data-theme] .shell-brand, html[data-theme] .shell-brand-name,
html[data-theme] :is(.design-login-wordmark, .design-register-wordmark, .design-forgot-password-wordmark, .design-confirm-email-wordmark) { color: #0175bd !important; }
html[data-theme] .shell-logo { background: #0175bd !important; }
/* Legacy pages in Designed.Web already consume the base tokens. These bridges
   cover native/Telerik editors and the newer scoped feed/account surfaces. */
html[data-theme="dark"] :is(.k-input, .k-picker, .k-list, .k-list-content, .k-popup, .k-window,
    .k-window-content, .k-dialog, .k-dialog-content, .k-button-solid-base) {
    background-color: var(--surface); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
    background-color: var(--surface); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] :is(.consent-choice, .search-tag-results) { background: var(--theme-raised); border-color: var(--line); }
html[data-theme="dark"] :is(.gate-pending, .profile-photo-preview, .profile-initial, .member-thumbnail,
    .member-profile-photo, .tag-chip, .post-tag, .member-result:hover, .reaction-tray button:hover,
    .interest-tag:not(.selected)) { background: var(--theme-raised); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .tag-chip button { color: var(--ink); }
html[data-theme="dark"] .composer-files input::file-selector-button { background: var(--theme-raised); color: var(--theme-link); border-color: var(--line); }
html[data-theme="dark"] .post-content-link:hover .post-body { color: var(--ink); }
html[data-theme="dark"] .danger-command, html[data-theme="dark"] .danger-command span { color: var(--danger); }
html[data-theme="dark"] :is(.design-login-page, .design-login-panel, .design-register-page, .design-register-panel,
    .design-forgot-password-page, .design-forgot-password-panel, .design-confirm-email-page, .design-confirm-email-panel) {
    background: var(--canvas); color: var(--ink);
}
html[data-theme="dark"] :is(.design-register-card) :is(h1, h2, label) { color: var(--ink); }
html[data-theme="dark"] :is(.design-login-heading h1, .design-register-heading h1, .design-forgot-password-heading h1, .design-forgot-password-completion h1, .design-confirm-email-state h1) { color: #0175bd !important; }
html[data-theme="dark"] :is(.design-login-register, .design-login-machine-notice) { color: var(--muted); }
html[data-theme="dark"] .design-login-machine-notice a { color: #70c6ff; }
html[data-theme="dark"] .design-login-machine-notice hr { border-color: var(--line); }
html[data-theme] .primary-link { color: var(--theme-on-accent); }
html[data-theme] :is(.design-login-submit, .design-register-submit, .design-register-sign-in-button,
    .design-forgot-password-submit, .design-forgot-password-completion-button, .design-confirm-email-primary-button) {
    background: var(--theme-accent); color: var(--theme-on-accent); border-color: var(--theme-accent);
}
html[data-theme] :is(.design-login-submit, .design-register-submit, .design-register-sign-in-button,
    .design-forgot-password-submit, .design-forgot-password-completion-button, .design-confirm-email-primary-button):hover:not(:disabled) {
    background: var(--theme-accent-hover); color: var(--theme-on-accent);
}
html[data-theme="dark"] :is(.design-login-heading, .design-register-heading, .design-forgot-password-heading,
    .design-confirm-email-card) p { color: var(--muted); }
html[data-theme="dark"] :is(.design-login-card, .design-register-card, .design-forgot-password-card,
    .design-confirm-email-card) a:not([class*="button"]):not([class*="wordmark"]) { color: #70c6ff; }
html[data-theme] :is(a, button, input, summary):focus-visible { outline-color: var(--theme-link); }
html[data-theme] .preview-heading :is(a, button):focus-visible { outline-color: #fff; }
html[data-header-background="true"] .preview-heading :is(a, button):focus-visible { outline-color: var(--theme-link); }
@media (min-width: 961px) {
    html[data-compact-menu="true"] .member-shell { --shell-sidebar-width: 6.5rem; }
    html[data-compact-menu="true"] .shell-brand { flex-basis: auto; }
    html[data-compact-menu="true"] .sidebar .navigation-group { padding-inline: .2rem; }
    html[data-compact-menu="true"] .sidebar .navigation-group h2 { display: none; }
    html[data-compact-menu="true"] .sidebar .member-link { justify-content: center; padding-inline: 0; }
    html[data-compact-menu="true"] :is(.sidebar .navigation-label, .shell-sidebar .signout-label) {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    html[data-compact-menu="true"] .shell-sidebar .shell-signout { text-align: center; padding-inline: .4rem; }
}
@media (max-width: 600px) {
    html[data-theme] .has-member-navigation { --shell-header-height: 7.5rem; }
    html[data-theme] .has-member-navigation .shell-header { flex-wrap: wrap; }
    html[data-theme] .has-member-navigation .shell-brand { flex-basis: 100%; justify-content: center; }
    html[data-theme] .has-member-navigation .shell-brand-name { display: inline; }
    html[data-theme] .shell-actions { width: 100%; margin-left: 0; justify-content: space-between; }
    html[data-theme] .shell-actions .shell-icon-button { width: 2.5rem; height: 2.5rem; }
    html[data-theme] .header-menus { gap: .25rem; }
    html[data-theme] .header-preview { top: calc(7.5rem + .25rem); }
    html[data-theme] .preview-body { max-height: calc(100dvh - 16rem); }
}
@media (max-width: 350px) {
    html[data-theme] .shell-actions .shell-icon-button { width: 2.25rem; height: 2.25rem; }
}