/* The reader's pages in the Mail app (index.html, hub.html, title.html,
   compose.html) are drawn with the Mail app's own stylesheet (mail.css,
   copied from its source by make-styles.py), which also has the encrypted
   text (.cipher) and the mark (.reader-mark). This file only takes away the
   app's page around them, and adds what is the reader's alone. */
html,body{min-height:0;background:transparent}
body{margin:0;padding:0;min-height:0}
.letter > .reader-alert:first-child{margin:0 0 var(--s-3)}
.unlock .field{max-width:320px;margin:var(--s-3) 0 0}
.unlock .alert{margin:var(--s-3) 0 0}
.unlock .alert .text{margin-left:var(--s-1)}
/* The message: the encrypted text gives way to the letter (embed.mjs):
   Material 3 fade through, on opacity and transform only. */
.stage{position:relative}
.stage.pending{opacity:0}
#view > .cipher.held{position:absolute;top:0;left:0;right:0;pointer-events:none}
#view > .cipher.leaving{animation:fade-out var(--d-short2) var(--ease-standard-accel) forwards}
.stage.arriving{transform-origin:50% 0;animation:fade-through-in var(--d-short4) var(--ease-emphasized-decel) var(--d-short2) both}
@keyframes fade-out{to{opacity:0}}
@keyframes fade-through-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#view > .cipher.leaving,.stage.arriving{animation:none}}
#view{position:relative}
/* The hub: one Unlock for every encrypted message on the page, as a
   Material 3 two-line list item on a container surface. A PIN and an
   error, when there are any, take a row of their own under it. */
body.hub #hub:empty{display:none}
.hub-bar{display:grid;grid-template-columns:var(--h-md) minmax(0,1fr) auto;align-items:center;column-gap:var(--s-4);min-height:calc(var(--h-xl) + var(--s-4));padding:var(--s-2) var(--s-6) var(--s-2) var(--s-4);
  border-radius:var(--r-md);background:var(--c-surface-2)}
.hub-icon{display:grid;place-items:center;width:var(--h-md);height:var(--h-md);border-radius:var(--r-full);background:var(--c-good-soft)}
.hub-icon svg.i{width:var(--icon);height:var(--icon);fill:var(--c-on-good-soft)}
.hub-text{display:flex;flex-direction:column;min-width:0}
.hub-text b{overflow:hidden;color:var(--c-text);font-size:var(--t-lg);font-weight:var(--w-regular);line-height:24px;text-overflow:ellipsis;white-space:nowrap}
.hub-support{display:flex;align-items:center;gap:var(--s-1);overflow:hidden;color:var(--c-text-2);font-size:var(--t-md);line-height:20px;text-overflow:ellipsis;white-space:nowrap}

.hub-unlock{display:contents}
.hub-unlock > button{grid-column:3;grid-row:1}
.hub-unlock > button{padding:0 var(--s-6) 0 var(--s-4)}
.hub-unlock > button svg.i{width:var(--icon-sm);height:var(--icon-sm)}
.hub-pin{grid-column:2 / 4;grid-row:2;width:min(200px,100%);margin:var(--s-2) 0 var(--s-1)}
.hub-pin input{height:var(--h-md)}
.hub-error{grid-column:2 / 4;margin:var(--s-1) 0;color:var(--c-danger);font-size:var(--t-xs)}
.hub-error .text{height:auto;padding:0 var(--s-1);font-size:var(--t-xs)}
:root.phone .hub-bar{column-gap:var(--s-3);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4)}
:root.phone .hub-unlock > button{padding:0 var(--s-4) 0 var(--s-3)}
.hub-panel{display:flex;flex-direction:column;gap:var(--s-3)}
.hub-note{margin:0;color:var(--c-text-2)}
.hub-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.hub-status .hub-unlock{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.hub-status .hub-unlock > *{grid-column:auto;grid-row:auto}
.hub-status > span{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--c-text-2)}
.hub-status > span svg.i{width:var(--icon-sm);height:var(--icon-sm)}
/* The subject frame: the conversation's title line, as the Mail app has it. */
body.title-frame{overflow:hidden}
.title-frame h1{overflow-wrap:anywhere}
#measure{position:absolute;top:0;left:0;visibility:hidden;white-space:nowrap;font-size:var(--t-2xl);font-weight:var(--w-regular)}
/* The reader's own tab. */
body.page{background:var(--c-bg)}
body.page #view{max-width:760px;margin:0 auto;padding:var(--s-6) var(--s-4)}
body.page .letter{padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);background:var(--c-surface)}
.letter-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-3)}
.badge{display:inline-flex;align-items:center;gap:var(--s-1);padding:2px var(--s-2);border-radius:var(--r-sm);background:var(--c-good-soft);color:var(--c-on-good-soft);font-size:var(--t-xs);font-weight:var(--w-medium)}
.badge svg.i{width:var(--icon-sm);height:var(--icon-sm)}
.letter h2{margin:0 0 var(--s-1);font-size:var(--t-2xl);font-weight:var(--w-regular)}
.meta{margin:0 0 var(--s-4);color:var(--c-text-2);font-size:var(--t-xs)}
/* Writing end to end (compose.html): Mail's composer from the Subject line
   down, inside the composer of the mail page, which keeps the lines above. */
body.compose-frame{height:100vh;overflow:hidden}
/* Stronger than the app's rules for narrow windows, which size its own pane. */
:root body.compose-frame .pane.composer{height:100vh;min-height:0;padding:0;border-radius:0;background:transparent;overflow:visible}
.compose-frame .editor-tools[hidden]{display:flex!important}
.fields.tail{padding-top:0;border-top-left-radius:0;border-top-right-radius:0}
.e2e-label{display:inline-flex;align-items:center;gap:var(--s-1);flex:none;padding-right:var(--s-2);color:var(--c-good);font-size:var(--t-xs);font-weight:var(--w-medium);white-space:nowrap}
.e2e-label svg.i{width:var(--icon-sm);height:var(--icon-sm);fill:currentColor}
/* Whom Send encrypts to, from Send's own list (Mail's To and Cc lines above
   are Mail's): a field line like the others, its label in the label column,
   the addresses as supporting text that wraps. */
.sealed-for{align-items:flex-start;padding-top:var(--s-3);padding-bottom:var(--s-3)}
.sealed-for > .line-label{flex:0 0 56px;color:var(--c-text-3);white-space:nowrap;line-height:20px}
.sealed-list{flex:1;min-width:0;padding:0 0 0 2px;color:var(--c-text-2);font-size:var(--t-md);line-height:20px;overflow-wrap:anywhere}
.sealed-list.empty{color:var(--c-text-3)}
.sealed-list .bcc{color:var(--c-text-3);font-weight:var(--w-medium)}
/* The text and, at its foot, your mark while you type: a flat Material 3
   assist chip (32 px, its 18 px icon, no shadow, at his wish), a card while it
   explains itself; in with the emphasized decelerate curve, out with the
   emphasized accelerate one. The text keeps room under its last line. */
/* At least a line of text above your mark, however short the frame gets. */
.editor-box{position:relative;display:flex;flex:1;min-height:calc(var(--s-3) + var(--s-6) + var(--h-sm) + var(--s-5));margin:var(--s-2) 0 0}
.editor-box > .editor{flex:1;margin:0;padding-bottom:calc(var(--h-sm) + var(--s-5))}
.mark-dock{position:absolute;right:var(--s-3);bottom:var(--s-3);z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);
  max-width:min(440px,calc(100% - 2 * var(--s-3)));min-height:var(--h-sm);padding:0 var(--s-3) 0 var(--s-2);border-radius:var(--r-sm);
  background:var(--c-good-soft);color:var(--c-on-good-soft);font:var(--w-medium) var(--t-md)/20px var(--f-sans);
  opacity:0;transform:translateY(var(--s-2)) scale(.96);transform-origin:100% 100%;pointer-events:none;
  transition:opacity var(--d-short3) var(--ease-emphasized-accel),transform var(--d-short3) var(--ease-emphasized-accel)}
.mark-dock.explains{padding:var(--s-2) var(--s-3);border-radius:var(--r-md)}
.mark-dock[data-shown=true]{opacity:1;transform:none;transition-duration:var(--d-medium2);transition-timing-function:var(--ease-emphasized-decel)}
.mark-dock svg.i{flex:none;width:var(--icon-sm);height:var(--icon-sm);fill:currentColor}
.mark-dock .mark-why{flex:1 1 220px;font-weight:var(--w-regular);text-wrap:balance}
.mark-dock .mark-files{font-weight:var(--w-regular)}
/* Taps go through the chip to the text under it; only Got it takes them. */
.mark-dock[data-shown=true] .text{pointer-events:auto}
.mark-dock .text{height:var(--h-sm);margin-left:auto;padding:0 var(--s-3);color:var(--c-on-good-soft)}
.reader-mark[data-dock]{gap:var(--s-1);padding:0;background:none;font-size:var(--t-lg);line-height:20px}
:root.phone .mark-dock .mark-word{display:none}
@media (prefers-reduced-motion:reduce){.mark-dock,.mark-dock[data-shown=true]{transition:none}}
.link-card{position:absolute;left:0;right:auto;top:auto;bottom:calc(var(--h-lg) + var(--s-2));width:min(360px,100%);padding:var(--s-3) var(--s-4)}
.link-card .field{margin:0}
.link-card .actions{justify-content:flex-end;margin-top:var(--s-2)}
/* The mark: four pictures, in a quiet chip. */
.reader-mark{display:inline-flex;align-items:center;white-space:nowrap;-webkit-user-select:none;user-select:none}.reader-mark > span{display:block}
/* Captions: one line, or lines of even length; paragraphs without a lone last word. */
.hub-note,.hub-error,.sealed-text p,.reader-alert p,.hint{text-wrap:balance}
p,li{text-wrap:pretty}
/* The reader's Send (send.html), in Mail's row of buttons. */
body.send-frame{overflow:hidden}
.send-frame .composer-actions{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:var(--s-2);padding:0}
.send-frame .send-pin{margin:0;width:calc(3 * var(--h-md))}
.send-frame .send-pin input{height:var(--h-md)}
/* A letter sealed by its sender's key (seal.mjs): one quiet line over it. */
.seal-line{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);color:var(--c-text-2);font-size:var(--t-xs)}
.seal-line span{min-width:0;text-wrap:balance;overflow-wrap:anywhere}
.seal-line svg.i{flex:none;width:var(--icon-sm);height:var(--icon-sm);fill:var(--c-good)}
.seal-line.none svg.i{fill:var(--c-text-2)}
.badge.plain{background:var(--c-surface-3);color:var(--c-text-2)}