/* "View as" testing banner (DEC-178). A reviewer tool only; never part of the live product. Own file so it stays clear
   of the layout work in shell.css. Amber is used nowhere else at this size. */
body .view-as-bar{box-sizing:border-box;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;min-height:48px;margin:0;padding:4px max(var(--primo-gutter,20px),calc((100% - var(--primo-width,1240px))/2));background:#ffcd43;color:#101725;font:16px/1.3 var(--font-text,system-ui,sans-serif);border-bottom:4px solid #101725;background-image:none}
body .view-as-bar::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:repeating-linear-gradient(135deg,#101725 0 8px,#ffcd43 8px 16px)}
body .view-as-bar .view-as-tag{flex:none;padding:2px 8px;border:2px solid #101725;border-radius:4px;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
body .view-as-bar label{flex:none;font-weight:700;color:#101725;margin:0}
body .view-as-bar select{box-sizing:border-box;flex:0 1 280px;min-width:0;min-height:40px;margin:0;padding:4px 8px;border:2px solid #101725;border-radius:4px;background:#fff;color:#101725;font:16px/1.3 var(--font-text,system-ui,sans-serif)}
body .view-as-bar .view-as-note{flex:1 1 auto;min-width:0;font-size:14px;color:#101725}
body .view-as-bar button{box-sizing:border-box;flex:none;min-height:40px;margin:0 0 0 auto;padding:4px 12px;border:2px solid #101725;border-radius:4px;background:#101725;color:#fff;font:700 15px/1.3 var(--font-text,system-ui,sans-serif);cursor:pointer}
body .view-as-bar .view-as-short{display:none}
body .view-as-bar select:focus-visible,body .view-as-bar button:focus-visible{outline:3px solid #101725;outline-offset:2px;box-shadow:0 0 0 6px #fff}
@media(max-width:899px){body .view-as-bar .view-as-note{display:none}}
@media(max-width:599px){
 body .view-as-bar{gap:8px;padding:4px 10px;min-height:48px;flex-wrap:nowrap}
 body .view-as-bar .view-as-tag,body .view-as-bar .view-as-long{display:none}
 body .view-as-bar .view-as-short{display:inline}
 body .view-as-bar label{font-size:14px}
 body .view-as-bar select{flex:1 1 auto;font-size:16px}
 body .view-as-bar button{padding:4px 10px}
}