/* Self-hosted font faces and license notices are in font-faces.css and fonts/. */

/* Keep the chosen mailbox layout; the two previews share one size scale. */
.design-bar{flex-wrap:wrap;gap:8px 16px}
.font-choices{display:flex;align-items:center;gap:4px;margin-left:auto;font:12px/1.5 system-ui,sans-serif}
.font-choices>span{margin-right:4px;color:var(--muted)}
.font-choices button{padding:5px 10px;border:1px solid transparent;border-radius:5px;white-space:nowrap;font:inherit;color:var(--muted)}
.font-choices button[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft);font-weight:600}
.font-choices button:hover{background:var(--surface-2)}
:root:not([data-design=original]) .font-choices{display:none}

:root[data-design=original][data-typography=inter]{--font:"Mailbox Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;--mail-font:var(--font);--mono:"Mailbox Plex Mono",ui-monospace,Menlo,monospace}
:root[data-design=original][data-typography=gmail]{--font:"Mailbox Google Sans",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;--mail-font:Arial,"Mailbox Arimo","PingFang SC","Microsoft YaHei",sans-serif;--mono:"Mailbox Plex Mono",ui-monospace,Menlo,monospace}
:root[data-design=original]:not([data-typography=classic]) body{font-size:14px;font-optical-sizing:auto}
:root[data-design=original]:not([data-typography=classic]) :is(button,input,select,textarea){font-optical-sizing:auto}

/* Main reading and editing: match the same message in both font profiles. */
:root[data-design=original]:not([data-typography=classic]) .mail-body{font:400 14px/1.7 var(--mail-font)}
:root[data-design=original]:not([data-typography=classic]) :is(.editor-text,.new-compose>textarea){font:400 14px/1.7 var(--mail-font)}
:root[data-design=original]:not([data-typography=classic]) .reader-title{font-size:18px;line-height:1.45;font-weight:600}
:root[data-design=original]:not([data-typography=classic]) :is(.brand,.customer-title strong){font-size:15px}
:root[data-design=original]:not([data-typography=classic]) :is(.folder-btn,.nav-view,.mail-nav select,.list-head b,.mail-row .from strong,.mail-row .subject,.nav a,.who,.who select,.btn,.btn.sm,.sender b,.info-card h4,.info-card p,.kv-grid,.compact-row,.fact-list li,.timeline li,.ask-item,.editor-head,.editor-head select,.editor-to,.editor-signature,.business-header b,.biz-tabs button,.new-compose .field,.new-compose .compose-title){font-size:13px;line-height:1.5}
:root[data-design=original]:not([data-typography=classic]) :is(.mail-row .summary,.mail-row .chip,.mail-row time,.sender small,.sender time,.brand small,.scope-label,.nav-caption,.nav-foot,.nav-foot .note,.mail-account small,.quick-filters button,.queue-label,.list-head .count,.list-foot,.meta-row,.ai-summary,.ai-summary strong,.thread-old,.copy-status,.related-links,.related-links .lnk,.mail-attachments button,.meta-small,.metric-strip div,.profile-note,.source,.source button,.kv-grid .source,.ask-item .ask-note,.ask-item .chip,.alert-small,.steps span,.steps small,.quote-version>div,.quote-version .state,.mini-table,.mini-table td,.mini-table th,.doc-item,.date-pair div,.coverage-status,.editor-foot .note,.business-body details,.business-header .note,.facets span,.chip,.note){font-size:12px;line-height:1.5}
:root[data-design=original]:not([data-typography=classic]) .mail-account b{font:13px/1.5 var(--font)}
:root[data-design=original]:not([data-typography=classic]) .nav-foot{padding-top:16px}
:root[data-design=original]:not([data-typography=classic]) .mail-row{padding-block:12px}
:root[data-design=original]:not([data-typography=classic]) .mail-row .subject{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
:root[data-design=original]:not([data-typography=classic]) .mail-row .chips{flex-wrap:wrap}
:root[data-design=original]:not([data-typography=classic]) .mail-attachments button{overflow-wrap:anywhere;text-align:left}
:root[data-design=original]:not([data-typography=classic]) .asks .ask-item{grid-template-columns:21px minmax(0,1fr) auto;gap:5px}
:root[data-design=original]:not([data-typography=classic]) .ask-item .num{font:12px/21px var(--font)}
:root[data-design=original]:not([data-typography=classic]) .metric-strip{gap:8px}
:root[data-design=original]:not([data-typography=classic]) .business-header{flex-wrap:wrap}
:root[data-design=original]:not([data-typography=classic]) .business-header .note{min-width:0;overflow-wrap:anywhere}
:root[data-design=original]:not([data-typography=classic]) .info-card h4 .lnk{font-size:12px}

/* Tabular figures align money and dates; monospace is reserved for identifiers. */
:root[data-design=original]:not([data-typography=classic]) :is(.mail-row time,.sender time,.steps small,.date-pair b,.timeline li time,.metric-strip b,.quote-version strong,.mini-table .num,td.n,th.n){font-family:var(--font);font-variant-numeric:tabular-nums}
:root[data-design=original]:not([data-typography=classic]) .quote-version strong{font-size:16px;white-space:nowrap}
:root[data-design=original]:not([data-typography=classic]) .metric-strip b{font-size:18px}
:root[data-design=original]:not([data-typography=classic]) :is(.related-links .lnk,.compact-row .lnk){font-family:var(--mono)}
@media(max-width:760px){.font-choices{width:100%;justify-content:center;margin-left:0}.font-choices button{font-size:12px}}