*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--cream);color:var(--charcoal);
  font-family:var(--sans);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit}
.serif{font-family:var(--serif)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

h1{font-family:var(--serif);font-weight:400;font-size:clamp(26px,5.5vw,36px);
   margin:8px 0 3px;letter-spacing:-.01em}
.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
   color:var(--amber-deep);font-weight:700}
.sub{color:var(--mid);font-size:14px;margin:0}

.main{margin-left:var(--rail);min-height:100vh}
/* viewport-fit=cover plus a standalone manifest means the page runs under
   the status bar and the notch once it is installed on the home screen. */
.pad{max-width:920px;margin:0 auto;
  padding:calc(26px + env(safe-area-inset-top,0px)) 24px 90px}
.top{display:flex;align-items:flex-start;justify-content:space-between;
   gap:14px;margin-bottom:20px;flex-wrap:wrap}
.empty{text-align:center;color:var(--stone);font-size:14px;padding:44px 20px}
.note{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
   padding:14px 16px;font-size:13px;color:var(--mid);margin-top:20px}
.note b{color:var(--charcoal)}

@media(max-width:860px){
  .main{margin-left:0}
  .pad{padding:16px 15px 96px}
}

.pagehead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-bottom:18px;flex-wrap:wrap}
.hint{font-size:12.5px;color:var(--stone);line-height:1.5}
.hint-inline{font-size:11px;color:var(--stone);font-weight:400;letter-spacing:.02em}

/* ---------- the sheet is a real dialog ---------- */
/* A closed panel is genuinely gone, not parked offscreen: visibility:hidden
   takes it out of the tab order and the accessibility tree, and the delay
   lets the slide-out finish first. Id selectors so this holds whatever order
   the stylesheets load in and whichever media query is in force. */
#sheet{visibility:hidden;
  transition:transform .24s cubic-bezier(.3,.9,.4,1),visibility 0s linear .24s}
#sheet.open{visibility:visible;
  transition:transform .24s cubic-bezier(.3,.9,.4,1),visibility 0s}
#scrim{visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
#scrim.open{visibility:visible;transition:opacity .2s,visibility 0s}
/* the panel takes focus on open so a screen reader announces it; the ring
   belongs on the control inside, not around the whole drawer */
#sheet:focus{outline:none}
/* every control a thumb has to hit inside the panel clears the tap target */
#sheet .btn{min-height:var(--tap)}
#sheet .close{min-width:var(--tap);min-height:var(--tap)}

/* Composer variant, opt in with openSheet(html, { variant: 'composer' }).
   Building a packet is a screen of its own: documents, recipients and the
   signing map do not fit a 470px drawer. Small confirmations keep the drawer.
   The class is what makes the panel full screen, so closeSheet() holds it
   until this slide-out has run: EXIT_MS in sheet.js follows the .24s above,
   and changing that duration means changing EXIT_MS with it. */
#sheet.sheet--composer{top:0;right:0;bottom:0;left:0;width:100%;max-height:none;
  border-radius:0;border-left:none;overflow-y:auto;transform:translateY(102%)}
#sheet.sheet--composer.open{transform:translateY(0)}
#sheet.sheet--composer .grab{display:none}
#sheet.sheet--composer .inner{max-width:900px;width:100%;margin:0 auto;
  padding:22px 24px calc(40px + env(safe-area-inset-bottom))}

/* ---------- discard confirmation ---------- */
/* It sits over the panel it is asking about, so the draft is still visible
   behind the question. */
.sheetconfirm{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:20px;background:rgba(44,44,42,.55)}
.sheetconfirm__box{width:100%;max-width:420px;background:var(--white);
  border-radius:var(--radius-lg);padding:22px;box-shadow:0 18px 50px rgba(44,44,42,.3)}
.sheetconfirm h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 8px;
  letter-spacing:-.01em}
.sheetconfirm p{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--mid)}
.sheetconfirm__actions{display:grid;gap:10px}
.sheetconfirm__actions .btn{width:100%;min-height:var(--tap)}
/* The amber one is the safe one. The destructive answer says what it does in
   words, so it never depends on being read as a colour. */
.sheetconfirm__actions .btn.danger{background:transparent;color:var(--warn);
  border:1px solid var(--warn)}
.sheetconfirm__actions .btn.danger:hover{background:var(--warn);color:var(--white)}
@media(min-width:520px){
  .sheetconfirm__actions{grid-template-columns:auto auto;justify-content:end}
  .sheetconfirm__actions .btn{width:auto;min-width:150px}
  .sheetconfirm__actions .btn.danger{order:-1}
}