/* Paper envelopes and quiet postal details for the hero. */
.sorting-hero{--hero-letter-width:264px;--hero-letter-height:100px;--letter-gutter:23px}
.mail-letter,.sorting-hero .sorting-arrival-card.mail-letter{--letter-paper:#fffdf8;--letter-fold:#e7ddca;--letter-line:#cfc2ae;display:block;position:relative;width:var(--hero-letter-width);max-width:100%;height:var(--hero-letter-height);min-height:var(--hero-letter-height);padding:10px 14px 34px;margin:0;background:var(--letter-paper);border:1px solid var(--letter-line);border-radius:4px;box-shadow:0 11px 24px -16px #00214770;color:var(--ink);text-align:left;isolation:isolate;transform-origin:0 0}
[data-theme=dark] .mail-letter,[data-theme=dark] .sorting-hero .sorting-arrival-card.mail-letter{--letter-paper:#37312a;--letter-fold:#29251f;--letter-line:#6b5b48}
.mail-letter .letter-sheet{min-width:0;display:block;position:relative;z-index:1}
.mail-letter .letter-from{display:block;margin:0;padding-right:62px;font:400 10px/1.2 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-letter .letter-subject,.sorting-hero .mail-letter .letter-subject{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:400 14px/1.3 var(--sans);margin:4px 0 0;padding-right:25px;color:var(--ink)}
.letter-envelope{position:absolute;left:0;right:0;bottom:0;height:32px;border-radius:0 0 3px 3px;background:var(--letter-fold);overflow:hidden;z-index:2;pointer-events:none}
.letter-envelope::before{content:"";position:absolute;inset:0;background:var(--letter-paper);clip-path:polygon(0 0,100% 0,50% 100%);filter:brightness(.98)}
.letter-envelope::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .6px),var(--letter-line) 50%,transparent calc(50% + .6px)) left/50% 100% no-repeat,linear-gradient(to top left,transparent calc(50% - .6px),var(--letter-line) 50%,transparent calc(50% + .6px)) right/50% 100% no-repeat}
.letter-stamp{position:absolute;right:10px;top:7px;width:24px;height:28px;border:2px dotted var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--letter-paper));border-radius:1px;opacity:.85;transform:rotate(4deg)}
.letter-stamp::after{content:"";position:absolute;inset:4px 3px;border:1px solid var(--accent);border-radius:50%;box-shadow:inset 0 0 0 2px var(--letter-paper)}
.letter-postmark{position:absolute;right:28px;top:11px;width:34px;height:17px;border-block:1px solid var(--accent);border-radius:50%;opacity:.3;transform:rotate(-12deg);pointer-events:none}
.letter-postmark::after{content:"";position:absolute;inset:4px 0;border-block:1px solid var(--accent);border-radius:50%}
.mail-letter .sorting-avatar,.mail-letter .sorting-new-dot,.mail-letter .sorting-arrival-preview{display:none!important}
.mail-delivery-flight.mail-letter{position:absolute;max-width:none;transform-origin:0 0;will-change:transform;pointer-events:none}
.mail-posting-window{position:absolute;overflow:hidden;pointer-events:none;isolation:isolate}
.mail-posting-mover{position:absolute;inset:0;will-change:transform}
.mail-delivery-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke:var(--accent);opacity:.26;fill:none;stroke-width:1;stroke-dasharray:3 6}
.mailbox-tab{position:relative}
.mailbox-slot{position:absolute;left:13px;right:13px;top:5px;height:5px;background:color-mix(in srgb,var(--ink) 14%,transparent);border-radius:3px;pointer-events:none;transition:background .2s,box-shadow .2s}
.mailbox-lid{position:absolute;left:-1px;right:-1px;bottom:100%;height:7px;background:var(--sort-card,var(--app-card,#faf9f5));border:1px solid var(--sort-border,var(--app-border,#dfd7c8));border-radius:4px 4px 0 0;transform:scaleY(0);transform-origin:bottom;opacity:0;transition:transform .24s,opacity .2s}
.mailbox-flag{position:absolute;right:10px;top:1px;width:2px;height:12px;background:var(--accent);transform:rotate(70deg);transform-origin:bottom;opacity:0;pointer-events:none;transition:transform .25s,opacity .2s}
.mailbox-flag::before{content:"";position:absolute;left:1px;top:0;width:7px;height:5px;border-radius:0 2px 2px 0;background:var(--accent)}
.mailbox-open .mailbox-slot{background:var(--mail-slot,#162a39);box-shadow:0 1px 0 var(--accent),0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.mailbox-open{border-color:var(--accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)!important}
[data-theme=dark] .mailbox-tab{--mail-slot:#0f0e0c}
.mailbox-open .mailbox-lid{opacity:1;transform:scaleY(1)}
.mailbox-open .mailbox-flag,.mailbox-received .mailbox-flag{opacity:1;transform:rotate(0)}
.mailbox-received{border-color:var(--accent)!important;box-shadow:inset 0 0 0 .5px var(--accent)!important}
.mail-delivery-receipt{position:absolute;right:var(--letter-gutter);top:26px;width:var(--hero-letter-width);max-width:calc(100% - var(--letter-gutter) - var(--letter-gutter));height:var(--hero-letter-height);display:flex;align-items:center;justify-content:center;gap:12px;color:var(--accent);pointer-events:none}
.mail-delivery-receipt[hidden]{display:none}
.mail-delivery-receipt>span:first-child{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--accent);border-radius:50%;font:400 17px/1 var(--sans)}
.mail-delivery-receipt>span:last-child{font:400 10px/1.6 var(--mono);text-transform:uppercase;border-block:1px solid var(--accent);padding:4px 0;transform:rotate(-3deg)}
.has-mail-receipt>.sorting-incoming-label{visibility:hidden}
.sorting-hero .sorting-arrival-card.mail-letter{width:var(--hero-letter-width);margin-left:auto}
.sorting-hero .sorting-incoming-label{width:var(--hero-letter-width);max-width:100%;margin-left:auto;padding-left:12px}
.sorting-hero .sorting-arrival-path{visibility:hidden}
.sorting-hero .sorting-flight-layer{z-index:9}
.sorting-hero .sorting-arrival-card.mail-letter .letter-from{font-size:10px}
.sorting-hero .mail-delivery-receipt{top:50px}
@media(max-width:700px),(max-width:950px) and (max-height:520px){
  .sorting-hero-mobile{--hero-letter-width:228px;--hero-letter-height:88px;--letter-gutter:12px}
  .sorting-hero-mobile .letter-envelope{height:26px}
  .sorting-hero-mobile .letter-stamp{width:22px;height:24px}
  .mail-letter .letter-subject,.sorting-hero .mail-letter .letter-subject{font-size:13px}
  .sorting-hero-mobile .sorting-incoming-label{font-size:8px;line-height:12px;margin-bottom:6px}
  .sorting-hero-mobile .sorting-arrival-card.mail-letter{width:var(--hero-letter-width);height:var(--hero-letter-height);min-height:var(--hero-letter-height);padding:8px 12px 28px}
  .sorting-hero-mobile .mailbox-slot{left:9px;right:9px;top:4px}
  .sorting-hero-mobile .mailbox-flag{right:6px;top:0;height:10px}
  .sorting-hero-mobile .mail-delivery-receipt{top:17px}
}
@media(max-width:380px){.sorting-hero-mobile{--letter-gutter:7px}}
@media(max-width:950px) and (max-height:520px){.sorting-hero-mobile{--letter-gutter:0px}}