/* CALE header: operational help, notification settings and visible account icon. */
.app-top .top-actions{gap:8px}
.app-top .icon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:37px;height:37px;border-radius:11px;cursor:pointer;
  background:#faf9f6;color:#575e57;border:1px solid #dedbd4;
  transition:background .16s,border-color .16s,color .16s}
.app-top .icon-btn:hover{background:#f1eee8;border-color:#cac5bb;color:#2f3930}
.app-top .icon-btn:focus-visible,.app-top .avatar-btn:focus-visible{
  outline:2px solid #b3a38c;outline-offset:3px}
.app-top .avatar-btn{display:inline-flex;justify-content:center;align-items:center;
  position:relative;width:40px;height:40px;min-width:40px;
  background:#f1eee8!important;border:1px solid #ded9d0!important;
  border-radius:50%;color:transparent!important;font-size:0!important;
  line-height:0;cursor:pointer;box-shadow:none!important}
.app-top .avatar-btn::after{content:"";display:block;width:22px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e413b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 21v-2.4c0-3 3-5 7.5-5s7.5 2 7.5 5V21'/%3E%3C/svg%3E") center/contain no-repeat}
.app-top .avatar-btn:hover{background:#e7e3da!important;border-color:#c6bdb0!important}
/* Use the same neutral profile icon for every account avatar. */
.workspace-card .workspace-dot,.account-head .big-avatar,.settings-profile-preview .settings-profile-avatar{
  position:relative;display:grid;place-items:center;flex-shrink:0;
  background:#f1eee8!important;border:1px solid #ded9d0!important;
  color:transparent!important;font-size:0!important;line-height:0;box-shadow:none!important}
.account-head .big-avatar{width:40px;height:40px;min-width:40px;border-radius:12px}
.workspace-card .workspace-dot::after,.account-head .big-avatar::after,.settings-profile-preview .settings-profile-avatar::after{
  content:"";position:static;display:block;width:21px;height:21px;border:0;border-radius:0;box-shadow:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e413b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 21v-2.4c0-3 3-5 7.5-5s7.5 2 7.5 5V21'/%3E%3C/svg%3E") center/contain no-repeat}
.account-menu a.menu-item{box-sizing:border-box;text-decoration:none;color:inherit}
.cale-header-help-wrap{position:relative;display:flex;align-items:center}
.cale-header-help-popover{
  position:absolute;top:calc(100% + 13px);right:-16px;z-index:100;
  width:245px;background:#fff;border:1px solid #e1ded7;border-radius:14px;
  padding:9px;box-shadow:0 15px 40px #14171421;color:#30342f}
.cale-header-help-popover[hidden]{display:none!important}
.cale-header-popover-title{padding:9px 10px;font-size:12px;font-weight:700;
  border-bottom:1px solid #eceae5;margin-bottom:5px}
.cale-header-help-popover a{display:flex;justify-content:space-between;align-items:center;
  padding:10px 11px;border-radius:9px;text-decoration:none;color:#454a43;
  font-size:12px;line-height:1.4}
.cale-header-help-popover a span{font-size:11px;color:#8e9189}
.cale-header-help-popover a:hover{background:#f3f1ec;color:#222921}
.cale-notifications-highlight{outline:2px solid #c8bba6;outline-offset:4px;
  border-radius:12px;scroll-margin-top:110px}
html[data-theme="dark"] .app-top .icon-btn{
  background:#20231e;color:#cdd4c9;border-color:#3b4139}
html[data-theme="dark"] .app-top .icon-btn:hover{
  background:#2e332b;border-color:#566052;color:#f0f2ec}
html[data-theme="dark"] .app-top .avatar-btn{
  background:#2a3028!important;border-color:#4a5347!important;
  color:transparent!important}
html[data-theme="dark"] .app-top .avatar-btn::after{
  filter:invert(.8) sepia(.05) saturate(.2)}
html[data-theme="dark"] .app-top .avatar-btn:hover{
  background:#353e32!important;border-color:#66745f!important}
html[data-theme="dark"] .workspace-card .workspace-dot,
html[data-theme="dark"] .account-head .big-avatar,
html[data-theme="dark"] .settings-profile-preview .settings-profile-avatar{
  background:#2a3028!important;border-color:#4a5347!important}
html[data-theme="dark"] .workspace-card .workspace-dot::after,
html[data-theme="dark"] .account-head .big-avatar::after,
html[data-theme="dark"] .settings-profile-preview .settings-profile-avatar::after{
  filter:invert(.8) sepia(.05) saturate(.2)}
html[data-theme="dark"] .cale-header-help-popover{
  background:#22251f;border-color:#42483e;color:#ebeee7;
  box-shadow:0 15px 45px #0009}
html[data-theme="dark"] .cale-header-popover-title{border-color:#3d4239}
html[data-theme="dark"] .cale-header-help-popover a{color:#d0d8cd}
html[data-theme="dark"] .cale-header-help-popover a:hover{
  background:#30372e;color:#f3f7ef}
html[data-theme="dark"] .cale-header-help-popover a span{color:#aabca7}
html[data-theme="dark"] .cale-notifications-highlight{
  outline-color:#716956}
@media(max-width:540px){
  .app-top{padding-inline:12px}
  .app-top .top-actions{gap:6px}
  .cale-header-help-popover{right:-75px;max-width:calc(100vw - 24px)}
}


/* Mobile navigation follows the sidebar breakpoint; native dialog handles focus/inert. */
.cale-mobile-dock{display:none}
.cale-mobile-nav{padding:0;border:1px solid var(--theme-border,#e5e1d8);color:var(--theme-text,#171816);background:var(--theme-surface,#fff)}
.cale-mobile-nav::backdrop{background:rgba(15,18,14,.42);backdrop-filter:blur(5px)}
@media(max-width:820px){
  .app-content{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
  .cale-mobile-dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10001;display:flex;align-items:center;gap:4px;max-width:calc(100vw - 24px);padding:5px;border:1px solid var(--theme-border-strong,#d7d2c8);border-radius:19px;background:var(--theme-surface,#fff);color:var(--theme-text,#171816);box-shadow:0 7px 28px #15181224}
  .cale-mobile-dock a,.cale-mobile-dock button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:0;border-radius:13px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .cale-mobile-dock a{padding:0 14px}
  .cale-mobile-dock button{min-width:48px;padding:0 12px}
  .cale-mobile-dock a:hover,.cale-mobile-dock button:hover{background:var(--theme-surface-hover,#f4f3ef)}
  .cale-mobile-dock-divider{width:1px;height:25px;background:var(--theme-border,#e5e1d8)}
  .cale-mobile-nav{position:fixed;inset:auto 0 calc(12px + env(safe-area-inset-bottom,0px));margin:0 auto;width:calc(100% - 24px);max-width:420px;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px - env(safe-area-inset-bottom,0px));border-radius:24px;overflow:auto;overscroll-behavior:contain;box-shadow:0 18px 70px #0003}
  .cale-mobile-nav[open]{display:block}
  .cale-mobile-nav-content{padding:18px 12px 14px}
  .cale-mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--theme-border,#e5e1d8)}
  .cale-mobile-nav-head small{display:block;margin-bottom:4px;color:var(--theme-text-soft,#6f726c);font-size:10px;font-weight:650;letter-spacing:.12em}
  .cale-mobile-nav-head h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.035em;color:inherit}
  .cale-mobile-nav-head button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--theme-border,#e5e1d8);border-radius:13px;background:var(--theme-surface-soft,#faf9f6);color:inherit;cursor:pointer}
  .cale-mobile-nav nav{display:grid;gap:4px}
  .cale-mobile-nav nav a{display:flex;align-items:center;gap:13px;min-height:52px;padding:10px 13px;border:1px solid transparent;border-radius:14px;text-decoration:none;color:var(--theme-text,#171816);font-size:14px;font-weight:500}
  .cale-mobile-nav nav a:hover,.cale-mobile-nav-head button:hover{background:var(--theme-surface-hover,#f4f3ef);color:var(--theme-text,#171816)}
  .cale-mobile-nav nav a[aria-current="page"]{background:var(--theme-surface-soft,#faf9f6);border-color:var(--theme-border,#e5e1d8);font-weight:650}
  .cale-mobile-nav-icon{display:grid;place-items:center;width:28px;height:28px;color:var(--theme-text-soft,#6f726c)}
  .cale-mobile-nav-check{margin-left:auto;color:var(--theme-text-soft,#6f726c);font-size:15px}
  .cale-mobile-dock :focus-visible,.cale-mobile-nav :focus-visible{outline:2px solid #7fada0;outline-offset:2px}
  #caleGmailReminder{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;right:12px!important;width:min(360px,calc(100vw - 24px))!important;max-height:calc(100dvh - 140px);overflow:auto}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
}
@media(min-width:821px){.cale-mobile-dock,.cale-mobile-nav{display:none!important}}
@media(max-width:820px) and (prefers-reduced-motion:no-preference){
  .cale-mobile-nav[open]{animation:caleMobileNavOpen .16s ease-out}
  @keyframes caleMobileNavOpen{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
}

/* Gmail reminder dismissal stays reachable in either theme. */
#caleGmailReminder .cale-gmail-reminder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
#caleGmailReminder .cale-gmail-reminder-head strong{flex:1;min-width:0;padding-top:6px;font-size:13px;font-weight:750;line-height:1.5;color:inherit}
#caleGmailReminder .cale-gmail-reminder-close{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--theme-text-soft,#6f726c);cursor:pointer}
#caleGmailReminder .cale-gmail-reminder-close:hover{background:var(--theme-surface-hover,#f4f3ef);color:var(--theme-text,#171816)}
#caleGmailReminder .cale-gmail-reminder-close:focus-visible{outline:2px solid #7fada0;outline-offset:2px}
@media(max-width:820px){#caleGmailReminder .cale-gmail-reminder-close{flex-basis:44px;width:44px;height:44px}#caleGmailReminder .cale-gmail-reminder-head strong{padding-top:11px}}