/* Mail Reader, in the Mail app's Material 3 look: the same tokens, light and dark. */
:root{color-scheme:light dark;
--c-bg:#f6f8fc;--c-surface:#fff;--c-surface-2:#f0f4f9;--c-surface-3:#e9eef6;--c-text:#1f1f1f;--c-text-2:#444746;--c-text-3:#5f6368;
--c-primary:#0b57d0;--c-on-primary:#fff;--c-selected:#d3e3fd;--c-on-selected:#041e49;--c-outline:#747775;--c-hover:rgba(68,71,70,.08);
--c-good:#146c2e;--c-good-soft:#c4eed0;--c-on-good-soft:#072711;--c-danger:#b3261e;--c-danger-soft:#f9dedc;--c-on-danger-soft:#410e0b;
--f-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-full:999px;--h-md:40px}
@media (prefers-color-scheme:dark){:root{
--c-bg:#131314;--c-surface:#1e1f20;--c-surface-2:#26282a;--c-surface-3:#2d2f31;--c-text:#e3e3e3;--c-text-2:#c4c7c5;--c-text-3:#a8aaa8;
--c-primary:#a8c7fa;--c-on-primary:#062e6f;--c-selected:#004a77;--c-on-selected:#d3e3fd;--c-outline:#8e918f;--c-hover:rgba(227,227,227,.08);
--c-good:#6dd58c;--c-good-soft:#0f5223;--c-on-good-soft:#c4eed0;--c-danger:#f2b8b5;--c-danger-soft:#8c1d18;--c-on-danger-soft:#f9dedc}}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;color:var(--c-text);font:400 14px/1.43 var(--f-sans);-webkit-font-smoothing:antialiased}
body.embed{background:transparent}
body.page{background:var(--c-bg)}
svg.i{width:20px;height:20px;fill:currentColor}
a{color:var(--c-primary)}
h1{margin:0 0 var(--s-3);font-size:24px;font-weight:400;line-height:1.3}
h2{margin:0 0 var(--s-3);font-size:16px;font-weight:500}
p{margin:0 0 var(--s-3)}
.hint{color:var(--c-text-2);font-size:12px}.small{font-size:12px}
.error{margin:var(--s-2) 0 0;color:var(--c-danger);font-weight:500}
.check{display:flex;align-items:center;gap:var(--s-3);min-height:var(--h-md);margin:0 0 var(--s-2);cursor:pointer}.check input{appearance:none;flex:none;display:grid;place-items:center;width:18px;height:18px;margin:0;border:2px solid var(--c-text-2);border-radius:2px;cursor:pointer}.check input:checked{border-color:var(--c-primary);background:var(--c-primary)}.check input:checked::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid var(--c-on-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}.check input:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}.field input[type=file]::file-selector-button{height:32px;margin-right:var(--s-3);padding:0 var(--s-4);border:0;border-radius:var(--r-full);background:var(--c-selected);color:var(--c-on-selected);font:500 14px var(--f-sans);cursor:pointer}
body.page #view{max-width:760px;margin:0 auto;padding:var(--s-6) var(--s-4)}

/* Buttons */
.filled,.tonal,.text{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--h-md);padding:0 var(--s-6);border:0;
border-radius:var(--r-full);font:500 14px var(--f-sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.filled{background:var(--c-primary);color:var(--c-on-primary)}
.tonal{background:var(--c-selected);color:var(--c-on-selected)}
.text{background:transparent;color:var(--c-primary);padding:0 var(--s-3)}
@media (hover:hover){.filled:hover{background:color-mix(in srgb,var(--c-primary) 86%,var(--c-on-primary))}
.tonal:hover{background:color-mix(in srgb,var(--c-selected) 86%,var(--c-on-selected))}.text:hover{background:var(--c-hover)}}
button:disabled{opacity:.38;cursor:default}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}

/* Outlined fields */
.field{display:flex;flex-direction:column;gap:var(--s-1);margin:0 0 var(--s-3)}
.field > span{color:var(--c-text-2);font-size:12px}
.field input{height:48px;padding:0 var(--s-4);border:1px solid var(--c-outline);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text);font:16px var(--f-sans)}
.field input[type=file]{height:auto;padding:var(--s-3) var(--s-4)}
.field input:focus{outline:2px solid var(--c-primary);outline-offset:-1px;border-color:transparent}

/* The locked message, as the Mail app draws it */
.sealed{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5);border-radius:var(--r-lg);background:var(--c-surface-2)}
.seal-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-full);background:var(--c-good-soft);color:var(--c-on-good-soft)}
.seal-text{flex:1;min-width:0}.seal-text b{display:block;margin-bottom:var(--s-1);font-size:16px;font-weight:500}.seal-text p{margin:0;color:var(--c-text-2)}
.unlock{max-width:320px;margin-top:var(--s-3)}.unlock .field{margin-bottom:0}

/* The opened message */
.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:12px;font-weight:500}.badge svg.i{width:14px;height:14px}
.letter h2{margin:0 0 var(--s-1);font-size:22px;font-weight:400;line-height:1.3}
.meta{color:var(--c-text-2);font-size:12px}
.warn{margin:var(--s-3) 0;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);background:var(--c-danger-soft);color:var(--c-on-danger-soft)}
.letter .body-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55}
iframe.html{display:block;width:100%;min-height:80px;border:0}
.files{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0 0;padding:0;list-style:none}
.files li{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--h-md);padding:0 var(--s-4);border-radius:var(--r-sm);background:var(--c-surface-2)}
.files small{color:var(--c-text-3)}

/* The setup page */
.setup{max-width:640px;margin:0 auto;padding:var(--s-6) var(--s-4) 48px}
.card{margin:0 0 var(--s-3);padding:var(--s-5) var(--s-6);border-radius:var(--r-md);background:var(--c-surface)}
.key-list{margin:0;padding:0;list-style:none}
.key-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) 0}
.key-list small{display:block;color:var(--c-text-2);font-size:12px}
.done{color:var(--c-good);font-weight:500}
.handed{padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);background:var(--c-good-soft);color:var(--c-on-good-soft);font-weight:500}
@media (max-width:640px){.card{padding:var(--s-4)}.sealed{flex-direction:column;gap:var(--s-3);padding:var(--s-4)}}

/* Writing (compose.html): plain fields in the Mail app's composer look */
body.compose main{display:flex;flex-direction:column;gap:var(--s-2)}
.compose .subject,.compose .body{width:100%;border:0;border-bottom:1px solid var(--c-surface-3);background:transparent;color:var(--c-text);font:16px/1.5 var(--f-sans);outline:0}
.compose .subject{height:44px;padding:0 var(--s-1)}
.compose .body{min-height:240px;padding:var(--s-2) var(--s-1);border-bottom:0;resize:none;overflow:hidden}
.compose .subject:focus,.compose .body:focus{border-color:var(--c-primary)}
.seal-hint{margin:0;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--c-good-soft);color:var(--c-on-good-soft)}