/* Tokens. Components use only these. */
:root{
--c-bg:#f6f8fc;--c-surface:#fff;--c-surface-2:#f0f4f9;--c-surface-3:#e9eef6;--c-surface-4:#dde3ea;
--c-text:#1f1f1f;--c-text-2:#444746;--c-text-3:#5f6368;
--c-primary:#0b57d0;--c-on-primary:#fff;--c-primary-soft:#c2e7ff;--c-on-primary-soft:#001d35;
--c-selected:#d3e3fd;--c-on-selected:#041e49;--c-read:#f2f6fc;--c-hover:rgba(68,71,70,.08);--c-press:rgba(68,71,70,.12);
--c-star:#e8a600;--c-important:#e8a600;--c-danger:#b3261e;--c-danger-soft:#f9dedc;--c-on-danger-soft:#410e0b;--c-good:#146c2e;
--c-inverse:#303030;--c-on-inverse:#f2f2f2;--c-inverse-accent:#a8c7fa;--c-frame:#fff;
--c-brand:#0b3a8a;--c-on-brand:#fff;--c-warn:#f9ab00;--c-social:#1a73e8;--c-promotions:#188038;--c-updates:#e37400;--c-forums:#9334e6;--c-on-badge:#fff;
--c-tone-0:#1a5fd0;--c-tone-1:#18794e;--c-tone-2:#b3510f;--c-tone-3:#c5221f;--c-tone-4:#7e3ab8;--c-tone-5:#b0346f;--c-tone-6:#0a7a83;--c-tone-7:#5b6b7a;--c-on-tone:#fff;
--f-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--t-xs:12px;--t-sm:13px;--t-md:14px;--t-lg:16px;--t-xl:18px;--t-2xl:22px;--t-3xl:24px;--lh:1.45;--w-regular:400;--w-medium:500;--w-bold:650;
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:48px;--s-9:64px;
--h-chip:20px;--h-sm:32px;--h-md:40px;--h-lg:48px;--h-xl:56px;--h-top:64px;--w-nav:256px;--w-who:180px;--w-time:72px;--w-text:880px;--icon:20px;--icon-sm:18px;
--r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:28px;--r-full:999px;
--e-1:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);--e-2:0 2px 6px 2px rgba(60,64,67,.15),0 1px 2px rgba(60,64,67,.3);
--ease:cubic-bezier(.2,0,0,1);--fast:150ms}
@media (prefers-color-scheme:dark){:root{
--c-bg:#131314;--c-surface:#1e1f20;--c-surface-2:#26282a;--c-surface-3:#2d2f31;--c-surface-4:#37393b;
--c-text:#e3e3e3;--c-text-2:#c4c7c5;--c-text-3:#a8aaa8;--c-primary:#a8c7fa;--c-on-primary:#062e6f;--c-primary-soft:#004a77;--c-on-primary-soft:#c2e7ff;
--c-selected:#004a77;--c-on-selected:#d3e3fd;--c-read:#1a1b1c;--c-hover:rgba(227,227,227,.08);--c-press:rgba(227,227,227,.12);
--c-star:#fdd663;--c-important:#fdd663;--c-danger:#f2b8b5;--c-danger-soft:#8c1d18;--c-on-danger-soft:#f9dedc;--c-good:#6dd58c;
--c-inverse:#e3e3e3;--c-on-inverse:#303030;--c-inverse-accent:#0b57d0;--e-1:0 1px 3px rgba(0,0,0,.6);--e-2:0 2px 8px rgba(0,0,0,.6);
--c-brand:#2a64d6;--c-warn:#fdd663;--c-social:#8ab4f8;--c-promotions:#81c995;--c-updates:#fcad70;--c-forums:#d7aefb;--c-on-badge:#131314}}

/* Base */
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{background:var(--c-bg);color:var(--c-text);font:var(--w-regular) var(--t-md)/var(--lh) var(--f-sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--c-primary);text-decoration:none}
svg.i{width:var(--icon);height:var(--icon);fill:currentColor;flex:none}
h1{font-size:var(--t-2xl);font-weight:var(--w-regular);margin:0}h2{font-size:var(--t-lg);font-weight:var(--w-medium);margin:0 0 var(--s-3)}
button,input,select,textarea{font:inherit;color:inherit}
input::-webkit-calendar-picker-indicator{display:none!important}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
[hidden]{display:none!important}

/* Buttons: one shape each. Class names here are used for nothing else. */
.filled,.tonal,.outlined,.text,.text-link{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-size:var(--t-md);font-weight:var(--w-medium);white-space:nowrap;cursor:pointer;text-decoration:none;
transition:box-shadow var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.filled{background:var(--c-primary);color:var(--c-on-primary)}
.tonal{background:var(--c-selected);color:var(--c-on-selected)}
.outlined{background:var(--c-surface-3);color:var(--c-text-2);padding:0 var(--s-4)}
.text,.text-link{background:transparent;color:var(--c-primary);padding:0 var(--s-3)}
.filled:hover,.tonal:hover{box-shadow:var(--e-1)}.outlined:hover,.text:hover,.text-link:hover{background:var(--c-hover)}
.filled svg.i,.tonal svg.i,.outlined svg.i,.text-link svg.i{width:var(--icon-sm);height:var(--icon-sm)}
.text.small{height:var(--h-chip);padding:0 var(--s-2);font-size:var(--t-xs)}
.danger{color:var(--c-danger)}
.icon-button{display:inline-grid;place-items:center;width:var(--h-md);height:var(--h-md);padding:0;border:0;border-radius:var(--r-full);background:transparent;
color:var(--c-text-2);cursor:pointer;flex:none;list-style:none;transition:background-color var(--fast) var(--ease)}
.icon-button::-webkit-details-marker{display:none}
.icon-button:hover{background:var(--c-hover)}.icon-button:active{background:var(--c-press)}.icon-button.off{opacity:.38;cursor:default}.icon-button.off:hover{background:transparent}
input[type=checkbox],input[type=radio]{width:var(--icon-sm);height:var(--icon-sm);margin:0;accent-color:var(--c-primary);cursor:pointer}
.field input,.field textarea,.form.inline input[type=text],.form.inline select,ul.rules input[type=text]{
width:100%;min-height:var(--h-md);padding:var(--s-2) var(--s-3);border:0;border-radius:var(--r-sm);background:var(--c-surface-2);color:var(--c-text);font-size:var(--t-md)}
.field input:focus,.field textarea:focus,.form.inline input:focus,.form.inline select:focus,ul.rules input:focus{outline:2px solid var(--c-primary);outline-offset:0}

/* Menus that open from a button (snooze, move, more, schedule) */
.pop{position:relative;display:inline-block}
.pop-card{position:absolute;left:0;top:calc(100% + var(--s-1));z-index:30;display:grid;gap:2px;min-width:220px;max-height:60vh;overflow:auto;padding:var(--s-2);
border-radius:var(--r-md);background:var(--c-surface);box-shadow:var(--e-2)}
.pop.right .pop-card{left:auto;right:0}.pop.up .pop-card{top:auto;bottom:calc(100% + var(--s-2))}
.pop-title{margin:var(--s-1) var(--s-3) var(--s-2);color:var(--c-text-2);font-size:var(--t-xs);font-weight:var(--w-medium)}
.menu-item{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:var(--h-md);padding:0 var(--s-3);border:0;border-radius:var(--r-sm);
background:transparent;color:var(--c-text);text-align:left;cursor:pointer;white-space:nowrap}
.menu-item:hover{background:var(--c-hover)}.menu-item svg.i{fill:var(--c-text-2)}
.pop-card .field{margin:var(--s-2) var(--s-3) 0}.pop-card .tonal{justify-self:end;margin:var(--s-2) var(--s-1) var(--s-1)}
.pop > summary{list-style:none}.pop > summary::-webkit-details-marker{display:none}
.pop[open] > summary::before{content:"";position:fixed;inset:0;z-index:29;cursor:default}

/* Top bar: menu, mark and name over the navigation, search over the content */
.top{display:grid;grid-template-columns:var(--w-nav) minmax(0,1fr) auto;align-items:center;height:var(--h-top);padding:var(--s-2) var(--s-4) var(--s-2) 0}
.logo-cell{display:flex;align-items:center;gap:var(--s-1);min-width:0;padding-left:14px}
.menu{display:inline-grid;cursor:pointer}
.logo{display:flex;align-items:center;min-width:0;padding:0 var(--s-2)}
svg.brand-badge{display:block;flex:none;width:auto;height:30px;aspect-ratio:432.4/192}
svg.brand-badge rect{fill:var(--c-brand)}svg.brand-badge path{fill:var(--c-on-brand)}
.brand-text{font-size:var(--t-2xl);font-weight:var(--w-bold);color:var(--c-brand);white-space:nowrap}
.search{display:flex;align-items:center;gap:var(--s-3);height:var(--h-lg);padding:0 var(--s-4);border-radius:var(--r-xl);background:var(--c-surface-3);
transition:background-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.search:focus-within{background:var(--c-surface);box-shadow:var(--e-1)}.search svg.i{fill:var(--c-text-2)}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:var(--t-lg)}
.me{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-1);padding-left:var(--s-4)}.me form{display:contents}
.me-link{display:inline-grid;margin-left:var(--s-2);border-radius:var(--r-full);transition:box-shadow var(--fast) var(--ease)}
.me-link:hover{box-shadow:0 0 0 4px var(--c-hover)}
.avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--h-sm);height:var(--h-sm);overflow:hidden;border-radius:var(--r-full);
background:var(--c-primary);color:var(--c-on-primary);font-weight:var(--w-medium)}

.avatar .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--fast) var(--ease)}
.avatar.t0{background:var(--c-tone-0)}.avatar.t1{background:var(--c-tone-1)}.avatar.t2{background:var(--c-tone-2)}.avatar.t3{background:var(--c-tone-3)}
.avatar.t4{background:var(--c-tone-4)}.avatar.t5{background:var(--c-tone-5)}.avatar.t6{background:var(--c-tone-6)}.avatar.t7{background:var(--c-tone-7)}
.avatar.t0,.avatar.t1,.avatar.t2,.avatar.t3,.avatar.t4,.avatar.t5,.avatar.t6,.avatar.t7{color:var(--c-on-tone)}
.avatar .pic.loaded{opacity:1;background:var(--c-surface)}

/* Navigation */
.app{display:grid;grid-template-columns:var(--w-nav) minmax(0,1fr);align-items:start}
.nav{position:sticky;top:0;display:flex;flex-direction:column;height:calc(100vh - var(--h-top));overflow:auto;padding:0 0 var(--s-4) var(--s-2)}
.nav-brand{display:none}
.compose-button{display:flex;align-items:center;gap:var(--s-3);height:var(--h-xl);margin:0 var(--s-2) var(--s-3) 0;padding:0 var(--s-6) 0 var(--s-4);border-radius:var(--r-lg);
background:var(--c-primary-soft);color:var(--c-on-primary-soft);font-weight:var(--w-medium);transition:box-shadow var(--fast) var(--ease)}
.compose-button:hover{box-shadow:var(--e-1)}
.folders{display:flex;flex-direction:column}
.folders a{display:flex;align-items:center;gap:var(--s-4);height:var(--h-sm);margin-right:var(--s-2);padding:0 var(--s-3) 0 var(--s-4);
border-radius:0 var(--r-lg) var(--r-lg) 0;color:var(--c-text)}
.folders a:hover{background:var(--c-hover)}.folders a.on{background:var(--c-selected);color:var(--c-on-selected);font-weight:var(--w-bold)}
.folders a svg.i{fill:var(--c-text-2)}.folders a.on svg.i{fill:var(--c-on-selected)}
.folders .label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count{font-size:var(--t-xs);font-weight:var(--w-bold)}
.group{margin:var(--s-4) 0 var(--s-1) var(--s-4);color:var(--c-text-2);font-size:var(--t-xs);font-weight:var(--w-medium)}
.nav-end{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);margin-top:auto;padding:var(--s-6) var(--s-2) 0 var(--s-4)}
.nav-foot{display:flex;flex-direction:column;gap:var(--s-2);align-self:stretch;color:var(--c-text-3);font-size:var(--t-xs)}
.nav-apps{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--h-sm);padding:0 var(--s-4) 0 var(--s-3);border-radius:var(--r-full);
background:var(--c-surface-3);color:var(--c-text-2);font-size:var(--t-sm);font-weight:var(--w-medium);white-space:nowrap}
.nav-apps svg.i{width:var(--icon-sm);height:var(--icon-sm)}.nav-apps:hover{background:var(--c-surface-4)}.nav-apps.on{background:var(--c-selected);color:var(--c-on-selected)}
/* Storage: blue while there is room, amber from 80 percent, red from 95 */
progress.quota{display:block;width:100%;height:6px;border:0;border-radius:var(--r-full);background:var(--c-surface-4);overflow:hidden;
-webkit-appearance:none;appearance:none}
progress.quota::-webkit-progress-bar{background:var(--c-surface-4);border-radius:var(--r-full)}
progress.quota::-webkit-progress-value{background:var(--c-primary);border-radius:var(--r-full)}
progress.quota::-moz-progress-bar{background:var(--c-primary);border-radius:var(--r-full)}
.nav-foot.high progress.quota::-webkit-progress-value{background:var(--c-warn)}.nav-foot.high progress.quota::-moz-progress-bar{background:var(--c-warn)}
.nav-foot.full progress.quota::-webkit-progress-value{background:var(--c-danger)}.nav-foot.full progress.quota::-moz-progress-bar{background:var(--c-danger)}
.nav-foot.full span{color:var(--c-danger)}
/* The menu button folds the navigation to its icons, as in Gmail. */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
@media (min-width:841px){
.nav-toggle:checked ~ .app{grid-template-columns:72px minmax(0,1fr)}
.nav-toggle:checked ~ .app .folders .label,.nav-toggle:checked ~ .app .count,.nav-toggle:checked ~ .app .group,
.nav-toggle:checked ~ .app .nav-end,.nav-toggle:checked ~ .app .compose-button span{display:none}
.nav-toggle:checked ~ .app .compose-button{width:52px;padding:0;justify-content:center}
.nav-toggle:checked ~ .app .folders a{width:48px;margin-left:2px;padding:0;justify-content:center;border-radius:var(--r-full)}}

/* Content surface */
.content{min-width:0;padding:0 var(--s-4) var(--s-4) 0}
.pane{min-height:calc(100vh - var(--h-top) - var(--s-4));border-radius:var(--r-lg);background:var(--c-surface)}
.toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s-1);height:var(--h-lg);padding:0 var(--s-2) 0 var(--s-3);
border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--c-surface)}
.grow{flex:1}.range{padding:0 var(--s-2);color:var(--c-text-2);font-size:var(--t-xs);white-space:nowrap}
.check-all{display:inline-grid;place-items:center;width:var(--h-md);height:var(--h-md)}
.selected-tools{display:contents}
#bulk:not(.has-selection) .selected-tools,#bulk.has-selection .idle-tools,#bulk:not(.has-unread) .if-unread,#bulk.has-unread .if-read{display:none}

/* Inbox tabs: Gmail's categories, each with its own color */
.tabs{display:flex;padding:0 var(--s-2)}
.tab{position:relative;display:flex;align-items:center;gap:var(--s-4);flex:0 1 256px;min-width:0;height:var(--h-xl);padding:0 var(--s-4);
border-radius:var(--r-sm) var(--r-sm) 0 0;color:var(--c-text-2);font-weight:var(--w-medium)}
.tab svg.i{fill:currentColor}.tab:hover{background:var(--c-hover)}
.tab.on{color:var(--tab)}
.tab.on::after{content:"";position:absolute;left:var(--s-2);right:var(--s-2);bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--tab)}
.tab-primary{--tab:var(--c-primary)}.tab-social{--tab:var(--c-social)}.tab-promotions{--tab:var(--c-promotions)}
.tab-updates{--tab:var(--c-updates)}.tab-forums{--tab:var(--c-forums)}
.tab-text{display:flex;flex-direction:column;min-width:0}
.tab-name{display:flex;align-items:center;gap:var(--s-2);min-width:0;white-space:nowrap}.tab-name > span{overflow:hidden;text-overflow:ellipsis}
.tab-peek{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text-3);font-size:var(--t-xs);font-weight:var(--w-regular)}
.badge{flex:none;padding:0 var(--s-2);border-radius:var(--r-full);background:var(--tab,var(--c-primary));color:var(--c-on-badge);font-size:var(--t-xs);
font-weight:var(--w-medium);line-height:var(--h-chip)}

/* Message list: tone, not lines, tells rows apart. All rows share one set of
   columns, so subjects line up and the sender column is only as wide as the
   longest name on the page (at most --w-who). */
.list{display:grid;grid-template-columns:[check] auto [star] auto [imp] auto [who] fit-content(var(--w-who)) [msg] minmax(0,1fr) [chip] auto [clip] auto [time] auto [end];
padding-bottom:var(--s-2)}
.row{position:relative;grid-column:check / end;display:grid;grid-template-columns:subgrid;align-items:center;height:var(--h-md);padding:0 var(--s-4) 0 var(--s-3);
background:var(--c-read);transition:box-shadow var(--fast) var(--ease)}
.row.unread{background:var(--c-surface)}.row:hover{z-index:1;box-shadow:var(--e-1)}.row:has(> input:checked){background:var(--c-selected)}
.row > input{grid-column:check;margin:0 var(--s-3)}.row > .star{grid-column:star}.row > .imp{grid-column:imp;margin-left:var(--s-1)}
.star,.imp{display:inline-grid;place-items:center;width:var(--h-sm);height:var(--h-sm);padding:0;border:0;border-radius:var(--r-full);
background:transparent;color:var(--c-text-3);cursor:pointer;flex:none}
.star:hover,.imp:hover{background:var(--c-hover)}.star.on{color:var(--c-star)}.imp.on{color:var(--c-important)}
.star.on svg.i:last-of-type,.star:not(.on) svg.i:first-of-type,.imp.on svg.i:last-of-type,.imp:not(.on) svg.i:first-of-type{display:none}
.row:not(.unread) .q-read,.row.unread .q-unread{display:none}
.open{grid-column:who / end;display:grid;grid-template-columns:subgrid;align-items:center;height:100%;color:var(--c-text)}
.who{grid-column:who;min-width:88px;padding:0 var(--s-4) 0 var(--s-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n{margin-left:var(--s-1);color:var(--c-text-3);font-size:var(--t-xs);font-weight:var(--w-regular)}
.msg{grid-column:msg;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:var(--c-text-3)}
.subject{color:var(--c-text)}.preview{margin-left:var(--s-2)}
.row.unread .who,.row.unread .subject,.row.unread time{color:var(--c-text);font-weight:var(--w-bold)}
.chip{display:inline-flex;align-items:center;flex:none;height:var(--h-chip);padding:0 var(--s-2);border-radius:var(--r-xs);background:var(--c-surface-3);
color:var(--c-text-2);font-size:var(--t-xs);white-space:nowrap}
.clip svg.i{width:var(--icon-sm);height:var(--icon-sm);fill:var(--c-text-3)}
.open .chip{grid-column:chip;margin-left:var(--s-3)}.open .clip{grid-column:clip;display:inline-grid;margin-left:var(--s-3)}
.row time{grid-column:time;width:var(--w-time);text-align:right;color:var(--c-text-3);font-size:var(--t-xs);white-space:nowrap}
.quick{position:absolute;right:var(--s-3);top:0;bottom:0;display:none;align-items:center;gap:var(--s-1);padding-left:var(--s-2);background:inherit}
.row:hover .quick,.row:focus-within .quick,.row:has(.pop[open]) .quick{display:flex}
.row:hover time,.row:focus-within time,.row:has(.pop[open]) time{visibility:hidden}.row:has(.pop[open]){z-index:3}
.row-avatar{display:none}
.empty{grid-column:1 / -1;padding:var(--s-9) var(--s-6);text-align:center;color:var(--c-text-2)}

/* Reading: subject, sender and text share one left edge */
.thread{padding:var(--s-4) var(--s-6) var(--s-7)}
.subject-line{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);padding:0 var(--s-2) 0 calc(var(--s-4) + var(--h-md) + var(--s-3))}
.subject-line h1{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
details.mail{position:relative;margin:0 0 var(--s-2);padding:var(--s-2) var(--s-4);border-radius:var(--r-md);background:var(--c-surface-2)}
details.mail[open]{padding-bottom:var(--s-4);background:var(--c-surface)}
details.mail > summary{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-2) 0;cursor:pointer;list-style:none}
details.mail > summary::-webkit-details-marker{display:none}
details.mail .avatar{width:var(--h-md);height:var(--h-md);font-size:var(--t-xl)}
.sender{flex:1;min-width:0}.sender b{font-weight:var(--w-bold)}.addr{color:var(--c-text-3);font-size:var(--t-xs)}
.from-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2)}
.to{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);margin-top:var(--s-1);color:var(--c-text-3);font-size:var(--t-xs)}
.to > span{margin:0 2px}
.person{display:inline-block;max-width:260px;height:22px;padding:0 var(--s-2);border-radius:var(--r-full);background:var(--c-surface-3);color:var(--c-text-2);
font-size:var(--t-xs);line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person:hover{background:var(--c-selected);color:var(--c-on-selected)}
a.addr{color:var(--c-text-3)}a.addr:hover{color:var(--c-primary);text-decoration:underline}
details.mail:not([open]) .to{display:none}
.snippet{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text-3);font-size:var(--t-sm)}
details.mail[open] .snippet{display:none}
.mail-side{display:flex;align-items:center;gap:var(--s-1);flex:none;margin:calc(-1 * var(--s-1)) calc(-1 * var(--s-2)) 0 0}
.mail-side time{margin-right:var(--s-1);color:var(--c-text-3);font-size:var(--t-xs);white-space:nowrap}
details.mail:not([open]) .mail-side .reply,details.mail:not([open]) .mail-side .pop{display:none}
.mail-body{padding:var(--s-1) 0 0 calc(var(--h-md) + var(--s-3))}
.mail-frame{display:block;width:100%;height:120px;border:0;border-radius:var(--r-sm);background:var(--c-frame)}
pre.plain{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:var(--t-md)/1.5 var(--f-sans)}
.notice-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);
background:var(--c-surface-3);color:var(--c-text-2);font-size:var(--t-sm)}
.notice-strip svg.i{fill:var(--c-text-2)}.notice-strip span{flex:1;min-width:200px}.notice-strip .text-link,.notice-strip .text{height:var(--h-sm)}
.thumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0 0}
.thumb img{display:block;max-width:220px;max-height:160px;border-radius:var(--r-sm);background:var(--c-surface-3);object-fit:cover}
.attachments{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0}
.attachment{display:inline-flex;align-items:center;gap:var(--s-2);max-width:300px;height:var(--h-md);padding:0 var(--s-1) 0 var(--s-3);border-radius:var(--r-sm);
background:var(--c-surface-3);color:var(--c-text)}
.attachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment small{color:var(--c-text-3);white-space:nowrap}
.attachment .icon-button{width:var(--h-sm);height:var(--h-sm)}
.mail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-4)}
blockquote{margin:var(--s-2) 0;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--c-surface-2);color:var(--c-text-2)}

/* Writing: the header lines in one quiet block; the message takes the rest */
.pane.composer{display:flex;flex-direction:column;height:calc(100vh - var(--h-top) - var(--s-4));min-height:440px;padding:0 var(--s-4) var(--s-2)}
.composer-head{display:flex;align-items:center;gap:var(--s-3);min-height:var(--h-lg);padding:0 var(--s-2)}
.composer-head h1{font-size:var(--t-lg);font-weight:var(--w-medium);white-space:nowrap}
.draft-state{color:var(--c-text-3);font-size:var(--t-xs);white-space:nowrap}
.composer-head .from{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text-3);font-size:var(--t-sm)}
.fields{display:flex;flex-direction:column;padding:var(--s-1) 0;border-radius:var(--r-md);background:var(--c-surface-2)}
.line{display:flex;align-items:center;gap:var(--s-3);min-height:var(--h-md);padding:0 var(--s-2) 0 var(--s-4)}
.line > label{flex:0 0 56px;color:var(--c-text-3);white-space:nowrap;cursor:text}.line:focus-within > label{color:var(--c-primary)}
.line input{flex:1;min-width:0;height:var(--h-md);border:0;outline:0;background:transparent;font-size:var(--t-md)}
.reveal{display:flex;gap:var(--s-1)}
.editor,.pane.composer textarea{flex:1;min-height:160px;margin:var(--s-2) 0 0;padding:var(--s-3) var(--s-4);border:0;border-radius:var(--r-md);outline:0;
background:var(--c-surface);font:var(--t-md)/1.55 var(--f-sans);overflow:auto;resize:none;overflow-wrap:anywhere}
.editor:focus-visible,.pane.composer textarea:focus-visible{outline:0}
.composer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding-top:var(--s-2)}
.editor-tools{display:flex;align-items:center;gap:2px;margin-left:var(--s-1)}
.editor-tools .icon-button{width:var(--h-sm);height:var(--h-sm)}
.send-group{display:inline-flex;align-items:stretch}
.send-group > .filled{border-radius:var(--r-full) 0 0 var(--r-full);padding:0 var(--s-5)}
.send-group .pop > summary{border-radius:0 var(--r-full) var(--r-full) 0;padding:0 var(--s-3);margin-left:2px}
.file{position:relative;overflow:hidden}.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chosen{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;color:var(--c-text-3);font-size:var(--t-xs)}

/* Settings, contacts and the server page */
.settings{max-width:var(--w-text);padding:var(--s-2) 0 var(--s-7)}.page-title{margin:var(--s-1) 0 var(--s-4) var(--s-4)}
.card{margin:0 0 var(--s-3);padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);background:var(--c-surface)}
.form{display:grid;gap:var(--s-4);max-width:640px}.form.inline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);max-width:none}
.form.inline input[type=text],.form.inline select{width:auto;min-width:140px}
.field{display:grid;gap:var(--s-2);color:var(--c-text-2);font-size:var(--t-xs)}.field textarea{resize:vertical}
fieldset.choice{display:grid;gap:var(--s-2);margin:0;padding:0;border:0}fieldset.choice legend{margin-bottom:var(--s-2);color:var(--c-text-2);font-size:var(--t-xs)}
fieldset.choice label{display:flex;align-items:center;gap:var(--s-3)}
.actions{display:flex;gap:var(--s-3)}.actions.spread{justify-content:space-between;align-items:center}.hint{color:var(--c-text-3);font-size:var(--t-sm)}
ul.rules{display:flex;flex-direction:column;gap:var(--s-2);margin:0 0 var(--s-4);padding:0;list-style:none}
ul.rules li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--c-surface-2)}
ul.rules form{display:flex;align-items:center;gap:var(--s-2)}
.setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-6)}.qr{padding:var(--s-2);border-radius:var(--r-md);background:#fff}
code{font-family:var(--f-mono);font-size:var(--t-sm)}code.key{display:inline-block;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--c-surface-2);letter-spacing:.06em;word-break:break-all}
table.plain{width:100%;border-collapse:separate;border-spacing:0 var(--s-1)}
table.plain th,table.plain td{padding:var(--s-2) var(--s-3);text-align:left;vertical-align:top;background:var(--c-surface-2)}
table.plain th{width:40%;border-radius:var(--r-sm) 0 0 var(--r-sm);color:var(--c-text-2);font-weight:var(--w-medium)}
table.plain td{border-radius:0 var(--r-sm) var(--r-sm) 0}.good{color:var(--c-good)}.bad{color:var(--c-danger)}
.toolbar-title{margin:0 var(--s-2) 0 var(--s-1);font-size:var(--t-xl)}
.contact-search input{min-height:var(--h-sm);width:240px;padding:0 var(--s-3);border:0;border-radius:var(--r-full);background:var(--c-surface-2)}
.contact-list{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-2) var(--s-3) var(--s-6)}
.contact > summary{display:flex;align-items:center;gap:var(--s-3);min-height:var(--h-xl);padding:0 var(--s-3);border-radius:var(--r-md);cursor:pointer;list-style:none}
.contact > summary::-webkit-details-marker{display:none}
.contact > summary:hover{background:var(--c-hover)}.contact[open] > summary{background:var(--c-surface-2)}
.contact-name{flex:0 0 220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--w-medium)}
.contact-email{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text-2)}
.contact-company{flex:0 0 180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text-3)}
.contact .contact-form{padding:var(--s-4) var(--s-4) var(--s-5) calc(var(--h-sm) + var(--s-6))}
.contact.new > summary svg.i{fill:var(--c-primary)}.contact.new .contact-name{color:var(--c-primary)}
.import{padding:var(--s-2) var(--s-3)}
.group-title{margin:var(--s-6) 0 var(--s-3) var(--s-4);color:var(--c-text-2);font-size:var(--t-md)}
code.value{padding:1px var(--s-2);border-radius:var(--r-xs);background:var(--c-surface-3);font-size:var(--t-sm);overflow-wrap:anywhere}
table.plain td .hint{display:block;margin-top:2px}.apps table.plain th{width:200px}
.copy{width:var(--h-sm);height:var(--h-sm);margin-left:var(--s-1);vertical-align:middle}.copy svg.i{width:var(--icon-sm);height:var(--icon-sm)}
.copy svg.i + svg.i,.copy.done svg.i:first-child{display:none}.copy.done svg.i + svg.i{display:block;fill:var(--c-good)}
details.guide{padding:0}
details.guide > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--h-xl);padding:0 var(--s-5) 0 var(--s-6);
border-radius:inherit;cursor:pointer;list-style:none}
details.guide > summary::-webkit-details-marker{display:none}
details.guide > summary:hover{background:var(--c-hover)}details.guide > summary h2{margin:0}
details.guide > summary svg.i{fill:var(--c-text-2);transition:transform var(--fast) var(--ease)}details.guide[open] > summary svg.i{transform:rotate(180deg)}
.steps{display:grid;gap:var(--s-3);margin:0;padding:var(--s-2) var(--s-6) var(--s-5) calc(var(--s-6) + var(--s-5));line-height:1.6}
.steps li::marker{color:var(--c-text-3);font-weight:var(--w-medium)}
details.guide > .hint{margin:0;padding:0 var(--s-6) var(--s-5)}
.photo-field input[type=file]{font-size:var(--t-sm)}
.profile-photo{display:flex;align-items:center;gap:var(--s-5)}
.avatar.large{width:72px;height:72px;font-size:28px}
.photo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}.photo-actions .hint{flex-basis:100%;margin:0}

/* Notices */
.snackbar{position:fixed;left:var(--s-6);bottom:var(--s-6);z-index:40;display:flex;align-items:center;gap:var(--s-4);min-height:var(--h-lg);
max-width:min(560px,calc(100vw - 2 * var(--s-6)));margin:0;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);border-radius:var(--r-xs);
background:var(--c-inverse);color:var(--c-on-inverse);box-shadow:var(--e-2)}
.snackbar .text{color:var(--c-inverse-accent)}.snackbar.error{background:var(--c-danger-soft);color:var(--c-on-danger-soft)}.snackbar.inline{position:static;max-width:none;margin:0 0 var(--s-4)}
.alert{margin:0 0 var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--c-danger-soft);color:var(--c-on-danger-soft)}

/* Sign in */
body.bare{display:grid;place-items:center;min-height:100vh;padding:var(--s-6)}
body.bare main.card{width:100%;max-width:440px;margin:0;padding:calc(2 * var(--s-5));border-radius:var(--r-xl)}
.brandmark{display:flex;align-items:center}.brandmark svg.brand-badge{height:36px}
body.bare h1{margin:var(--s-6) 0 var(--s-1);font-size:var(--t-3xl)}.sub{margin:0 0 var(--s-6);color:var(--c-text-2)}body.bare .filled{justify-self:end}
.code-input{font-size:var(--t-3xl)!important;letter-spacing:.3em;text-align:center}

/* Line breaks: labels never wrap, headings balance, prose avoids lone words */
h1,h2,.page-title,legend{text-wrap:balance}
p,.hint,.sub,.alert,ul.rules li span,.field > span,fieldset.choice label,.snackbar span,.empty{text-wrap:pretty}
.folders a,.compose-button,.fab,.logo,.who,.tab{white-space:nowrap}

/* Printing a conversation */
@media print{.top,.nav,.toolbar,.fab,.mail-actions,.mail-side,.snackbar,.scrim,.notice-strip{display:none!important}
.app{display:block}.content{padding:0}.pane{min-height:0;border-radius:0}body{background:#fff}details.mail{background:#fff}
html,body{height:auto!important;overflow:visible!important}body{display:block!important}.content,.content > .pane{overflow:visible!important}}

/* Wide screens: the header and the left column stay where they are; a pane
   scrolls inside its own frame, other pages inside the content area */
@media (min-width:841px){
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}
.top{flex:none}
.app{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
.nav{position:static;height:auto;min-height:0;overflow-y:auto}
.content{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.content:has(> .pane){overflow:hidden}
.content > .pane{flex:1;min-height:0;overflow-y:auto}
.content > .pane.composer{height:auto;min-height:0;overflow:hidden}}

/* Parts that exist only on narrow screens */
.scrim,.fab{display:none}

/* Narrow screens */
@media (max-width:840px){
:root{--h-top:64px;--tap:44px}
body{padding-bottom:env(safe-area-inset-bottom)}
.top{position:sticky;top:0;z-index:30;grid-template-columns:auto 1fr auto;gap:var(--s-2);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-1);background:var(--c-bg)}
.logo-cell{padding-left:0}.logo{display:none}
.menu{width:var(--tap);height:var(--tap)}
.me .icon-button{display:none}.me .avatar{margin:0 var(--s-1) 0 0}
.app{grid-template-columns:1fr}
.nav{position:fixed;inset:0 auto 0 0;z-index:50;width:min(300px,86vw);height:auto;padding:var(--s-3) 0 var(--s-6) var(--s-2);
padding-left:calc(var(--s-2) + env(safe-area-inset-left));background:var(--c-surface);border-radius:0 var(--r-lg) var(--r-lg) 0;
transform:translateX(-102%);transition:transform 220ms var(--ease);overflow:auto}
.nav-brand{display:flex;align-items:center;height:var(--h-xl);margin-bottom:var(--s-2);padding:0 var(--s-3)}
.nav-toggle:checked ~ .app .nav{transform:none;box-shadow:var(--e-2)}
.scrim{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.32)}.nav-toggle:checked ~ .app .scrim{display:block}
.nav .compose-button{display:none}
.folders a{height:var(--tap);margin-right:var(--s-3)}
.fab{position:fixed;right:calc(var(--s-4) + env(safe-area-inset-right));bottom:calc(var(--s-4) + env(safe-area-inset-bottom));z-index:20;
display:inline-flex;align-items:center;gap:var(--s-3);height:var(--h-xl);padding:0 var(--s-5) 0 var(--s-4);border-radius:var(--r-lg);
background:var(--c-primary-soft);color:var(--c-on-primary-soft);font-weight:var(--w-medium);box-shadow:var(--e-2)}
body:has(.pane.composer) .fab{display:none}
.content{padding:var(--s-2) 0 calc(var(--h-xl) + var(--s-6))}.pane{min-height:calc(100vh - var(--h-top));border-radius:var(--r-lg) var(--r-lg) 0 0}
.toolbar{padding:0 var(--s-1)}.toolbar .icon-button{width:var(--tap);height:var(--tap)}
/* Menus become sheets from the bottom edge */
.pop[open] > summary::before{background:rgba(0,0,0,.32)}
.pop-card,.pop.right .pop-card,.pop.up .pop-card{position:fixed;left:0;right:0;top:auto;bottom:0;max-width:none;max-height:70vh;
padding:var(--s-3) var(--s-2) calc(var(--s-4) + env(safe-area-inset-bottom));border-radius:var(--r-xl) var(--r-xl) 0 0}
.menu-item{min-height:var(--h-lg)}
.check-all,.range{display:none}
/* Tabs: icons with their counts, and the name of the open one */
.tabs{overflow-x:auto;gap:var(--s-1)}.tab{flex:none;height:var(--h-lg);padding:0 var(--s-3);gap:var(--s-2)}
.tab-peek,.tab:not(.on) .tab-name > span{display:none}
/* Rows as in Gmail's app: picture, sender and time, subject, preview; the
   whole row opens the conversation and the star sits in its corner. */
.list{display:flex;flex-direction:column}.row{display:block;height:auto;padding:0}
.row > input,.row .imp,.quick,.row .chip,.row .clip{display:none!important}
.open{display:grid;grid-template-columns:var(--h-md) minmax(0,1fr) auto;grid-template-areas:"avatar who time" "avatar subject subject" "avatar preview preview";
gap:0 var(--s-3);align-items:baseline;height:auto;padding:var(--s-3) var(--s-4)}
.row-avatar{display:inline-grid;grid-area:avatar;align-self:start;width:var(--h-md);height:var(--h-md);font-size:var(--t-xl)}
.who{grid-area:who;min-width:0;padding:0;font-size:var(--t-lg);line-height:1.35}.row time{grid-area:time;width:auto;visibility:visible!important}
.msg{display:contents}
.subject{grid-area:subject;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}
.preview{grid-area:preview;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding-right:var(--h-md);line-height:1.4;color:var(--c-text-3)}
.row > .star{position:absolute;right:var(--s-2);bottom:var(--s-1);width:var(--tap);height:var(--tap)}
.thread{padding:var(--s-3) var(--s-3) var(--s-6)}.subject-line{padding:0 var(--s-2);margin-bottom:var(--s-3)}.subject-line h1{font-size:var(--t-xl)}
details.mail{padding:var(--s-2) var(--s-3)}.mail-body{padding-left:0}
.from-line .addr,.mail-side .reply{display:none}.person{height:32px;line-height:32px;padding:0 var(--s-3)}
.mail-actions .outlined,.mail-actions .text-link{height:var(--tap)}
.pane.composer{height:calc(100dvh - var(--h-top) - var(--s-2));min-height:0;padding:0 var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom))}
body:has(.pane.composer) .content{padding-bottom:0}
.composer-head .from{display:none}
.line{min-height:var(--tap)}.line input{height:var(--tap)}
.line input,.editor,.pane.composer textarea,.field input,.field textarea,.form.inline input[type=text],.form.inline select,ul.rules input[type=text]{font-size:var(--t-lg)}
.editor-tools{order:-1;width:100%;margin:0;overflow-x:auto}
.editor-tools .icon-button,.composer-actions .icon-button{width:var(--tap);height:var(--tap)}
.composer-actions .filled,.composer-actions .text{height:var(--tap)}
.chosen{order:-1;max-width:none;width:100%}
.steps{padding-left:var(--s-7);padding-right:var(--s-4)}details.guide > summary{padding:0 var(--s-3) 0 var(--s-4)}details.guide > .hint{padding:0 var(--s-4) var(--s-4)}
.settings{padding:var(--s-2) var(--s-2) var(--s-7)}.card{padding:var(--s-4)}
.form.inline > *{flex:1 1 auto}
ul.rules li{flex-direction:column;align-items:stretch}
table.plain th{width:auto}table.plain th,table.plain td{display:block;border-radius:0}table.plain th{border-radius:var(--r-sm) var(--r-sm) 0 0;padding-bottom:0}
table.plain td{border-radius:0 0 var(--r-sm) var(--r-sm)}
.snackbar{left:var(--s-3);right:var(--s-3);bottom:calc(var(--h-xl) + var(--s-6) + env(safe-area-inset-bottom));max-width:none}
body.bare main.card{padding:var(--s-7) var(--s-5);border-radius:var(--r-lg)}body.bare{padding:var(--s-4)}
.contact-company,.contact-search,.contact-email{display:none}.contact-name{flex:1}
.contact .contact-form{padding:var(--s-3)}
.pop-card{max-width:calc(100vw - 2 * var(--s-4))}}