/* Shared approved button faces. Menu layout, destinations and handlers stay shared. */
.app-body .cl-four-navigation{
 --nav-top:#1b4154;--nav-bottom:#0c293a;--nav-edge:#041724;--nav-line:#345d6e;
 --nav-text:#eff9fa;--nav-accent:#81d8d0;--nav-main:#1a9ea5;--nav-main-bottom:#087d88;
 --nav-main-edge:#07515a;--nav-shadow:#0006;
}
.app-body[data-ui-theme="fresh_light"] .cl-four-navigation{
 --nav-top:#fcfdfe;--nav-bottom:#e1e8ed;--nav-edge:#b4bfc8;--nav-line:#c6d0d7;
 --nav-text:#1b3645;--nav-accent:#4a6474;--nav-main:#5c7280;--nav-main-bottom:#425b6c;
 --nav-main-edge:#314b5b;--nav-shadow:#233d511c;
}
body.app-body .cl-four-navigation :is(.cl-nav-toggle,.cl-return-tile){
 isolation:isolate;position:relative;border:1px solid var(--nav-line);border-top-color:var(--nav-accent);
 border-radius:15px;background:linear-gradient(160deg,color-mix(in srgb,var(--nav-top) 75%,var(--nav-accent)),var(--nav-top) 35%,var(--nav-bottom));
 color:var(--nav-text);box-shadow:inset 0 2px 0 #ffffff45,inset 0 -3px 0 #00000025,0 2px 0 var(--nav-line),0 7px 0 var(--nav-edge),0 11px 12px var(--nav-shadow);
 transition:transform .1s,background .1s,box-shadow .1s;
}
body.app-body .cl-four-navigation :is(.cl-nav-toggle,.cl-return-tile)::before{
 content:"";position:absolute;inset:4px 5px auto;height:33%;border-radius:10px 10px 18px 18px;
 background:linear-gradient(#ffffff13,#ffffff00);pointer-events:none;z-index:-1;
}
body.app-body .cl-four-navigation :is(.cl-nav-toggle,.cl-return-tile):active,
body.app-body .cl-four-navigation .cl-nav-toggle[aria-expanded="true"]{
 transform:translateY(5px);border-color:var(--nav-accent);background:linear-gradient(150deg,var(--nav-main),var(--nav-main-bottom));
 color:#fff;box-shadow:inset 0 1px 0 #ffffff35,0 2px 0 var(--nav-main-edge),0 4px 5px var(--nav-shadow);
}
body.app-body .cl-four-navigation .entry-icon{
 display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;
 stroke-linecap:round;stroke-linejoin:round;color:var(--nav-accent);filter:drop-shadow(0 2px 1px var(--nav-shadow));
}
body.app-body .cl-four-navigation :is(.cl-nav-toggle,.cl-return-tile):active .entry-icon,
body.app-body .cl-four-navigation .cl-nav-toggle[aria-expanded="true"] .entry-icon{color:#fff}
body.app-body .cl-four-navigation :is(.cl-nav-toggle,.cl-return-tile):focus-visible{outline:3px solid var(--nav-accent);outline-offset:3px}
body.app-body .cl-four-navigation .cl-nav-toggle small{display:none}
/* The shortcut above the grid uses the approved bright blue in both themes. */
body.app-body .cl-compact-bar .cl-alerts :is(a,button){
 box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;gap:4px;
 min-height:36px;padding:6px 9px;border:1px solid #65d5ef;border-radius:10px;
 background:linear-gradient(145deg,#168fd0,#08b5ce);color:#fff;
 box-shadow:inset 0 1px 0 #ffffff45,0 3px 0 #056c91,0 5px 7px #0003;
 font:inherit;font-size:12px;font-weight:650;line-height:1.3;text-decoration:none;
 white-space:normal;overflow-wrap:anywhere;cursor:pointer;transition:transform .1s,background .1s,box-shadow .1s;
}
body.app-body .cl-compact-bar .cl-alerts :is(a,button):active{
 transform:translateY(2px);background:linear-gradient(145deg,#0870ae,#00839e);box-shadow:0 1px 0 #056c91;
}
body.app-body .cl-compact-bar .cl-alerts .entry-icon{
 display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#fff;
}
body.app-body .cl-compact-bar .cl-alerts :is(a,button):focus-visible{outline:3px solid #168fd0;outline-offset:3px}
@media(max-width:640px){body.app-body .cl-compact-bar .cl-alerts :is(a,button){font-size:11px;padding:7px 8px;min-height:34px}}
@media(pointer:coarse){body.app-body .cl-compact-bar .cl-alerts :is(a,button){min-height:44px}}
@media(prefers-reduced-motion:reduce){body.app-body .cl-four-navigation :is(.cl-nav-toggle,.cl-return-tile),body.app-body .cl-compact-bar .cl-alerts :is(a,button){transition:none}}