/* MSH Organize canonical Navbar visual owner.
 * Global UI contract:
 * Desktop/Tablet: Upload pill | green Ready + updated time + Sync capsule | Avatar
 * Mobile: Upload icon -> green check -> Sync -> Avatar
 * Business logic stays in existing page modules / MSHAppShell.
 */

:root{
  --msh-navbar-control:50px;
  --msh-navbar-mobile-control:40px;
  --msh-navbar-border:rgba(166,183,202,.38);
  --msh-navbar-surface:rgba(255,255,255,.78);
  --msh-navbar-blue:#2477d4;
  --msh-navbar-green:#1fa55a;
  --msh-navbar-green-bg:rgba(235,250,241,.98);
  --msh-navbar-warning:#c98600;
  --msh-navbar-danger:#c23d38;
}

/*
 * Fixed viewport owner for the V3 shell.
 * The generated topbar lives inside #mshNavbar, so making only the header
 * sticky constrains it to the host's own height and lets it scroll away.
 */
html body:has(> #mshNavbar){
  padding-top:76px!important;
}
html body> #mshNavbar{
  position:fixed!important;
  z-index:5000!important;
  top:0!important;
  right:0!important;
  left:0!important;
  width:100%!important;
}
html body> #mshNavbar>.msh-page-topbar{
  position:relative!important;
  top:auto!important;
}
@media(max-width:760px){
  html body:has(> #mshNavbar){padding-top:64px!important}
}
@media print{
  html body:has(> #mshNavbar){padding-top:0!important}
  html body> #mshNavbar{position:static!important}
}

/* Shared action rhythm. */
html body .msh-page-topbar.msh-global-shell-v1>.top-actions,
html body .msh-shell-topbar.msh-global-shell-v1>.top-actions,
html body .admin-topbar.msh-global-shell-v1>.top-actions{
  gap:9px!important;
  overflow:visible!important;
}

/* Avatar: exactly one ring, owned by the button. */
html body .msh-global-shell-v1 .user-menu-wrap,
html body .msh-global-shell-v1 .msh-account-menu-host,
html body .msh-global-shell-v1 .msh-standalone-user,
html body .msh-global-shell-v1 .msh-global-avatar-host{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  filter:none!important;
}
html body .msh-global-shell-v1 .user-menu-button,
html body .msh-global-shell-v1 .msh-account-menu-host .user-menu-button{
  display:grid!important;
  place-items:center!important;
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  flex:0 0 58px!important;
  margin:0!important;
  padding:4px!important;
  border:1px solid var(--msh-navbar-border)!important;
  border-radius:50%!important;
  background:var(--msh-navbar-surface)!important;
  box-shadow:none!important;
  outline:0!important;
  filter:none!important;
  overflow:hidden!important;
}
html body .msh-global-shell-v1 .user-menu-button .me{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
}
html body .msh-global-shell-v1 .user-menu-button .me>span:not(.avatar):not(.msh-user-avatar){display:none!important}
html body .msh-global-shell-v1 .user-menu-button .avatar,
html body .msh-global-shell-v1 .user-menu-button .avatar-fallback,
html body .msh-global-shell-v1 .msh-user-avatar,
html body .msh-global-shell-v1 .msh-user-avatar img{
  display:block!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  flex:0 0 48px!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  object-fit:cover!important;
}
html body .msh-global-shell-v1 .user-menu-button:before,
html body .msh-global-shell-v1 .user-menu-button:after,
html body .msh-global-shell-v1 .msh-global-avatar-host:before,
html body .msh-global-shell-v1 .msh-global-avatar-host:after{
  content:none!important;
  display:none!important;
}

/* State indicator colors. Ready is always green. */
html body .msh-global-status-capsule>.status-area .job-status-button,
html body .msh-global-status-capsule .msh-global-state-button{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  flex:0 0 40px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(31,165,90,.22)!important;
  border-radius:50%!important;
  background:var(--msh-navbar-green-bg)!important;
  color:var(--msh-navbar-green)!important;
  box-shadow:none!important;
  outline:0!important;
}
html body .msh-global-status-capsule>.status-area .job-status-value,
html body .msh-global-status-capsule .msh-global-state-symbol{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  color:currentColor!important;
  font-size:20px!important;
  font-weight:750!important;
  line-height:1!important;
  text-align:center!important;
}
/* Ready check: short-left / long-right, rounded, optically centered like the approved mockup. */
html body .msh-global-status-capsule>.status-area .job-status-button.ready .job-status-value,
html body .msh-global-status-capsule .msh-global-state-button.ready .msh-global-state-symbol{font-size:0!important}
html body .msh-global-status-capsule>.status-area .job-status-button.ready .job-status-value:before,
html body .msh-global-status-capsule .msh-global-state-button.ready .msh-global-state-symbol:before{
  content:""!important;
  display:block!important;
  width:16px!important;
  height:12px!important;
  margin:0!important;
  transform:translateY(-2px)!important;
  background:currentColor!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2.5 9.5 8.5 15.5 21.5 2.5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2.5 9.5 8.5 15.5 21.5 2.5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
}
html body .msh-global-status-capsule[data-state="LOADING"]>.status-area .job-status-button,
html body .msh-global-status-capsule[data-state="SYNCING"]>.status-area .job-status-button,
html body .msh-global-status-capsule[data-state="LOADING"] .msh-global-state-button,
html body .msh-global-status-capsule[data-state="SYNCING"] .msh-global-state-button{
  border-color:rgba(71,111,162,.18)!important;
  background:#f1f6fb!important;
  color:#5d7898!important;
}
html body .msh-global-status-capsule[data-state="DEGRADED"]>.status-area .job-status-button,
html body .msh-global-status-capsule[data-state="DEGRADED"] .msh-global-state-button{
  border-color:rgba(201,134,0,.22)!important;
  background:#fff8e8!important;
  color:var(--msh-navbar-warning)!important;
}
html body .msh-global-status-capsule[data-state="OFFLINE"]>.status-area .job-status-button,
html body .msh-global-status-capsule[data-state="ERROR"]>.status-area .job-status-button,
html body .msh-global-status-capsule[data-state="OFFLINE"] .msh-global-state-button,
html body .msh-global-status-capsule[data-state="ERROR"] .msh-global-state-button{
  border-color:rgba(194,61,56,.22)!important;
  background:#fff2f1!important;
  color:var(--msh-navbar-danger)!important;
}

/* Desktop / Tablet. */
@media(min-width:761px){
  /* Upload target: one soft-blue pill. Upload icon has no ring. */
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar>.nav-create-wrap{
    display:block!important;
    justify-self:center!important;
    width:min(300px,26vw)!important;
    min-width:236px!important;
    max-width:300px!important;
    height:var(--msh-navbar-control)!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-drop{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:11px!important;
    width:100%!important;
    height:var(--msh-navbar-control)!important;
    min-height:var(--msh-navbar-control)!important;
    max-height:var(--msh-navbar-control)!important;
    margin:0!important;
    padding:0 20px!important;
    border:1px solid rgba(71,145,235,.28)!important;
    border-radius:999px!important;
    background:rgba(238,246,255,.78)!important;
    color:#172033!important;
    box-shadow:0 2px 8px rgba(31,105,194,.035)!important;
    font-family:var(--msh-font-ui,"Inter","Noto Sans Thai",system-ui,sans-serif)!important;
    font-size:0!important;
    font-weight:700!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-decoration:none!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button:before{content:none!important;display:none!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button:after{
    content:"อัปโหลด / ลากไฟล์มาวาง"!important;
    display:inline!important;
    color:#172033!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1!important;
  }
  html body.msh-navbar-action-route .nav-create-button:after{content:"อัปโหลดภาพกิจกรรม"!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button svg{
    display:block!important;
    width:23px!important;
    min-width:23px!important;
    height:23px!important;
    flex:0 0 23px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    outline:0!important;
    fill:none!important;
    stroke:var(--msh-navbar-blue)!important;
    stroke-width:1.9!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button:hover:not(:disabled){
    border-color:rgba(71,145,235,.42)!important;
    background:rgba(230,242,255,.92)!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button:active:not(:disabled){
    transform:scale(.985)!important;
    background:rgba(222,237,253,.96)!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-drop.dragging .nav-create-button{
    border-color:rgba(36,119,212,.58)!important;
    background:rgba(223,239,255,.98)!important;
    box-shadow:0 0 0 3px rgba(36,119,212,.09)!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-file-button{display:none!important}

  /* Ready + update time + Sync are one compact capsule. */
  html body .msh-global-status-capsule{
    display:flex!important;
    align-items:stretch!important;
    gap:0!important;
    height:var(--msh-navbar-control)!important;
    min-height:var(--msh-navbar-control)!important;
    padding:0!important;
    border:1px solid var(--msh-navbar-border)!important;
    border-radius:999px!important;
    background:var(--msh-navbar-surface)!important;
    box-shadow:none!important;
    overflow:hidden!important;
    backdrop-filter:blur(14px) saturate(135%)!important;
    -webkit-backdrop-filter:blur(14px) saturate(135%)!important;
  }
  html body .msh-global-status-capsule>.status-area{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
    width:auto!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    margin:0!important;
    padding:4px 10px 4px 5px!important;
    border:0!important;
    border-radius:999px 0 0 999px!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html body .msh-global-status-capsule>.status-area .status-copy{
    display:grid!important;
    align-content:center!important;
    gap:1px!important;
    min-width:0!important;
    width:auto!important;
    margin:0!important;
    text-align:left!important;
  }
  html body .msh-global-status-capsule>.status-area .status-copy>span,
  html body .msh-global-status-capsule .msh-global-status-text{
    display:block!important;
    color:#344054!important;
    font-size:15px!important;
    font-weight:700!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  html body .msh-global-status-capsule>.status-area .status-copy>small,
  html body .msh-global-status-capsule .msh-global-status-time{
    display:block!important;
    color:#8a95a5!important;
    font-size:12px!important;
    font-weight:500!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  html body .msh-global-status-capsule>#forceSync,
  html body .msh-global-status-capsule>#mshSharedSync,
  html body .msh-global-status-capsule>#mshGlobalRefresh,
  html body .msh-global-status-capsule>.msh-global-refresh-control{
    display:grid!important;
    place-items:center!important;
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-left:1px solid rgba(166,183,202,.32)!important;
    border-radius:0 999px 999px 0!important;
    background:transparent!important;
    color:#536176!important;
    box-shadow:none!important;
  }
  html body .msh-global-status-capsule>#forceSync>span:last-child,
  html body .msh-global-status-capsule .msh-global-refresh-label{display:none!important}
  html body .msh-global-status-capsule>#forceSync:hover:not(:disabled),
  html body .msh-global-status-capsule>#mshSharedSync:hover:not(:disabled),
  html body .msh-global-status-capsule>#mshGlobalRefresh:hover:not(:disabled){
    background:rgba(240,246,252,.78)!important;
    color:#2d6eac!important;
  }
}

/* Canonical Sync icon geometry. Prevent page/legacy SVG rules from changing its size or stroke. */
html body .msh-global-status-capsule>#forceSync svg,
html body .msh-global-status-capsule>#mshSharedSync svg,
html body .msh-global-status-capsule>#mshGlobalRefresh svg,
html body .msh-global-status-capsule>.msh-global-refresh-control svg{
  display:block!important;
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  margin:0!important;
  padding:0!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  transform:none!important;
}

/* Mobile: one row, Upload -> green check -> optional warning -> Sync -> Avatar. */
@media(max-width:760px){
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar{
    display:grid!important;
    grid-template-columns:minmax(150px,1fr) var(--msh-navbar-mobile-control) auto!important;
    grid-template-rows:52px!important;
    align-items:center!important;
    column-gap:5px!important;
    min-height:64px!important;
    height:64px!important;
    padding:6px max(7px,env(safe-area-inset-right)) 6px max(7px,env(safe-area-inset-left))!important;
    overflow:visible!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar>.brand{
    grid-column:1!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-self:start!important;
    width:100%!important;
    min-width:0!important;
    margin-left:46px!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand-logo{
    width:32px!important;height:32px!important;flex:0 0 32px!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand>div{display:grid!important;min-width:0!important;gap:0!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand .eyebrow{
    display:block!important;max-width:132px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    color:#667085!important;font-size:10px!important;font-weight:600!important;line-height:1.05!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand h1{
    display:block!important;max-width:132px!important;margin:1px 0 0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    color:#172033!important;font-size:12px!important;font-weight:700!important;line-height:1.08!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar>.nav-create-wrap{
    grid-column:2!important;grid-row:1!important;justify-self:center!important;
    width:var(--msh-navbar-mobile-control)!important;min-width:var(--msh-navbar-mobile-control)!important;max-width:var(--msh-navbar-mobile-control)!important;
    height:var(--msh-navbar-mobile-control)!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-drop{width:100%!important;height:100%!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button{
    display:grid!important;place-items:center!important;
    width:var(--msh-navbar-mobile-control)!important;min-width:var(--msh-navbar-mobile-control)!important;max-width:var(--msh-navbar-mobile-control)!important;
    height:var(--msh-navbar-mobile-control)!important;min-height:var(--msh-navbar-mobile-control)!important;max-height:var(--msh-navbar-mobile-control)!important;
    margin:0!important;padding:0!important;border:1px solid rgba(71,145,235,.26)!important;border-radius:50%!important;
    background:rgba(238,246,255,.92)!important;color:var(--msh-navbar-blue)!important;box-shadow:none!important;font-size:0!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button:before,
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button:after{content:none!important;display:none!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button svg{width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-file-button{display:none!important}

  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar>.top-actions{
    grid-column:3!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-self:end!important;width:auto!important;min-width:0!important;gap:5px!important;
  }
  html body .msh-global-status-capsule{
    display:flex!important;align-items:center!important;gap:5px!important;min-height:var(--msh-navbar-mobile-control)!important;
    padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
  }
  html body .msh-global-status-capsule>.status-area{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;
    width:auto!important;min-width:var(--msh-navbar-mobile-control)!important;max-width:none!important;
    height:var(--msh-navbar-mobile-control)!important;min-height:var(--msh-navbar-mobile-control)!important;max-height:var(--msh-navbar-mobile-control)!important;
    margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
  }
  html body .msh-global-status-capsule>.status-area .status-copy,
  html body .msh-global-status-capsule .msh-global-status-text,
  html body .msh-global-status-capsule .msh-global-status-time{display:none!important}
  html body .msh-global-status-capsule>.status-area .job-status-button,
  html body .msh-global-status-capsule .msh-global-state-button{
    width:var(--msh-navbar-mobile-control)!important;min-width:var(--msh-navbar-mobile-control)!important;max-width:var(--msh-navbar-mobile-control)!important;
    height:var(--msh-navbar-mobile-control)!important;min-height:var(--msh-navbar-mobile-control)!important;max-height:var(--msh-navbar-mobile-control)!important;
  }
  html body .msh-global-status-capsule>#forceSync,
  html body .msh-global-status-capsule>#mshSharedSync,
  html body .msh-global-status-capsule>#mshGlobalRefresh,
  html body .msh-global-status-capsule>.msh-global-refresh-control{
    display:grid!important;place-items:center!important;
    width:var(--msh-navbar-mobile-control)!important;min-width:var(--msh-navbar-mobile-control)!important;max-width:var(--msh-navbar-mobile-control)!important;
    height:var(--msh-navbar-mobile-control)!important;min-height:var(--msh-navbar-mobile-control)!important;max-height:var(--msh-navbar-mobile-control)!important;
    margin:0!important;padding:0!important;border:1px solid var(--msh-navbar-border)!important;border-radius:50%!important;
    background:var(--msh-navbar-surface)!important;color:#536176!important;box-shadow:none!important;
  }
  html body .msh-global-status-capsule>#forceSync>span:last-child,
  html body .msh-global-status-capsule .msh-global-refresh-label{display:none!important}
  html body .msh-global-shell-v1 .user-menu-button,
  html body .msh-global-shell-v1 .msh-account-menu-host .user-menu-button{
    width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;max-height:42px!important;flex-basis:42px!important;padding:4px!important;border-radius:50%!important;
  }
  html body .msh-global-shell-v1 .user-menu-button .avatar,
  html body .msh-global-shell-v1 .user-menu-button .avatar-fallback,
  html body .msh-global-shell-v1 .msh-user-avatar{
    width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;flex:0 0 32px!important;
  }
}

@media(max-width:440px){
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar{grid-template-columns:minmax(106px,1fr) 38px auto!important;column-gap:4px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar>.brand{margin-left:44px!important;gap:4px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand-logo{width:28px!important;height:28px!important;flex-basis:28px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand .eyebrow{display:none!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand h1{max-width:92px!important;font-size:11px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar>.nav-create-wrap,
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .nav-create-button,
  html body .msh-global-status-capsule>.status-area .job-status-button,
  html body .msh-global-status-capsule .msh-global-state-button,
  html body .msh-global-status-capsule>#forceSync,
  html body .msh-global-status-capsule>#mshSharedSync,
  html body .msh-global-status-capsule>#mshGlobalRefresh{
    width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;max-height:38px!important;
  }
}

@media(max-width:380px){
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar{grid-template-columns:minmax(76px,1fr) 36px auto!important;column-gap:3px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar>.brand{margin-left:42px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand>div{display:none!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar .brand-logo{width:26px!important;height:26px!important;flex-basis:26px!important}
}

@media(prefers-reduced-motion:reduce){
  html body .msh-global-status-capsule *,
  html body .msh-page-topbar *{transition:none!important;animation:none!important}
}


/* Canonical Calendar warning control. */
html body .msh-global-status-capsule .calendar-warning-wrap{position:relative!important;display:grid!important;place-items:center!important;flex:0 0 auto!important;margin:0!important;padding:0!important;order:3!important}
html body .msh-global-status-capsule .calendar-warning-wrap[hidden]{display:none!important}
html body .msh-global-status-capsule .calendar-warning-button{position:relative!important;display:grid!important;place-items:center!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0!important;border:1px solid rgba(239,68,68,.42)!important;border-radius:50%!important;background:#fff6f5!important;color:#d92d20!important;box-shadow:none!important;font:inherit!important;font-size:18px!important;font-weight:800!important;line-height:1!important}
html body .msh-global-status-capsule .calendar-warning-button:hover{background:#fff0ee!important;border-color:rgba(217,45,32,.55)!important}
html body .msh-global-status-capsule .calendar-warning-button>span{display:grid!important;place-items:center!important;width:100%!important;height:100%!important}
html body .msh-global-status-capsule .calendar-warning-button>b{position:absolute!important;right:-6px!important;top:-7px!important;display:grid!important;place-items:center!important;min-width:22px!important;height:22px!important;padding:0 5px!important;border:2px solid #fff!important;border-radius:999px!important;background:#f04438!important;color:#fff!important;font-size:11px!important;font-weight:800!important;line-height:1!important;box-sizing:border-box!important}
body>.calendar-warning-popover{z-index:12000!important;overflow:hidden!important;border:1px solid rgba(208,218,228,.96)!important;border-radius:18px!important;background:rgba(255,255,255,.985)!important;box-shadow:0 24px 70px rgba(20,34,50,.22)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
body>.calendar-warning-popover .calendar-warning-list{max-height:min(430px,58dvh)!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
@media(max-width:760px){html body .msh-global-status-capsule>.status-area>.job-status-button,html body .msh-global-status-capsule>.status-area>.msh-global-state-button{order:1!important}html body .msh-global-status-capsule>.status-area>.status-copy{order:2!important}html body .msh-global-status-capsule>.status-area>.calendar-warning-wrap{order:3!important}html body .msh-global-status-capsule .calendar-warning-button{width:var(--msh-navbar-mobile-control)!important;min-width:var(--msh-navbar-mobile-control)!important;height:var(--msh-navbar-mobile-control)!important;min-height:var(--msh-navbar-mobile-control)!important}body>.calendar-warning-popover{width:calc(100vw - 16px)!important;max-width:none!important}}
@media(max-width:440px){html body .msh-global-status-capsule .calendar-warning-button{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}}

/*
 * Unified route contract.
 * The Calendar navbar is the visual baseline; every authenticated destination
 * uses the same bar height, brand typography, action sizing and avatar rhythm.
 * The center upload action remains route-specific.
 */
html body .msh-page-topbar.msh-global-shell-v1{
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) auto!important;
  grid-template-rows:58px!important;
  align-items:center!important;
  min-height:76px!important;
  height:76px!important;
  gap:12px!important;
  padding:9px clamp(14px,2.5vw,30px)!important;
  border:0!important;
  border-bottom:1px solid rgba(207,219,234,.88)!important;
  border-radius:0 0 18px 18px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 5px 18px rgba(31,52,84,.055)!important;
  overflow:visible!important;
}
html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar.msh-global-shell-v1{
  grid-template-columns:minmax(220px,1fr) minmax(236px,300px) auto!important;
}
html body .msh-page-topbar.msh-global-shell-v1>.brand{
  grid-column:1!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-self:start!important;
  width:100%!important;
  min-width:0!important;
  margin-left:52px!important;
  gap:9px!important;
  overflow:hidden!important;
}
html body .msh-page-topbar.msh-global-shell-v1 .brand-logo{
  display:block!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  object-fit:contain!important;
}
html body .msh-page-topbar.msh-global-shell-v1 .brand>div{
  display:grid!important;
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  gap:1px!important;
}
html body .msh-page-topbar.msh-global-shell-v1 .brand .eyebrow{
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  color:#667085!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.15!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html body .msh-page-topbar.msh-global-shell-v1 .brand h1{
  display:block!important;
  max-width:100%!important;
  margin:1px 0 0!important;
  overflow:hidden!important;
  color:#172033!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1.18!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html body .msh-page-topbar.msh-global-shell-v1>.top-actions{
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  justify-self:end!important;
  width:auto!important;
  min-width:0!important;
}
html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar.msh-global-shell-v1>.nav-create-wrap{grid-column:2!important;grid-row:1!important}
html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar.msh-global-shell-v1>.top-actions{grid-column:3!important}

@media(max-width:760px){
  html body .msh-page-topbar.msh-global-shell-v1{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:52px!important;
    min-height:64px!important;
    height:64px!important;
    column-gap:5px!important;
    padding:6px max(7px,env(safe-area-inset-right)) 6px max(7px,env(safe-area-inset-left))!important;
    border-radius:0 0 16px 16px!important;
  }
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar.msh-global-shell-v1{
    grid-template-columns:minmax(150px,1fr) var(--msh-navbar-mobile-control) auto!important;
  }
  html body .msh-page-topbar.msh-global-shell-v1>.brand{
    margin-left:46px!important;
    gap:6px!important;
  }
  html body .msh-page-topbar.msh-global-shell-v1 .brand-logo{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
  }
  html body .msh-page-topbar.msh-global-shell-v1 .brand>div{display:grid!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;overflow:hidden!important;gap:0!important}
  html body .msh-page-topbar.msh-global-shell-v1 .brand .eyebrow{
    display:block!important;
    max-width:100%!important;
    font-size:10px!important;
    line-height:1.05!important;
  }
  html body .msh-page-topbar.msh-global-shell-v1 .brand h1{
    display:block!important;
    max-width:100%!important;
    margin-top:1px!important;
    font-size:14px!important;
    line-height:1.08!important;
  }
  html body .msh-page-topbar.msh-global-shell-v1>.top-actions{grid-column:2!important;grid-row:1!important;gap:5px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar.msh-global-shell-v1>.top-actions{grid-column:3!important}
}

@media(max-width:440px){
  html body .msh-page-topbar.msh-global-shell-v1>.brand{margin-left:44px!important;gap:4px!important}
  html body .msh-page-topbar.msh-global-shell-v1 .brand-logo{width:28px!important;height:28px!important;flex:0 0 28px!important}
  html body .msh-page-topbar.msh-global-shell-v1 .brand .eyebrow{display:none!important}
  html body .msh-page-topbar.msh-global-shell-v1 .brand h1{max-width:100%!important;font-size:13px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar.msh-global-shell-v1{grid-template-columns:minmax(106px,1fr) 38px auto!important;column-gap:4px!important}
  html body:is(.msh-calendar-route,.msh-navbar-action-route) .msh-page-topbar.msh-global-shell-v1 .brand h1{max-width:100%!important}
}


/* Sync action contract: Calendar and standalone routes share the same autorenew glyph and busy motion. */
html body .msh-global-status-capsule .sync-glyph-icon{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;margin:0!important;font-size:0!important;line-height:0!important;color:currentColor!important;transform-origin:50% 50%!important}
html body .msh-global-status-capsule .sync-glyph-icon::before{content:""!important;display:block!important;width:24px!important;height:24px!important;background:currentColor!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20q-3.35 0-5.675-2.325T4 12q0-.175.012-.363T4.05 11.3L2.4 12.95 1 11.55 5.05 7.5l4.05 4.05-1.4 1.4-1.65-1.65q-.025.175-.038.35T6 12q0 2.5 1.75 4.25T12 18q.65 0 1.25-.125t1.15-.375l1.5 1.5q-.875.5-1.863.75T12 20Zm6.95-3.5-4.05-4.05 1.4-1.4 1.65 1.65q.025-.175.038-.35T18 12q0-2.5-1.75-4.25T12 6q-.65 0-1.25.125t-1.15.375L8.6 5q.875-.5 1.863-.75T12 4q3.35 0 5.675 2.325T20 12q0 .175-.013.363t-.037.337l1.65-1.65 1.4 1.4-4.05 4.05Z'/%3E%3C/svg%3E") center/contain no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20q-3.35 0-5.675-2.325T4 12q0-.175.012-.363T4.05 11.3L2.4 12.95 1 11.55 5.05 7.5l4.05 4.05-1.4 1.4-1.65-1.65q-.025.175-.038.35T6 12q0 2.5 1.75 4.25T12 18q.65 0 1.25-.125t1.15-.375l1.5 1.5q-.875.5-1.863.75T12 20Zm6.95-3.5-4.05-4.05 1.4-1.4 1.65 1.65q.025-.175.038-.35T18 12q0-2.5-1.75-4.25T12 6q-.65 0-1.25.125t-1.15.375L8.6 5q.875-.5 1.863-.75T12 4q3.35 0 5.675 2.325T20 12q0 .175-.013.363t-.037.337l1.65-1.65 1.4 1.4-4.05 4.05Z'/%3E%3C/svg%3E") center/contain no-repeat!important}
html body .msh-global-status-capsule :is(#forceSync,#mshSharedSync,#mshGlobalRefresh)[aria-busy="true"] .sync-glyph-icon,
html body .msh-global-status-capsule :is(#forceSync,#mshSharedSync,#mshGlobalRefresh).syncing .sync-glyph-icon,
html body .msh-global-status-capsule[data-state="LOADING"] .job-status-value.sync-glyph-icon,
html body .msh-global-status-capsule[data-state="SYNCING"] .job-status-value.sync-glyph-icon{animation:msh-navbar-sync-spin .8s linear infinite!important}
html body .msh-global-status-capsule :is(#forceSync,#mshSharedSync,#mshGlobalRefresh):disabled{cursor:wait!important;opacity:.78!important}
@keyframes msh-navbar-sync-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html body .msh-global-status-capsule .sync-glyph-icon{animation-duration:1.6s!important}}