/* Desktop windows share one fluid canvas. Existing mobile styles are untouched. */
@media (min-width:800px), (hover:hover) and (pointer:fine) {
  #yingke-interaction-concept {
    --yk-canvas-width:2160px;
    --yk-page-gutter:clamp(24px,2.4vw,64px);
    --yk-header-height:92px;
    --yk-work-nav-height:160px;
  }
  #yingke-interaction-concept main { width:100%; min-width:0; }
  #yingke-interaction-concept .yk-header {
    position:sticky; top:0; z-index:60; flex-shrink:0;
    padding:18px max(var(--yk-page-gutter),calc((100% - var(--yk-canvas-width))/2 + var(--yk-page-gutter)));
    background:#fff; box-shadow:0 4px 16px -12px #20397445;
  }
  #yingke-interaction-concept .yk-brand { flex:0 1 auto; }
  #yingke-interaction-concept .yk-brand img { flex-shrink:0; width:clamp(42px,3.2vw,52px); }
  #yingke-interaction-concept .yk-brand>strong { white-space:nowrap; }
  #yingke-interaction-concept .yk-brand>div { min-width:0; }
  #yingke-interaction-concept .yk-account-nav { min-width:0; max-width:100%; }
  #yingke-interaction-concept .yk-account-menu summary>span:last-child { min-width:0; overflow-wrap:anywhere; }
  #yingke-interaction-concept .yk-account-menu>div { max-width:calc(100vw - 48px); }
  #yingke-interaction-concept .yk-home,
  #yingke-interaction-concept .yk-workspace,
  #yingke-interaction-concept .yk-account-page {
    width:100%; max-width:var(--yk-canvas-width); min-width:0;
    margin-inline:auto; padding-inline:var(--yk-page-gutter);
  }
  #yingke-interaction-concept .yk-admin-preview-bar,
  #yingke-interaction-concept .yk-footer {
    padding-inline:max(var(--yk-page-gutter),calc((100% - var(--yk-canvas-width))/2 + var(--yk-page-gutter)));
  }
  #yingke-interaction-concept .yk-home { padding-top:32px; }
  #yingke-interaction-concept .yk-home-heading { gap:16px; }
  #yingke-interaction-concept .yk-home-heading>div:first-child { min-width:0; }
  #yingke-interaction-concept .yk-home-heading-actions { flex-wrap:wrap; }
  #yingke-interaction-concept .yk-portfolio-overview { min-width:0; }
  #yingke-interaction-concept .yk-portfolio-overview>button { min-width:116px; padding-inline:20px; }
  #yingke-interaction-concept #project-catalog-toolbar { max-width:100%; }
  #yingke-interaction-concept .yk-catalog-filters { flex-wrap:wrap; }
  #yingke-interaction-concept .yk-project-picker { container:project-picker / inline-size; }
  #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .yk-project-cards:not(.is-list-view) {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:clamp(16px,1.25vw,24px);
  }
  #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .yk-project-main { min-height:260px; }
  #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main {
    grid-template-columns:40px minmax(140px,1.3fr) minmax(100px,1fr) 84px minmax(100px,.8fr) 130px;
    gap:14px; padding-right:150px;
  }
  #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-card-update { display:block; }
  #yingke-interaction-concept .is-list-view .yk-card-owner { display:block; }

  /* Keep the project rail and every new branch beside its parent. */
  #yingke-interaction-concept .yk-project-browser.is-browsing {
    --yk-cascade-height:clamp(240px,calc(100dvh - var(--yk-header-height) - 190px),650px);
    grid-template-columns:clamp(190px,16vw,260px) minmax(0,1fr);
    gap:clamp(14px,1.25vw,24px); overflow:visible;
  }
  #yingke-interaction-concept .yk-project-browser.is-browsing>.yk-project-picker {
    max-height:calc(var(--yk-cascade-height) + 130px);
  }
  #yingke-interaction-concept .yk-project-browser.is-browsing .yk-project-cards { max-height:none; }
  #yingke-interaction-concept .yk-project-browser.is-browsing>.yk-hover-map { min-width:0; }
  #yingke-interaction-concept .yk-project-browser.is-browsing .yk-hover-columns[data-cascade="true"] {
    height:var(--yk-cascade-height); min-height:0; max-width:100%;
    overflow-x:auto; overflow-y:hidden;
  }
  #yingke-interaction-concept .yk-project-browser.is-browsing .yk-hover-columns[data-cascade="true"]>.yk-hover-column {
    min-height:0; padding:16px 13px;
  }
  #yingke-interaction-concept .yk-hover-columns[data-cascade="true"]>.yk-cascade-scope {
    flex:1 0 210px; width:210px; overflow-y:auto; overscroll-behavior-y:contain;
    scrollbar-width:thin; scrollbar-color:#cbd8ec transparent;
  }
  #yingke-interaction-concept .yk-cascade-scope>.yk-branch-heading,
  #yingke-interaction-concept .yk-cascade-scope>.yk-cascade-current,
  #yingke-interaction-concept .yk-cascade-scope>.yk-branch-list,
  #yingke-interaction-concept .yk-cascade-scope>.yk-hover-empty { flex-shrink:0; }
  #yingke-interaction-concept .yk-hover-columns[data-cascade="true"]>.yk-cascade-modules { flex:1 0 224px; width:224px; }
  #yingke-interaction-concept .yk-hover-columns[data-cascade="true"]>.yk-cascade-entry { flex:1.25 0 300px; width:300px; }
  #yingke-interaction-concept .yk-cascade-module-list { min-height:0; max-height:none; flex:1; }
  #yingke-interaction-concept .yk-cascade-entry>.yk-branch-heading { flex-shrink:0; }
  #yingke-interaction-concept .yk-cascade-entry-body { min-height:0; max-height:none; flex:1; }
  #yingke-interaction-concept .yk-cascade-open { flex-shrink:0; }
  #yingke-interaction-concept .yk-quick-results { max-height:var(--yk-cascade-height); }

  /* Header, workspace navigation and directory have independent scroll budgets. */
  #yingke-interaction-concept .yk-work-grid { grid-template-columns:clamp(200px,15vw,260px) minmax(0,1fr); gap:clamp(16px,1.25vw,24px); }
  #yingke-interaction-concept .yk-work-grid.is-collapsed { grid-template-columns:minmax(0,1fr); }
  #yingke-interaction-concept .yk-directory {
    top:calc(var(--yk-header-height) + 12px);
    max-height:calc(100dvh - var(--yk-header-height) - 24px);
    display:flex; flex-direction:column; padding:16px 11px;
  }
  #yingke-interaction-concept .yk-directory-heading,
  #yingke-interaction-concept .yk-directory>input { flex-shrink:0; }
  #yingke-interaction-concept #tree { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  #yingke-interaction-concept .yk-work-main { container:workspace / inline-size; }
  #yingke-interaction-concept .yk-workspace .yk-project-heading { z-index:20; }
  #yingke-interaction-concept .yk-work-nav { top:var(--yk-header-height); z-index:10; }
  #yingke-interaction-concept .yk-work-tabs {
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; max-width:100%;
    scrollbar-width:thin; scrollbar-color:#cbd8ec transparent; overscroll-behavior-x:contain;
  }
  #yingke-interaction-concept .yk-work-tab { flex-shrink:0; max-width:260px; }
  #yingke-interaction-concept .yk-work-tab>button[role="tab"] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #yingke-interaction-concept .yk-tab-close { flex-shrink:0; }
  #yingke-interaction-concept .yk-modules { gap:4px 5px; padding:10px 12px; }
  #yingke-interaction-concept .yk-modules button { padding:8px 9px; }
  #yingke-interaction-concept .yk-panel {
    --yk-panel-height:max(180px,calc(100dvh - var(--yk-header-height) - var(--yk-work-nav-height) - 24px));
    container:project-panel / inline-size;
    min-height:min(360px,var(--yk-panel-height)); max-height:var(--yk-panel-height); overflow:auto;
    padding:clamp(20px,1.5vw,32px);
  }
  #yingke-interaction-concept .yk-panel h2,
  #yingke-interaction-concept .yk-panel h3 { scroll-margin-top:calc(var(--yk-header-height) + var(--yk-work-nav-height) + 16px); }
  #yingke-interaction-concept .yk-panel-filters { gap:12px; }
  #yingke-interaction-concept .yk-panel-filters>label { flex:0 1 180px; }
  #yingke-interaction-concept .yk-panel-filters input,
  #yingke-interaction-concept .yk-panel-filters select { width:100%; }
  #yingke-interaction-concept .yk-fields>*,
  #yingke-interaction-concept .yk-dashboard-columns>*,
  #yingke-interaction-concept .yk-record-data>* { min-width:0; }
  #yingke-interaction-concept .yk-table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
  #yingke-interaction-concept .yk-account-content { min-width:0; max-width:100%; }
  #yingke-interaction-concept .yk-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
  #yingke-interaction-concept .yk-dialog-actions { flex-wrap:wrap; }

  @container project-picker (max-width:1050px) {
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-tile { height:102px; min-height:102px; }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main {
      grid-template-columns:40px minmax(150px,1.4fr) 86px minmax(110px,1fr);
      grid-template-rows:28px 22px; gap:4px 16px; height:102px; min-height:102px;
      padding:20px 150px 20px 20px;
    }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main>.yk-project-mark { grid-row:1/3; }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main>.yk-card-category { grid-column:2; grid-row:2; }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main>.yk-card-status { grid-column:3; grid-row:1; }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main>.yk-card-footer { grid-column:4; grid-row:1; }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main>.yk-card-update { grid-column:3/5; grid-row:2; }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-tile>.yk-project-open { bottom:34px; }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-tile>.yk-project-favorite { top:36px; }
  }
  @container project-picker (max-width:760px) {
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main {
      grid-template-columns:34px minmax(120px,1fr) 80px; gap:4px 12px; padding-right:138px;
    }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main>.yk-card-footer { grid-column:2; grid-row:2; }
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main>.yk-card-category,
    #yingke-interaction-concept .yk-project-browser:not(.is-browsing) .is-list-view .yk-project-main>.yk-card-update { display:none; }
  }
  @container workspace (max-width:1080px) {
    #yingke-interaction-concept .yk-panel-stage.is-comparing { grid-template-columns:minmax(0,1fr); }
  }
  @container project-panel (max-width:680px) {
    #yingke-interaction-concept .yk-people-grid,
    #yingke-interaction-concept .yk-layout-grid,
    #yingke-interaction-concept .yk-dashboard-columns { grid-template-columns:minmax(0,1fr); }
    #yingke-interaction-concept .yk-dashboard-columns { gap:0; }
  }
  @container project-panel (max-width:520px) {
    #yingke-interaction-concept .yk-fields,
    #yingke-interaction-concept .yk-record-data { grid-template-columns:minmax(0,1fr); }
    #yingke-interaction-concept .yk-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #yingke-interaction-concept .yk-dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
}
@media (min-width:800px) and (max-width:1100px), (hover:hover) and (pointer:fine) and (max-width:1100px) {
  #yingke-interaction-concept .yk-header { padding-block:14px; gap:14px; }
  #yingke-interaction-concept .yk-account-nav { gap:10px; }
  #yingke-interaction-concept .yk-brand { gap:9px; }
  #yingke-interaction-concept .yk-brand>strong { font-size:22px; }
  #yingke-interaction-concept .yk-brand>div { padding-left:11px; }
  #yingke-interaction-concept .yk-brand small { font-size:10px; letter-spacing:1px; }
  #yingke-interaction-concept .yk-home { padding-top:26px; }
  #yingke-interaction-concept .yk-project-browser.is-browsing .yk-hover-map>header { padding:14px 12px; }
  #yingke-interaction-concept .yk-hover-columns[data-cascade="true"]>.yk-cascade-scope { flex-basis:200px; width:200px; }
  #yingke-interaction-concept .yk-hover-columns[data-cascade="true"]>.yk-cascade-modules { flex-basis:210px; width:210px; }
  #yingke-interaction-concept .yk-hover-columns[data-cascade="true"]>.yk-cascade-entry { flex-basis:280px; width:280px; }
  #yingke-interaction-concept .yk-work-grid { grid-template-columns:190px minmax(0,1fr); gap:16px; }
  #yingke-interaction-concept .yk-work-grid.is-collapsed { grid-template-columns:minmax(0,1fr); }
  #yingke-interaction-concept .yk-workspace { padding-top:22px; }
  #yingke-interaction-concept .yk-modules { gap:4px; padding:8px; }
  #yingke-interaction-concept .yk-modules button { padding:7px 8px; font-size:11px; }
}
@media (min-width:800px) and (max-height:800px), (hover:hover) and (pointer:fine) and (max-height:800px) {
  #yingke-interaction-concept .yk-header { padding-block:12px; }
  #yingke-interaction-concept .yk-home { padding-top:24px; }
  #yingke-interaction-concept .yk-home-heading { margin-bottom:18px; }
  #yingke-interaction-concept .yk-home-heading h1 { font-size:30px; }
  #yingke-interaction-concept .yk-portfolio-overview { padding-block:10px; margin-bottom:18px; }
  #yingke-interaction-concept .yk-admin-preview-bar { padding-block:10px; }
  #yingke-interaction-concept .yk-dialog { padding-block:22px; }
}
