/* v2.01.75: Tag browsers switch to two columns whenever the usable screen is wide enough.
   Narrow portrait phones keep the original single-column flow. */
@media (min-width:800px){
  body[data-page="upload"] #uploadTagBrowser.tag-browser,
  body[data-page="search"] #tagBrowser.tag-browser{
    column-count:2;
    column-gap:14px;
    column-rule:1px solid #eef0f4;
    padding:10px 10px;
    overflow:visible;
  }

  body[data-page="upload"] #uploadTagBrowser.tag-browser .tagbranch,
  body[data-page="search"] #tagBrowser.tag-browser .tagbranch{
    display:grid;
    width:100%;
    min-width:0;
    break-inside:avoid-column;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    margin:0 0 10px;
    padding:10px 7px 10px 0;
    border:1px solid #eef0f4;
    border-radius:14px;
  }

  body[data-page="upload"] #uploadTagBrowser.tag-browser .tagbranch+.tagbranch,
  body[data-page="search"] #tagBrowser.tag-browser .tagbranch+.tagbranch{
    border-top:1px solid #eef0f4;
  }

  body[data-page="upload"] #uploadTagBrowser.tag-browser .tagbranch:before,
  body[data-page="search"] #tagBrowser.tag-browser .tagbranch:before{
    left:0;
    top:12px;
    bottom:12px;
  }

  body[data-page="upload"] #uploadTagBrowser.tag-browser .rootcell,
  body[data-page="search"] #tagBrowser.tag-browser .rootcell{
    padding-left:9px;
    padding-right:8px;
    min-width:0;
  }

  body[data-page="upload"] #uploadTagBrowser.tag-browser .levels,
  body[data-page="search"] #tagBrowser.tag-browser .levels{
    padding-left:8px;
    min-width:0;
  }
}

/* Landscape phones, unfolded foldables and compact tablets need more room for the Tag content,
   so the category label column is narrower while the two-column layout is active. */
@media (min-width:800px) and (max-width:1279px){
  body[data-page="upload"] #uploadTagBrowser.tag-browser .tagbranch,
  body[data-page="search"] #tagBrowser.tag-browser .tagbranch{
    grid-template-columns:72px minmax(0,1fr);
  }

  body[data-page="upload"] #uploadTagBrowser.tag-browser .chip,
  body[data-page="search"] #tagBrowser.tag-browser .chip{
    padding-left:8px;
    padding-right:8px;
  }
}

/* The edit panel is narrower than the main page, so only use two columns when it has ample room. */
@media (min-width:1500px){
  body[data-page="search"] #editTagBrowser.tag-browser{
    column-count:2;
    column-gap:14px;
  }
  body[data-page="search"] #editTagBrowser.tag-browser .tagbranch{
    display:grid;
    width:100%;
    break-inside:avoid-column;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    margin:0 0 8px;
  }
}