/* DocSana Connect — hamburger menu (shared by every /connect/ page).
   Dedicated stylesheet for the Connect menu only: tokens mirror the
   Connect pages' own design tokens. Loaded via <link> in each page head;
   markup is injected by /connect/connect-menu.js (one implementation). */

/* ---- hamburger button (lives in the page header bar) ---- */
.cmenu-btn{flex:none;margin-left:2px;width:44px;height:44px;border:none;background:transparent;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:#0D4B5C;padding:0}
.cmenu-btn:hover{background:#EFF7F6}
.cmenu-btn:focus-visible{outline:2px solid #3AA79C;outline-offset:2px}
.cmenu-btn .cmenu-lines{display:flex;flex-direction:column;gap:5px;width:22px}
.cmenu-btn .cmenu-lines span{display:block;height:2.5px;border-radius:2px;background:currentColor}

/* ---- backdrop + slide-in panel ---- */
.cmenu-backdrop{position:fixed;inset:0;background:rgba(13,40,48,.48);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:190}
.cmenu-backdrop.open{opacity:1;pointer-events:auto}
.cmenu-panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:330px;max-width:88vw;background:#fff;z-index:200;transform:translateX(105%);transition:transform .26s ease;display:flex;flex-direction:column;box-shadow:-14px 0 44px rgba(13,75,92,.22);font-family:'Source Sans 3',sans-serif;color:#17323B}
.cmenu-panel.open{transform:translateX(0)}
.cmenu-panel:focus{outline:none}
.cmenu-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 20px;border-bottom:1px solid #DCE9E7}
.cmenu-head img{width:30px;height:30px;display:block}
.cmenu-head .t{font-size:17px;color:#0D4B5C;font-weight:500}
.cmenu-head .t .ct{color:#3AA79C}
.cmenu-close{margin-left:auto;width:44px;height:44px;border:none;background:transparent;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:#5C737C;font-size:26px;line-height:1;padding:0}
.cmenu-close:hover{background:#EFF7F6;color:#0D4B5C}
.cmenu-close:focus-visible{outline:2px solid #3AA79C;outline-offset:2px}
.cmenu-list{overflow-y:auto;padding:10px 10px 18px;-webkit-overflow-scrolling:touch}
.cmenu-item{display:flex;align-items:center;gap:13px;min-height:52px;padding:10px 12px;border-radius:14px;color:#17323B;font-size:16.5px;font-weight:500;text-decoration:none}
.cmenu-item svg{flex:none;color:#5C737C}
.cmenu-item:hover{background:#EFF7F6}
.cmenu-item:focus-visible{outline:2px solid #3AA79C;outline-offset:-2px}
.cmenu-item.on{background:#E3F2F1;color:#0D4B5C;font-weight:600;box-shadow:inset 3px 0 0 #3AA79C}
.cmenu-item.on svg{color:#2C7A72}
.cmenu-badge{margin-left:auto;flex:none;background:#e0447c;color:#fff;font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.cmenu-div{height:1px;background:#DCE9E7;margin:10px 12px}
@media (prefers-reduced-motion: reduce){
  .cmenu-backdrop,.cmenu-panel{transition:none}
}

/* ---- back pill (every Connect page, 2026-10-16) ----
   Same white pill, top-left of the content under the header. */
.ds-backrow{padding-top:16px}
.ds-backrow + .page-head{padding-top:14px}
.ds-backbtn{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1.5px solid #DCE9E7;color:#0D4B5C;font-weight:600;font-size:15.5px;font-family:'Source Sans 3',sans-serif;border-radius:999px;padding:9px 17px 9px 12px;min-height:44px;box-shadow:0 3px 10px rgba(13,75,92,.07);text-decoration:none;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.ds-backbtn:active{background:#EFF7F6}
.ds-backbtn:focus-visible{outline:2px solid #3AA79C;outline-offset:2px}
.ds-backbtn svg{flex:none}