*{box-sizing:border-box}body{margin:0;background:#f7f8fa;color:#172b3b;font:15px/1.6 system-ui,sans-serif}header{height:84px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1e6eb;background:white}header strong{letter-spacing:2px}header span{font-weight:400;color:#758494}main{max-width:1280px;margin:auto;padding:50px 28px}#login{max-width:420px;margin:45px auto 100px}h1{font-size:36px;letter-spacing:-1.5px;margin:8px 0 14px}.eyebrow{font-size:11px;letter-spacing:2px;color:#4b8179;font-weight:700}label{display:block;margin:24px 0;font-weight:600}input{display:block;width:100%;padding:14px;border:1px solid #ccd5de;border-radius:8px;margin-top:8px;font:inherit;background:white}button{font:inherit;cursor:pointer;border:1px solid #d8e0e6;border-radius:8px;background:white;padding:10px 16px;color:inherit}button:hover{background:#edf5f2}.primary{background:#234e47;color:white;width:100%;padding:15px}.primary:hover{background:#32675e}#error{color:#b54235}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.mailbox{display:grid;grid-template-columns:350px 1fr;min-height:560px;background:white;border:1px solid #dfe5eb;border-radius:14px;overflow:hidden}aside{border-right:1px solid #e3e8ed}.mail{width:100%;border:0;border-bottom:1px solid #edf0f4;border-radius:0;text-align:left;padding:20px;display:block}.mail.active{background:#edf5f2}.mail strong,.mail small,.mail span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail small{color:#71818e;font-size:11px}.mail span{color:#526675;font-size:13px}article{padding:32px;min-width:0}article h2{line-height:1.4;overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.9 system-ui}iframe{border:0;width:100%;height:600px}.empty{padding:70px 20px;text-align:center;color:#80909d}footer{text-align:center;color:#8996a2;font-size:12px;padding:24px}button:focus-visible,input:focus-visible{outline:3px solid #8ebdb1;outline-offset:3px}[hidden]{display:none!important}@media(max-width:760px){main{padding:26px 16px}.mailbox{display:block}aside{border-right:0;max-height:300px;overflow:auto;border-bottom:1px solid #ddd}article{padding:20px}h1{font-size:28px}#login{margin-top:25px}}

/* Keep empty-state and navigation content clear of the mailbox edges. */
#list > p {
  margin: 0;
  padding: 32px 24px;
  color: #71818e;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
#more, #first {
  margin: 12px 0 16px 24px;
}
article > h2:first-child {
  margin-top: 0;
}
@media (max-width: 760px) {
  #list > p { padding: 28px 20px; }
  #more, #first { margin-left: 20px; }
}

button:disabled { cursor: wait; opacity: .65; }