:root{
  --paper:#FBFAF7;
  --raise:#FFFFFF;
  --ink:#17191E;
  --muted:#656C78;
  --line:#E4E1DA;
  --red:#C8102E;
  --blue:#10457F;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:"Iowan Old Style",Georgia,Cambria,"Times New Roman",serif;
  --bar:56px;
  --stripe:6px;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#14161A;--raise:#1B1E24;--ink:#ECEAE5;--muted:#959BA7;--line:#282C34;
        --red:#E8536B;--blue:#6FA3DE;}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.45 var(--sans);
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}

/* The one bold thing: the airmail edge. */
.stripe{
  position:fixed;inset:0 0 auto 0;height:calc(var(--stripe) + env(safe-area-inset-top));
  z-index:60;background:var(--paper);
  background-image:repeating-linear-gradient(115deg,
    var(--red) 0 10px, transparent 10px 20px, var(--blue) 20px 30px, transparent 30px 40px);
  background-position:bottom;background-size:auto var(--stripe);background-repeat:repeat-x;
}

.view{display:none;min-height:100%;flex-direction:column;
      padding-top:calc(var(--stripe) + env(safe-area-inset-top))}
.view.active{display:flex}

.bar{
  position:sticky;top:calc(var(--stripe) + env(safe-area-inset-top));z-index:20;
  display:flex;align-items:center;gap:4px;height:var(--bar);padding:0 6px;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.bar h2{flex:1;margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon{width:44px;height:44px;display:grid;place-items:center;
      background:none;border:0;border-radius:50%;cursor:pointer}
.icon:active{background:var(--line)}
.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
          stroke-linecap:round;stroke-linejoin:round}
.send{background:var(--blue);color:#fff;border:0;border-radius:999px;
      padding:9px 18px;font-weight:600;cursor:pointer}

.login{max-width:26rem;width:100%;margin:auto;padding:40px 22px 56px}
.wordmark{margin:0;font:400 40px/1 var(--serif);letter-spacing:-.02em}
.wordmark::after{content:"";display:block;width:64px;height:var(--stripe);margin-top:14px;
  background-image:repeating-linear-gradient(115deg,
    var(--red) 0 8px, transparent 8px 16px, var(--blue) 16px 24px, transparent 24px 32px);}
.lede{margin:16px 0 30px;color:var(--muted)}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:6px;font-size:13px;color:var(--muted)}
.field input,.composer input{
  width:100%;padding:12px 13px;background:var(--raise);color:var(--ink);
  border:1px solid var(--line);border-radius:6px}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:0 12px}
#advanced{margin:8px 0 18px;border-top:1px solid var(--line);padding-top:14px}
#advanced summary{cursor:pointer;font-size:14px;color:var(--blue)}
.hint,.fineprint{font-size:13px;color:var(--muted)}
.hint{margin:10px 0 14px}
.fineprint{margin:16px 0 0;text-align:center}
.primary{width:100%;padding:14px;background:var(--ink);color:var(--paper);
         border:0;border-radius:6px;font-weight:600;cursor:pointer}
.primary[disabled]{opacity:.55}
.ghost{background:none;border:1px solid var(--line);border-radius:6px;
       padding:11px 16px;cursor:pointer}
.error{margin:0 0 14px;padding:11px 13px;border-left:3px solid var(--red);
       background:color-mix(in srgb,var(--red) 8%,transparent);font-size:14px}

.searchrow{padding:10px 14px;border-bottom:1px solid var(--line)}
.searchrow input{width:100%;padding:10px 12px;border:1px solid var(--line);
                 border-radius:999px;background:var(--raise)}
.messages{list-style:none;margin:0;padding:0;flex:1}
.messages li{border-bottom:1px solid var(--line)}
.messages button{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;
  padding:14px 16px 15px;background:none;border:0;text-align:left;cursor:pointer}
.messages button:active{background:var(--raise)}
.from{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.when{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.subject{grid-column:1/-1;font-family:var(--serif);font-size:17px;line-height:1.3;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snippet{grid-column:1/-1;color:var(--muted);font-size:14px;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread{border-left:3px solid var(--red)}
.unread .from{font-weight:700}
.clip{display:inline-block;transform:rotate(-25deg);color:var(--muted);margin-right:4px}
.state{padding:40px 20px;text-align:center;color:var(--muted)}
#btn-more{margin:18px auto 30px;display:block}
.compose{
  position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:30;
  width:56px;height:56px;border:0;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgb(0 0 0 /.28)}
.compose svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.reader{flex:1;padding:20px 18px 24px}
.reader h1{margin:0 0 14px;font:400 25px/1.25 var(--serif);letter-spacing:-.01em}
.meta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
      padding-bottom:16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px}
.meta strong{color:var(--ink);font-weight:600}
.body-frame{width:100%;border:0;margin-top:18px;background:transparent}
.plain{margin-top:18px;font:400 17px/1.6 var(--serif);white-space:pre-wrap;word-break:break-word}
.attachments{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.attachments a{display:block;padding:10px 0;color:var(--blue);word-break:break-all}
.replybar{position:sticky;bottom:0;display:flex;gap:8px;padding:12px 14px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--line)}
.replybar .primary{width:auto;flex:1}

.composer{flex:1;display:flex;flex-direction:column;padding:16px 16px 0}
.composer .field{margin-bottom:12px}
#c-body{flex:1;min-height:44vh;width:100%;margin:6px 0 18px;padding:14px;
  background:var(--raise);border:1px solid var(--line);border-radius:6px;resize:none;
  font:400 17px/1.6 var(--serif)}

.drawer{position:fixed;inset:0;z-index:70;display:flex}
.drawer-panel{width:min(310px,82vw);background:var(--paper);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top)) 0 20px;
  animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.drawer-panel{animation:none}}
.drawer-scrim{flex:1;border:0;background:rgb(0 0 0 /.42)}
.account{margin:0 20px 16px;font-size:14px;color:var(--muted);word-break:break-all}
.folders{flex:1;list-style:none;margin:0;padding:0;overflow-y:auto}
.folders button{display:flex;justify-content:space-between;gap:12px;width:100%;
  padding:13px 20px;background:none;border:0;text-align:left;cursor:pointer}
.folders button[aria-current="true"]{font-weight:600;box-shadow:inset 3px 0 var(--red)}
.count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
#btn-signout{margin:16px 20px 0}

.toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(26px + env(safe-area-inset-bottom));z-index:90;
  margin:0;padding:11px 18px;border-radius:999px;font-size:14px;
  background:var(--ink);color:var(--paper);max-width:88vw;text-align:center}