/* VeraPoint SMS brand: original gold mark, espresso surfaces, warm cream text. */
:root {
  color-scheme: dark;
  --ink: #f4efe1;
  /* Between --ink and --muted: an unread message's snippet in the mail list. */
  --ink-soft: #ded3bc;
  --muted: #c9b797;
  --faint: #b29a78;
  --accent: #d7a74c;
  --accent-hover: #e6b75c;
  --accent-soft: #32241a;
  /* Hover outside the sidebar: a see-through gold over the dark surface, a faint gold edge,
     and fainter on the mail list's rows (still plainly gold beside --hover, and lighter than
     a ticked row's --accent-soft). Gold text on the wash stays above 5:1. */
  --accent-wash: rgba(215, 167, 76, .18);
  --accent-edge: rgba(215, 167, 76, .55);
  --accent-wash-faint: rgba(215, 167, 76, .14);
  --button-ink: #241505;
  --line: #3a2b1d;
  --control-border: #826b4c;
  --paper: #211711;
  --canvas: #160f0a;
  --input: #1a120c;
  --hover: #2a1e14;
  --avatar: #5d4037;
  --red: #ff9aa2;
  /* The message being written sits on a cream sheet, as the recipient will read it on a
     light page: black or dark-blue text chosen from the colour menu must stay visible. */
  --sheet: #fbf7ee;
  --sheet-ink: #241505;
  --sheet-muted: #7d6a55;
  --sheet-rule: #cccccc;
  --sheet-link: #1a55b8;
  --radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}*{box-sizing:border-box}body{margin:0;line-height:1.55}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,textarea,select{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 17px;border:1px solid var(--control-border);border-radius:8px;background:var(--paper);color:var(--ink);font-weight:600;line-height:1.35;cursor:pointer;text-decoration:none;text-align:center;transition:background .15s}button:hover,.button:hover{background:var(--hover);text-decoration:none}button.primary,.button.primary{background:var(--accent);color:var(--button-ink);border-color:var(--accent)}button.primary:hover,.button.primary:hover{background:var(--accent-hover)}button:disabled{opacity:.55;cursor:not-allowed}
.quiet{background:transparent;border-color:transparent}
.danger{color:var(--red)}input,textarea,select{width:100%;min-height:48px;border:1px solid var(--control-border);border-radius:7px;background:var(--input);padding:11px 13px;color:var(--ink)}textarea{resize:vertical;line-height:1.7}input::placeholder,textarea::placeholder{color:var(--faint)}input[type=checkbox]{width:20px;min-height:20px;height:20px;accent-color:var(--accent);flex-shrink:0}input[type=file]{padding:12px;background:var(--input)}input[type=file]::file-selector-button{font:inherit;border:0;background:var(--accent-soft);color:var(--accent);padding:8px 12px;border-radius:5px;margin-right:12px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:2.1rem;letter-spacing:-.055rem;line-height:1.2;margin-bottom:12px;font-weight:650}h2{font-size:1.15rem;line-height:1.35;margin-bottom:18px;font-weight:650}small{font-size:.875rem;color:var(--muted);display:block}strong{font-weight:600}
.muted{color:var(--muted)}
.eyebrow{display:block;font-size:.75rem;font-weight:700;letter-spacing:.11em;color:var(--muted);margin-bottom:12px}
.footnote{font-size:.875rem;color:var(--muted);margin:18px 0 0;line-height:1.6}
.topbar{height:88px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:1.4rem;letter-spacing:-.045rem;font-weight:700;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{display:block;width:40px;height:40px;object-fit:contain;flex-shrink:0}
.brand-light{font-weight:400;color:var(--muted)}
.identity{display:flex;align-items:center;gap:12px;font-size:.875rem;min-width:0}
.identity small{font-size:.8rem;overflow-wrap:anywhere}
.avatar{display:grid;place-items:center;border:1px solid var(--line);border-radius:0;clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);width:39px;height:39px;background:var(--avatar);font-size:.75rem;font-weight:700;flex-shrink:0}
.topnote{font-size:.875rem;color:var(--muted)}
.local-notice{padding:6px 30px;text-align:center;background:var(--input);color:var(--muted);font-size:.8rem;border-bottom:1px solid var(--line)}
.app-layout{display:flex;min-height:calc(100vh - 120px)}
.sidebar{width:240px;flex-shrink:0;padding:32px 22px 24px;background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.sidebar nav{display:flex;flex-direction:column;gap:5px}
.compose-button{width:100%;margin-bottom:23px;justify-content:flex-start;padding-left:19px}
.compose-button span{font-size:1.5rem;line-height:1}
.nav-link{min-height:48px;display:flex;align-items:center;padding:12px 19px;color:var(--muted);border-radius:8px;font-weight:550;font-size:.95rem}
.nav-link:hover{background:var(--hover);text-decoration:none}
.nav-link.selected,.button.selected{background:var(--accent-soft);color:var(--accent)}
.nav-bottom{margin-top:66px;display:flex;flex-direction:column;gap:5px}
.logout{border:0;width:100%;justify-content:flex-start;background:transparent}
.sidebar-foot{margin:64px 18px 0;font-size:.85rem;font-weight:600}
.sidebar-foot span{font-weight:400;color:var(--muted)}main{flex:1;min-width:0;padding:42px 48px;max-width:1600px}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.page-heading p{margin:0}
.page-heading .welcome{margin:0 0 12px;color:var(--muted);font-size:1rem;font-weight:550}
.search-bar{display:flex;gap:10px;max-width:730px;margin-bottom:25px}
.search-bar input{background:var(--input)}
.table-card,.panel,.mail-list,.message-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel{padding:27px 30px}
.narrow{max-width:650px}
.table-scroll{overflow:auto;position:relative}table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}th{background:var(--input);color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.035em;padding:16px 22px;font-weight:600;white-space:nowrap}td{padding:22px;border-top:1px solid var(--line);vertical-align:middle}td small{margin-top:4px}
.row-actions{white-space:nowrap}
.row-actions a{display:block;padding:8px 0;font-weight:600}
.badge{display:inline-block;padding:4px 10px;background:var(--accent-soft);color:var(--muted);border:1px solid var(--line);border-radius:5px;font-size:.8rem;font-weight:550;white-space:nowrap}
.badge.active{color:var(--accent);background:var(--accent-soft);border-color:var(--line)}
.empty{padding:65px 24px 75px;text-align:center;color:var(--muted);max-width:600px;margin:auto}
.empty h2{font-size:1.25rem;color:var(--ink);margin:16px 0 10px}
.empty p{max-width:420px;margin:0 auto 24px}
.empty-mark{display:grid;place-items:center;width:64px;height:64px;background:var(--accent-soft);color:var(--accent);border-radius:18px;margin:auto;font-size:2rem}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.inline-form label{font-weight:600;font-size:.9rem}
.stack{display:flex;flex-direction:column;gap:21px}
.stack>button{align-self:flex-start}
.stack>button.primary{min-width:150px}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.actions form{margin:0}
.notice,.copy-notice,.delegated-banner{padding:15px 18px;background:var(--hover);border:1px solid var(--control-border);border-radius:8px;margin-bottom:22px;font-size:.9rem;overflow-wrap:anywhere}
.notice p{margin:8px 0}
.notice.error,.errorlist{background:#39201d;color:var(--red);border-color:#925049}
.notice.success{background:var(--accent-soft);color:var(--ink);border-color:var(--control-border)}
.notice.success{display:flex;align-items:center;gap:12px}
.notice-text{flex:1;min-width:0}
.notice .notice-dismiss{flex-shrink:0;min-height:38px;min-width:38px;margin:-8px -8px -8px 0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.notice .notice-dismiss:hover{background:var(--hover);color:var(--ink)}
.notice-dismiss svg{display:block;width:20px;height:20px;fill:currentColor}
.notice.sent{border-left:3px solid var(--accent)}
.errorlist{font-size:.9rem;padding:12px 16px;list-style:none;border:1px solid #925049;border-radius:6px;margin:0}
.delegated-banner{background:var(--hover);border-color:var(--control-border);border-left:3px solid var(--accent);color:var(--ink)}
.delegated-banner span{display:block;font-size:.85rem;margin-top:3px}
.copy-notice{background:var(--hover);border-color:var(--control-border);color:var(--muted)}
.back-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:20px;font-size:.9rem;font-weight:550}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.admin-grid>.panel{height:100%}
.detail-list{display:grid;grid-template-columns:145px 1fr;gap:13px;margin:0 0 24px;font-size:.9rem}
.detail-list dt{color:var(--muted)}
.detail-list dd{margin:0;overflow-wrap:anywhere}
.inline-form{display:flex;flex-direction:column;gap:9px}
.inline-form button{align-self:flex-start}
.checkbox{display:flex;gap:12px;align-items:center;font-size:.95rem}
.separated{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
.person-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-size:.9rem;overflow-wrap:anywhere}
.person-row:last-child{border-bottom:0}
.audit-section{margin-top:26px}
.audit-table{font-size:.8rem}
.audit-table td{vertical-align:top;padding:15px}
.audit-table th{padding:15px}
.audit-table code{font-size:.76rem;white-space:normal;overflow-wrap:anywhere}
.audit-table small{font-size:.76rem}
.credential-block{padding:20px;background:var(--input);border:1px solid var(--line);border-radius:8px;margin:25px 0}
.credential-block dt{font-size:.8rem;color:var(--muted);margin-bottom:6px}
.credential-block dd{margin:0 0 20px;font-weight:600;overflow-wrap:anywhere}
.credential-block dd:last-child{margin-bottom:0}
.password{font-family:ui-monospace,monospace}
.help-text{font-size:.8rem;color:var(--muted)}
.help-text ul{padding-left:20px;margin:5px 0}
.mail-row{display:flex;gap:18px;padding:25px 28px;color:var(--ink);border-bottom:1px solid var(--line)}
.mail-row:last-child{border-bottom:0}
.mail-row:hover{background:var(--hover);text-decoration:none}
.mail-avatar{width:44px;height:44px;display:grid;place-items:center;background:var(--avatar);border:1px solid var(--line);border-radius:0;clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);font-weight:550;font-size:1rem;flex-shrink:0}
.mail-copy{flex:1;min-width:0}
.mail-meta{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:6px;font-size:.9rem}
.mail-meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-meta time{color:var(--muted);font-size:.8rem;white-space:nowrap}
.mail-subject{font-size:1.02rem;margin-bottom:4px}
.unread .mail-subject{font-weight:650}
.unread .mail-avatar{background:var(--accent-soft);border-color:var(--line);color:var(--accent)}
.unread-label{font-size:.65rem;background:var(--accent-soft);color:var(--accent);padding:3px 6px;border-radius:4px;vertical-align:middle;letter-spacing:.025em;margin-left:5px}
.mail-copy p{color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.mail-copy small{margin-top:6px;font-size:.78rem}
.pagination{display:flex;gap:12px;margin-top:24px}
.message-panel{max-width:1000px;padding:34px 38px}
.message-heading h1{font-size:1.8rem;margin-bottom:26px}
.sender-line{display:flex;align-items:center;gap:15px;font-size:.9rem}
.sender-line time{margin-left:auto;font-size:.8rem}
.sender-line small{font-size:.8rem}
.reading-tools{display:flex;flex-wrap:wrap;gap:8px;border-block:1px solid var(--line);padding:19px 0;margin:25px 0}
.reading-tools button,.reading-tools .button{font-size:.85rem}
.message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:1rem;line-height:1.9;padding:10px 0}
.ai-panel{padding:22px 25px;background:var(--hover);border:1px solid var(--control-border);border-radius:8px;margin-bottom:20px}
.ai-panel .eyebrow{color:var(--accent)}
.ai-panel .message-body{padding:0}
.ai-panel h2{margin-bottom:12px}
.translation-label{font-size:.8rem;color:var(--accent);margin-bottom:15px}
.original-details,.cc-details{font-size:.9rem}summary{cursor:pointer;min-height:44px;padding:10px 0;color:var(--accent);font-weight:550}
.attachments{border-top:1px solid var(--line);padding-top:25px;margin-top:25px}
.attachments h2{font-size:.95rem}
.attachment-chip{display:inline-flex;align-items:center;gap:15px;padding:13px 18px;border:1px solid var(--line);border-radius:8px;margin-right:10px;margin-bottom:12px;font-size:.9rem;max-width:100%;overflow-wrap:anywhere}
.attachment-chip small{font-size:.78rem}
.message-actions{border-top:1px solid var(--line);padding-top:25px;margin-top:30px}
.compose-panel{max-width:950px;padding:30px 35px}
.from-line{display:flex;gap:20px;border-bottom:1px solid var(--line);padding-bottom:20px;font-size:.9rem;flex-wrap:wrap}
.language-row{display:grid;grid-template-columns:1fr 25px 1fr;gap:15px;padding:18px;background:var(--input);border:1px solid var(--line);border-radius:8px}
.language-row .field label{font-size:.8rem}
.language-arrow{align-self:center;text-align:center;margin-top:22px;color:var(--muted)}
.compose-actions{display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--line);padding-top:25px}
.attachment-summary{font-size:.85rem;display:flex;flex-direction:column;gap:8px}
.delete-draft{margin-top:20px}
.login-mark{display:block;object-fit:contain;margin:0 0 26px}
.login-wrap{max-width:480px;margin:35px auto}
.login-card{padding:40px 44px;background:var(--paper);border:1px solid var(--line);border-radius:15px;box-shadow:0 10px 45px #00000024}
.login-card .eyebrow{color:var(--accent);margin-bottom:20px}
.login-card h1{font-size:2.2rem}
.login-card>.muted{font-size:.95rem;margin-bottom:30px}
.login-card .stack>button{width:100%;margin-top:4px}
.login-help{border-top:1px solid var(--line);padding-top:23px;margin-top:30px;font-size:.85rem}
.login-help p{color:var(--muted);margin:6px 0 0}
.login-footer{text-align:center;color:var(--muted);font-size:.8rem;margin:24px 0}
.signed-out main{max-width:none;background-image:radial-gradient(rgba(215,167,76,.045) 1px,transparent 1.6px);background-size:26px 26px}
.skip{position:absolute;left:-9999px;top:12px;z-index:99;background:var(--paper);padding:12px}
.skip:focus{left:12px}
.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@media(min-width:1500px){main{padding:48px 65px}
.sidebar{width:260px}}
@media(max-width:1150px){main{padding:32px 28px}
.sidebar{width:205px;padding:27px 16px}
.panel{padding:24px}
.admin-grid{grid-template-columns:1fr}
.page-heading h1{font-size:1.9rem}
.topbar{padding:0 28px}
.table-scroll table{min-width:720px}
.audit-table{min-width:600px}}
@media(max-width:760px){.topbar{height:76px;padding:0 18px}
.brand{font-size:1.15rem;gap:9px}
.brand-mark{width:34px;height:34px}
.identity>span:last-child{display:none}
.identity .avatar{width:34px;height:34px}
.topnote{display:none}
.local-notice{font-size:.72rem;padding:5px 12px}
.app-layout{display:block}
.sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:12px 16px;background:var(--paper)}
.sidebar nav{flex-direction:row;gap:5px;overflow-x:auto;align-items:center}
.sidebar nav>*{flex-shrink:0}
.sidebar-foot{display:none}
.compose-button{width:auto;margin:0 7px 0 0;font-size:.85rem;min-height:44px;padding:10px 13px}
.compose-button span{font-size:1.1rem}
.nav-link{min-height:44px;padding:10px 12px;font-size:.85rem}
.nav-bottom{margin:0;flex-direction:row;gap:0}
.nav-bottom form{margin:0}
.page-heading{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:22px}
.page-heading h1{font-size:1.8rem}
.page-heading p{font-size:.9rem}
.page-heading>.button{width:100%}
.eyebrow{font-size:.68rem;overflow-wrap:anywhere}
.search-bar{gap:7px}
.search-bar input{min-width:0;font-size:.9rem}
.search-bar button{padding:10px 13px;font-size:.85rem}main{padding:28px 17px}
.panel{padding:22px 19px}
.mail-row{padding:20px 17px;gap:12px}
.mail-avatar{width:35px;height:35px;font-size:.85rem}
.mail-meta{gap:10px;font-size:.8rem}
.mail-meta time{font-size:.68rem}
.mail-subject{font-size:.95rem}
.mail-copy p{font-size:.85rem}
.empty{padding:50px 18px}
.empty p{font-size:.9rem}
.message-panel{padding:25px 21px}
.message-heading h1{font-size:1.55rem}
.sender-line{flex-wrap:wrap}
.sender-line time{margin-left:50px}
.sender-line>div:nth-child(2){min-width:0;flex:1;overflow-wrap:anywhere}
.reading-tools{gap:7px}
.reading-tools button,.reading-tools .button{font-size:.8rem;padding:10px 12px}
.message-body{line-height:1.85}
.ai-panel{padding:20px 16px}
.compose-panel{padding:24px 18px}
.language-row{padding:13px 10px;gap:7px;grid-template-columns:minmax(0,1fr) 15px minmax(0,1fr)}
.language-row select{font-size:.85rem;padding:10px 5px}
.compose-actions .actions>*{flex:1}
.compose-actions button{font-size:.85rem}
.login-wrap{margin:8px auto}
.login-card{padding:32px 26px}
.login-card h1{font-size:2rem}
.detail-list{grid-template-columns:115px 1fr}
.person-row{flex-wrap:wrap}
.copy-notice,.delegated-banner{font-size:.85rem}
.table-scroll{margin:0}
.notice{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){.sender-line{display:grid;grid-template-columns:35px minmax(0,1fr);align-items:start}
.sender-line time{grid-column:2;margin:0;font-size:.8rem}
.sidebar nav{flex-wrap:wrap;overflow:visible;gap:4px}
.sidebar .compose-button{width:100%;margin:0 0 6px;justify-content:center}
.sidebar .nav-link{padding:10px 8px}
.sidebar .nav-bottom{display:contents}}


.address-choice{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.address-choice input{flex:1;min-width:150px}.address-choice span{color:var(--muted);overflow-wrap:anywhere}.signup-card{max-width:580px}.recovery-code{display:block;padding:16px;background:var(--input);border:1px solid var(--control-border);border-radius:8px;overflow-wrap:anywhere;margin:16px 0;user-select:all}


/* `hidden` must win over any display rule above (buttons are inline-flex, summaries flex). */
[hidden]{display:none!important}

/* Compose: Gmail-style formatting toolbar and the rich editor (compose.js). The panel lets
   the toolbar's menus spill over its edge instead of clipping them. The editor's font is in
   absolute units on purpose: Chrome copies relative ones (rem, inherit) into inline styles on
   every pasted or inserted run. */
.compose-panel{overflow:visible}
.rich-compose{display:flex;flex-direction:column;gap:8px}
.rich-editor{position:relative;min-height:320px;max-height:70vh;overflow-y:auto;padding:14px 16px;border:1px solid var(--control-border);border-radius:7px;background:var(--sheet);color:var(--sheet-ink);color-scheme:light;caret-color:var(--sheet-ink);font-family:arial,sans-serif;font-size:16px;line-height:1.5;overflow-wrap:anywhere;cursor:text}
.rich-editor:focus{outline:3px solid var(--accent);outline-offset:2px}
.rich-editor[data-empty]::before{content:attr(data-placeholder);position:absolute;left:16px;top:14px;color:var(--sheet-muted);pointer-events:none}
.rich-editor ul,.rich-editor ol,.rich-body ul,.rich-body ol{margin:.3em 0;padding-left:1.8em}
.rich-editor ul,.rich-body ul{list-style:disc}
.rich-editor ul ul,.rich-body ul ul{list-style:circle}
.rich-editor li,.rich-body li{margin:.1em 0}
.rich-editor blockquote,.rich-body blockquote{margin:0 0 0 40px}
.rich-editor blockquote.vp-quote,.rich-body blockquote.vp-quote{margin:0 0 0 .8ex;border-left:1px solid var(--sheet-rule);padding-left:1ex}
.rich-editor a,.rich-body a{color:var(--sheet-link);text-decoration:underline}
.rich-editor p,.rich-body p{margin:0 0 1em}
.message-body.rich-body,.ai-panel .message-body.rich-body{white-space:normal;padding:14px 16px;border-radius:7px;background:var(--sheet);color:var(--sheet-ink);font-family:arial,sans-serif;line-height:1.6}
.rich-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px 6px;background:var(--input);border:1px solid var(--line);border-radius:10px}
.tb-sep{width:1px;align-self:stretch;margin:6px 4px;background:var(--line)}
.tb-menu{position:relative;display:flex}
.rich-toolbar .tb-button{min-height:34px;min-width:34px;padding:0 5px;gap:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-weight:500;line-height:1}
.rich-toolbar .tb-button:hover{background:var(--hover);color:var(--ink)}
.rich-toolbar .tb-button[aria-pressed=true],.rich-toolbar .tb-button[aria-expanded=true],.rich-toolbar .tb-button[aria-checked=true]{background:var(--accent-soft);color:var(--accent)}
.rich-toolbar .tb-button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tb-icon{display:block;width:20px;height:20px;fill:currentColor;flex-shrink:0}
.tb-caret{display:block;width:16px;height:16px;fill:currentColor;margin-left:-2px;flex-shrink:0}
.rich-toolbar .tb-select{min-width:118px;justify-content:space-between;padding:0 4px 0 10px;font-size:.85rem;color:var(--ink)}
.tb-select-label{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colour-bar{fill:var(--accent)}
.align-icon{display:none}
[data-current=left] .align-left,[data-current=center] .align-center,[data-current=right] .align-right{display:block}
.tb-popover{position:absolute;left:0;bottom:calc(100% + 6px);z-index:30;padding:6px;background:var(--paper);border:1px solid var(--control-border);border-radius:10px;box-shadow:0 12px 32px #000000b3;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.tb-popover.below{bottom:auto;top:calc(100% + 6px)}
.tb-list{display:flex;flex-direction:column;gap:1px;min-width:200px;max-height:min(60vh,430px);overflow-y:auto}
.tb-row{display:flex;gap:2px}
.tb-popover .tb-option{justify-content:flex-start;width:100%;min-height:36px;padding:6px 16px 6px 34px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-weight:500;text-align:left;white-space:nowrap;position:relative}
.tb-popover .tb-option:hover{background:var(--accent-soft);color:var(--accent)}
.tb-popover .tb-option:focus-visible{background:var(--accent-soft);color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}
.tb-option[aria-checked=true]::before{content:'';position:absolute;left:13px;top:50%;width:5px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-65%) rotate(45deg)}
.tb-popover .size-small{font-size:.8rem}
.tb-popover .size-large{font-size:1.2rem}
.tb-popover .size-huge{font-size:1.6rem;min-height:46px}
.tb-colours{display:flex;gap:18px;padding:12px 14px}
.palette{display:flex;flex-direction:column;gap:8px}
.palette-title{font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap}
.swatches{display:grid;grid-template-columns:repeat(8,20px);gap:3px}
.swatches .swatch{width:20px;height:20px;min-height:0;padding:0;border:1px solid #ffffff3d;border-radius:4px;transition:transform .1s}
.swatches .swatch:hover{transform:scale(1.2);position:relative;z-index:1;box-shadow:0 0 0 1px var(--ink)}
.swatches .swatch:focus-visible{outline:2px solid var(--accent);outline-offset:1px;position:relative;z-index:1}
.swatches .swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent);position:relative;z-index:1}
/* Insert link: a small dialog in the toolbar, not the browser's prompt. */
.tb-link{width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;padding:14px}
.tb-field{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:600;color:var(--muted)}
.tb-field input{min-height:40px;padding:8px 10px;font-size:.95rem;font-weight:400}
.tb-link-error{margin:0;color:var(--red);font-size:.85rem}
.tb-link-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tb-link-gap{flex:1}
.tb-popover .tb-text-button{min-height:38px;padding:6px 14px;border-radius:7px;font-size:.9rem}
.tb-popover .tb-text-button:not(.primary){border-color:transparent;background:transparent}
.tb-popover .tb-text-button:not(.primary):hover{background:var(--accent-soft);color:var(--accent)}
.tb-popover .tb-text-button.danger:hover{color:var(--red)}
/* Attachments: the Attach files button, the files chosen, and the page-wide drop overlay. */
.attach-field{position:relative}
.file-picker-input{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0!important;opacity:0}
.attach-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px;border:1px dashed var(--control-border);border-radius:8px;background:var(--input)}
.attach-button{min-height:42px;padding:8px 16px 8px 12px;gap:6px;background:var(--accent-soft);color:var(--accent);border-color:transparent}
.attach-button:hover{background:var(--hover);color:var(--ink)}
.attach-hint{font-size:.85rem;color:var(--muted)}
.attach-hint-touch{display:none}
@media (hover:none) and (pointer:coarse){.attach-hint-pointer{display:none}.attach-hint-touch{display:inline}}
.attached-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.attached-list li{display:flex;align-items:center;gap:12px;min-height:46px;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:8px;background:var(--input);overflow-wrap:anywhere}
.attached-name{flex:1;min-width:0}
.attached-size{color:var(--muted);font-size:.8rem;white-space:nowrap}
.attached-list .attached-remove{min-height:38px;min-width:38px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.attached-list .attached-remove:hover{background:var(--hover);color:var(--red)}
.attach-error{margin:0;color:var(--red);font-size:.875rem}
.compose-status{margin:0;padding:12px 15px;border:1px solid #925049;border-radius:8px;background:#39201d;color:var(--red);font-size:.9rem}
.drop-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:#160f0ad9}
.drop-overlay *{pointer-events:none}
.drop-target{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(560px,100%);padding:54px 24px;border:3px dashed var(--accent);border-radius:18px;background:var(--paper);color:var(--ink);text-align:center}
.drop-target strong{font-size:1.4rem}
.drop-target span{color:var(--muted)}
.drop-icon{width:56px;height:56px;fill:var(--accent)}
/* A post in flight (compose.js): the pressed button reads "Sending…" with a spinner and stays
   readable; every other button of the form waits, dimmed. */
.compose-actions button[aria-busy=true]:disabled{opacity:1;cursor:progress}
.compose-actions button[aria-busy=true]::before{content:'';width:15px;height:15px;flex-shrink:0;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:vp-spin .8s linear infinite}
@keyframes vp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.compose-actions button[aria-busy=true]::before{animation-duration:2.4s}}
/* A question asked inside the page (never the browser's own confirm box). */
.vp-dialog-backdrop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:#000000a6}
.vp-dialog{width:min(420px,100%);padding:22px;border:1px solid var(--control-border);border-radius:12px;background:var(--paper);box-shadow:0 12px 32px #000000b3}
.vp-dialog p{margin:0 0 18px;font-weight:600}
.vp-dialog .actions{justify-content:flex-end}
/* Autosave (compose.js): "Saving…" and "Saved" said quietly beside the buttons, and the bin
   that discards the draft, as Gmail has them. */
.save-status{flex:1 1 140px;min-width:0;font-size:.85rem;color:var(--muted)}
.save-status.error{color:var(--red)}
.compose-actions .icon-button{min-height:44px;min-width:44px;padding:0;border-color:transparent;background:transparent;color:var(--muted)}
.compose-actions .icon-button:hover{background:var(--hover);color:var(--red)}
.discard-button .tb-icon{width:22px;height:22px}
@media(max-width:760px){.compose-actions .actions>.save-status{flex:1 1 100%;order:3}
.compose-actions .actions>.icon-button{flex:0 0 44px}}
@media(max-width:760px){.rich-editor{min-height:240px;padding:12px}
.rich-toolbar{padding:4px}
.rich-toolbar .tb-select{min-width:100px}
.tb-select-label{max-width:84px}
.tb-colours{flex-direction:column;gap:12px}
.swatches{grid-template-columns:repeat(8,26px)}
.swatches .swatch{width:26px;height:26px}
.attach-button{flex:1 1 100%}}

/* Sidebar numbers, as Gmail shows them (base.html, app.js): the Inbox's unread in a gold pill
   with its link bold, the Drafts' total in a quiet one; brand tokens only. */
.nav-link{gap:10px}
.nav-label{min-width:0}
.nav-count{margin-left:auto;min-width:24px;height:22px;padding:0 7px;border:1px solid var(--control-border);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;flex-shrink:0}
.unread-count{background:var(--accent);border-color:var(--accent);color:var(--button-ink);font-weight:700}
.nav-link.has-unread{color:var(--ink);font-weight:700}
.nav-link.has-unread.selected{color:var(--accent)}
/* On a phone the pills must not push Log out onto a second row (the nav grew 48 px): tighter
   link padding and gaps keep Inbox, Sent, Drafts, Settings and Log out on one row at 360 px
   with a few unread and drafts, and at 375 px even with "99+" in both. Links stay 44 px tall. */
@media(max-width:760px){.sidebar nav{column-gap:2px}
.sidebar .nav-link{gap:4px;padding:10px 5px}
.nav-count{min-width:18px;height:18px;padding:0 4px;font-size:.7rem}}

/* Message actions (actions.py, mail_actions.html, app.js): ticking rows, the toolbar above the
   list and the message, Move to, the Undo in the banner, and Archive, Spam and Trash in the
   sidebar with a More menu on phones. Brand tokens only; no native-looking controls. */
.mail-row{padding:0;gap:0;align-items:stretch}
.mail-row-link{display:flex;gap:18px;flex:1;min-width:0;padding:25px 28px;color:var(--ink)}
.mail-row-link:hover{text-decoration:none}
.mail-row.selectable .mail-row-link{padding-left:8px}
.mail-row:has(.check-input:checked){background:var(--accent-soft)}
/* An unread row's avatar is accent-soft too: on a ticked row it keeps its shape on paper. */
.mail-row:has(.check-input:checked) .mail-avatar{background:var(--avatar)}
/* The tick box: the real checkbox covers its 44 px target, invisible, over the drawn box. */
.check{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;flex-shrink:0;cursor:pointer}
.check .check-input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1}
/* The tick box (Wiki 08/10/2026): a smaller octagon than the avatar, drawn as a tan outline
   around a dark well so it never melts into the row; on hover the outline turns gold, the well
   glows and the box lifts; chosen, it fills gold and an eight-point star turns into place. The
   outline is the box's own colour showing round a clipped inner octagon (::before). */
.check-box{position:relative;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:0;clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);background:var(--control-border);flex-shrink:0;transition:background .16s ease,transform .16s ease}
.check-box::before{content:'';position:absolute;inset:2px;clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);background:var(--canvas);transition:background .16s ease}
.check{transition:filter .16s ease}
/* Only where a pointer can hover: a tap on a phone (untick a row) leaves no gold ring. */
@media(hover:hover){.check:hover{filter:drop-shadow(0 0 6px rgba(215,167,76,.45))}
.check:hover .check-box{background:var(--accent);transform:scale(1.08)}
.check:hover .check-box::before{background:radial-gradient(circle at 50% 45%,rgba(215,167,76,.32),var(--canvas) 70%)}}
.check-input:checked+.check-box,.check-input:indeterminate+.check-box{background:var(--accent)}
.check-input:checked+.check-box::before,.check-input:indeterminate+.check-box::before{background:var(--accent)}
.check-input:checked+.check-box::after{content:'';position:relative;width:74%;height:74%;clip-path:polygon(50.0% 0.0%,60.3% 25.1%,85.4% 14.6%,74.9% 39.7%,100.0% 50.0%,74.9% 60.3%,85.4% 85.4%,60.3% 74.9%,50.0% 100.0%,39.7% 74.9%,14.6% 85.4%,25.1% 60.3%,0.0% 50.0%,25.1% 39.7%,14.6% 14.6%,39.7% 25.1%);background:var(--button-ink);animation:check-star .26s cubic-bezier(.2,.9,.3,1.3) both}
.check-input:indeterminate+.check-box::after{content:'';position:relative;width:45%;height:3px;border-radius:2px;background:var(--button-ink)}
@keyframes check-star{from{transform:scale(.2) rotate(-90deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.check-input:checked+.check-box::after{animation:none}.check:hover .check-box{transform:none}}
/* The octagon clips an outline, so keyboard focus rings the whole tick target instead. */
.check:has(.check-input:focus-visible){outline:3px solid var(--accent);outline-offset:2px;border-radius:10px}
.row-check{align-self:flex-start;padding-left:14px;padding-top:31px}
/* The actions wrap among themselves beside the select-all box; the count keeps the right end. */
.list-toolbar{display:flex;align-items:center;gap:4px 6px;min-height:58px;padding:6px 12px 6px 14px;margin-bottom:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.selection-actions{display:flex;align-items:center;flex-wrap:wrap;gap:2px;flex:1 1 auto;min-width:0}
.selection-actions[hidden]+.selection-count{margin-left:auto}
.has-selection .selection-count{white-space:nowrap}
.selection-count{margin-left:auto;flex:0 1 auto;min-width:0;text-align:right;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
/* A toolbar button: an icon and its word, quiet until hovered. */
.tool{min-height:42px;padding:6px 12px;gap:7px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-weight:550;font-size:.88rem;white-space:nowrap}
.tool:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.tool-icon{display:block;width:20px;height:20px;fill:currentColor;flex-shrink:0}
.danger-tool:hover{color:var(--red)}
.move-menu{position:relative;display:inline-flex}
.move-menu>summary.tool{display:inline-flex;align-items:center;min-height:42px;padding:6px 8px 6px 12px;list-style:none;cursor:pointer;color:var(--muted);font-weight:550}
.move-menu>summary::-webkit-details-marker{display:none}
.move-menu[open]>summary.tool{background:var(--accent-soft);color:var(--accent)}
.tool-caret{display:block;width:16px;height:16px;fill:currentColor;margin-left:-3px;flex-shrink:0}
.menu-panel{position:absolute;left:0;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;gap:1px;min-width:190px;padding:6px;background:var(--paper);border:1px solid var(--control-border);border-radius:10px;box-shadow:0 12px 32px #000000b3}
.menu-panel .menu-option{justify-content:flex-start;width:100%;min-height:42px;padding:8px 14px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-weight:500;text-align:left}
.menu-panel .menu-option:hover,.menu-panel .menu-option:focus-visible{background:var(--accent-soft);color:var(--accent)}
.menu-panel .menu-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.message-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:1000px;margin-bottom:16px}
.message-action-form{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0;flex:1 1 auto;min-width:0}
.back-tool{display:inline-flex;align-items:center;margin-right:8px;color:var(--accent)}
.folder-note{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:-10px 0 16px;color:var(--muted);font-size:.9rem}
.folder-note form{margin:0}
.empty-trash{color:var(--accent)}
.check-sender-note{max-width:1000px;border-left:3px solid var(--accent)}
/* Undo in the banner after a move ("Moved to Trash. Undo"). */
.notice-undo{margin:0;flex-shrink:0}
.notice .notice-action{min-height:38px;margin:-8px 0;padding:6px 12px;border:0;border-radius:6px;background:transparent;color:var(--accent);font-weight:700}
.notice .notice-action:hover{background:var(--hover);text-decoration:underline}
.danger-button{background:#39201d;color:var(--red);border-color:#925049}
.danger-button:hover{background:#4a2622}
.vp-dialog .vp-dialog-note{margin:-8px 0 18px;font-weight:400;color:var(--muted)}
.confirm-panel h1{font-size:1.6rem}
/* The sidebar: Archive, Spam and Trash after Drafts. On a phone they sit, with the rest of the
   nav, behind More: Inbox, Sent, Drafts and More stay on one row. */
.nav-group{display:contents}
.nav-more{display:none}
.nav-caret{display:block;width:18px;height:18px;fill:currentColor;flex-shrink:0}
@media(max-width:760px){.sidebar{position:relative}
.sidebar .nav-link{padding:10px 8px}
.sidebar .nav-more{display:flex;gap:2px;width:auto;border:0;background:transparent;color:var(--muted);font-weight:550;font-size:.85rem;justify-content:flex-start}
.sidebar .nav-more.selected{background:var(--accent-soft);color:var(--accent)}
.sidebar [data-nav-more-list]{display:none}
.sidebar [data-nav-more-list].open{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;right:16px;top:calc(100% - 8px);z-index:40;min-width:220px;max-width:calc(100vw - 32px);padding:6px;background:var(--paper);border:1px solid var(--control-border);border-radius:10px;box-shadow:0 12px 32px #000000b3}
.sidebar [data-nav-more-list].open .nav-link{padding:10px 14px;justify-content:flex-start}
.sidebar [data-nav-more-list].open .nav-link:hover{background:var(--accent-soft);color:var(--accent)}
.sidebar [data-nav-more-list].open .nav-bottom{display:flex;flex-direction:column;gap:2px;margin-top:2px;padding-top:4px;border-top:1px solid var(--line)}
.mail-row-link{padding:20px 17px;gap:12px}
.mail-row.selectable .mail-row-link{padding-left:2px}
.row-check{padding-left:6px}
.list-toolbar{flex-wrap:wrap;padding:4px 8px;gap:2px;min-height:54px}
.tool{min-width:44px;min-height:44px;padding:6px 10px;justify-content:center}
.tool .tool-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.move-menu>summary.tool{min-height:44px;padding:6px 6px 6px 10px}
.menu-panel{left:auto;right:0}
.empty-trash.tool{padding:6px 12px}
.folder-note{margin-top:-6px;font-size:.85rem}}
/* Without JavaScript the toolbar is always shown (nothing can show it on a tick) and select-all,
   which needs it, is not; More is not needed either: the links wrap onto a second row. */
@media (scripting:none){.selection-actions[hidden]{display:flex!important}
.select-all{display:none}}
@media (max-width:760px) and (scripting:none){.sidebar .nav-more{display:none}
.sidebar [data-nav-more-list]{display:contents}}

/* The tick box is the avatar's twin: an octagon of the same size, on phones too. */
@media(max-width:760px){.check-box{width:26px;height:26px}.row-check{padding-top:25px}}

/* The folder under the pointer turns into the Compose button: the same gold, dark ink, bolder.
   Only where a pointer can hover, so a tap on a phone never leaves a folder stuck gold. */
.sidebar .nav-link{transition:background .15s ease,color .15s ease}
@media(hover:hover){.sidebar .nav-link:hover,.sidebar [data-nav-more-list].open .nav-link:hover{background:var(--accent);color:var(--button-ink);font-weight:700}
.sidebar .nav-link:hover .nav-count{border-color:var(--button-ink);color:var(--button-ink)}}
/* Log out a size up, quick to find. */
.sidebar .logout{font-size:1.1rem}
@media(max-width:760px){.sidebar .logout{font-size:.95rem}}

/* Every other hover (Wiki 20/10/2026): the sidebar keeps its solid Compose gold above; in the
   page itself a control takes the softer gold, the wash with gold text and a faint gold edge,
   and a mail row a fainter wash still, so a list reads quietly. Danger keeps its red word or
   icon on the wash. Only where a pointer can hover, so a tap on a phone leaves nothing gold
   (the plainer rules above stay for it). Colours only: nothing moves or changes weight. A
   control that is on (Bold pressed, the reading view chosen, Move to open, a colour picked)
   keeps that look under the pointer, so a click shows at once. */
@media(hover:hover){button:not(.primary,.nav-link,.selected,:disabled):hover,.button:not(.primary,.nav-link,.selected):hover{background:var(--accent-wash);color:var(--accent);border-color:var(--accent-edge)}
button.danger:hover,.button.danger:hover{color:var(--red)}
button.danger-button:hover{background:linear-gradient(var(--accent-wash),var(--accent-wash)),#39201d;color:var(--red);border-color:var(--accent-edge)}
.tool:hover,.move-menu:not([open])>summary.tool:hover,.rich-toolbar .tb-button:not([aria-pressed=true],[aria-expanded=true],[aria-checked=true]):hover{background:var(--accent-wash);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-edge)}
.tool.danger-tool:hover{color:var(--red)}
.menu-panel .menu-option:hover,.tb-popover .tb-option:hover,.tb-popover .tb-text-button:not(.primary):hover{background:var(--accent-wash);color:var(--accent)}
.tb-popover .tb-text-button.danger:hover{color:var(--red)}
.swatches .swatch:not([aria-pressed=true]):hover{box-shadow:0 0 0 1px var(--accent)}
.notice .notice-dismiss:hover,.notice .notice-action:hover{background:var(--accent-wash);color:var(--accent)}
.attached-list .attached-remove:hover,.compose-actions .icon-button:hover{background:var(--accent-wash);color:var(--red);box-shadow:inset 0 0 0 1px var(--accent-edge)}
.mail-row:hover{background:var(--accent-wash-faint)}}

/* The sign-in page (Wiki 26/10/2026: "Just say 'New user' and then 'Create'"): "Forgot
   password?" under the password field, and one centred line under the form whose Create is a
   gold link that takes the soft gold wash and an underline under the pointer (padding and edge
   fixed, so nothing moves). Both keep a finger-sized target. Create's padding gives the wash its
   room; the negative margins take that room back out of the line at rest, so "New user? Create"
   reads as one centred sentence with an ordinary gap, the wash starts after the "?" and the
   keyboard ring sits inside the wash. */
.field-link{align-self:flex-start;padding:6px 0;margin:-6px 0 -4px;font-size:.85rem;font-weight:600}
.login-new{margin-bottom:0;text-align:center;font-size:.95rem;color:var(--muted)}
.create-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:0 -8px 0 -3px;vertical-align:middle;border-radius:8px;font-weight:700;color:var(--accent)}
.create-link:focus-visible{outline-offset:-3px}
@media(hover:hover){.create-link:hover{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent-edge);text-decoration:underline;text-underline-offset:3px}}

/* Show password (app.js; Wiki 26/10/2026): an eye inside the right edge of every password
   field, a 44 px target, quiet until the pointer is on it, then the page's gold wash with a gold
   eye. Without JavaScript there is no button. Edge's own reveal eye would make two. */
.reveal-field{position:relative;display:block}
.reveal-field>input{padding-right:52px}
.reveal-field .reveal-button{position:absolute;top:50%;right:2px;transform:translateY(-50%);width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.reveal-field .reveal-button:focus-visible{outline-offset:-3px}
.reveal-icon{display:block;width:22px;height:22px;fill:currentColor}
@media(hover:hover){.reveal-field .reveal-button:hover{background:var(--accent-wash);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-edge)}}
input::-ms-reveal{display:none}

/* Read and unread in a mail list (Wiki 26/10/2026: "I get confused about which one I've read
   and which I have not"), as Gmail tells them apart: an unread row is bright and bold, sender and
   subject in --ink at 700 and its snippet a little brighter; a read row sits a touch darker, its
   sender and subject at normal weight in the muted cream and its snippet and date dimmer. Every
   read colour is at least 5:1 on each of its row's backgrounds, hovered and ticked included. Sent
   and Drafts are read rows. The Unread pill and the unread avatar stay; :where() keeps the read
   background under the hover's wash and a ticked row's gold. app.js turns a row read as it is
   opened, so a list brought back by Back shows it so. */
.mail-row:where(:not(.unread)){background:var(--input)}
.mail-row.unread .mail-meta strong,.mail-row.unread .mail-subject{color:var(--ink);font-weight:700}
.mail-row.unread .mail-copy p{color:var(--ink-soft)}
.mail-row:not(.unread) .mail-meta strong,.mail-row:not(.unread) .mail-subject{color:var(--muted);font-weight:400}
.mail-row:not(.unread) .mail-copy p,.mail-row:not(.unread) .mail-meta time{color:var(--faint)}
/* A read row's avatar is quiet too: a tile darker than an unread one's, its letter in the muted
   cream, so the brightest thing in a read row is no longer its avatar. A ticked row keeps its own
   tile (--avatar on the gold, the letter still above 4.5:1). */
.mail-row:not(.unread) .mail-avatar{background:var(--hover);color:var(--muted)}