/* The dock, from the owner's site family (MSD website/native-2026-10/src/navy/dock.css; Abraham 2026-10-31: merge the bottom buttons and
   brand the chat as on MMC, MSD and TSC, ADA included). One navy capsule, bottom right, with the accessibility and chat buttons. Phones:
   past the first screen it opens leftwards around the booking row (#msd-mobile-cta, header.css), everything on one line. Desktop: the chat
   label folds away past the first screen. Motion numbers and their sources: MSD website/redesign-2026-11/DESIGN.md "The dock". */
:root{--dock-m:10px;--dock-p:6px;--dock-b:44px;--dock-util:calc(var(--dock-b)*2 + var(--dock-p)*2);--dock-t:.4s}
.nv-dock{position:fixed;right:var(--dock-m);bottom:calc(var(--dock-m) + env(safe-area-inset-bottom,0px));z-index:9981;pointer-events:none;animation:nv-dock-in var(--dock-t) var(--e) .25s backwards}
@keyframes nv-dock-in{from{opacity:0;transform:translateY(20px)}}
/* the capsule; the rim and the shadow are drop-shadows so they follow the phone's clip */
.nv-dock__ground{position:absolute;inset:0;filter:drop-shadow(0 0 .6px rgba(190,208,255,.8)) drop-shadow(0 10px 20px rgba(5,12,30,.32))}
.nv-dock__ground::before{content:"";position:absolute;inset:0;border-radius:999px;background:var(--h-ground)}
.nv-dock__row{position:relative;display:flex;align-items:center;width:max-content;margin-left:auto;padding:var(--dock-p);pointer-events:auto}
.nv-dock__rule{flex:none;width:1px;height:24px;margin:0 6px;background:rgba(255,255,255,.16)}
.nv-dock__chat{display:flex;align-items:center;height:var(--dock-b);padding:0;border:0;border-radius:999px;background:none;color:var(--h-text);font:500 15px/1 var(--h-sans);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.nv-dock__disc{position:relative;flex:none;display:grid;place-items:center;width:var(--dock-b);height:var(--dock-b);border-radius:50%;background:var(--h-accent);color:var(--h-accent-ink);transition:transform .24s var(--e)}
.nv-dock__disc svg{grid-area:1/1;width:26px;height:26px;transition:transform .2s var(--e),opacity .2s var(--e)}
.nv-dock__disc .nv-dock__x{width:20px;height:20px;opacity:0;transform:rotate(-45deg) scale(.8)}
html.nv-chat-open .nv-dock__ic{opacity:0;transform:scale(.8)}
html.nv-chat-open .nv-dock__x{opacity:1;transform:none}
.nv-dock__chat:active .nv-dock__disc,.nv-a11y__btn:active svg{transform:scale(.97);transition-duration:.12s}
@media(hover:hover){.nv-dock__chat:hover .nv-dock__ic{transform:translateY(-2px)}.nv-a11y__btn:hover{background:rgba(255,255,255,.1)}}
.nv-dock__chat:focus-visible,.nv-a11y__btn:focus-visible{outline:2px solid var(--h-focus);outline-offset:2px}
/* the halo leaves the disc twice and rests: under the 5 s WCAG 2.2.2 allows without a pause control */
.nv-dock__disc::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--h-accent);opacity:0;pointer-events:none;animation:nv-dock-halo 2.4s var(--e) .8s 2}
@keyframes nv-dock-halo{from{opacity:.4;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
/* first tap before the widget has loaded */
.nv-dock__chat.is-busy .nv-dock__disc::before{content:"";position:absolute;inset:3px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:nv-dock-spin .8s linear infinite}
@keyframes nv-dock-spin{to{transform:rotate(360deg)}}
html.msd-lock .nv-dock{visibility:hidden}
@media(max-width:820px){
:root{--dock-t:.32s}
.nv-dock{left:var(--dock-m);transition:transform .224s var(--ei),visibility 0s}
/* the capsule opens from the chat pair; a clip, not a width, so nothing shifts while the page scrolls */
.nv-dock__ground::before{clip-path:inset(0 0 0 calc(100% - var(--dock-util)) round 999px);transition:clip-path .224s var(--ei)}
html.msd-cta-on:not(.msd-lock) .nv-dock__ground::before{clip-path:inset(0 round 999px);transition:clip-path .32s var(--e)}
.nv-dock__rule{display:none}
.nv-dock__row::before{content:"";position:absolute;left:-1px;top:16px;width:1px;height:24px;background:rgba(255,255,255,.16);opacity:0;transition:opacity .2s var(--e)}
html.msd-cta-on:not(.msd-lock) .nv-dock__row::before{opacity:1}
.nv-dock__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.nv-chat-open .nv-dock{transform:translateY(calc(100% + var(--dock-m) + 8px));visibility:hidden;transition:transform .224s var(--ei),visibility 0s .224s}
}
@media(min-width:821px){
.nv-dock{right:20px;bottom:20px}
.nv-dock__lbl{display:grid;grid-template-columns:1fr;transition:grid-template-columns .36s var(--e),opacity .25s var(--e)}
.nv-dock__lbl>span{min-width:0;overflow:hidden}
.nv-dock__lbl b{display:block;padding:0 12px 0 4px;font-weight:500;white-space:nowrap}
html.msd-cta-on .nv-dock__lbl{grid-template-columns:0fr;opacity:0;transition:grid-template-columns .25s var(--ei),opacity .15s var(--ei)}
html.msd-cta-on .nv-dock__chat:is(:hover,:focus-visible) .nv-dock__lbl,html.nv-chat-open.nv-chat-open .nv-dock__lbl{grid-template-columns:1fr;opacity:1;transition:grid-template-columns .36s var(--e),opacity .25s var(--e)}
}
@media(prefers-reduced-motion:reduce){.nv-dock,.nv-dock__disc::after,.nv-dock__disc::before{animation:none}.nv-dock,.nv-dock *,.nv-dock *::before,#msd-mobile-cta,#msd-mobile-cta *{transition:none!important}.nv-dock__chat.is-busy .nv-dock__disc{opacity:.6}}
@media(forced-colors:active){.nv-dock__ground::before{outline:1px solid CanvasText}.nv-dock__disc{outline:1px solid ButtonText}}
@media print{.nv-dock{display:none}}

/* the chat window in CRC's colours and faces (outer rules beat the widget's own :host block); shapes: SKIN in js/dock.js */
chat-widget{--chat-widget-font-family:"IBM Plex Sans",system-ui,sans-serif;--ion-font-family:"IBM Plex Sans",system-ui,sans-serif;--chat-widget-bubble-color:#0F1A38;--chat-widget-primary-color:#2B4898;--chat-widget-primary-solid-color:#2B4898;--chat-widget-active-color:#2B4898;--chat-widget-button-color:#0F1A38;--ion-color-primary:#2B4898;--color:#2B4898;--chat-widget-header-color:#2B4898;--chat-widget-header-darken-color:#0F1A38;--chat-widget-avatar-border-color:#BED0FF;--chat-widget-received-message-color:#EEF2FB;--chat-widget-received-message-text-color:#0F1A38;--chat-widget-sender-message-color:#2B4898;--chat-widget-welcome-message-text-color:#0F1A38;--chat-widget-system-message-text-color:#0F1A38}
chat-widget:not(.nv-ready),html.nv-a11y-open:not(.nv-chat-open) chat-widget{visibility:hidden}

/* Accessibility preferences (js/a11y.js): the button lives in the dock, the panel opens above it */
.nv-a11y{flex:none}
.nv-a11y__btn{display:grid;place-items:center;width:var(--dock-b);height:var(--dock-b);padding:0;border:0;border-radius:50%;background:none;color:var(--h-text);cursor:pointer;touch-action:manipulation;transition:background-color .18s var(--e);-webkit-tap-highlight-color:transparent}
.nv-a11y__btn svg{width:25px;height:25px;transition:transform .24s var(--e)}
.nv-a11y__panel button:focus-visible,.nv-a11y__panel a:focus-visible{outline:3px solid #2B4898;outline-offset:2px}
.nv-a11y__panel{position:absolute;right:0;bottom:calc(100% + var(--dock-p) + 10px);width:min(300px,calc(100vw - 20px));padding:18px;border-radius:18px;background:#fff;color:#0F1A38;box-shadow:0 0 0 1px #DCE3F0,0 24px 50px rgba(10,23,54,.28);font:400 14px/1.4 var(--h-sans)}
.nv-a11y__panel[hidden]{display:none}
.nv-a11y__t{margin:0 0 12px;font:400 22px/1.1 var(--h-display);color:#0F1A38}
.nv-a11y__opts{display:flex;flex-direction:column;gap:6px}
.nv-a11y__opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:#EEF2FB;font:500 14.5px/1.2 var(--h-sans);color:#0F1A38;text-align:left;cursor:pointer}
.nv-a11y__opt i{display:grid;place-items:center;min-width:22px;height:22px;border-radius:11px;box-shadow:inset 0 0 0 2px #AEB9CC;font:700 10px/1 var(--h-sans);font-style:normal;color:#fff}
.nv-a11y__opt[aria-pressed="true"]{background:#0F1A38;color:#fff}
.nv-a11y__opt[aria-pressed="true"] i{background:#BED0FF;box-shadow:none;color:#0F1A38}
.nv-a11y__opt[aria-pressed="true"] i:empty::after{content:"";width:8px;height:4px;margin-top:-2px;border:solid #0F1A38;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.nv-a11y__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.nv-a11y__reset{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px #DCE3F0;font:500 13px/1 var(--h-sans);color:#0F1A38;cursor:pointer}
.nv-a11y__foot a{font:500 13px/1.3 var(--h-sans);color:#2B4898}
.nv-a11y__help{margin:10px 0 0;font-size:12.5px;color:#46515A}.nv-a11y__help a{color:#2B4898;white-space:nowrap}
.nv-a11y__x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;font:400 24px/1 var(--h-sans);color:#46515A;cursor:pointer}
/* the choices. Text blocks grow, layouts keep their width */
html.a11y-text :is(main,footer) :is(p,li,dd,dt,td,th,figcaption,label,summary,blockquote){zoom:1.14}
html.a11y-text2 :is(main,footer) :is(p,li,dd,dt,td,th,figcaption,label,summary,blockquote){zoom:1.28}
html.a11y-text :is(main,footer) :is(p,li,dd,td,label,summary) :is(p,li,dd,td,label,summary){zoom:1}
/* contrast darkens the colour tokens instead of forcing text black, so white text on the navy sections and on photos stays white */
html.a11y-contrast,html.a11y-contrast .ch-home{--nk-ink:#000;--nk-ink-2:#000;--ink:#000;--charcoal:#000;--slate:#000;--instrument:#1F3576;--nk-blue:#1F3576}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px!important}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-still [data-rise]{opacity:1!important;transform:none!important}
html.a11y-space main :is(p,li,dd){line-height:1.95!important;letter-spacing:.02em!important;word-spacing:.1em!important}
