/* Match the fixed-rail layer: its important dimensions outrank unlayered CSS. */
@layer desktop-fixed-rails {
.canvas-entry-copy, .canvas-entry-art { display: none; }
@media (min-width: 1600px) {
  html:not([data-mobile-workbench="true"]) body .sidebar .side-nav > .nav-group.nav-video-standalone {
    height: 162px !important; min-height: 162px !important; max-height: 162px !important;
  }
  html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch { grid-template-rows: 112px 42px !important; }
}
@media (max-width: 1599px) {
  html:not([data-mobile-workbench="true"]) body.desktop-sidebar-expanded .sidebar .side-nav > .nav-group.nav-video-standalone {
    height: 162px !important; min-height: 162px !important; max-height: 162px !important;
  }
  html:not([data-mobile-workbench="true"]) body.desktop-sidebar-expanded .sidebar .side-nav .nav-media-mode-switch { grid-template-rows: 112px 42px !important; }
}
@media (min-width: 1600px) {
  html body .sidebar .side-nav .nav-media-mode-switch > a.nav-media-mode-option-canvas[data-animated-card] { height:112px !important; min-height:112px !important; max-height:112px !important; }
  html body .sidebar .side-nav .nav-media-mode-switch > a[data-animated-card] > :not(.canvas-entry-copy):not(.canvas-entry-art) { display:none !important; }
}
html body.desktop-sidebar-expanded .sidebar .side-nav .nav-media-mode-switch > a.nav-media-mode-option-canvas[data-animated-card] { height:112px !important; min-height:112px !important; max-height:112px !important; }
html body.desktop-sidebar-expanded .sidebar .side-nav .nav-media-mode-switch > a[data-animated-card] > :not(.canvas-entry-copy):not(.canvas-entry-art) { display:none !important; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card] {
  --entry-blue: #506dff;
}
@media (min-width: 1600px) {
  html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card] { height:112px !important; min-height:112px !important; max-height:112px !important; }
}
html:not([data-mobile-workbench="true"]) body.desktop-sidebar-expanded .sidebar .side-nav .nav-media-mode-switch > [data-animated-card] { height:112px !important; min-height:112px !important; max-height:112px !important; }
/* Shared visual rules use a media-qualified selector plus the expanded variant. */
@media (min-width: 1600px) {
  .sidebar [data-animated-card] > :not(.canvas-entry-copy):not(.canvas-entry-art) { display:none !important; }
  .sidebar [data-animated-card] .canvas-entry-copy, .sidebar [data-animated-card] .canvas-entry-art { display:block; }
}
.desktop-sidebar-expanded .sidebar [data-animated-card] > :not(.canvas-entry-copy):not(.canvas-entry-art) { display:none !important; }
.desktop-sidebar-expanded .sidebar [data-animated-card] .canvas-entry-copy, .desktop-sidebar-expanded .sidebar [data-animated-card] .canvas-entry-art { display:block; }
.sidebar [data-animated-card] .canvas-entry-copy { position:absolute; left:12px; top:31px; text-align:left; z-index:1; font-size:15px; font-weight:600; line-height:1.4; }
.sidebar [data-animated-card] .canvas-entry-copy small { display:block; margin-top:7px; font-size:10px; font-weight:400; color:#9299aa; transition:opacity 250ms; }
.sidebar [data-animated-card] .canvas-entry-cta { position:absolute; top:29px; left:0; padding:4px 9px; border-radius:20px; background:white; color:#506dff; font-size:10px; font-weight:500; opacity:0; transform:translateY(5px); transition:opacity 250ms,transform 350ms; white-space:nowrap; }
.sidebar [data-animated-card] svg.canvas-entry-art { position:absolute; right:0; top:7px; width:57% !important; height:98px !important; overflow:visible; pointer-events:none; }
.canvas-entry-art .entry-tile, .canvas-entry-art .entry-board { filter:drop-shadow(0 3px 3px #24365518); }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card] { border-color:#e5e9f1 !important; background-color:white !important; border-radius:16px !important; transform:none !important; transition:none !important; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card]::before,
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card]::after { display:none !important; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card]::after {
  content:"" !important; display:block !important; position:absolute; inset:-1px !important;
  /* Let the button clip the fill once; a second rounded inset exposes white arcs. */
  border-radius:0 !important;
  background:#506dff !important; opacity:1 !important; transform:none !important;
  mask-image:none; z-index:0; pointer-events:none;
  clip-path:circle(0% at 50% 50%);
  transition:clip-path 400ms cubic-bezier(.22,.8,.25,1) !important;
}
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card].is-card-open { background-color:white !important; color:white !important; border-color:#506dff !important; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card].is-card-open::after { clip-path:circle(75% at 50% 50%); }
/* A quiet grid stays above the radial fill, below the title and node artwork. */
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card]::before {
  content:"" !important; display:block !important; position:absolute; inset:0;
  --entry-grid-line:rgba(80,109,255,.10);
  background-image:linear-gradient(var(--entry-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--entry-grid-line) 1px,transparent 1px) !important;
  background-size:12px 12px !important; background-position:center;
  mask-image:none !important; opacity:1 !important; transform:none !important; border-radius:0 !important;
  z-index:1; pointer-events:none; transition:none !important;
  border-radius:inherit !important;
  box-shadow:inset 0 0 0 1px #b9c5d8;
}
html[data-theme="dark"]:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card]::before { box-shadow:inset 0 0 0 1px #64748b; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card].is-card-open::before,
html[data-theme="dark"]:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card].is-card-open::before { box-shadow:none; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > .nav-media-mode-option:not([data-animated-card]):not(.is-active) { border-color:#b9c5d8 !important; }
html[data-theme="dark"]:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > .nav-media-mode-option:not([data-animated-card]):not(.is-active) { border-color:#64748b !important; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card].is-card-open::before { --entry-grid-line:rgba(255,255,255,.13); }
.sidebar [data-animated-card] svg.canvas-entry-art,
.sidebar [data-animated-card] .canvas-entry-copy { z-index:2; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > a.nav-media-mode-option-canvas[data-animated-card] { border:0 !important; }
.sidebar [data-animated-card].is-card-open small { opacity:0; }
.sidebar [data-animated-card].is-card-open .canvas-entry-cta { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) { .sidebar [data-animated-card], .sidebar [data-animated-card] * { transition:none !important; } }
/* Fixed rails retain the full sidebar even below 1600px. */
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav > .nav-group.nav-video-standalone,
html:not([data-mobile-workbench="true"]) body.desktop-sidebar-expanded .sidebar .side-nav > .nav-group.nav-video-standalone { height:56px !important; min-height:56px !important; max-height:56px !important; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch,
html:not([data-mobile-workbench="true"]) body.desktop-sidebar-expanded .sidebar .side-nav .nav-media-mode-switch { grid-template-rows:56px !important; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > a.nav-media-mode-option-canvas[data-animated-card],
html:not([data-mobile-workbench="true"]) body.desktop-sidebar-expanded .sidebar .side-nav .nav-media-mode-switch > a.nav-media-mode-option-canvas[data-animated-card] { height:56px !important; min-height:56px !important; max-height:56px !important; border-radius:12px !important; }
.sidebar [data-animated-card] .canvas-entry-copy { left:12px; top:50%; transform:translateY(-50%); padding-left:21px; }
.sidebar [data-animated-card] .canvas-entry-copy,
.sidebar [data-animated-card] .canvas-entry-copy > span { color:inherit !important; }
.sidebar [data-animated-card] .canvas-entry-title-icon { position:absolute; left:0; top:50%; transform:translateY(-50%); width:16px !important; height:16px !important; background-color:currentColor; -webkit-mask:url('/styles/canvas-entry-user-icon.png') center / contain no-repeat; mask:url('/styles/canvas-entry-user-icon.png') center / contain no-repeat; }
html[data-theme="dark"]:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card] { background-color:#202938 !important; color:#e7edf7 !important; border-color:#39465b !important; }
html[data-theme="dark"]:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card].is-card-open { color:#fff !important; border-color:#506dff !important; }
.sidebar [data-animated-card] svg.canvas-entry-art { top:3px; right:5px; height:50px !important; width:48% !important; }
html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > a[data-animated-card] > :not(.canvas-entry-copy):not(.canvas-entry-art) { display:none !important; }
html:not([data-mobile-workbench="true"]) .sidebar [data-animated-card] .canvas-entry-copy,
html:not([data-mobile-workbench="true"]) .sidebar [data-animated-card] .canvas-entry-art { display:block; }
html[data-mobile-workbench="true"] .sidebar [data-animated-card] .canvas-entry-copy,
html[data-mobile-workbench="true"] .sidebar [data-animated-card] .canvas-entry-art { display:none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-mobile-workbench="true"]) body .sidebar .side-nav .nav-media-mode-switch > [data-animated-card]::after { transition:none !important; }
}
}