/* UI-05: the market and calendar entrances share an explicit unavailable state.
   Dedicated classes avoid the retired article-feed surface overrides. */
@media (min-width: 1024px) {
  #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-shell-v363 {
    width: min(1280px, calc(100% - 64px));
    margin-inline: auto;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-category-head-v363 {
    margin-top: 24px;
    padding-bottom: 24px;
    border-color: rgba(186, 200, 217, .2);
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-category-head-v363 h1 {
    margin-top: 12px;
    color: #edf3fc;
    font: 700 36px/1.2 var(--sans);
    font-size: 36px !important; /* Retire this route's 74px article-channel title. */
    letter-spacing: -.025em;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-category-head-v363 > span {
    color: #bac8d9;
    font: 600 13px/1.5 var(--sans);
    letter-spacing: .02em;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-category-meta-v366:empty {
    display: none;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-path-v363 {
    font: 500 13px/1.5 var(--sans);
    letter-spacing: 0;
    text-transform: none;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-path-v363 :is(a, b) {
    color: #bac8d9;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-feed-v901 {
    overflow: visible;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-filters-v901 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 24px;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-filter-v901 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(186, 200, 217, .28);
    border-radius: 10px;
    background: rgba(16, 26, 44, .3);
    color: #edf3fc;
    font: 500 14px/1.5 var(--sans);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-filter-v901[aria-selected="true"] {
    border-color: #c9c4ec;
    background: var(--otx-ds-surface);
    color: #17243a;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-filter-v901:hover {
    border-color: #c9c4ec;
    background: var(--otx-ds-surface);
    color: #17243a;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-panel-v901 {
    padding: 24px;
    border: 1px solid #c6cfdf;
    border-radius: 16px;
    background: var(--otx-ds-surface);
    color: #17243a;
    box-shadow: 0 8px 24px rgba(5, 14, 30, .12);
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-head-v901 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(79, 98, 120, .22);
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-head-v901 h2 {
    margin: 0;
    color: #17243a;
    font: 600 18px/1.5 var(--sans);
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-status-v901 {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid #c2c9d6;
    border-radius: 6px;
    background: #e3e7ef;
    color: #43556e;
    font: 600 12px/1.5 var(--sans);
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-empty-v901 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-top: 24px;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-icon-v901 {
    flex: 0 0 40px;
    color: #58658a;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-copy-v901 {
    min-width: 0;
    max-width: 760px;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-copy-v901 h3 {
    margin: 0 0 12px;
    color: #17243a;
    font: 600 24px/1.4 var(--sans);
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-copy-v901 p {
    margin: 0;
    color: #4f6278;
    font: 400 16px/1.65 var(--sans);
    overflow-wrap: anywhere;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-copy-v901 .tool-content-next-v901 {
    margin-top: 8px;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-actions-v901 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-action-v901 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #aeb9cb;
    border-radius: 10px;
    background: transparent;
    color: #263b58;
    font: 600 14px/1.5 var(--sans);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-action-v901.is-primary {
    border-color: #4b4b7c;
    background: #4b4b7c;
    color: #fff;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-action-v901:hover {
    border-color: #586d8c;
    background: #d0ddec;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-action-v901.is-primary:hover {
    border-color: #39395f;
    background: #39395f;
  }

  #professionalBlogPageV363[data-tool-content-state-v901] :is(.tool-content-filter-v901, .tool-content-action-v901, .tool-content-panel-v901):focus-visible {
    outline: 3px solid #766aad;
    outline-offset: 3px;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  #professionalBlogPageV363[data-tool-content-state-v901] :is(.tool-content-filter-v901, .tool-content-action-v901) {
    transition: none;
  }
}

/* Delegate these fields from the legacy global control theme to this component. */
@layer otxControlTheme {
  @media (min-width: 1024px) {
    #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-shell-v363 {
      width: min(var(--otx-ds-page-width, 1280px), calc(100% - 64px)) !important;
      max-width: var(--otx-ds-page-width, 1280px) !important;
      margin-inline: auto !important;
      padding: 88px 0 64px !important;
    }
    #professionalBlogPageV363[data-tool-content-state-v901] .professional-blog-category-head-v363 { margin-top: 0 !important; }
    #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-head-v901 h2 {
      color: var(--otx-ds-ink, #17243a) !important;
      font: 600 18px/1.5 var(--font, system-ui, sans-serif) !important;
    }
    #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-copy-v901 h3 {
      color: var(--otx-ds-ink, #17243a) !important;
      font: 600 24px/1.4 var(--font, system-ui, sans-serif) !important;
    }
    #professionalBlogPageV363[data-tool-content-state-v901] .tool-content-copy-v901 p {
      color: var(--otx-ds-muted, #4f6278) !important;
      font: 400 16px/1.65 var(--font, system-ui, sans-serif) !important;
    }
  }
}