/* The account locked UI, what a negative credit balance shows on every page, v2 and Shards alike: the notice card over
   the header and the dialog. Both carry everything themselves and share no class with chrome.css, topnav.css or main.css,
   so they look the same under each */

/* Notice card over the header (common/includes/accountLockedBar): the notice bar of the Margin "my projects" design the
   Shards header wears, in its red, the headers give it their column. The tokens of account-menu.css spelled out so the v2
   pages get the same card: #FAE6E5 is 12% of #D93025 on white, #9E2822 is 70% of it on #14161C, #F7D1CF 22% on white.
   The call to action is the blue of the buttons rather than the red of the card */
.alock-bar{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 8px 10px 16px;border-radius:14px;background:#FAE6E5;color:#14161C;font-family:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.45}
.alock-bar__ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#9E2822;background:#F7D1CF}
.alock-bar__txt{flex:1;min-width:0;margin:0;color:#4A4F5C}
.alock-bar__txt b{color:#14161C;font-weight:600}
.alock-bar__cta{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:10px;background:#006EDB;color:#fff;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:background .15s}
.alock-bar__cta:hover{background:#005BB8;color:#fff;text-decoration:none}
/* Phones: the text takes the first row next to the icon, the call to action its own row under the text */
@media (max-width:760px){
  .alock-bar{flex-wrap:wrap;align-items:flex-start;padding:12px}
  .alock-bar__txt{flex:1 1 calc(100% - 90px)}
  .alock-bar__cta{margin-left:44px}
}

/* Account locked dialog (common/includes/accountLockedModal), the greeting of a locked account on every page, v2 and
   Shards alike. The download credits dialog of the Shards pages (custom-modal in main.css) as the margin app ported it
   for its AccountLockedModal (modal-card--plus in shared.css): a wide 28px card with 74px of air, the heading in Manrope
   at the h4 scale, the close as a gray disc in the corner, the actions on the left under the copy, the page behind under
   a 24px blur that fades in over half a second with the card a beat later. It carries everything itself and shares no
   class with chrome.css or main.css, so it looks the same under both. Colors are the margin app's neutrals. Shown by
   javascripts/common/account-locked.js, the open class runs the entrance */
.alock{position:fixed;inset:0;z-index:9999999;display:flex;align-items:center;justify-content:center;padding:0 20px;background:rgba(0,0,0,.5);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;transition:opacity .55s linear}
.alock[hidden]{display:none}
.alock--open{opacity:1}
.alock__card{position:relative;display:flex;flex-direction:column;width:100%;max-width:800px;max-height:90vh;overflow:hidden;padding:74px;border-radius:28px;background:#fff;color:#111827;box-shadow:0 20px 40px rgba(0,0,0,.1);font-family:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;opacity:0;transition:opacity .5s ease-out .05s}
.alock--open .alock__card{opacity:1}
.alock__card:focus{outline:none}
.alock__close{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:9999px;background:#9ca3af;color:#fff;cursor:pointer;transition:background .15s}
.alock__close:hover{background:#4b5563}
.alock__close:focus-visible{outline:2px solid #006EDB;outline-offset:2px}
/* The padlock of the account locked mail at the width the mail places it, 24px over the title like there */
.alock__illo{display:block;width:124px;height:auto;margin:0 0 24px}
.alock__title{margin:0;font-family:"Manrope","Inter",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;font-weight:700;font-size:38px;line-height:1.2;color:#111827}
/* The only scrolling region, its scrollbar bleeds to the card edge so the negative margin tracks the card's padding */
.alock__body{display:flex;flex-direction:column;gap:10px;min-height:0;margin:0 -74px;padding:16px 74px 0;overflow-y:auto;font-size:16px;line-height:1.5;color:#4b5563}
.alock__body p{margin:0}
.alock__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;flex-shrink:0;margin-top:24px}
.alock__btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 30px;border:1px solid #e5e7eb;border-radius:9999px;background:#f9fafb;color:#111827;font-family:inherit;font-size:18px;font-weight:550;line-height:1.45;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.alock__btn:hover{background:#f3f4f6;color:#111827;text-decoration:none}
.alock__btn:focus-visible{outline:2px solid #006EDB;outline-offset:2px}
.alock__btn--primary{background:#006EDB;border-color:#006EDB;color:#fff}
.alock__btn--primary:hover{background:#005BB8;border-color:#005BB8;color:#fff}

/* The page behind stays put while the dialog is up, see account-locked.js */
html.alock-lock{overflow:hidden}

/* The heading steps down on the way to the phone, where the dialog ends as a sheet that starts 40px below the top edge
   and runs to the bottom */
@media (max-width:1140px){
  .alock__title{font-size:32px}
}
@media (max-width:991.97px){
  .alock__card{padding:56px}
  .alock__title{font-size:26px}
  .alock__body{margin:0 -56px;padding:16px 56px 0}
}
@media (max-width:767.97px){
  .alock__title{font-size:24px}
  .alock__body{font-size:14px}
}
@media (max-width:575.97px){
  .alock{padding:0}
  .alock__card{align-self:stretch;max-width:none;max-height:none;margin-top:40px;border-radius:28px 28px 0 0;padding:74px 24px}
  .alock__illo{width:93px}
  .alock__title{font-size:22px}
  .alock__body{margin:0 -24px;padding:16px 24px 0}
}
@media (prefers-reduced-motion:reduce){
  .alock,.alock__card{transition:none}
}