/* The two-slot capsule never grows: one native trigger, four decorative cards. */
.mail-group[data-mail-stack="on"] > .card,
.editing .mail-group[data-mail-stack="on"] > .card {display:block;padding:0;gap:0;}
.mail-group[data-mail-stack="on"]:not(.dragging) > .card:is(:hover,:active) {transform:none!important;}
.mail-group[data-mail-stack="on"] .mail-stack-trigger {
  display:block;position:relative;width:100%;height:100%;padding:0;border:0;
  border-radius:inherit;background:transparent;color:var(--text,#202123);
  box-shadow:none;transform:none;touch-action:auto;
}
.mail-group[data-mail-stack="on"] .mail-stack-trigger:is(:hover,:active) {transform:none;background:transparent;}
.mail-group[data-mail-stack="on"] .mail-stack-trigger:focus-visible {outline-offset:-4px;}
.mail-stack-fan {position:absolute;inset:0;pointer-events:none;}
.mail-stack-card {
  --mail-x:-38px;--mail-y:4px;
  position:absolute;left:50%;top:50%;width:clamp(34px,23cqw,43px);height:clamp(45px,31cqw,57px);
  display:grid;place-items:start center;padding-top:6px;border:1px solid #ffffffd9;border-radius:10px;
  background:linear-gradient(145deg,#fff,#f7fafce8);box-shadow:0 3px 8px #172d3220,inset 0 0 0 1px #172d3208;
  transform:translate(calc(-50% + var(--mail-x)),calc(-50% + var(--mail-y))) rotate(var(--mail-angle));
  transform-origin:50% 90%;transition:transform .3s cubic-bezier(.22,.8,.2,1),box-shadow .3s;
}
.mail-stack-card:nth-child(2) {--mail-x:-13px;--mail-y:-3px;}
.mail-stack-card:nth-child(3) {--mail-x:13px;--mail-y:-2px;}
.mail-stack-card:nth-child(4) {--mail-x:38px;--mail-y:5px;}
.mail-group[data-mail-stack] .mail-stack-card .app-icon {
  width:28px;height:28px;border-radius:7px;background:transparent;font-size:21px;overflow:hidden;
}
.mail-stack-card .icon-scale {width:24px;height:24px;}
@media (hover:hover) and (pointer:fine) {
 .mail-stack-trigger:not(:disabled):is(:hover,:focus-visible) .mail-stack-card {transform:translate(calc(-50% + var(--mail-x)),calc(-54% + var(--mail-y))) rotate(var(--mail-angle));box-shadow:0 5px 11px #172d3225,inset 0 0 0 1px #172d3208;}
}
.mail-stack-trigger:not(:disabled):active .mail-stack-card {transform:translate(calc(-50% + var(--mail-x)),calc(-47% + var(--mail-y))) rotate(var(--mail-angle)) scale(.97);}
.mail-stack-trigger[aria-expanded="true"] .mail-stack-fan {opacity:.35;}
.editing .mail-group[data-mail-stack] .mail-stack-card {transition:none;}

/* Scoped picker avoids the shared .card transform and the homepage's mobile bottom-sheet rule. */
dialog#steve-mail-dialog {
  width:min(344px,calc(100vw - 28px));max-width:none;margin:auto;
  max-height:calc(100dvh - 28px);padding:18px;border-radius:25px;overflow:visible;
  background:var(--surface,#f8f9fb);color:var(--text,#202123);
  box-shadow:0 24px 72px #172d322e;
}
#steve-mail-dialog[open] {animation:none;}
#steve-mail-dialog::backdrop {background:#15202643;backdrop-filter:blur(5px);}
#steve-mail-dialog .mail-picker-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
#steve-mail-dialog h2 {margin:0;font-size:17px;line-height:26px;font-weight:600;}
#steve-mail-dialog .mail-picker-close {display:grid;place-items:center;width:36px;height:36px;padding:0;font-size:25px;line-height:1;background:var(--control,#edf0f3);border-radius:50%;}
#steve-mail-dialog .mail-picker-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#steve-mail-dialog .mail-picker-link {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-width:0;min-height:110px;padding:14px 8px;border:1px solid #dce2e699;border-radius:18px;
  background:linear-gradient(145deg,#ffffffed,#f7fafbd6);box-shadow:0 4px 12px #172d320c,inset 0 1px #fff;
  transform-origin:50% 50%;font-size:13px;line-height:18px;color:inherit;text-align:center;
  text-decoration:none;touch-action:manipulation;
}
#steve-mail-dialog .mail-picker-link .app-icon {width:44px;height:44px;border-radius:12px;background:transparent;font-size:28px;}
#steve-mail-dialog .mail-picker-link .icon-scale {width:34px;height:34px;}
#steve-mail-dialog .mail-picker-link:focus-visible {outline:2px solid var(--accent,#678b82);outline-offset:3px;}
#steve-mail-dialog .mail-picker-name {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#steve-mail-dialog .mail-picker-link[aria-disabled="true"] {opacity:.5;}
#steve-mail-dialog .mail-picker-unavailable {font-size:10px;line-height:12px;color:var(--muted,#72767c);}
#steve-mail-dialog.mail-picker-pending .mail-picker-link {visibility:hidden;}
#steve-mail-dialog.mail-picker-native .mail-picker-link {animation:mail-unfold .55s cubic-bezier(.16,1.2,.3,1) both;animation-delay:calc(var(--mail-order)*40ms);}
#steve-mail-dialog.mail-picker-folding .mail-picker-link {animation:mail-fold .2s ease-in both;}
@keyframes mail-unfold {from{opacity:0;transform:translateY(26px) rotate(var(--mail-angle)) scale(.7)}to{opacity:1;transform:none}}
@keyframes mail-fold {to{opacity:0;transform:translateY(18px) rotate(var(--mail-angle)) scale(.78)}}
:root[data-theme="dark"] .mail-stack-card {background:linear-gradient(145deg,#454b52,#292f37);border-color:#ffffff40;box-shadow:0 4px 10px #0004,inset 0 1px #fff2;}
:root[data-theme="dark"] #steve-mail-dialog .mail-picker-link {background:linear-gradient(145deg,#343b44ed,#252b33e8);border-color:#ffffff20;box-shadow:0 4px 12px #0002,inset 0 1px #ffffff12;}
@media (max-width:350px) {
 .mail-stack-card {--mail-x:-34px;}
 .mail-stack-card:nth-child(2) {--mail-x:-11px;}
 .mail-stack-card:nth-child(3) {--mail-x:11px;}
 .mail-stack-card:nth-child(4) {--mail-x:34px;}
 dialog#steve-mail-dialog {padding:15px;}
 #steve-mail-dialog .mail-picker-grid {gap:10px;}
 #steve-mail-dialog .mail-picker-link {min-height:102px;}
}
@media (max-height:420px) {
 dialog#steve-mail-dialog {overflow:auto;padding:12px;}
 #steve-mail-dialog .mail-picker-heading {margin-bottom:8px;}
 #steve-mail-dialog .mail-picker-link {min-height:78px;padding:8px;gap:4px;}
 #steve-mail-dialog .mail-picker-link .app-icon {width:32px;height:32px;}
}
.reduced .mail-stack-card {transition:none!important;}
.reduced #steve-mail-dialog .mail-picker-link {animation:none!important;}
@media (prefers-reduced-motion:reduce) {
 .mail-stack-card {transition:none!important;}
 #steve-mail-dialog .mail-picker-link {animation:none!important;}
}