/* OpenPST — "Airmail" design system.
   Envelope white, airmail red and blue, the striped border of par-avion post.
   Public Sans throughout — a civil, postal typeface for a civil, postal job. */

:root{
  --envelope:#fbfbf8;
  --paperwhite:#ffffff;
  --inkstamp:#23252c;
  --greyfrank:#7b7f89;
  --edgefold:#e6e6df;
  --airred:#d64545;
  --airblue:#3b5bdb;
  --airblue-deep:#2c46b8;
  --pub:'Public Sans',-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--envelope);color:var(--inkstamp);font-family:var(--pub);
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--airblue-deep)}
h1,h2,h3{line-height:1.15;font-weight:700;letter-spacing:-.01em}
b,strong{font-weight:650}

/* airmail stripe */
.airstripe{height:6px;background:repeating-linear-gradient(45deg,
  var(--airred) 0 14px, var(--paperwhite) 14px 22px, var(--airblue) 22px 36px, var(--paperwhite) 36px 44px)}

/* franking bar */
.franking{display:flex;align-items:center;gap:14px;padding:12px 20px;
  border-bottom:1px solid var(--edgefold);flex-wrap:wrap;background:var(--paperwhite)}
.franking .postmark{display:flex;align-items:center;gap:8px;font-weight:800;
  font-size:1.1rem;color:var(--inkstamp);text-decoration:none}
.franking .postmark em{font-style:normal;color:var(--airblue)}
.franking .cancelmark{font-size:.74rem;color:var(--greyfrank);margin-right:auto}
.franking nav{display:flex;gap:16px;font-size:.9rem}
.franking nav a{text-decoration:none;color:var(--inkstamp);border-bottom:2px solid transparent;padding-bottom:2px}
.franking nav a.here{border-bottom-color:var(--airred)}

/* opener */
.envelopefront{max-width:920px;margin:0 auto;padding:30px 20px 6px}
.envelopefront h1{font-size:clamp(1.7rem,5.2vw,2.6rem)}
.envelopefront h1 em{font-style:normal;color:var(--airblue)}
.envelopefront .apology{margin-top:10px;max-width:650px;color:var(--greyfrank);font-size:1rem}
.envelopefront .apology b{color:var(--inkstamp)}

/* mailroom */
.mailroom{max-width:920px;margin:16px auto 0;padding:0 20px}
.counterdesk{background:var(--paperwhite);border:1px solid var(--edgefold);border-radius:12px;overflow:hidden}

.dropzone2{margin:16px;border:2px dashed var(--edgefold);border-radius:12px;min-height:120px;
  display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
  text-align:center;padding:24px;transition:border-color .15s,background .15s}
.dropzone2.hot{border-color:var(--airblue);background:#eef1fc}
.dropzone2 p{color:var(--greyfrank);font-size:.92rem;max-width:520px}
.dropzone2 p b{color:var(--inkstamp)}
.sortstatus{font-size:.8rem!important;color:var(--airblue-deep)!important;font-style:italic}

.frankbtn{font-weight:700;font-size:.95rem;border-radius:10px;border:1.5px solid var(--airblue-deep);
  background:var(--airblue);color:#fff;padding:11px 24px;cursor:pointer;font-family:var(--pub)}
.frankbtn:hover{background:var(--airblue-deep)}
.frankbtn.plain{background:transparent;color:var(--airblue-deep)}
.frankbtn.plain:hover{background:#eef1fc}
.frankbtn.small{font-size:.8rem;padding:7px 13px}

/* sorting desk: list + reading pane */
.sortingdesk{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);border-top:1px solid var(--edgefold)}
@media (max-width:760px){.sortingdesk{grid-template-columns:1fr}}
.deskfilter{grid-column:1/-1;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--edgefold);background:#fafafc}
.deskfilter input{flex:1;max-width:340px;font-family:var(--pub);font-size:.88rem;
  padding:7px 12px;border:1px solid var(--edgefold);border-radius:8px;background:var(--paperwhite)}
.deskfilter input:focus{outline:2px solid var(--airblue);outline-offset:1px}
.filtercount{font-size:.76rem;color:var(--greyfrank)}

/* pigeonhole rack: clickable folders from a .pst archive */
.folderrack{grid-column:1/-1;display:flex;flex-direction:column;gap:1px;
  padding:8px 14px;border-bottom:1px solid var(--edgefold);background:#fafafc;
  max-height:180px;overflow:auto}
.fchip{display:flex;align-items:center;gap:8px;border:none;background:none;text-align:left;
  font-family:var(--pub);font-size:.84rem;color:var(--inkstamp);cursor:pointer;
  padding:4px 10px 4px 8px;border-radius:6px;width:fit-content;max-width:100%}
.fchip:hover{background:#eef1fc}
.fchip.on{background:#eef1fc;color:var(--airblue-deep);font-weight:650}
.fchip .fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip .fcount{color:var(--greyfrank);font-size:.72rem;flex:none}
.maillist{border-right:1px solid var(--edgefold);max-height:560px;overflow:auto}
@media (max-width:760px){.maillist{border-right:none;border-bottom:1px solid var(--edgefold);max-height:230px}}
.mailitem{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--edgefold);
  padding:12px 14px;cursor:pointer;font-family:var(--pub)}
.mailitem:hover{background:#f4f5fb}
.mailitem.open{background:#eef1fc;border-left:4px solid var(--airblue)}
.mailitem.errored{border-left:4px solid var(--airred);cursor:default}
.mailitem .mi-subj{display:block;font-weight:650;font-size:.9rem;color:var(--inkstamp);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailitem .mi-meta{display:block;font-size:.74rem;color:var(--greyfrank);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.readpane{padding:18px 20px;min-width:0}
.readpane h3{font-size:1.2rem;margin-bottom:10px}
.hline{display:flex;gap:10px;font-size:.85rem;margin:3px 0}
.hline span{color:var(--greyfrank);min-width:44px;text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;padding-top:2px}
.hline b{font-weight:600;overflow-wrap:anywhere}
.remotenote{background:#fdf2f2;border:1px solid #efcaca;border-left:4px solid var(--airred);
  border-radius:8px;padding:10px 14px;font-size:.83rem;margin:12px 0}
.remotenote button{margin-left:8px}
#bodyframe{width:100%;min-height:340px;border:1px solid var(--edgefold);border-radius:8px;margin-top:12px;background:#fff}
#bodyplain{white-space:pre-wrap;font-size:.92rem;background:#fff;border:1px solid var(--edgefold);
  border-radius:8px;padding:14px;margin-top:12px;overflow-wrap:anywhere}
.attachwrap{margin-top:14px}
.attachwrap h4{font-size:.8rem;color:var(--greyfrank);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.attachrow{display:flex;gap:10px;align-items:center;border:1px solid var(--edgefold);border-radius:8px;
  padding:8px 12px;margin:6px 0;font-size:.88rem}
.attachrow .an{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachrow .as{color:var(--greyfrank);font-size:.76rem;flex:none}
.attachrow .ad{margin-left:auto;flex:none;font-weight:650}
.panetools{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* letters (content) */
.pigeonholes{max-width:920px;margin:0 auto;padding:24px 20px 40px}
.pigeonholes h2{font-size:1.4rem;margin:44px 0 4px}
.pigeonholes .postscript{color:var(--greyfrank);font-size:.9rem;margin-bottom:14px}
.pigeonholes p{margin:12px 0;max-width:700px}
.pigeonholes ol,.pigeonholes ul{margin:12px 0 12px 22px;max-width:680px}
.pigeonholes li{margin:8px 0}

.registeredletter{background:var(--paperwhite);border:1px solid var(--edgefold);border-left:4px solid var(--airred);
  border-radius:10px;padding:18px 20px;margin:30px 0}
.registeredletter .sig{color:var(--greyfrank);font-size:.85rem;margin-top:10px}

.frankedlist{list-style:none;margin-left:0!important}
.frankedlist li{padding-left:26px;position:relative}
.frankedlist li::before{content:"✉";position:absolute;left:0;color:var(--airblue);font-size:.85em;top:.15em}

.qa h3{font-size:1.05rem;margin:22px 0 6px}
.qa p{margin-top:4px}

.parcelshelf{display:grid;gap:12px;margin-top:16px}
.parcelshelf a{display:block;background:var(--paperwhite);border:1px solid var(--edgefold);border-radius:10px;
  padding:14px 16px;text-decoration:none;color:var(--inkstamp)}
.parcelshelf a:hover{border-color:var(--airblue)}
.parcelshelf b{font-size:1.02rem}
.parcelshelf span{display:block;font-size:.88rem;color:var(--greyfrank);margin-top:3px}
.parcelshelf time{display:block;font-size:.72rem;color:var(--greyfrank);margin-top:8px;text-transform:uppercase;letter-spacing:.06em}

dl.ledgerbook{max-width:680px}
dl.ledgerbook dt{font-weight:700;margin-top:14px;color:var(--airblue-deep)}
dl.ledgerbook dd{margin-left:0}

/* articles */
article.airletter{max-width:720px;margin:0 auto;padding:30px 20px 50px}
article.airletter h1{font-size:clamp(1.5rem,4.6vw,2.1rem);margin-bottom:6px}
article.airletter .byline{color:var(--greyfrank);font-size:.85rem;margin-bottom:22px}
article.airletter h2{font-size:1.22rem;margin:30px 0 8px}
article.airletter p{margin:13px 0}
article.airletter ol{margin:12px 0 12px 22px}
article.airletter li{margin:9px 0}
article.airletter figure{margin:26px 0;text-align:center}
article.airletter figure svg{max-width:100%;height:auto}
article.airletter figcaption{font-size:.8rem;color:var(--greyfrank);margin-top:8px}
article.airletter code{background:var(--paperwhite);border:1px solid var(--edgefold);border-radius:4px;padding:1px 6px;font-size:.85em}

/* footer */
footer.lastpost{border-top:1px solid var(--edgefold);margin-top:30px;padding:22px 20px;
  max-width:920px;margin-left:auto;margin-right:auto}
footer.lastpost .links{display:flex;gap:16px;font-size:.88rem;margin-bottom:10px;flex-wrap:wrap}
footer.lastpost p{font-size:.8rem;color:var(--greyfrank)}

/* print: the reading pane becomes the PDF */
@media print{
  .airstripe,.franking,.envelopefront,.dropzone2,.maillist,.deskfilter,.panetools,.pigeonholes,footer.lastpost,.remotenote{display:none!important}
  .counterdesk,.sortingdesk{border:none!important;display:block!important}
  .readpane{padding:0}
  /* app.js sets the frame's height to the full message before printing */
  #bodyframe{border:none}
}

@media (max-width:560px){
  .franking .cancelmark{display:none}
}