/* Final UI surface policy: colour blocks carry state. Original artwork pixels are untouched. */
#app :is(img,picture,canvas,video),
#app :is(.hero-stage,.ribbon-space,.ribbon-piece,.ribbon-art,.project-card,.project-stage,.media-stage,.media-figure,.case-hero,.film-cover,.external-player,.player-load,.manual-rail,.exp-art,.exp-art-link,.exp-art-shift,.exp-surface,.exp-film-door),
#app :is(.work-directory-card,.work-directory-card-art,.work-directory-list-strip,.work-directory-strip-frame,.work-directory-preview,.work-directory-deck-layer,.work-flow-highlight){
  border:0!important;
  outline:none!important;
}
/* Remove inset rings on imagery. Soft external shadows remain only where they create spatial depth. */
#app :is(img,picture,canvas,video,.hero-stage,.ribbon-space,.ribbon-art,.project-card,.project-stage,.media-stage,.media-figure,.case-hero,.film-cover,.external-player,.player-load,.manual-rail,.exp-art,.exp-art-link,.exp-art-shift,.exp-surface,.exp-film-door,.work-directory-card,.work-directory-card-art,.work-directory-list-strip,.work-directory-strip-frame,.work-flow-highlight){box-shadow:none!important}
#app .ribbon-piece{box-shadow:0 13px 28px #0002!important}
#app .ribbon-piece[aria-pressed=true]{box-shadow:0 19px 38px #0004!important}
#app .ribbon-piece[aria-pressed=true]:hover{box-shadow:0 22px 44px #0005!important}
#app .work-directory-preview{background:#141414;box-shadow:0 20px 60px #0009!important}
#app .work-directory-preview[data-layout=block]{background:transparent;box-shadow:none!important}
#app .work-directory-deck-layer{background:#000;box-shadow:0 12px 22px #0008!important}
/* Work rows and bars never acquire a stroke, in either layout or any interaction state. */
#app .work-directory :is(.work-directory-card,.work-directory-card-art,.work-directory-card-foot,.work-directory-card-top,.work-directory-card-open,.work-directory-bar,.work-directory-layout-toggle,.work-directory-preview-label,.work-directory-preview-bottom,.work-flow-highlight){border:0!important;outline:none!important}
#app .work-directory :is(.work-directory-card,.work-directory-card-art,.work-directory-card-foot,.work-directory-card-top,.work-directory-card-open,.work-directory-bar,.work-directory-layout-toggle,.work-flow-highlight){box-shadow:none!important}
#app .work-directory .work-directory-card-open{background:#222;color:#fff}
#app .work-directory .work-directory-bar{background:#0c0c0c}
#app .work-directory .work-directory-layout-toggle{background:#161616}
#app .work-directory .work-directory-preview-bottom{background:#141414}
/* Keyboard focus uses a solid surface rather than a line around the image or row. */
#app .work-directory .work-directory-card:focus-visible{background:#222!important}
#app .work-directory .work-directory-card:focus-visible .work-directory-card-open{background:#fff;color:#000}
#app .hero-ribbon .ribbon-space:focus-visible{background:transparent}
#app .hero-ribbon .ribbon-space:focus-visible .ribbon-piece[aria-pressed=true] .piece-caption{background:#e5e5e5;color:#000}
#app .ribbon-piece:focus-visible .piece-caption{background:#e5e5e5;color:#000}
#app .project-card:focus-visible .card-caption{background:#222}
#app .ribbon-selected-panel .project-card:focus-visible .card-caption{background:#e5e5e5;color:#000}
#app .manual-rail:focus-visible{background:#222}
#app .exp-art-link:focus-visible,#app .exp-film-door:focus-visible{background:#222}
#app .exp-art-link:focus-visible .exp-art-cue{opacity:1}
#app .exp-film-door:focus-visible{color:#fff}
/* Selection controls use filled blocks. Native media controls remain under the player's control. */
#app :is(.work-directory-layout-toggle button,.filter-group button,.layout-control,.layout-control button,.ribbon-controls button,.manual-controls button,.case-contents button){border:0!important;outline:none!important;box-shadow:none!important}
#app :is(.work-directory-layout-toggle button,.filter-group button,.layout-control button,.manual-controls button,.case-contents button){background:#161616}
#app :is(.work-directory-layout-toggle button,.filter-group button,.layout-control button,.manual-controls button,.case-contents button):is(:hover,:focus-visible){background:#333;color:#fff}
#app :is(.work-directory-layout-toggle button,.filter-group button,.layout-control button)[aria-pressed=true],#app .case-contents button[aria-current=location]{background:#fff;color:#000}
#app .ribbon-controls button{background:#e5e5e5;color:#000}
#app .ribbon-controls button:is(:hover,:focus-visible){background:#000;color:#fff}
#app .motion-badge{border:0!important;outline:none!important;box-shadow:none!important}
/* Preview play affordances keep their behaviour and use a filled icon surface. */
#app :is(.film-play,.exp-film-play){border:0!important;outline:none!important;box-shadow:none!important;background:#fff;color:#000}
#app .exp-film-door:hover .exp-film-play,#app .exp-film-door:focus-visible .exp-film-play{background:#000;color:#fff}
#app .work-directory :is(.work-directory-controls,.catalog-status){border:0!important;outline:none!important;box-shadow:none!important}
#app .next-project{outline:none!important;box-shadow:none!important}
#app .next-project:focus-visible{background:#222}