/* ═══════════════════════════════════════════════════════
   Alma Mail  –  Modern 2024 theme
   ═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ═══════════════════════════════════════════════════════════
     CHART & INK
     The palette comes from the desk's own materials: the teal wash
     used for water on an Admiralty chart, ink black for structure,
     and the warm off-white of telex paper. Flat surfaces separated
     by hairlines rather than shadows and bevels.
     ═══════════════════════════════════════════════════════════ */

  /* Ink — structure and text */
  --ink:         #0f1b24;
  --ink-2:       #4a5763;
  --ink-3:       #7d8894;
  --text:        #0f1b24;
  --text-2:      #4a5763;
  --text-3:      #7d8894;
  --text2:       #4a5763;   /* older names, kept so nothing breaks */
  --text3:       #7d8894;

  /* Sea — the one accent, from chart water tint */
  --brand:       #12657f;
  --brand-dk:    #0d4f64;
  --brand-lt:    #eaf2f5;
  --brand-mid:   #1a7d9c;
  --accent:      #12657f;
  --blue:        #12657f;
  --sea:         #12657f;

  /* Magenta, reserved for figures that carry money */
  --magenta:     #a8306a;
  --orange:      #b25e12;
  --red:         #a32833;
  --green:       #1c6b4a;
  --hull:        #2f3e4a;

  /* Paper — flat surfaces */
  --bg:          #f4f5f3;
  --surface:     #ffffff;
  --surface-2:   #fafaf8;
  --surface-3:   #f1f2f0;

  /* Hairlines instead of shadows */
  --border:      #dfe3e0;
  --border-lt:   #ebeeeb;
  --list-border: #ebeeeb;
  --row-border:  #f0f2ef;

  /* Nav — flat ink, no gradient */
  --nav-h:       44px;
  --nav-bg:      #0f1b24;
  --nav-border:  #0f1b24;

  /* Sidebar */
  --sb-w:        202px;
  --sb-bg:       #fafaf8;
  --sb-sel:      #eaf2f5;
  --sb-hover:    #f1f4f2;
  --sb-hdr:      #f1f2f0;
  --sb-text-dim: #7d8894;

  /* List */
  --list-head:   #fafaf8;
  --list-unread: #ffffff;
  --list-read:   #ffffff;
  --list-sel:    #eaf2f5;
  --list-hover:  #f6f8f7;

  /* Toolbars */
  --tb-bg:       #fafaf8;
  --tb-border:   #ebeeeb;

  /* One radius scale, not seven */
  --r:           5px;
  --r-lg:        7px;
  --r-chip:      3px;

  /* Type */
  --font:        'Segoe UI', -apple-system, system-ui, Arial, sans-serif;
  --font-data:   'Cascadia Mono', 'Consolas', 'SF Mono', ui-monospace, monospace;
}

html,body{height:100%;overflow:hidden;font-family:var(--font);font-size:13px;color:var(--text);background:var(--bg)}

/* ── LOGIN ────────────────────────────────────────────── */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0a3d7a 0%,#0f6cbd 60%,#2b88d8 100%)}
.login-card{background:var(--surface);border-radius:12px;padding:40px 36px;width:360px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:18px}
.login-logo-mark{width:56px;height:56px;border-radius:14px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(15,108,189,.4)}
.login-logo-mark svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.login-card h1{text-align:center;font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.login-card .tagline{text-align:center;color:var(--text-3);font-size:13px;margin-bottom:28px;margin-top:3px}
.lfield{margin-bottom:16px}
.lfield label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.lfield input{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r);font-size:13px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;background:var(--surface)}
.lfield input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,108,189,.12)}
.btn-login{width:100%;background:var(--brand);color:#fff;border:none;border-radius:var(--r);padding:10px;font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;letter-spacing:.2px;transition:background .15s,transform .1s}
.btn-login:hover{background:var(--brand-dk)}
.btn-login:active{transform:scale(.99)}
/* Hidden until there is something to say. Shown by adding .on rather than
   by clearing an inline style — clearing it fell back to display:none here,
   which is why sign-in errors never appeared. */
.lerr{background:#fef0ee;color:var(--red);border-radius:var(--r);padding:9px 12px;font-size:12.5px;
  margin-top:10px;border:1px solid #f9d1cc;border-left:3px solid var(--red);display:none;text-align:left}
.lerr.on{display:block}

/* ── TOP NAV ──────────────────────────────────────────── */
.topnav{height:var(--nav-h);background:var(--nav-bg);display:flex;align-items:stretch;flex-shrink:0;border-bottom:1px solid var(--nav-border)}
.nav-logo{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:1px solid rgba(255,255,255,.15);min-width:180px}
.nav-logo-mark{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.nav-logo-mark svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.nav-logo-text{color:#fff;font-size:15px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.nav-logo-text span{font-weight:400;opacity:.75}

.ntab{display:flex;align-items:center;gap:6px;padding:0 14px;color:rgba(255,255,255,.85);font-size:13px;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s;letter-spacing:.1px}
.ntab:hover{background:rgba(255,255,255,.12);color:#fff}
.ntab.active{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.1)}
.ntab svg{width:16px;height:16px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;opacity:.8}
.ntab.active svg{opacity:1}

.ntab-compose{display:flex;align-items:center;gap:5px;padding:0 12px;color:rgba(255,255,255,.85);font-size:12px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;transition:background .12s}
.ntab-compose:hover{background:rgba(255,255,255,.12);color:#fff}
.ntab-compose.active{color:#fff;border-bottom-color:#ffffffaa;background:rgba(255,255,255,.12)}
.ntab-compose .nx{margin-left:4px;opacity:.65;cursor:pointer;padding:2px 4px;border-radius:3px;font-size:11px;flex-shrink:0;transition:opacity .1s}
.ntab-compose .nx:hover{opacity:1;background:rgba(255,255,255,.25)}

.topnav-right{margin-left:auto;display:flex;align-items:center}
.nav-search{display:flex;align-items:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:20px;margin:0 8px;padding:4px 10px;gap:6px;transition:background .15s}
.nav-search:focus-within{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.nav-search input{background:transparent;border:none;outline:none;color:#fff;font-size:12px;width:150px}
.nav-search input::placeholder{color:rgba(255,255,255,.55)}
.nav-search svg{width:14px;height:14px;stroke:rgba(255,255,255,.7);stroke-width:2;fill:none;flex-shrink:0}
.nav-icon-btn{background:transparent;border:none;color:rgba(255,255,255,.8);cursor:pointer;padding:0 10px;height:100%;display:flex;align-items:center;border-left:1px solid rgba(255,255,255,.1);transition:background .12s}
.nav-icon-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-icon-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.nav-user{display:flex;align-items:center;gap:8px;padding:0 14px;color:rgba(255,255,255,.9);font-size:12px;cursor:pointer;border-left:1px solid rgba(255,255,255,.1);height:100%;transition:background .12s}
.nav-user:hover{background:rgba(255,255,255,.12)}
.uavatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}

/* ── LAYOUT ───────────────────────────────────────────── */
.app-body{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── SIDEBAR ──────────────────────────────────────────── */
.sidebar{width:var(--sb-w);background:var(--sb-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;user-select:none;flex-shrink:0}
.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}
.sb-scroll::-webkit-scrollbar{width:3px}
.sb-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.sb-sec-hdr{display:flex;align-items:center;gap:6px;padding:6px 10px 4px;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;cursor:pointer;margin-top:4px}
.sb-sec-hdr .arrow{font-size:9px;transition:transform .15s;color:var(--text-3)}
.sb-sec-hdr.closed .arrow{transform:rotate(-90deg)}
.sb-sec-hdr .sec-icon{font-size:13px;color:var(--text-3)}
.sb-sec-hdr .sec-right{margin-left:auto}
.sb-sec-hdr .sec-btn{background:transparent;border:none;cursor:pointer;color:var(--text-3);padding:2px 4px;border-radius:3px;font-size:11px;line-height:1}
.sb-sec-hdr .sec-btn:hover{background:var(--border-lt);color:var(--text-2)}
.sb-sec-body.closed{display:none}
/* A folder six levels deep is indented past the sidebar's width and its name
   was cut in half with no way to see the rest.
   Setting overflow-x alone did nothing: each row is a flex box that shrank to
   the sidebar's width instead of overflowing it, so there was never anything
   to scroll. The rows have to be allowed to be wider than the container —
   width:max-content — and the label must not shrink. */
.sb-sec-body{overflow-x:auto;overflow-y:hidden}
.sb-sec-body .sb-item,.sb-sec-body .sb-folder{
  white-space:nowrap;width:max-content;min-width:calc(100% - 12px);flex-shrink:0}
.sb-sec-body .sf-label,.sb-sec-body .si-label{flex-shrink:0;overflow:visible;text-overflow:clip}
/* Every wrapper between the scrolling box and the rows must also be allowed
   to exceed the sidebar, or the rows are boxed in by their own container and
   nothing ever overflows. The tree lives inside #sb-company-tree, which was
   still 100% wide — which is why the scrollbar never appeared. */
.sb-sec-body .sb-folder-children,
.sb-sec-body > div,
#sb-company-tree,#sb-personal-tree{width:max-content;min-width:100%}
.sb-sec-body::-webkit-scrollbar{height:9px}
.sb-sec-body::-webkit-scrollbar-thumb{background:#b8b8b8;border-radius:4px}
.sb-sec-body::-webkit-scrollbar-thumb:hover{background:#9a9a9a}
.sb-sec-body::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}

.sb-item{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;font-size:13px;color:var(--text-2);cursor:pointer;border-radius:6px;margin:1px 6px;transition:background .1s}
.sb-item:hover{background:var(--sb-hover)}
.sb-item.active{background:var(--sb-sel);color:var(--brand);font-weight:600}
.sb-item .si-icon{width:16px;text-align:center;flex-shrink:0;font-size:15px;opacity:.7}
.sb-item.active .si-icon{opacity:1}
.sb-item .si-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-item .si-count{background:var(--brand);color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 6px;line-height:14px;flex-shrink:0}
.sb-item .si-count.alarm{background:var(--orange)}

.sb-folder{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 16px;font-size:12px;color:var(--text-2);cursor:pointer;border-radius:6px;margin:1px 6px;transition:background .1s}
.sb-folder:hover{background:var(--sb-hover)}
.sb-folder.active{background:var(--sb-sel);color:var(--brand);font-weight:600}
.sb-folder .sf-toggle{width:10px;font-size:9px;color:var(--text-3);flex-shrink:0}
.sb-folder .sf-icon{font-size:13px;color:#e8a000;flex-shrink:0}
.sb-folder .sf-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-folder-children{margin-left:8px}

/* ── MAIN ─────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ── TOOLBAR ──────────────────────────────────────────── */
.toolbar{background:var(--tb-bg);border-bottom:1px solid var(--tb-border);display:flex;align-items:center;padding:4px 8px;gap:2px;flex-shrink:0;min-height:40px;flex-wrap:wrap}
.tbtn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:500;color:var(--text-2);background:transparent;border:1px solid transparent;border-radius:var(--r);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.tbtn:hover{background:var(--surface-3);border-color:var(--border)}
.tbtn:active{background:#e8e8e8}
.tbtn:disabled{opacity:.35;cursor:default;pointer-events:none}
.tbtn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;flex-shrink:0;opacity:.75}
.tbtn.primary{background:var(--brand);color:#fff;border-color:var(--brand-dk)}
.tbtn.primary svg{opacity:.9}
.tbtn.primary:hover{background:var(--brand-dk)}
.tsep{width:1px;height:18px;background:var(--border);margin:0 4px;flex-shrink:0}
.tright{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-3)}

/* ── EMAIL LIST ───────────────────────────────────────── */
.list-pane{display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.lcols{display:grid;grid-template-columns:56px 116px 150px 1fr 28px 96px 26px 52px 116px 34px;background:var(--list-head);border-bottom:1px solid var(--border);user-select:none;flex-shrink:0}
.lcol{padding:5px 7px;font-size:11px;font-weight:600;color:var(--text-3);border-right:1px solid var(--row-border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:3px;letter-spacing:.2px}
.lcol:hover{background:#ebebeb;color:var(--text-2)}
.lcol .sarr{font-size:8px;color:var(--text-3)}
.lcol.sorted .sarr{color:var(--brand)}

.email-rows{overflow-y:auto;flex:1}
.email-rows::-webkit-scrollbar{width:6px}
.email-rows::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:3px}
.ec-attach{display:flex;align-items:center;justify-content:center;font-size:13px}
.erow{display:grid;grid-template-columns:56px 116px 150px 1fr 28px 96px 26px 52px 116px 34px;min-height:44px;border-bottom:1px solid var(--row-border);cursor:pointer;background:var(--list-read);transition:background .08s}
.erow.unread{background:var(--list-unread)}
.erow:hover{background:var(--list-hover)}
.erow.selected{background:var(--list-sel)!important}
.ecell{padding:3px 7px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:3px;border-right:1px solid var(--row-border)}
.ec-icons{justify-content:center;gap:4px}
.ri{font-size:13px;color:#bbb;line-height:1;flex-shrink:0;cursor:pointer;transition:color .1s}
.ri:hover{color:#888}
.ri.star.on{color:#f0a000}
.ri.flag.on{color:#c42b1c}
.ri.attach{color:#888}
.ri.classify{font-size:11px;font-weight:700;color:var(--text-3);background:var(--surface-3);border-radius:3px;padding:1px 4px;font-family:var(--font)}
.ec-from{font-size:12px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erow:not(.unread) .ec-from{font-weight:400;color:var(--text-2)}
.ec-body{flex-direction:column;gap:1px;align-items:flex-start;padding-top:4px;padding-bottom:4px;overflow:hidden}
.eb-addr{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.eb-subj{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.erow:not(.unread) .eb-subj{color:var(--text-2);font-weight:400}
.erow.unread .eb-subj{font-weight:600}
.eb-snip{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.ec-recv{font-size:11px;color:var(--text-3);justify-content:flex-end}
.ec-size{font-size:11px;color:var(--text-3);justify-content:flex-end}
.ec-telix{font-size:10px;color:var(--brand);font-weight:500;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-content:flex-end}
.empty-list{padding:32px;text-align:center;color:var(--text-3);font-size:13px}

/* ── DETAIL PANE ──────────────────────────────────────── */
.detail-pane{background:var(--surface);border-top:2px solid var(--brand-lt);display:flex;flex-direction:column;overflow:hidden}
.detail-top-bar{padding:12px 16px 10px;border-bottom:1px solid var(--border-lt);background:var(--surface);display:flex;align-items:flex-start;gap:12px;flex-shrink:0}
.detail-avatar{width:38px;height:38px;border-radius:50%;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;margin-top:1px}
.detail-header-info{flex:1;min-width:0}
.detail-subject{font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px;line-height:1.3}
.detail-meta-row{display:flex;align-items:flex-start;gap:6px;font-size:12px;margin-bottom:2px}
.dm-label{color:var(--text-3);font-weight:600;flex-shrink:0;min-width:30px}
.detail-chips{display:flex;flex-wrap:wrap;gap:4px}
.dchip{background:var(--surface-3);border:1px solid var(--border);border-radius:20px;padding:2px 10px;font-size:11px;color:var(--text-2)}
.detail-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.dh-actions{display:flex;gap:2px}
.telix-badge{background:var(--brand-lt);color:var(--brand);border-radius:4px;padding:2px 7px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.detail-toolbar{background:var(--tb-bg);border-bottom:1px solid var(--tb-border);padding:4px 8px;display:flex;align-items:center;gap:2px;flex-shrink:0;flex-wrap:wrap}
.detail-body{flex:1;overflow-y:auto;padding:16px 20px;font-size:13px;line-height:1.7;color:var(--text)}
.detail-body pre{white-space:pre-wrap;font-family:var(--font);font-size:13px}
.detail-body img{max-width:100%;border-radius:var(--r)}
.detail-body::-webkit-scrollbar{width:5px}
.detail-body::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:3px}
.detail-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-3);gap:10px}
.detail-placeholder .ph-icon{font-size:40px;opacity:.15}
.detail-placeholder span{font-size:13px;opacity:.5}

/* ── COMPOSE ──────────────────────────────────────────── */
.compose-pane{flex:1;display:flex;flex-direction:column;background:var(--surface);overflow:hidden}
.compose-toolbar{background:var(--tb-bg);border-bottom:1px solid var(--tb-border);display:flex;align-items:center;padding:4px 8px;gap:2px;flex-shrink:0;flex-wrap:wrap}
.compose-fields{border-bottom:1px solid var(--border);flex-shrink:0}
.cf-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border-lt);min-height:32px}
.cf-row:last-child{border-bottom:none}
.cf-lbl{width:58px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--text-3);background:var(--surface-2);border-right:1px solid var(--border-lt);flex-shrink:0;display:flex;align-items:center}
.cf-field{flex:1;display:flex;align-items:center;min-height:32px}
.cf-field input{flex:1;border:none;outline:none;padding:6px 10px;font-size:13px;color:var(--text);background:transparent}
.cf-tags{flex:1;display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px;align-items:center;min-height:32px}
.cf-tag{display:inline-flex;align-items:center;gap:5px;background:var(--brand);color:#fff;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:500}
.cf-tag .tcount{background:rgba(255,255,255,.25);border-radius:10px;padding:0 6px;font-size:10px;font-weight:700}
.cf-tag .tremove{cursor:pointer;opacity:.7;font-size:12px;margin-left:2px;transition:opacity .1s}
.cf-tag .tremove:hover{opacity:1}
.cf-tag.email{background:var(--surface-3);color:var(--text);border:1px solid var(--border)}
.cf-tag.email .tremove{color:var(--text-3)}
.cf-hint{padding:6px 10px;font-size:12px;color:var(--text-3)}
.cf-action{padding:4px 10px;font-size:11px;color:var(--brand);cursor:pointer;border-left:1px solid var(--border-lt);display:flex;align-items:center;gap:3px;flex-shrink:0;white-space:nowrap;transition:background .1s}
.cf-action:hover{background:var(--brand-lt)}
.drop-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;background:var(--surface-2);border-bottom:1px solid var(--border-lt);font-size:12px;color:var(--text-3);flex-shrink:0}
.rte-bar{background:var(--surface-2);border-bottom:1px solid var(--border-lt);padding:4px 8px;display:flex;align-items:center;gap:1px;flex-wrap:wrap;flex-shrink:0}
.rb{background:transparent;border:1px solid transparent;border-radius:3px;padding:3px 6px;font-size:12px;cursor:pointer;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;min-width:24px;transition:background .1s}
.rb:hover{background:var(--surface-3);border-color:var(--border)}
.rb.bold{font-weight:700}
.rb.italic{font-style:italic}
.rb.under{text-decoration:underline}
.rsel{font-size:12px;border:1px solid var(--border);border-radius:3px;background:var(--surface);padding:2px 5px;height:22px;color:var(--text-2)}
.rsep{width:1px;height:16px;background:var(--border);margin:0 3px}
/* flex:1 alone let the body grow past the pane, so long messages had no
   scrollbar and the wheel did nothing — only the caret could move. */
.compose-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;border:none;outline:none;resize:none;
  padding:14px 18px;font-size:13px;font-family:'Segoe UI',Arial,sans-serif;line-height:1.7;
  color:var(--text);background:var(--surface)}

/* ── ADDRESS TAB ──────────────────────────────────────── */
.addr-page{flex:1;display:flex;flex-direction:column;overflow:hidden}
.addr-body{flex:1;display:flex;overflow:hidden}
.addr-list{width:400px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.addr-list-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text-2)}
.addr-list-hdr select{font-size:12px;border:1px solid var(--border);border-radius:var(--r);padding:2px 6px;background:var(--surface)}
.addr-search{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.addr-search input{flex:1;font-size:12px;border:1.5px solid var(--border);border-radius:20px;padding:4px 10px;outline:none;transition:border-color .15s;background:var(--surface)}
.addr-search input:focus{border-color:var(--brand)}
.addr-cols{display:grid;grid-template-columns:80px 1fr 96px 88px;background:var(--list-head);border-bottom:1px solid var(--border);padding:5px 10px;font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.3px;text-transform:uppercase}
.addr-rows{flex:1;overflow-y:auto}
.addr-row{display:grid;grid-template-columns:80px 1fr 96px 88px;padding:7px 10px;border-bottom:1px solid var(--row-border);font-size:12px;cursor:pointer;align-items:center;transition:background .08s}
.addr-row:hover{background:var(--list-hover)}
.addr-row.selected{background:var(--list-sel);font-weight:500}
.addr-row>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-detail{flex:1;overflow:auto;display:flex;flex-direction:column}
.addr-detail-hdr{padding:16px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;gap:14px}
.addr-avatar{width:46px;height:46px;border-radius:var(--r-lg);background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.addr-detail-name{font-size:15px;font-weight:600;color:var(--text)}
.addr-detail-code{font-size:12px;color:var(--text-3);margin-top:2px}
.addr-detail-body{padding:14px 18px}
.addr-detail-table{width:100%;border-collapse:collapse;font-size:12px}
.addr-detail-table td{padding:6px 10px;border-bottom:1px solid var(--border-lt)}
.addr-detail-table td:first-child{font-weight:600;color:var(--text-3);width:120px;background:var(--surface-2)}
.addr-updated{font-size:11px;color:var(--text-3);padding:8px 18px;text-align:right;border-top:1px solid var(--border-lt)}

/* ── CIRCULAR TAB ─────────────────────────────────────── */
.circ-page{flex:1;display:flex;flex-direction:column;overflow:hidden}
.circ-body{flex:1;display:flex;overflow:hidden}
.circ-list{width:250px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.circ-list-hdr{display:flex;align-items:center;padding:7px 10px;background:var(--surface-2);border-bottom:1px solid var(--border);gap:6px}
.circ-list-hdr select{flex:1;font-size:12px;border:1px solid var(--border);border-radius:var(--r);padding:3px 6px;background:var(--surface)}
.circ-list-hdr .circ-count{font-size:11px;color:var(--text-3);white-space:nowrap}
.circ-search{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.circ-search input{flex:1;border:1.5px solid var(--border);border-radius:20px;padding:4px 10px;font-size:12px;outline:none;background:var(--surface);transition:border-color .15s}
.circ-search input:focus{border-color:var(--brand)}
.circ-items{flex:1;overflow-y:auto}
.circ-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--row-border);cursor:pointer;font-size:13px;transition:background .08s}
.circ-item:hover{background:var(--list-hover)}
.circ-item.selected{background:var(--list-sel);font-weight:500}
.circ-item .ci-handle{color:var(--text-3);font-size:14px;flex-shrink:0}
.circ-item .ci-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circ-detail{flex:1;display:flex;flex-direction:column;overflow:hidden}
.circ-detail-hdr{display:grid;grid-template-columns:1fr 140px 110px 28px;background:var(--list-head);border-bottom:1px solid var(--border);padding:5px 10px;font-size:11px;font-weight:700;color:var(--text-3);flex-shrink:0;letter-spacing:.3px;text-transform:uppercase}
.circ-detail-search{padding:6px 10px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-shrink:0}
.circ-detail-search input{width:100%;font-size:12px;border:1.5px solid var(--border);border-radius:20px;padding:4px 10px;outline:none;background:var(--surface);transition:border-color .15s}
.circ-detail-search input:focus{border-color:var(--brand)}
.circ-members{flex:1;overflow-y:auto}
.circ-member{display:grid;grid-template-columns:1fr 140px 110px 28px;padding:7px 10px;border-bottom:1px solid var(--row-border);font-size:12px;cursor:pointer;transition:background .08s}
.circ-member:hover{background:var(--list-hover)}
.circ-member>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circ-member .cm-addr,.circ-member .cm-country{color:var(--text-3)}
.circ-member .cm-icon{text-align:center;color:var(--brand);font-size:12px}

/* ── TOOLS ────────────────────────────────────────────── */
.tools-page{flex:1;display:flex;overflow:hidden}
.tools-sb{width:160px;flex-shrink:0;background:var(--surface-2);border-right:1px solid var(--border);overflow-y:auto;padding:8px 0}
.tools-sb-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;color:var(--text-2);cursor:pointer;border-radius:6px;margin:1px 6px;transition:background .1s}
.tools-sb-item:hover{background:var(--sb-hover)}
.tools-sb-item.active{background:var(--brand-lt);color:var(--brand);font-weight:600}
.tools-sb-item svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;opacity:.7;flex-shrink:0}
.tools-sb-item.active svg{opacity:1}
.tools-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tool-panel{flex:1;overflow:auto;display:none}
.tool-panel.active{display:block}
.tool-title{font-size:13px;font-weight:600;color:var(--text-2);padding:10px 16px;background:var(--tb-bg);border-bottom:1px solid var(--tb-border)}

/* Viewer */
.viewer-wrap{display:flex;gap:16px;padding:16px;flex-wrap:wrap}
.vbox{flex:1;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm)}
.vbox h4{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--border-lt)}
.vrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px}
.vrow label{flex:1;color:var(--text)}
.radio-g{display:flex;gap:14px;font-size:12px}
.radio-g label{display:flex;align-items:center;gap:5px;cursor:pointer}
.radio-v{display:flex;flex-direction:column;gap:6px;font-size:12px}
.radio-v label{display:flex;align-items:center;gap:5px;cursor:pointer}
.vstg label{font-size:12px;color:var(--text);display:flex;align-items:center;gap:6px;cursor:pointer;margin-bottom:6px}
.vsel{font-size:12px;border:1px solid var(--border);border-radius:var(--r);padding:3px 7px;background:var(--surface);color:var(--text-2)}

/* Rules */
.rules-body{flex:1;display:flex;overflow:hidden}
.rules-list{width:280px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.rules-list-hdr{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.rules-list-hdr select{flex:1;font-size:12px;border:1px solid var(--border);border-radius:var(--r);padding:3px 6px;background:var(--surface)}
.rules-list-hdr .rc{font-size:11px;color:var(--text-3);white-space:nowrap}
.rules-search{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.rules-search input{flex:1;font-size:12px;border:1.5px solid var(--border);border-radius:20px;padding:4px 10px;outline:none;transition:border-color .15s}
.rules-search input:focus{border-color:var(--brand)}
.rules-items{flex:1;overflow-y:auto}
.rules-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--row-border);cursor:pointer;font-size:12px;transition:background .08s}
.rules-item:hover{background:var(--list-hover)}
.rules-item.selected{background:var(--list-sel);font-weight:500}
.rules-item .ri-icon{font-size:14px;color:var(--brand);flex-shrink:0}
.rules-item .ri-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rules-item .ri-date{font-size:11px;color:var(--text-3);flex-shrink:0}
.rules-detail{flex:1;overflow:auto;padding:16px;background:var(--surface-2)}
.rule-name-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.rule-name-row input{flex:1;font-size:14px;font-weight:600;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r);outline:none;background:var(--surface)}
.rule-name-row input:focus{border-color:var(--brand)}
.rule-active{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.rule-if-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:14px}
.rule-if-row select{font-size:12px;padding:4px 8px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.rule-section{margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.rule-section h4{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.rule-section-body{padding:10px}
.rule-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.rule-row select,.rule-row input[type=text]{font-size:12px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);outline:none}
.rule-row select:focus,.rule-row input[type=text]:focus{border-color:var(--brand)}
.rule-row input[type=text]{flex:1}
.rule-add-btn{font-size:12px;color:var(--brand);background:transparent;border:1.5px dashed var(--brand);border-radius:var(--r);padding:4px 10px;cursor:pointer;margin-top:4px;transition:background .1s}
.rule-add-btn:hover{background:var(--brand-lt)}
.rule-no-more{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:10px;color:var(--text-2)}
.rule-del-btn{background:transparent;border:none;color:var(--text-3);cursor:pointer;font-size:16px;padding:0 3px;transition:color .1s}
.rule-del-btn:hover{color:var(--red)}

/* Folders */
.folders-body{padding:16px;display:flex;gap:16px;overflow:auto;flex-wrap:wrap}
.ftree-box{flex:1;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-sm)}
.ftree-box h4{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border-lt)}
.ftree-item{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:var(--r);cursor:pointer;font-size:12px;color:var(--text-2);transition:background .08s}
.ftree-item:hover{background:var(--list-hover)}
.ftree-item.selected{background:var(--list-sel);color:var(--brand);font-weight:500}
.ftree-children{margin-left:14px}

/* Signatures */
.sigs-body{padding:16px;display:flex;gap:16px;overflow:auto;flex-wrap:wrap}
.sig-list-box{width:220px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.sig-list-box h4{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.sig-list-items{overflow-y:auto;max-height:300px}
.sig-item{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--row-border);cursor:pointer;font-size:12px;transition:background .08s}
.sig-item:hover{background:var(--list-hover)}
.sig-item.selected{background:var(--list-sel);font-weight:500}
.sig-edit-box{flex:1;min-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm)}

/* Notif settings, prefs */
.notif-settings{padding:16px}
.notif-section,.pref-box,.vbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.pref-body{padding:16px;display:flex;gap:16px;flex-wrap:wrap}
.pref-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px}
.pref-row label{flex:1;color:var(--text-2)}

/* ── CALENDAR ─────────────────────────────────────────── */
.cal-page{flex:1;display:flex;flex-direction:column;overflow:hidden}
.cal-body{flex:1;display:flex;overflow:hidden}
.cal-sb{width:160px;flex-shrink:0;border-right:1px solid var(--border);background:var(--sb-bg);padding:10px;overflow:auto}
.cal-mini{margin-bottom:14px}
.cal-mini-nav{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.cal-mini-nav button{background:transparent;border:none;color:var(--brand);cursor:pointer;font-size:14px;padding:0 4px;border-radius:3px;transition:background .1s}
.cal-mini-nav button:hover{background:var(--brand-lt)}
.cal-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal-mini-dn{font-size:10px;color:var(--text-3);font-weight:600;padding:2px 0}
.cal-mini-d{font-size:11px;padding:3px 2px;cursor:pointer;border-radius:4px;line-height:1.4;transition:background .08s}
.cal-mini-d:hover{background:var(--brand-lt)}
.cal-mini-d.today{background:var(--brand);color:#fff;font-weight:600}
.cal-mini-d.other{color:var(--text-3)}
.cal-cals h5{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;margin-top:10px}
.cal-cal-row{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 0;cursor:pointer;color:var(--text-2)}
.cal-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.cal-hdr{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.cal-views{display:flex;gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden}
.cal-view-btn{padding:4px 11px;font-size:12px;border:none;background:var(--surface-2);cursor:pointer;color:var(--text-2);transition:background .1s}
.cal-view-btn:hover{background:#e4e4e4}
.cal-view-btn.active{background:var(--brand);color:#fff}
.cal-nav-btn{border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:4px 10px;cursor:pointer;font-size:14px;color:var(--text-2);transition:background .1s}
.cal-nav-btn:hover{background:var(--surface-3)}
.cal-today-btn{background:var(--brand);color:#fff;border:none;border-radius:var(--r);padding:4px 12px;font-size:12px;cursor:pointer;font-weight:500;transition:background .1s}
.cal-today-btn:hover{background:var(--brand-dk)}
.cal-title{font-size:14px;font-weight:600;flex:1;text-align:center;color:var(--text)}
.cal-grid{flex:1;overflow:auto}
.cal-week{display:grid;grid-template-columns:50px repeat(7,1fr);border:1px solid var(--border);border-radius:0}
.cal-week-head{background:var(--list-head);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px 4px;font-size:11px;font-weight:600;text-align:center;color:var(--text-2)}
.cal-week-head.today-col{background:var(--brand-lt);color:var(--brand)}
.cal-time{font-size:10px;color:var(--text-3);border-right:1px solid var(--border);border-bottom:1px solid var(--row-border);padding:3px 5px;text-align:right;background:var(--surface-2)}
.cal-cell{border-right:1px solid var(--border);border-bottom:1px solid var(--row-border);min-height:40px}
.cal-cell.today-col{background:#fffde8}

/* ── NOTIFICATIONS ────────────────────────────────────── */
.notif-panel{position:absolute;top:calc(var(--nav-h) + 2px);right:4px;width:320px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:300;max-height:440px;display:flex;flex-direction:column;overflow:hidden}
.notif-panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.notif-panel-hdr span{font-size:13px;font-weight:600;color:var(--text)}
.notif-panel-hdr button{background:transparent;border:none;cursor:pointer;font-size:14px;color:var(--text-3);padding:2px 5px;border-radius:3px;transition:background .1s}
.notif-panel-hdr button:hover{background:var(--border-lt)}
.notif-panel-items{overflow-y:auto;flex:1}
.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--row-border);cursor:pointer;transition:background .08s}
.notif-item:hover{background:var(--list-hover)}
.notif-item.unread{background:#f0f7ff}
.notif-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.notif-content{flex:1;min-width:0}
.notif-from{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.notif-subj{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-time{font-size:11px;color:var(--text-3);margin-top:2px}
.notif-empty{padding:24px;text-align:center;color:var(--text-3);font-size:13px}

/* ── CONTEXT MENU ─────────────────────────────────────── */
.ctx-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:500;min-width:180px;padding:4px;overflow:visible}
.ctx-item{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12px;color:var(--text-2);cursor:pointer;border-radius:5px;transition:background .08s}
.ctx-item:hover{background:var(--brand-lt);color:var(--brand)}
.ctx-sep{height:1px;background:var(--border-lt);margin:3px 0}
.ctx-item.danger{color:var(--red)}
.ctx-item.danger:hover{background:#fff0ee;color:var(--red)}

/* ── MODAL ────────────────────────────────────────────── */
.modal-ov{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:400;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:380px;max-width:96vw;max-height:90vh;overflow:hidden}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--brand);color:#fff;flex-shrink:0}
.modal-hdr h3{font-size:14px;font-weight:600;letter-spacing:-.1px}
.modal-hdr button{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;font-size:16px;width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:background .1s}
.modal-hdr button:hover{background:rgba(255,255,255,.25)}
.modal-body{padding:18px;overflow-y:auto;flex:1}
.modal-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2);flex-shrink:0}

/* ── BUTTONS ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;font-size:12px;font-weight:500;border-radius:var(--r);cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text-2);transition:background .1s,border-color .1s}
.btn:hover{background:var(--surface-3);border-color:#bbb}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand-dk)}
.btn.primary:hover{background:var(--brand-dk)}
.btn.danger{background:var(--red);color:#fff;border-color:#a82318}
.btn.danger:hover{background:#a82318}
.btn:disabled{opacity:.4;cursor:default;pointer-events:none}

/* form fields */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r);font-size:13px;color:var(--text);outline:none;background:var(--surface);transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(15,108,189,.1)}

/* ── RESIZER ──────────────────────────────────────────── */
.resizer{height:5px;background:var(--border-lt);cursor:row-resize;flex-shrink:0;transition:background .15s}
.resizer:hover,.resizer.dragging{background:var(--brand)}

/* ── TOAST ────────────────────────────────────────────── */
.toast{position:absolute;bottom:20px;right:20px;background:#323130;color:#fff;padding:10px 18px;border-radius:var(--r-lg);font-size:13px;font-weight:500;z-index:600;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1}

/* ── ERR / SUC ────────────────────────────────────────── */
.err{background:#fef0ee;color:var(--red);border-radius:var(--r);padding:8px 12px;font-size:12px;border:1px solid #f9d1cc;display:none}
.suc{background:#f0f9f0;color:var(--green);border-radius:var(--r);padding:8px 12px;font-size:12px;border:1px solid #c3e6c3;display:none}

/* ── SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#b0b0b0}

/* ── Drag & drop folder highlight ── */
.sb-folder.drag-over{background:var(--brand)!important;color:#fff!important;outline:2px dashed #fff;outline-offset:-3px}
.sb-folder.drag-over .sf-icon{color:#fff!important}
.erow[draggable="true"]{cursor:grab}
.erow[draggable="true"]:active{cursor:grabbing}

/* ── Keyboard navigation highlight ── */
.erow.nav-current{box-shadow:inset 3px 0 0 var(--brand)}

/* ── Context menu submenus & shortcut hints ── */
.ctx-key{float:right;font-size:10px;color:var(--text-3);margin-left:16px;font-family:monospace}
.ctx-submenu{position:relative;padding:7px 12px;font-size:13px;color:var(--text);cursor:pointer;border-radius:5px;margin:1px 4px;display:flex;align-items:center;justify-content:space-between}
.ctx-submenu:hover{background:var(--sb-hover)}
.ctx-arrow{font-size:10px;color:var(--text-3)}
.ctx-flyout{display:none;position:absolute;left:100%;top:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);padding:4px;min-width:170px;z-index:9999}
.ctx-flyout .ctx-item{white-space:nowrap}

/* ── Rich-text compose body (contenteditable) ── */
/* A fallback height, so the typing area can never collapse to a single line
   if the flex chain above it fails for any reason. */
.compose-body[contenteditable]{min-height:240px}
/* The pane itself must not scroll — the body inside it does */
.compose-pane{overflow:hidden}

/* The wrapper around the compose panes had no styling, so it sized itself to
   its contents instead of filling the window. The pane inside then had no
   height to share out and the typing area collapsed. display:contents removes
   the wrapper from the layout entirely, so each pane becomes a direct flex
   child of the main area and fills it — and an empty wrapper takes no space. */
#compose-panes{display:contents}
.compose-pane{flex:1 1 auto;min-height:0}
.compose-pane .compose-fields{flex-shrink:0}
.compose-pane .rte-bar{flex-shrink:0}
/* Anything oversized pasted into a message is contained */
.compose-body img{max-width:100%;height:auto}
.compose-body table{max-width:100%}
.compose-body[contenteditable]:empty:before{content:'Write your message…';color:var(--text-3)}
.compose-body table{border-collapse:collapse}
.compose-body td{border:1px solid #ccc;padding:5px}
.rb.active{background:var(--brand-lt);color:var(--brand)}

/* ── View layouts: vertical resizer + grid mode ── */
#split-container[style*="row"] .resizer{height:auto;width:5px;cursor:col-resize}
#split-container.grid-mode .email-rows .erow{font-size:12px}
#split-container.grid-mode .eb-snip{display:none}
#split-container.grid-mode .ec-size,#split-container.grid-mode .ec-telix{display:none}

/* ═══════════ v8.0 MAJOR UPDATE ═══════════ */

/* ── Missing classes fixed ── */
.eb-from{font-size:11px;color:var(--text-3);margin-right:6px}
.tool-section-title{font-size:14px;font-weight:700;padding:14px 16px 6px;color:var(--text)}
.sort-arrow{font-size:9px;color:var(--brand);margin-left:2px}
.att-chip:hover{border-color:var(--brand)!important;box-shadow:0 1px 4px rgba(15,108,189,.2)}
.detail-meta{font-size:11px;color:var(--text-3)}

/* ── First-class polish ── */
body{-webkit-font-smoothing:antialiased}
.erow{transition:background .08s}
.erow:hover{background:var(--list-hover)}
.erow.nav-current{background:var(--list-sel)}
.sb-item,.sb-folder{transition:background .1s,color .1s}
.tbtn{transition:background .12s,border-color .12s,transform .05s}
.tbtn:active{transform:scale(.97)}
.btn{transition:background .12s,transform .05s}
.btn:active{transform:scale(.97)}

/* Row hover quick actions */
.erow .row-actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:2px 4px;box-shadow:var(--shadow-sm)}
.erow{position:relative}
.erow:hover .row-actions{display:flex}
.row-act{border:none;background:none;cursor:pointer;font-size:13px;padding:3px 5px;border-radius:4px;color:var(--text-2)}
.row-act:hover{background:var(--brand-lt);color:var(--brand)}

/* Colored avatars */
.detail-avatar{transition:transform .15s}
.detail-avatar:hover{transform:scale(1.05)}

/* Bulk select */
.ec-check{width:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ec-check input{width:14px;height:14px;cursor:pointer;accent-color:var(--brand)}
.bulk-bar{display:none;align-items:center;gap:8px;padding:6px 14px;background:var(--brand-lt);border-bottom:1px solid var(--border);font-size:12px}
.bulk-bar.show{display:flex}
.bulk-bar .btn{padding:3px 10px;font-size:11px}

/* Status bar */
.status-bar{height:24px;display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--surface-2);border-top:1px solid var(--border);font-size:11px;color:var(--text-3);flex-shrink:0}
.status-bar .sb-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px}

/* Toast upgrade */
.toast{display:flex;align-items:center;gap:8px;font-size:13px;box-shadow:0 4px 18px rgba(0,0,0,.25)}

/* Unread count badges per folder */
.si-count{background:var(--brand);color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 7px;margin-left:auto}
.si-count.alarm{background:var(--red)}

/* Empty & loading states */
.empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 20px;color:var(--text-3);font-size:13px;gap:8px}
.empty-list:before{content:'📭';font-size:34px;opacity:.6}
.loading-list{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text-3);font-size:13px}
.loading-list:before{content:'';width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--brand);border-radius:50%;margin-right:10px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Reading pane header refinement */
.detail-top-bar{background:linear-gradient(to bottom,var(--surface),var(--surface-2))}
.dchip{transition:background .1s}
.dchip:hover{background:var(--brand-lt)}

/* Scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c8cdd4;border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#a8afb8;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ── Flyout submenu fixes (v8.0.1) ── */
.ctx-flyout{margin-left:-2px;max-height:70vh;overflow-y:auto}
.ctx-flyout.flip-left{left:auto;right:100%;margin-left:0;margin-right:-2px}
.ctx-submenu:hover>.ctx-flyout{display:block}

/* ── Advanced search criteria panel (v8.3) ── */
.search-panel{width:238px;flex-shrink:0;background:var(--sb-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.sp-title{padding:11px 14px;font-size:13px;font-weight:700;border-bottom:1px solid var(--border);background:var(--surface)}
.sp-body{flex:1;overflow-y:auto;padding:12px 14px}
.sp-body .field{margin-bottom:11px}
.sp-body .field label{font-size:11px;font-weight:600;color:var(--text-2);display:block;margin-bottom:3px}
.sp-body input[type="text"],.sp-body input[type="date"],.sp-body select{width:100%;padding:5px 8px;font-size:12px;border:1px solid var(--border);border-radius:5px;background:var(--surface)}
.sp-body input:focus,.sp-body select:focus{outline:none;border-color:var(--brand)}
.sp-radios{display:flex;gap:12px}
.sp-radios label{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:400!important;cursor:pointer}
.sp-checks{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.sp-checks label{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:400!important;cursor:pointer}
.sp-checks input,.sp-radios input{width:auto!important;accent-color:var(--brand)}
.sp-actions{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border-lt)}
.sp-actions .btn{flex:1}
mark{background:#ffe873;color:inherit;border-radius:2px;padding:0 1px}

/* ── Search v9.1: history dropdown, chips, mini buttons ── */
.search-history-dd{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);padding:4px;max-height:280px;overflow-y:auto}
.shd-title{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;padding:5px 10px 3px}
.shd-item{padding:6px 10px;font-size:12.5px;border-radius:5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shd-item:hover{background:var(--sb-hover)}
.mini-btn{border:1px solid var(--border);background:var(--surface);border-radius:5px;cursor:pointer;font-size:11px;padding:3px 8px;color:var(--text-2)}
.mini-btn:hover{border-color:var(--red);color:var(--red)}
#compose-panes .search-panel .sp-saved-sel{font-size:12px;padding:4px 6px;border:1px solid var(--border);border-radius:5px;background:var(--surface)}

/* ── Search tab strip (v9.3): horizontal, scrollable, never stacks ── */
#search-nav-tabs{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;max-width:42vw;scrollbar-width:thin}
#search-nav-tabs::-webkit-scrollbar{height:4px}
#search-nav-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:2px}
#search-nav-tabs .ntab-compose{flex:0 0 auto;height:var(--nav-h);min-width:0}
#search-nav-tabs .ntab-compose>span:nth-child(3){min-width:0;max-width:110px}
.sx{margin-left:4px;opacity:.65;cursor:pointer;padding:2px 5px;border-radius:3px;font-size:11px;flex-shrink:0;transition:opacity .1s,background .1s}
.sx:hover{opacity:1;background:rgba(255,255,255,.28)}
.slock{font-size:11px;opacity:.9}

/* ── From: account selector + outbox (v9.4) ── */
.cf-from-sel{width:100%;max-width:420px;padding:4px 8px;font-size:12.5px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text)}
.cf-from-sel:focus{outline:none;border-color:var(--brand)}

/* ═══════════════════════════════════════════════════════════════
   v9.5 — UI/UX polish pass
   Restraint: the the previous system-style blue banner and dense rows stay.
   This pass improves hierarchy, affordances and accessibility.
   ═══════════════════════════════════════════════════════════════ */

/* ── Accessibility floor ── */
:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:3px}
.tbtn:focus-visible,.btn:focus-visible,.sb-item:focus-visible{outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Notifications (replaces browser alert boxes) ── */
#notify-stack{position:fixed;bottom:20px;right:20px;z-index:9000;display:flex;flex-direction:column;gap:8px;max-width:min(400px,calc(100vw - 40px));pointer-events:none}
.notif{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--green);
  border-radius:8px;padding:10px 12px;box-shadow:0 6px 22px rgba(16,24,40,.16);font-size:13px;line-height:1.45;
  opacity:0;transform:translateY(8px) scale(.98);transition:opacity .2s ease,transform .2s ease;pointer-events:auto}
.notif.in{opacity:1;transform:none}
.notif-ico{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;background:var(--green);margin-top:1px}
.notif-msg{flex:1;color:var(--text);word-break:break-word}
.notif-x{border:none;background:none;cursor:pointer;color:var(--text-3);font-size:11px;padding:2px 4px;border-radius:4px;flex-shrink:0}
.notif-x:hover{background:var(--surface-3);color:var(--text)}
.notif-error{border-left-color:var(--red)}   .notif-error .notif-ico{background:var(--red)}
.notif-warning{border-left-color:var(--orange)} .notif-warning .notif-ico{background:var(--orange)}
.notif-info{border-left-color:var(--brand)} .notif-info .notif-ico{background:var(--brand)}

/* ── Confirmation dialog ── */
.confirm-modal{max-width:430px}
.confirm-modal .modal-hdr h3{font-size:15px}
.cfm-msg{font-size:14px;color:var(--text);margin:0 0 6px;line-height:1.5}
.cfm-detail{font-size:12.5px;color:var(--text-2);margin:0;line-height:1.55}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{filter:brightness(.93)}

/* ── Keyboard shortcut reference ── */
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.sc-group h4{margin:0 0 7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3)}
.sc-row{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:12.5px}
.sc-keys{flex:0 0 96px;display:flex;gap:3px;justify-content:flex-end}
.sc-desc{color:var(--text-2)}
kbd{display:inline-block;min-width:19px;text-align:center;font-family:'Segoe UI',system-ui,sans-serif;font-size:11px;
  background:var(--surface-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:2px 5px;color:var(--text);font-weight:600}
@media (max-width:720px){.sc-grid{grid-template-columns:1fr}}

/* ── Row height: compact mode for long lists ── */
body.density-compact .erow{min-height:30px}
body.density-compact .ecell{padding:1px 7px;font-size:11.5px}
body.density-compact .eb-snip{display:none}
body.density-compact .sb-item{padding-top:4px;padding-bottom:4px}
body.density-compact .sb-folder{padding-top:3px;padding-bottom:3px}

/* ── Clearer unread hierarchy (weight + accent, not colour alone) ── */
.erow.unread{background:var(--list-unread)}
.erow.unread .eb-subj{font-weight:700;color:var(--text)}
.erow.unread .ec-from{font-weight:600}
.erow.unread::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.erow.selected{background:var(--list-sel);box-shadow:inset 0 0 0 1px rgba(15,108,189,.25)}
.erow.selected::before{background:var(--brand-dk)}

/* ── Sidebar refinement ── */
.sb-item,.sb-folder{border-radius:5px;margin:1px 5px;padding-left:9px}
.sb-item.active,.sb-folder.active{background:var(--sb-sel);font-weight:600;box-shadow:inset 2px 0 0 var(--brand)}
.sb-hdr{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.55px;color:var(--text-3);padding:12px 14px 4px}

/* ── Reading pane typography (telexes are plain text: keep monospace, improve rhythm) ── */
.detail-body{font-size:13.5px;line-height:1.65;color:var(--text)}
/* A message written elsewhere brings its own layout. The pane sets a
   readable default and then stops interfering: forcing our own alignment and
   sizes onto a broker's table made centred signatures sit hard left and
   fixed-width tables read as though zoomed in. */
.detail-body [align="center"],.detail-body center{text-align:center}
.detail-body [align="right"]{text-align:right}
.detail-body table{max-width:100%;table-layout:auto}
.detail-body table td,.detail-body table th{word-break:normal;overflow-wrap:anywhere}
.detail-body font[size]{font-size:inherit}
.detail-body pre{font-family:'Cascadia Mono',Consolas,'Courier New',monospace;font-size:12.5px;line-height:1.6;margin:0}
.detail-body p{margin:0 0 .8em}
.detail-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.detail-body img{max-width:100%;height:auto}
.detail-body table{max-width:100%}
.detail-subject{font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.1px}

/* ── Toolbars: quieter separators, clearer primary action ── */
.tbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.tbtn.primary:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
.tbtn:disabled{opacity:.4;cursor:not-allowed}
.tbtn-icon{min-width:28px;justify-content:center;font-weight:700;color:var(--text-2)}
.tsep{width:1px;background:var(--border);margin:0 5px;align-self:stretch}

/* ── Context menu labels ── */
.ctx-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);padding:6px 12px 3px}

/* ── Loading: skeleton rows read better than a spinner ── */
.skeleton-rows{padding:0}
.sk-row{height:44px;border-bottom:1px solid var(--row-border);display:flex;align-items:center;gap:12px;padding:0 14px}
.sk-bar{height:9px;border-radius:4px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ── Empty states: an invitation, not a dead end ── */
.empty-list{gap:6px}
.empty-list .el-title{font-size:13.5px;font-weight:600;color:var(--text-2)}
.empty-list .el-hint{font-size:12px;color:var(--text-3);max-width:330px;text-align:center;line-height:1.55}

/* ── Print: give the reading pane the page ── */
@media print{
  .topnav,.sidebar,.toolbar,.lcols,.email-rows,.status-bar,.bulk-bar,#notify-stack,.resizer{display:none!important}
  .detail-pane{height:auto!important;overflow:visible!important;border:none!important}
  body{background:#fff}
}

/* ═══════════════════════════════════════════════════════════════════════
   v10 — "ADMIRALTY"  ·  visual identity for Alma Navigation
   ───────────────────────────────────────────────────────────────────────
   Grounded in Admiralty chart cartography — the visual language brokers
   and mariners already read: chart-ink structure, cool chart-paper
   surfaces, and the magenta overprint reserved (as on real charts) for
   information that demands attention.
   Signature: every row carries a classification stripe, and all data
   (times, sizes, references) is set in tabular monospace so the list
   reads as a scannable spine. Prose is sans; data is mono. Always.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Structure — chart ink */
  --ink:        #16212c;
  --ink-2:      #23384a;
  --hull:       #2e4759;

  /* Primary — chart deep-water teal (deliberately not a stock UI blue) */
  --brand:      #1b6e8f;
  --brand-dk:   #14566f;
  --brand-mid:  #2b87a8;
  --brand-lt:   #e6f1f5;
  --accent:     #1b6e8f;
  --blue:       #1b6e8f;

  /* Overprint — reserved for attention, as on a chart */
  --magenta:    #b32a6e;
  --red:        #b3253c;
  --orange:     #b5762a;
  --green:      #1f7a5a;

  /* Surfaces — cool chart paper */
  --bg:         #eef2f5;
  --surface:    #ffffff;
  --surface-2:  #f6f9fb;
  --surface-3:  #e9eff3;

  /* Navigation */
  --nav-h:      46px;
  --nav-bg:     #16212c;
  --nav-border: #0e1720;

  /* Sidebar */
  --sb-w:       208px;
  --sb-bg:      #f4f7f9;
  --sb-sel:     #e0ecf1;
  --sb-hover:   #eaf1f5;
  --sb-hdr:     #edf2f5;

  /* List */
  --list-head:   #f2f6f8;
  --list-unread: #ffffff;
  --list-read:   #fbfcfd;
  --list-sel:    #e0ecf1;
  --list-hover:  #f3f8fa;
  --row-border:  #e4ebef;
  --list-border: #e4ebef;

  /* Text */
  --text:       #16212c;
  --text-2:     #4a5a68;
  --text-3:     #7d8d99;
  --text2:      #4a5a68;
  --text3:      #7d8d99;
  --text-inv:   #ffffff;

  --border:     #d8e2e8;
  --border-lt:  #e8eef2;

  /* Geometry & depth — flat, precise, chart-like */
  --r:          5px;
  --r-lg:       8px;
  --shadow-sm:  0 1px 2px rgba(22,33,44,.07);
  --shadow-lg:  0 10px 30px rgba(22,33,44,.16);

  /* Type: prose sans, data mono */
  --font:       'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-data:  'Cascadia Mono',Consolas,'SF Mono',Menlo,monospace;

  /* Classification hues — the domain's own colour system */
  --cls-c: #1b6e8f;   /* Chartering        */
  --cls-s: #7a5aa6;   /* Sale & Purchase   */
  --cls-o: #1f7a5a;   /* Operations        */
  --cls-p: #b5762a;   /* Post-fixture      */
  --cls-m: #b32a6e;   /* Internal memo     */
  --cls-d: #5a6b7a;   /* Document          */
}

/* ── Micro-label vernacular: chart legend caps ── */
.lcol,.sb-hdr,.tool-section-title,.sc-group h4,.shd-title,.ctx-label{
  text-transform:uppercase;letter-spacing:.62px;font-weight:700}
.lcol{font-size:9.5px;color:var(--text-3)}

/* ── Navigation: chart-ink bar, underline indicator (no filled white tab) ── */
.topnav{background:var(--nav-bg);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.ntab{color:rgba(255,255,255,.62);font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  border-bottom:2px solid transparent;background:none!important;transition:color .14s,border-color .14s}
.ntab:hover{color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.ntab.active{color:#fff;background:none!important;border-bottom-color:var(--brand-mid)}
.brand-mark{letter-spacing:-.2px;font-weight:700}
.nav-search input{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;
  border-radius:var(--r);font-family:var(--font-data);font-size:11.5px}
.nav-search input::placeholder{color:rgba(255,255,255,.5)}
.nav-search input:focus{background:rgba(255,255,255,.14);border-color:var(--brand-mid);outline:none}
#search-nav-tabs .ntab-compose{color:rgba(255,255,255,.68);border-bottom:2px solid transparent;text-transform:none;letter-spacing:0}
#search-nav-tabs .ntab-compose.active{color:#fff;background:rgba(255,255,255,.07);border-bottom-color:var(--brand-mid)}

/* ── SIGNATURE 1: classification stripe on every row ── */
.erow{position:relative;background:var(--list-read)}
.erow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.erow.unread::before{background:var(--magenta)}
.erow.selected::before{background:var(--brand)}
.erow .ri.classify{font-family:var(--font-data);font-size:10px;font-weight:700;width:15px;height:15px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:3px;color:#fff;background:var(--cls-c)}
.erow .ri.classify[data-cls="S"]{background:var(--cls-s)}
.erow .ri.classify[data-cls="O"]{background:var(--cls-o)}
.erow .ri.classify[data-cls="P"]{background:var(--cls-p)}
.erow .ri.classify[data-cls="M"]{background:var(--cls-m)}
.erow .ri.classify[data-cls="D"]{background:var(--cls-d)}
.erow .ri.classify[data-cls=""]{background:var(--surface-3);color:var(--text-3)}

/* ── SIGNATURE 2: the data spine — all figures tabular monospace ── */
.ec-recv,.ec-size,.ec-telix,.detail-meta time,.sc-keys{font-family:var(--font-data);
  font-variant-numeric:tabular-nums;font-size:11px;color:var(--text-2)}
.ec-telix{color:var(--text-3);letter-spacing:-.2px}
.ec-recv{color:var(--text-2)}

/* ── Rows: quieter hierarchy, decisive unread ── */
.erow:hover{background:var(--list-hover)}
.erow.unread{background:var(--list-unread)}
.erow.unread .eb-subj{font-weight:700}
.erow.selected{background:var(--list-sel);box-shadow:inset 0 0 0 1px rgba(27,110,143,.22)}
.eb-subj{font-size:12.5px}
.eb-from{font-family:var(--font-data);font-size:10.5px;color:var(--text-3)}
.eb-snip{color:var(--text-3);font-size:11.5px}
.lcols{background:var(--list-head);box-shadow:inset 0 -1px 0 var(--border)}

/* ── Sidebar ── */
.sidebar{background:var(--sb-bg);border-right:1px solid var(--border)}
.sb-item{font-size:12.5px;border-radius:var(--r);margin:1px 6px}
.sb-item.active{background:var(--sb-sel);font-weight:600;box-shadow:inset 2px 0 0 var(--brand)}
.si-count{font-family:var(--font-data);font-variant-numeric:tabular-nums;background:var(--brand)}
.si-count.alarm{background:var(--magenta)}
.sb-folder{font-size:12px;border-radius:var(--r);margin:1px 6px}

/* ── Reading pane: a document on the desk, not a panel ── */
.detail-pane{background:var(--surface)}
.detail-top-bar{background:var(--surface);border-bottom:1px solid var(--border-lt);padding:14px 18px}
.detail-avatar{border-radius:7px;font-weight:700;letter-spacing:-.3px}  /* rounded square, not a circle */
.detail-subject{font-size:15.5px;font-weight:700;letter-spacing:-.15px;line-height:1.32}
.detail-meta{font-size:11.5px;color:var(--text-2)}
.dm-label{font-family:var(--font-data);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3)}
.dchip{background:var(--surface-2);border:1px solid var(--border-lt);border-radius:11px;font-size:11.5px;padding:2px 9px}
.dchip:hover{background:var(--brand-lt);border-color:var(--brand-mid)}
.detail-toolbar{background:var(--surface-2);border-bottom:1px solid var(--border-lt)}
.detail-body{padding:18px 22px;max-width:none}

/* ── Controls: flat, precise ── */
.tbtn{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:12px;color:var(--text-2)}
.tbtn:hover{background:var(--surface-2);border-color:var(--brand-mid);color:var(--text)}
.tbtn.primary,.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.tbtn.primary:hover,.btn.primary:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
.btn{border-radius:var(--r);font-size:12.5px}
.toolbar{background:var(--surface);border-bottom:1px solid var(--border)}
input,select,textarea{border-radius:var(--r)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(27,110,143,.12)}

/* ── Status bar reads like an instrument ── */
.status-bar{background:var(--ink);color:rgba(255,255,255,.72);border-top:none;font-family:var(--font-data);font-size:10.5px;letter-spacing:.2px}
.status-bar .sb-dot{background:#3ecf8e}

/* ── Search criteria panel ── */
.search-panel{background:var(--sb-bg)}
.sp-title{background:var(--surface);font-size:11px;text-transform:uppercase;letter-spacing:.62px;color:var(--text-2)}
.sp-body .field label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3)}
mark{background:#ffe9a8;box-shadow:0 0 0 1px #f0d488}

/* ── Compose ── */
.compose-fields{background:var(--surface-2);border-bottom:1px solid var(--border)}
.cf-lbl{font-family:var(--font-data);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3)}
.rte-bar{background:var(--surface-2);border-bottom:1px solid var(--border-lt)}
.rb{border-radius:4px;color:var(--text-2)}
.rb:hover{background:var(--surface-3);color:var(--text)}
.rb.active{background:var(--brand-lt);color:var(--brand)}
.drop-bar{border:1px dashed var(--border);border-radius:var(--r);background:var(--surface-2);
  font-family:var(--font-data);font-size:11px;color:var(--text-3)}

/* ── Menus & dialogs ── */
.ctx-menu,.ctx-flyout{border-radius:var(--r-lg);border-color:var(--border)}
.ctx-item{font-size:12.5px;border-radius:4px}
.ctx-item:hover{background:var(--sb-hover)}
.ctx-key{font-family:var(--font-data);font-size:10px}
.modal{border-radius:var(--r-lg);border:1px solid var(--border)}
.modal-hdr{background:var(--surface-2);border-bottom:1px solid var(--border-lt)}
.modal-hdr h3{font-size:14px;font-weight:700;letter-spacing:-.1px}
kbd{font-family:var(--font-data)}

/* ── Attachment chips: a filed item, not a bubble ── */
.att-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  font-family:var(--font-data);font-size:11px}

/* ── Login screen matches the identity ── */
body.login-page{background:linear-gradient(160deg,#16212c 0%,#23384a 100%)}

/* ── Classification legend (in the Reference dialog) ── */
.cls-legend{margin-top:18px;padding-top:14px;border-top:1px solid var(--border-lt)}
.cls-legend h4{margin:0 0 9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.62px;color:var(--text-3)}
.cls-items{display:grid;grid-template-columns:repeat(3,1fr);gap:7px 14px}
.cls-items span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2)}
.cls-items i{width:17px;height:17px;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-data);font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--cls-c)}
.cls-items i[data-cls="S"]{background:var(--cls-s)}
.cls-items i[data-cls="O"]{background:var(--cls-o)}
.cls-items i[data-cls="P"]{background:var(--cls-p)}
.cls-items i[data-cls="M"]{background:var(--cls-m)}
.cls-items i[data-cls="D"]{background:var(--cls-d)}
.cls-note{margin:11px 0 0;font-size:11.5px;color:var(--text-3);line-height:1.5}
@media (max-width:720px){.cls-items{grid-template-columns:1fr 1fr}}

/* ── Classification list manager (Tools → Classify) ── */
.cl-list{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:9px;background:var(--surface)}
.cl-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.cl-head strong{font-size:11px;text-transform:uppercase;letter-spacing:.55px;color:var(--text-2)}
.cl-count{font-family:var(--font-data);font-size:10px;color:var(--text-3);background:var(--surface-3);border-radius:9px;padding:1px 7px}
.cl-items{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.cl-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:2px 4px 2px 9px;font-size:11.5px}
.cl-chip em{font-family:var(--font-data);font-style:normal;font-size:9.5px;color:var(--text-3)}
.cl-chip button{border:none;background:none;cursor:pointer;color:var(--text-3);font-size:10px;padding:1px 4px;border-radius:8px}
.cl-chip button:hover{background:var(--red);color:#fff}
.cl-empty{font-size:11.5px;color:var(--text-3);font-style:italic}
.cl-add{display:flex;gap:6px}
.cl-add input{flex:1;padding:5px 8px;font-size:12px;border:1px solid var(--border);border-radius:var(--r)}
.cl-add .btn{padding:4px 12px;font-size:11.5px}

/* ── Circular destinations: editable list ── */
.circ-detail-hdr,.circ-member{display:grid;grid-template-columns:18px 1fr 150px 100px 26px 22px;gap:8px;align-items:center}
.circ-detail-hdr{padding:6px 12px;background:var(--list-head);border-bottom:1px solid var(--border);
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.55px;color:var(--text-3)}
.circ-detail-search{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border-lt)}
.circ-detail-search input{flex:1;padding:5px 9px;font-size:12px;border:1px solid var(--border);border-radius:var(--r)}
.circ-member{padding:4px 12px;border-bottom:1px solid var(--row-border);font-size:12px}
.circ-member:hover{background:var(--list-hover)}
.circ-member .cm-email{font-family:var(--font-data);font-size:11.5px;cursor:text;overflow:hidden;text-overflow:ellipsis}
.circ-member .cm-addr,.circ-member .cm-country{cursor:text;color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.circ-member [data-edit]:hover{background:var(--brand-lt);border-radius:3px}
.circ-member .cm-icon{text-align:center;color:var(--text-3);font-size:12px}
.circ-member .cm-check{width:13px;height:13px;accent-color:var(--brand);cursor:pointer}
.cm-del{border:none;background:none;cursor:pointer;color:var(--text-3);font-size:11px;padding:2px 4px;border-radius:3px;opacity:0}
.circ-member:hover .cm-del{opacity:1}
.cm-del:hover{background:var(--red);color:#fff}
.cm-toolbar{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border-lt);background:var(--surface-2);flex-wrap:wrap}
.cm-toolbar .btn{padding:4px 11px;font-size:11.5px}

/* ── Circular recipient viewer (double-click a BCC chip) ── */
.crx-tools{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.crx-tools input{flex:1;padding:5px 9px;font-size:12px;border:1px solid var(--border);border-radius:var(--r)}
.crx-tools .btn{padding:4px 11px;font-size:11.5px}
.crx-count{font-family:var(--font-data);font-size:10.5px;color:var(--text-3);white-space:nowrap}
.crx-list{max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r)}
.crx-row{display:grid;grid-template-columns:20px 1fr 150px 90px;gap:8px;align-items:center;
  padding:5px 10px;border-bottom:1px solid var(--row-border);font-size:12px;cursor:pointer}
.crx-row:last-child{border-bottom:none}
.crx-row:hover{background:var(--list-hover)}
.crx-row input{width:13px;height:13px;accent-color:var(--brand);cursor:pointer}
.crx-mail{font-family:var(--font-data);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.crx-name,.crx-country{color:var(--text-2);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.crx-row.off .crx-mail,.crx-row.off .crx-name,.crx-row.off .crx-country{color:var(--text-3);text-decoration:line-through}
.crx-row.off{background:var(--surface-2)}

/* Chip carrying exclusions: bronze edge + struck counter */
.cf-tag.has-excluded{border-color:var(--orange);box-shadow:inset 2px 0 0 var(--orange)}
.cf-tag .tcount s{color:var(--orange);font-style:normal;text-decoration:none;font-size:9.5px;margin-left:2px}

/* ── Address import dialog ── */
.imp-card{border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:11px;background:var(--surface-2)}
.imp-head{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.imp-head strong{font-size:12.5px}
.imp-badge{font-family:var(--font-data);font-size:10px;background:var(--brand-lt);color:var(--brand);border-radius:9px;padding:2px 8px}
.imp-note{font-size:11.5px;color:var(--text-2);line-height:1.55;margin:0 0 9px}
.imp-sample{font-size:10.5px;margin-bottom:9px;line-height:1.9}
.imp-sample code{background:var(--surface-3);border-radius:3px;padding:1px 5px;font-family:var(--font-data);font-size:10px}
.imp-opt{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);margin-bottom:9px}
.imp-card textarea{width:100%;font-family:var(--font-data);font-size:11px;padding:7px;
  border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;resize:vertical}
.imp-card .btn{padding:5px 13px;font-size:12px}

/* ── Recipient type-ahead ── */
.ac-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:4px;max-height:300px;overflow-y:auto}
.ac-item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:6px 10px;border-radius:5px;cursor:pointer;font-size:12.5px}
.ac-item:hover,.ac-item.on{background:var(--sb-hover)}
.ac-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-mail{font-family:var(--font-data);font-size:10.5px;color:var(--text-3);text-align:right}
.ac-co{grid-column:1/-1;font-size:10.5px;color:var(--text-3)}

/* ── Address book: multiple addresses + the previous system text pages ── */
.ax-block{border-top:1px solid var(--border-lt);padding:11px 14px}
.ax-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.55px;color:var(--text-3);margin-bottom:7px;display:flex;gap:7px;align-items:center}
.ax-count{font-family:var(--font-data);background:var(--surface-3);border-radius:9px;padding:1px 7px;font-size:9.5px}
.ax-emails{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.ax-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:2px 5px 2px 9px;font-family:var(--font-data);font-size:11px}
.ax-chip.primary{border-color:var(--brand);background:var(--brand-lt);color:var(--brand);font-weight:600}
.ax-chip em{font-style:normal;font-size:9.5px;color:var(--text-3);font-family:var(--font)}
.ax-chip button{border:none;background:none;cursor:pointer;color:var(--text-3);font-size:10px;padding:1px 4px;border-radius:8px}
.ax-chip button:hover{background:var(--red);color:#fff}
.ax-add{display:flex;gap:6px}
.ax-add input{flex:1;padding:4px 8px;font-size:11.5px;border:1px solid var(--border);border-radius:var(--r)}
.ax-add .btn{padding:3px 11px;font-size:11.5px}
.ax-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.ax-tab{border:1px solid var(--border);background:var(--surface);border-radius:var(--r) var(--r) 0 0;
  padding:3px 10px;font-size:11px;cursor:pointer;color:var(--text-2)}
.ax-tab.on{background:var(--brand-lt);border-color:var(--brand);color:var(--brand);font-weight:600}
.ax-note{width:100%;min-height:110px;font-family:var(--font-data);font-size:11.5px;line-height:1.5;
  padding:8px;border:1px solid var(--border);border-radius:var(--r);resize:vertical}

/* ── Address book A–Z strip (for a book of thousands) ── */
.addr-letters{display:flex;flex-wrap:wrap;gap:2px;padding:6px 10px;border-bottom:1px solid var(--border-lt);background:var(--surface-2)}
.al-btn{min-width:19px;padding:2px 4px;border:1px solid transparent;background:none;border-radius:3px;
  font-family:var(--font-data);font-size:10.5px;color:var(--text-2);cursor:pointer}
.al-btn:hover{background:var(--surface-3);color:var(--text)}
.al-btn.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.al-btn.empty{opacity:.3;cursor:default}
#addr-rows{overflow-y:auto}

/* ── Address ↔ circular membership ── */
.ax-chip{cursor:pointer}
.ax-chip .ax-lists{font-family:var(--font-data);font-size:9.5px;font-weight:700;background:var(--brand);
  color:#fff;border-radius:8px;padding:1px 5px;margin-left:2px}
.ax-chip.primary .ax-lists{background:var(--brand-dk)}
.ec-list{border:1px solid var(--border);border-radius:var(--r);margin-bottom:14px;max-height:280px;overflow-y:auto}
.ec-row{display:flex;align-items:center;gap:10px;padding:7px 11px;border-bottom:1px solid var(--row-border);font-size:12.5px}
.ec-row:last-child{border-bottom:none}
.ec-name{font-weight:600}
.ec-as{color:var(--text-3);font-size:11.5px;flex:1;overflow:hidden;text-overflow:ellipsis}
.ec-off{padding:2px 9px!important;font-size:11px!important}
.ec-add select{padding:5px 8px;font-size:12px;border:1px solid var(--border);border-radius:var(--r)}

/* ── In-app input dialog (replaces the browser prompt) ── */
.prompt-modal{max-width:440px}
.pmt-note{font-size:12.5px;color:var(--text-2);line-height:1.55;margin:0 0 12px}
.prompt-modal .field{margin-bottom:11px}
.prompt-modal .field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:4px}
.prompt-modal input,.prompt-modal textarea{width:100%;padding:7px 9px;font-size:13px;border:1px solid var(--border);border-radius:var(--r)}
.prompt-modal textarea{font-family:var(--font-data);font-size:12px;resize:vertical}

/* ── Import dialog: drop zone and report ── */
.imp-drop{border:2px dashed var(--border);transition:border-color .15s,background .15s}
.imp-drop.over{border-color:var(--brand);background:var(--brand-lt)}
.imp-drop-hint{font-size:11px;color:var(--text-3);text-align:center;padding:6px;font-family:var(--font-data)}
.imp-drop.over .imp-drop-hint{color:var(--brand);font-weight:600}
.imp-link{background:none;border:none;padding:0;color:var(--brand);text-decoration:underline;cursor:pointer;font-size:inherit;font-family:inherit}
.imp-report{border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:var(--r);
  padding:11px 13px;margin-top:6px;font-size:12.5px;line-height:1.55;background:var(--surface)}
.imp-report.good{border-left-color:var(--green)}
.imp-report.bad{border-left-color:var(--red)}
.imp-report strong{display:block;margin-bottom:6px}
.imp-sum{width:100%;border-collapse:collapse;margin:6px 0}
.imp-sum td{padding:2px 0;font-size:12px}
.imp-sum td:last-child{text-align:right;font-family:var(--font-data);font-weight:600}
.imp-preview{margin:8px 0;font-size:11.5px;color:var(--text-2);max-height:110px;overflow:auto}
.imp-preview em{display:block;color:var(--text-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.imp-preview code{font-family:var(--font-data);font-size:10.5px}
.imp-warn{margin:6px 0 0 16px;padding:0;font-size:11.5px;color:var(--orange)}
.imp-hint{font-size:11.5px;color:var(--text-3);margin:6px 0 0}

/* ── Rule alarms: must be impossible to miss ── */
.alarm-badge{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;
  margin-left:3px;padding:0 4px;border-radius:8px;background:var(--magenta);color:#fff;
  font-family:var(--font-data);font-size:9.5px;font-weight:700}
#alarm-stack{position:fixed;top:56px;right:16px;z-index:9600;display:flex;flex-direction:column;gap:9px;
  width:min(330px,calc(100vw - 32px))}
.alarm-pop{background:var(--surface);border:1px solid var(--magenta);border-left:4px solid var(--magenta);
  border-radius:var(--r-lg);box-shadow:0 10px 30px rgba(179,42,110,.22);padding:11px 13px;
  opacity:0;transform:translateX(14px);transition:opacity .2s,transform .2s}
.alarm-pop.in{opacity:1;transform:none}
.alarm-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--magenta);margin-bottom:4px}
.alarm-subj{font-size:13px;font-weight:600;line-height:1.35;margin-bottom:2px}
.alarm-from{font-family:var(--font-data);font-size:10.5px;color:var(--text-3);margin-bottom:8px}
.alarm-acts{display:flex;gap:6px}
.alarm-acts .btn{padding:3px 11px;font-size:11.5px}
@keyframes alarmPulse{0%,100%{box-shadow:0 0 0 0 rgba(179,42,110,.5)}50%{box-shadow:0 0 0 5px rgba(179,42,110,0)}}
.alarm-badge{animation:alarmPulse 1.8s ease-out infinite}
.ract-newfolder{margin-left:5px;padding:3px 7px;font-size:11.5px;border:1px solid var(--border);border-radius:var(--r)}

/* ── Compose tab strip: the same fix the search strip needed ──
   With no styling the tabs stacked as full-width blocks, so a new message
   or reply showed as a cramped sliver in the banner. */
#compose-nav-tabs{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;max-width:38vw;scrollbar-width:thin}
#compose-nav-tabs::-webkit-scrollbar{height:4px}
#compose-nav-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:2px}
#compose-nav-tabs .ntab-compose{flex:0 0 auto;height:var(--nav-h);min-width:0;max-width:210px;
  color:rgba(255,255,255,.68);border-bottom:2px solid transparent;text-transform:none;letter-spacing:0}
#compose-nav-tabs .ntab-compose.active{color:#fff;background:rgba(255,255,255,.07);border-bottom-color:var(--brand-mid)}
#compose-nav-tabs .ntab-compose>span:not(.nx){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ── Included original in a reply: plain text, not a quote block ── */
.prev-msg{border:0;padding:0;margin:0;color:inherit;font-size:inherit}
.prev-msg .prev-hdr{color:var(--text-2);font-size:12px}
.prev-msg blockquote{border:0;margin:0;padding:0;color:inherit}
/* Anything pasted in with quote styling is normalised too */
.compose-body blockquote,.compose-body .gmail_quote{border-left:0!important;padding-left:0!important;
  margin-left:0!important;color:inherit!important}

/* ── Signature editor ── */
.sig-toolbar{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:5px 7px;
  background:var(--surface-2);border:1px solid var(--border);border-bottom:0;border-radius:var(--r) var(--r) 0 0}
.sig-toolbar .rb-sel{padding:2px 5px;font-size:11.5px;border:1px solid var(--border);border-radius:4px;background:var(--surface)}
.sig-toolbar .rb-color{width:24px;height:22px;padding:0;border:1px solid var(--border);border-radius:4px;background:none;cursor:pointer}
.sig-toolbar .tright{margin-left:auto}
.sig-editor{min-height:190px;max-height:340px;overflow-y:auto;padding:10px 12px;font-family:Arial,sans-serif;font-size:13px;
  line-height:1.5;border:1px solid var(--border);border-radius:0 0 var(--r) var(--r);background:var(--surface)}
.sig-editor:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,110,143,.12)}
.sig-editor img{max-width:100%}
.sig-editor a{color:var(--brand)}
.sig-source{width:100%;border:1px solid var(--border);border-radius:0 0 var(--r) var(--r);padding:9px}
.sig-hint{font-size:11px;color:var(--text-3);margin-top:5px;line-height:1.5}

/* ── Which address a message arrived at (C / O / S) ── */
.ri.via-tag{font-family:var(--font-data);font-size:9.5px;font-weight:700;min-width:15px;height:15px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:3px;padding:0 3px;
  color:#fff;background:var(--hull);letter-spacing:0}
.ri.via-tag[data-via="C"]{background:var(--cls-c)}
.ri.via-tag[data-via="O"]{background:var(--cls-o)}
.ri.via-tag[data-via="S"]{background:var(--cls-s)}
.ri.via-tag[data-via="SP"]{background:var(--cls-s)}

/* The icon column carries both the arrival marker and the classification.
   The grid itself is defined once, further up — it was redefined here with
   nine columns while the rows had eleven cells, and being later in the file
   this won. That is why no amount of adjusting the first definition made the
   headings line up. */
.ec-icons{gap:3px}

/* ── Message reference ── */
.msg-ref{font-family:var(--font-data);font-size:10.5px;color:var(--text-3);letter-spacing:.2px;margin-top:1px}

/* ── The menu behind your name ── */
.nav-user{cursor:pointer;user-select:none}
.nav-user:hover{background:rgba(255,255,255,.1)}
.user-menu{position:fixed;z-index:9700;min-width:212px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:5px;overflow:hidden}
.um-head{padding:8px 11px 9px;border-bottom:1px solid var(--border-lt);margin-bottom:4px}
.um-name{font-size:13px;font-weight:600;color:var(--text)}
.um-sub{font-family:var(--font-data);font-size:10.5px;color:var(--text-3);margin-top:1px}
.um-item{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:7px 11px;font-size:12.5px;color:var(--text);border-radius:var(--r);font-family:inherit}
.um-item:hover{background:var(--sb-hover)}
.um-danger{color:var(--red);font-weight:600}
.um-danger:hover{background:var(--red);color:#fff}
.um-sep{height:1px;background:var(--border-lt);margin:4px 0}

/* ── Sign-in messages ── */
.lerr strong{display:block;font-weight:600}
.lerr .lhint{display:block;margin-top:3px;font-size:11.5px;opacity:.85;font-weight:400}
@keyframes lshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.lerr.shake{animation:lshake .32s ease}
@media (prefers-reduced-motion: reduce){.lerr.shake{animation:none}}

/* ── Signature chooser in the compose header ── */
.cf-siglbl{font-family:var(--font-data);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3)}
.cf-sig-sel{padding:4px 8px;font-size:12.5px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);color:var(--text);max-width:190px}
.cf-sig-sel:focus{outline:none;border-color:var(--brand)}

/* ── Previewing a queued message ── */
.ob-meta{border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;margin-bottom:11px;
  font-size:12.5px;line-height:1.75;background:var(--surface-2)}
.ob-lbl{display:inline-block;width:52px;font-family:var(--font-data);font-size:10px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--text-3)}
.ob-meta code{font-family:var(--font-data);font-size:11.5px}
.ob-body{border:1px solid var(--border-lt);border-radius:var(--r);padding:11px 13px;max-height:320px;
  overflow-y:auto;font-size:13px;line-height:1.6;background:var(--surface)}
.ob-body pre{white-space:pre-wrap;font-family:inherit;margin:0}
.ob-body img{max-width:100%}
.circ-member .cm-email{cursor:text}

/* Arrival marker and classification are different things, so they should not
   look identical: the marker is a solid chip, the classification an outline. */
.ri.classify{background:transparent!important;box-shadow:inset 0 0 0 1px currentColor;color:var(--cls-c)}
.ri.classify[data-cls="S"]{color:var(--cls-s)}
.ri.classify[data-cls="O"]{color:var(--cls-o)}
.ri.classify[data-cls="P"]{color:var(--cls-p)}
.ri.classify[data-cls="M"]{color:var(--cls-m)}
.ri.classify[data-cls="D"]{color:var(--cls-d)}

/* ── Messages waiting to be sent (shown in Drafts) ── */
.erow.pending-row{background:#fffdf5}
.erow.pending-row:hover{background:#fff8e6}
.erow.send-failed{background:#fff5f4}
.pend-subj{font-weight:600}
.pend-timer{margin-left:9px;font-family:var(--font-data);font-size:10.5px;color:var(--orange);
  background:rgba(196,120,32,.1);padding:1px 6px;border-radius:8px;white-space:nowrap}
.pend-err{margin-left:9px;font-family:var(--font-data);font-size:10.5px;color:var(--red);
  background:rgba(179,42,60,.1);padding:1px 6px;border-radius:8px}
.pend-banner{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px;padding:7px 11px;
  border-radius:var(--r);background:rgba(196,120,32,.09);border-left:3px solid var(--orange);font-size:12.5px}
.pend-banner.failed{background:rgba(179,42,60,.08);border-left-color:var(--red)}
.pend-banner.draft{background:var(--surface-2);border-left-color:var(--hull)}
.pend-banner .pb-text{flex:1;min-width:180px}
.pend-banner .pb-btn{padding:3px 11px;font-size:11.5px}
#pb-timer{font-family:var(--font-data)}

/* An alarm you have read stays in the Alarms list until you leave the folder,
   shown as read so it is clear what is still outstanding. */
.erow.alarm-read{opacity:.72}
.erow.alarm-read .ec-subject{font-weight:400}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE ROWS — built for triage
   Two lines: what it is and who sent it, then the terms that decide
   whether it matters. The terms are set in the data face with tabular
   figures, the way a recap or a position list is written.
   ═══════════════════════════════════════════════════════════════ */
.ec-body{padding-top:6px;padding-bottom:6px;gap:2px;min-width:0}
.eb-line1{display:flex;align-items:baseline;gap:8px;width:100%;min-width:0}
.eb-line2{display:flex;align-items:center;gap:7px;width:100%;min-width:0}
.eb-subj{flex:0 1 auto;font-size:12.5px;letter-spacing:-.1px}
.eb-from{flex:0 0 auto;font-family:var(--font-data);font-size:10px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38%}
.eb-snip{flex:1 1 auto;font-size:11.5px;color:var(--text-3);min-width:0}

/* The terms, read out of the message */
.digest{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.dg{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:10px;
  letter-spacing:.2px;padding:1px 5px;border-radius:3px;white-space:nowrap;
  border:1px solid transparent}
.dg-vessel{background:rgba(27,110,143,.10);color:var(--sea,#1B6E8F);border-color:rgba(27,110,143,.22);font-weight:600}
.dg-size  {background:rgba(22,33,44,.06);color:var(--text-2);border-color:rgba(22,33,44,.12)}
.dg-cargo {background:rgba(31,122,90,.10);color:#1f7a5a;border-color:rgba(31,122,90,.2)}
.dg-laycan{background:rgba(196,120,32,.11);color:#8a5313;border-color:rgba(196,120,32,.22)}
.dg-rate  {background:rgba(179,42,110,.09);color:var(--magenta,#B32A6E);border-color:rgba(179,42,110,.2);font-weight:600}
.erow:hover .dg{border-color:rgba(22,33,44,.2)}

/* Compact density: one line only, terms kept, preview dropped —
   the terms are the part worth keeping when space is short. */
body.density-compact .ec-body{padding-top:3px;padding-bottom:3px}
body.density-compact .eb-line2 .eb-snip{display:none}
body.density-compact .eb-from{max-width:30%}

/* ── Quick filters ── */
.qfilters{display:flex;align-items:center;gap:5px;padding:6px 10px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.qf{border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;
  font-family:inherit;font-size:11.5px;padding:3px 10px;border-radius:12px;display:inline-flex;
  align-items:center;gap:5px;transition:background .1s,border-color .1s,color .1s}
.qf:hover{border-color:var(--brand);color:var(--text)}
.qf.on{background:var(--ink,#16212C);border-color:var(--ink,#16212C);color:#fff}
.qf-n{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:10px;opacity:.75}
.qf.on .qf-n{opacity:.9}
.qf-n:empty{display:none}
.qf-spacer{flex:1}
.qf-hint{font-family:var(--font-data);font-size:9.5px;letter-spacing:.6px;color:var(--text-3);
  border:1px solid var(--border-lt);border-radius:3px;padding:1px 6px;cursor:help;white-space:nowrap}
@media (max-width:900px){.qf-hint{display:none}}

/* The row the keyboard is on. This class was already being set as you moved
   with the arrow keys, but had no styling — so keyboard movement was invisible. */
.erow.nav-current{box-shadow:inset 3px 0 0 var(--brand);background:var(--sb-hover)}
.erow.nav-current.selected{box-shadow:inset 3px 0 0 var(--magenta,#B32A6E)}
.erow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* ═══════════════════════════════════════════════════════════════
   READING A MESSAGE
   Chartering mail is half prose, half figures — recaps, position lists
   and laytime calculations are written as aligned columns. Body text
   gets a comfortable measure; anything that looks like tabulated data
   keeps its alignment instead of being reflowed into prose.
   ═══════════════════════════════════════════════════════════════ */
.detail-body{font-size:13.5px;line-height:1.62;color:var(--text)}
.detail-body p{margin:0 0 .7em}
.detail-body > pre,.detail-body pre{font-family:var(--font-data);font-size:12.5px;line-height:1.55;
  font-variant-numeric:tabular-nums;white-space:pre-wrap;margin:0;color:var(--text)}
.detail-body table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.detail-body table td,.detail-body table th{padding:3px 9px}
.detail-body a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:2px}
.detail-body blockquote{border:0;margin:0;padding:0;color:inherit}
/* Long unbroken references and addresses should wrap rather than stretch */
.detail-body{overflow-wrap:anywhere}

/* The reference, set in the data face so it reads as an identifier */
.msg-ref{font-variant-numeric:tabular-nums}

/* Focus is always visible for keyboard use */
.qf:focus-visible,.tbtn:focus-visible,.btn:focus-visible,.sb-item:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .qf,.erow,.dg{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   SELECTIONS — saved views of the mailbox
   ═══════════════════════════════════════════════════════════════ */
.sb-expander{cursor:pointer}
.sb-caret{display:inline-block;width:9px;font-size:9px;color:var(--sb-text-dim,var(--text-3));flex-shrink:0}
.sb-item.sb-sub{padding-left:26px;font-size:12px}
.sb-item.sb-sub .si-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-empty{padding:6px 14px 8px 26px;font-size:11px;line-height:1.5;color:var(--text-3)}
.folder-subtitle{margin-left:9px;font-family:var(--font-data);font-size:10px;letter-spacing:.3px;
  color:var(--text-3);text-transform:none}

/* Setting them up in Tools */
.sel-editor{border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 15px;background:var(--surface-2)}
.sel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sel-grid label,.sel-check{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3)}
.sel-grid input,.sel-grid select{width:100%;margin-top:3px;padding:6px 8px;font-size:13px;font-family:inherit;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text)}
.sel-check{margin-top:11px;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--text);
  display:flex;align-items:center;gap:7px}
.sel-actions{display:flex;gap:7px;margin-top:12px}
.sel-h4{margin:20px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3)}
.sel-list{display:flex;flex-direction:column;gap:6px}
.sel-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--border);
  border-left:3px solid var(--brand);border-radius:var(--r);background:var(--surface)}
.sel-row-main{flex:1;min-width:0}
.sel-row-name{font-size:13px;font-weight:600}
.sel-row-sum{font-family:var(--font-data);font-size:10.5px;color:var(--text-3);margin-top:1px}
.sel-row-acts{display:flex;gap:5px;flex-shrink:0}
.sel-row-acts .btn{padding:3px 10px;font-size:11.5px}
.sel-none{font-size:12.5px;color:var(--text-3);line-height:1.6}

/* ── Search panel ── */
.sp-hint{font-size:11.5px;line-height:1.55;color:var(--text-3);padding:7px 9px;margin-top:2px;
  background:var(--surface-2);border:1px solid var(--border-lt);border-radius:var(--r)}
.search-panel optgroup{font-family:inherit;font-size:11px;color:var(--text-3)}
/* Search results carry the same two-line row as the inbox, so the terms and
   preview read identically wherever a message appears */
#search-results .erow .ec-body,.sres .ec-body{padding-top:6px;padding-bottom:6px}

/* ═══════════════════════════════════════════════════════════════
   ADDRESS BOOK
   A contact card is something you act from, not a page you read and
   retype. The ways people are actually reached today — email,
   WhatsApp, Teams, phone — sit at the top as working links.
   ═══════════════════════════════════════════════════════════════ */

/* List rows */
.addr-row .ar-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.ar-company{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-person{font-size:10.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-where{font-size:11.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-reach{display:flex;align-items:center;gap:8px;min-width:0}
.ar-email{flex:1;font-family:var(--font-data);font-size:11px;color:var(--brand);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-chan{display:inline-flex;gap:3px;flex-shrink:0;opacity:.75;font-size:11px}
.addr-row:hover .ar-chan{opacity:1}

/* The card */
.addr-detail-hdr{display:flex;align-items:center;gap:12px}
.addr-hdr-txt{flex:1;min-width:0}
.addr-detail-sub{font-size:11.5px;color:var(--text-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-code-chip{font-family:var(--font-data);font-size:10px;letter-spacing:.5px;padding:2px 7px;
  border-radius:3px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.addr-edit-btn{padding:3px 12px;font-size:12px}

/* Reach row — the signature of this screen */
.reach-row{display:flex;gap:7px;flex-wrap:wrap;padding:11px 0 3px}
.reach{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;
  font-size:12.5px;font-family:inherit;font-weight:500;cursor:pointer;text-decoration:none;
  border:1px solid var(--border);background:var(--surface);color:var(--text);transition:transform .08s,box-shadow .12s}
.reach:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(22,33,44,.12)}
.reach:active{transform:none}
.reach-ic{font-size:13px;line-height:1}
.reach-mail {border-color:rgba(27,110,143,.35);background:rgba(27,110,143,.07);color:var(--brand)}
.reach-wa   {border-color:rgba(37,211,102,.45);background:rgba(37,211,102,.10);color:#12803f}
.reach-teams{border-color:rgba(98,100,167,.40);background:rgba(98,100,167,.10);color:#4b4d8f}
.reach-call {border-color:var(--border);background:var(--surface-2);color:var(--text-2)}
.reach:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Details */
.ad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 20px;margin-top:6px}
.ad-row{display:flex;gap:10px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--border-lt)}
.ad-lbl{flex:0 0 74px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3)}
.ad-val{flex:1;font-size:12.5px;min-width:0;overflow-wrap:anywhere}
.ad-val.mono{font-family:var(--font-data);font-variant-numeric:tabular-nums}
.ad-val a{color:var(--brand);text-decoration:none}
.ad-val a:hover{text-decoration:underline}
.ad-legacy{margin-top:11px;padding-top:8px;border-top:1px dashed var(--border);font-size:11px;color:var(--text-3)}
.ad-legacy-lbl{text-transform:uppercase;letter-spacing:.5px;font-size:9.5px;margin-right:8px}
.ad-legacy-item{margin-right:12px;font-family:var(--font-data)}
.ad-empty{margin-top:12px;font-size:12.5px;color:var(--text-3);line-height:1.6}

/* The form */
.ec-form{max-height:60vh;overflow-y:auto;padding-right:4px}
.ec-sec{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);
  margin:14px 0 7px;padding-bottom:4px;border-bottom:1px solid var(--border-lt)}
.ec-sec:first-child{margin-top:0}
.ec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ec-grid .field.wide{grid-column:1 / -1}
.ec-grid input.mono{font-family:var(--font-data)}
.field-hint{display:block;font-size:10.5px;color:var(--text-3);margin-top:2px;font-weight:400;text-transform:none;letter-spacing:0}
.ec-legacy{margin-top:14px;font-size:11px;color:var(--text-3);font-style:italic}
@media (max-width:680px){.ec-grid{grid-template-columns:1fr}}

/* Loading further pages of a long list */
.list-loading{padding:14px;text-align:center;font-size:12px;color:var(--text-3)}

/* A message is shown in its own frame, so its styling can never affect the
   program around it. */
.msg-frame{display:block;width:100%;border:0;background:#fff;min-height:200px}
/* The frame grows to the height of the message and this pane scrolls, so there
   is one scrollbar rather than a short box inside a tall pane. */
.detail-body{padding:0 !important;overflow-y:auto;flex:1;min-height:0}
.msg-plain{font-family:var(--font-data);font-size:12.5px;line-height:1.6;white-space:pre-wrap;
  margin:0;padding:14px 18px;color:var(--text);font-variant-numeric:tabular-nums}

/* ── Resizing the columns ── */
.lcol{position:relative}
.col-grip{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:3}
.col-grip:hover{background:var(--brand);opacity:.35}
body.col-resizing{cursor:col-resize;user-select:none}
body.col-resizing *{cursor:col-resize !important}

/* ── Crisper rendering ──
   Text was rendering softly on some displays. Antialiasing hints plus whole-pixel
   borders keep edges sharp, and the interface honours a high-density screen. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.erow,.lcols,.sb-item,.tbtn,.btn{transform:translateZ(0)}
@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
  body{letter-spacing:.005em}
  .erow{border-bottom-width:1px}
}
/* Blind copies, shown where they were recorded */
.detail-bcc{font-size:11.5px;color:var(--text-3);margin-top:2px;font-family:var(--font-data)}
.dchip.bcc{background:var(--surface-2);border-style:dashed}
.dchip.who{background:rgba(27,110,143,.10);border-color:rgba(27,110,143,.3);color:var(--brand);font-weight:600}

/* ── Message headers ── */
.hdr-view{max-height:64vh;overflow-y:auto}
.hdr-summary{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.hdr-row{display:flex;gap:12px;padding:6px 11px;border-bottom:1px solid var(--border-lt);font-size:12.5px}
.hdr-row:last-child{border-bottom:0}
.hdr-k{flex:0 0 108px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);padding-top:2px}
.hdr-v{flex:1;overflow-wrap:anywhere;font-family:var(--font-data)}
.hdr-title{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);margin:0 0 6px}
.hdr-raw{font-family:var(--font-data);font-size:11.5px;line-height:1.5;white-space:pre-wrap;
  overflow-wrap:anywhere;margin:0;padding:11px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r);color:var(--text-2)}
.hdr-none{font-size:12.5px;line-height:1.6;color:var(--text-2)}

/* ═══════════════════════════════════════════════════════════════
   FLAT PASS
   Bevels, gradients and drop shadows removed. Depth now comes from
   hairlines and a small amount of tint — the way a chart separates
   areas with a line and a wash rather than a raised edge.
   Shadow is kept only for things that genuinely float above the page:
   menus, dialogs and toasts.
   ═══════════════════════════════════════════════════════════════ */

/* No gradients anywhere */
.navbar, .nav-bar, .tools-sidebar, .sb-sec-head, .lcols, .detail-header,
.btn, .tbtn, .qf, .modal-head, .login-card, .addr-avatar, .detail-avatar {
  background-image: none !important;
}

/* Flat surfaces: a hairline, never a bevel */
.btn, .tbtn, input, select, textarea, .qf, .dchip, .att-chip, .sel-row,
.hdr-summary, .sel-editor, .ec-body, .card, .panel, .tool-panel {
  box-shadow: none !important;
}
.btn, .tbtn {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  transition: background .1s, border-color .1s, color .1s;
}
.btn:hover, .tbtn:hover { background: var(--surface-3); border-color: var(--ink-3); }
.btn:active, .tbtn:active { background: var(--surface-2); }
.btn.primary, .tbtn.primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn.primary:hover, .tbtn.primary:hover { background: var(--brand-dk); border-color: var(--brand-dk); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff }

/* Inputs: flat, with the accent only on focus */
input, select, textarea {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-lt) !important;
}

/* Navigation: flat ink, current item marked by a rule not a raised tab */
.navbar, .nav-bar { background: var(--nav-bg); border-bottom: 0 }
.nav-item, .nav-tab { border-radius: 0; border: 0; background: transparent; color: rgba(255,255,255,.72) }
.nav-item:hover, .nav-tab:hover { background: rgba(255,255,255,.07); color: #fff }
.nav-item.active, .nav-tab.active {
  background: transparent; color: #fff;
  box-shadow: inset 0 -2px 0 var(--brand-mid) !important;
}

/* The list: rows separated by hairlines, selection by a left rule */
.lcols {
  background: var(--list-head);
  border-bottom: 1px solid var(--border);
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-3);
}
.erow { border-bottom: 1px solid var(--row-border) }
.erow:hover { background: var(--list-hover) }
.erow.selected {
  background: var(--list-sel);
  box-shadow: inset 3px 0 0 var(--brand) !important;
}
.erow.unread .eb-subj { font-weight: 650 }
.erow.unread { background: var(--list-unread) }

/* Sidebar: no pill, a left rule for the current folder */
.sb-item { border-radius: 0; padding-left: 14px }
.sb-item:hover { background: var(--sb-hover) }
.sb-item.active {
  background: var(--sb-sel); color: var(--text); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand) !important;
}
.sb-sec-head {
  background: transparent; border: 0; border-top: 1px solid var(--border-lt);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-3);
}

/* Chips and counts: flat tags, square-ish, set in the data face */
.si-count, .qf-n {
  border-radius: 9px; font-family: var(--font-data); font-weight: 600;
  background: var(--ink-3); color: #fff
}
.sb-item.active .si-count { background: var(--brand) }
.si-count.alarm { background: var(--magenta) }
.dchip, .att-chip {
  border-radius: var(--r-chip); border: 1px solid var(--border);
  background: var(--surface-2); font-size: 11.5px
}
.qf { border-radius: 13px }
.qf.on { background: var(--ink); border-color: var(--ink); color: #fff }

/* The extracted terms — the signature of this screen. Flat tags with a
   hairline, tabular figures, no fill beyond a wash. */
.dg {
  border-radius: var(--r-chip);
  background: transparent;
  border: 1px solid;
  font-weight: 500;
}
.dg-vessel { color: var(--brand);   border-color: rgba(18,101,127,.35);  background: rgba(18,101,127,.05) }
.dg-size   { color: var(--ink-2);   border-color: var(--border);          background: transparent }
.dg-cargo  { color: var(--green);   border-color: rgba(28,107,74,.32);    background: rgba(28,107,74,.05) }
.dg-laycan { color: var(--orange);  border-color: rgba(178,94,18,.32);    background: rgba(178,94,18,.05) }
.dg-rate   { color: var(--magenta); border-color: rgba(168,48,106,.32);   background: rgba(168,48,106,.05); font-weight: 600 }

/* Reading pane: flat header, hairline divider */
.detail-header { background: var(--surface); border-bottom: 1px solid var(--border) }
.detail-toolbar { background: var(--surface-2); border-bottom: 1px solid var(--border-lt) }
.detail-avatar, .addr-avatar { border-radius: var(--r); font-weight: 600; letter-spacing: .5px }
.telix-badge {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  border-radius: var(--r-chip); font-family: var(--font-data); font-size: 10px
}

/* Things that genuinely float keep a soft shadow — everything else does not */
.modal, .modal-box, .ctx-menu, .toast, .notif, .user-menu, .autocomplete, .dropdown-panel {
  box-shadow: 0 6px 24px rgba(15,27,36,.13), 0 1px 2px rgba(15,27,36,.08) !important;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.ctx-item { border-radius: 0 }
.ctx-item:hover { background: var(--sb-hover) }

/* Tables and panels */
.tool-panel, .sel-editor, .hdr-summary, .card {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.tool-title, .sel-h4, .hdr-title, .tool-note {
  letter-spacing: .3px;
}
.tool-title {
  font-size: 15px; font-weight: 650; color: var(--text);
  padding-bottom: 10px; border-bottom: 1px solid var(--border-lt); margin-bottom: 14px;
}

/* Type: a clearer scale, and figures always tabular */
body { font-family: var(--font); color: var(--text); background: var(--bg) }
.eb-subj { letter-spacing: -.15px }
.ec-recv, .ec-size, .ec-telix, .si-count, .dg, .ar-email, .hdr-v, .msg-ref {
  font-variant-numeric: tabular-nums;
}
.dm-label, .ad-lbl, .hdr-k, .qf-hint {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-3);
}

/* Focus is always visible, and it is the accent */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }

/* Reduced motion respected */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important }
}

/* The period a search covered, shown beside the result counts */
.sres-period{margin-left:auto;font-size:11px;color:var(--text-3);font-family:var(--font-data)}
.sp-period-note{display:block;font-size:10.5px;color:var(--text-3);margin-top:3px}
.search-panel .field.wide{grid-column:1 / -1}

/* The address, beside the company name */
.ec-email{font-family:var(--font-data);font-size:11px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.erow:hover .ec-email{color:var(--text-2)}
.erow.selected .ec-email{color:var(--text-2)}

/* ── Right-clicking an address ── */
.ctx-head{padding:7px 12px 4px;font-family:var(--font-data);font-size:11px;color:var(--text-2);
  border-bottom:1px solid var(--border-lt);overflow-wrap:anywhere;max-width:260px}
.ctx-note{padding:4px 12px 6px;font-size:11px;color:var(--green);border-bottom:1px solid var(--border-lt)}
.ea-results{margin-top:8px;max-height:260px;overflow-y:auto;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface)}
.ea-row{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--border-lt);display:flex;
  flex-direction:column;gap:1px}
.ea-row:last-child{border-bottom:0}
.ea-row:hover{background:var(--sb-hover)}
.ea-name{font-size:12.5px;font-weight:600}
.ea-sub{font-size:10.5px;color:var(--text-3)}
.ea-hint{padding:12px;font-size:12px;color:var(--text-3)}
.ec-email{cursor:context-menu}

/* While searching, the criteria panel stands where the folders were */
body.searching .search-panel{border-right:1px solid var(--border)}

/* Search results share the list layout; only the direction marker differs */
.sres-row .ec-check{justify-content:center}
/* Received / sent, at the left of every row and beside the subject (13.49.25):
   the Inbox tray in grey for mail that came in, the Sent paper plane in the
   brand colour for mail that went out — the sidebar's own two icons. */
.sdir{display:inline-flex;align-items:center;flex-shrink:0}
.sdir.out{color:var(--brand)}
.sdir.in{color:var(--text-3)}
.detail-subject .sdir{margin-right:6px;vertical-align:-2px}
.to-pre{color:var(--text-3);font-weight:400;font-size:.92em}

/* ── Files that came with a message ── */
.att-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.att-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:4px 10px;font-size:12px;cursor:pointer}
.att-chip:hover{border-color:var(--brand);background:var(--brand-lt)}
.att-ic{font-size:13px;line-height:1}
.att-name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-size{color:var(--text-3);font-size:11px;font-family:var(--font-data)}
.att-copy{color:var(--brand);font-weight:700;padding:0 2px}
.att-none{font-size:11.5px;color:var(--text-3)}
.att-loading{font-size:11.5px;color:var(--text-3)}
.att-saveall,.att-paste{padding:3px 10px;font-size:11.5px}

/* Offered briefly after sending, so what went out can be checked */
.sent-check{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:9000;
  display:flex;align-items:center;gap:12px;padding:9px 14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);font-size:12.5px;
  box-shadow:0 6px 24px rgba(15,27,36,.13)}
.sent-check .btn{padding:3px 11px;font-size:11.5px}

/* ── Contact notes: one section, and room to read it ── */
.ax-notes-block{display:flex;flex-direction:column;min-height:0}
.ax-notes{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  padding:10px 12px;overflow-y:auto;
  /* Deliberately generous: these hold the memo blocks brought from Telix,
     which are the most useful thing on a contact and were being read
     through a letterbox. */
  min-height:280px;max-height:52vh;font-size:12.5px;line-height:1.6}
.ax-note-part + .ax-note-part{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-lt)}
.ax-note-tab{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-3);margin-bottom:4px}
.ax-note-text{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-data);font-size:12px;line-height:1.6}
.ax-note-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
.ax-note-hint{font-size:11px;color:var(--text-3)}
.addr-match-note{font-size:10px;padding:2px 7px;border-radius:var(--r-chip);
  background:rgba(178,94,18,.1);color:var(--orange);border:1px solid rgba(178,94,18,.25)}

/* Where the searched words appear */
mark{background:#ffe9a8;color:inherit;border-radius:2px;padding:0 1px}
.ax-edit-wrap{max-height:58vh;overflow-y:auto}
.ax-edit-wrap textarea{width:100%;font-family:var(--font-data);font-size:12px;line-height:1.6;
  border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;resize:vertical}
.detail-meta-row .dchip{cursor:context-menu}

/* A folder that could not be read — not the same as an empty one */
.list-error{padding:28px;text-align:center}
.le-title{font-size:14px;font-weight:650;margin-bottom:6px}
.le-msg{font-size:12px;color:var(--red);font-family:var(--font-data);margin-bottom:14px;overflow-wrap:anywhere}

/* Clearing the contact search */
.addr-search-wrap{position:relative;display:flex;align-items:center}
.addr-search-wrap input{width:100%;padding-right:26px}
.addr-search-clear{position:absolute;right:5px;border:0;background:transparent;cursor:pointer;
  color:var(--text-3);font-size:12px;padding:2px 4px;line-height:1;border-radius:3px}
.addr-search-clear:hover{background:var(--surface-3);color:var(--text)}
/* Back to the whole list from one company */
.addr-back{margin-bottom:12px;padding:3px 10px;font-size:11.5px}

/* Finding an address across the circular lists */
.circ-search-wrap{position:relative;display:flex;align-items:center}
.circ-search-wrap input{width:100%;padding-right:26px}
.circ-find-head{padding:8px 11px;font-size:11px;color:var(--text-3);border-bottom:1px solid var(--border-lt)}
.circ-found{display:block !important;padding:8px 11px}
.ci-found-emails{display:flex;flex-direction:column;gap:1px;margin-top:3px;
  font-family:var(--font-data);font-size:11px;color:var(--text-3)}
.ci-more{color:var(--text-3);font-style:italic}

/* ═══════════════════════════════════════════════════════════════════════
   REFINEMENT — 2026
   Set against Telix side by side, the difference was not layout. It was
   that Alma Mail announced itself in three ways Telix does not:
   monospace in the furniture, letter-spaced capitals on every label, and
   five saturated colours competing in each row. Those read as a terminal
   emulator; Telix reads as an application.

   Nothing structural changes below. Same markup, same behaviour.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Monospace belongs in the message, not around it ──
   Figures still line up: tabular-nums gives fixed-width digits in a
   proportional face, which is what the columns actually needed. The
   reading pane keeps a true monospace — a telex is written to a column
   and loses its meaning reflowed. */
:root{
  --font-data: 'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
}
.ec-recv,.ec-size,.ec-telix,.detail-meta time,.sc-keys,
.eb-from,.dg,.qf-n,.si-count,.nav-search input,.status-bar,.dm-label,.cf-lbl{
  font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:0}
.ec-telix{font-size:10.5px;color:var(--text-3)}
.erow .ri.classify{font-family:var(--font)}

/* ── 2. Labels in sentence case ──
   Capitals with tracking were doing the work of a hierarchy that weight
   and colour already provide. */
.lcol,.sb-hdr,.tool-section-title,.sc-group h4,.shd-title,.ctx-label{
  text-transform:none;letter-spacing:0;font-weight:600}
.lcol{font-size:11px;color:var(--text-3)}
.ntab{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500}
.dm-label,.cf-lbl{text-transform:none;letter-spacing:0;font-size:11px;font-weight:600}

/* ── 3. One voice per row ──
   The extracted terms are useful and stay. What goes is five backgrounds,
   five borders and five hues arguing at the same volume: vessel and rate
   are what a broker looks for first, so only those two carry colour, and
   only as text. */
.dg{background:none;border:none;padding:0 1px;font-size:11px;color:var(--text-2);
  letter-spacing:0;font-weight:400}
.digest{gap:9px}
.digest .dg + .dg{border-left:1px solid var(--border);padding-left:9px}
.dg-vessel{color:var(--ink);font-weight:600}
.dg-rate{color:var(--magenta);font-weight:600}
.dg-size,.dg-cargo,.dg-laycan{color:var(--text-2);font-weight:400}
.erow:hover .dg{border-color:var(--border)}

/* ── 4. More of the archive on screen ──
   Telix shows fifteen messages where this showed four. Nearly all of that
   was padding around a two-line row that only needs one line of air. */
.erow{min-height:36px}
.ec-body{padding-top:3px;padding-bottom:3px;gap:1px}
.eb-subj{font-size:12.5px}
.eb-snip{font-size:11.5px}
body.density-compact .erow{min-height:26px}

/* ── 5. Selection you can find without looking ── */
.erow.selected{background:var(--brand-lt);box-shadow:inset 0 0 0 1px rgba(27,110,143,.3)}
.erow.selected::before{background:var(--brand)}

/* ── 6. The footer is a status line, not a console ── */
.status-bar{font-size:11px;letter-spacing:0;color:rgba(255,255,255,.78)}

/* ── 7. Filters read as controls rather than tags ── */
.qf{border-radius:var(--r);font-size:12px;padding:3px 11px}

/* ── 8. Column headings sit down ── */
.lcols{background:var(--surface);border-bottom:1px solid var(--border)}

/* ── The one place monospace still earns its keep ──
   A telex is written to a fixed column: position lists, recaps and
   laytime statements line up only because every character is the same
   width. Changing --font-data above would have reflowed all of them, so
   the message body names its own face rather than borrowing that one. */
:root{ --font-telex:'Cascadia Mono',Consolas,'SF Mono',Menlo,'Courier New',monospace; }
.detail-body > pre,.detail-body pre{font-family:var(--font-telex);font-variant-numeric:tabular-nums}

/* ── Pending restart ──
   A security update has installed but the service is still running the
   library it replaced. Shown to administrators only, since nobody else can
   act on it, and coloured as information rather than alarm — unless the mail
   itself is what needs restarting. */
.restart-banner{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:8px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);
  font-size:12.5px;color:var(--text-2);line-height:1.5}
.restart-banner.mail{background:#fff8e6;border-bottom-color:#e8d9a8;color:#6b5416}
.restart-banner code{font-family:var(--font-telex);font-size:11.5px;background:var(--surface-3);
  padding:2px 7px;border-radius:3px;color:var(--ink)}
.restart-banner .rb-x{border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r);padding:3px 12px;font-size:11.5px;cursor:pointer;color:var(--text-2);white-space:nowrap}
.restart-banner .rb-x:hover{background:var(--surface-3)}

/* ── Who sent it ──
   Initials of the person at this desk who sent the message, between Received
   and Size. Only mail sent from Alma Mail has an author to name; imported
   Telix mail shows nothing rather than a guess. */
.ec-by{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
  color:var(--text-3);letter-spacing:.02em}
.erow:hover .ec-by{color:var(--text-2)}

/* ── Who has read it ──
   In the status bar, on the right. Blank until somebody opens it. */
.sb-viewers{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;
  color:rgba(255,255,255,.72)}
.sb-viewers .vw{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 4px;border-radius:9px;
  background:rgba(255,255,255,.16);font-size:10px;font-weight:700;letter-spacing:.02em}

/* ── A circular that did not fully go ──
   Some batches were rejected. The message is filed either way — most people
   did receive it — but it should not look like a clean send. */
.dchip.more{background:var(--surface-3);border-color:var(--border);color:var(--text-2);font-weight:600}
.dchip.more:hover{background:var(--brand-lt);color:var(--brand)}
.erow .ri.warn{color:var(--orange)}

/* ── The delivery record ──
   What the mail server said, recipient by recipient, under the message —
   the notice Telix writes. A log rather than part of the message, so it is
   set apart and in a fixed-width face where the columns line up. Switched
   on and off in Settings, separately for received and sent. */
.sys-notes{margin:14px 0 0;padding:10px 12px;border-top:1px solid var(--border);
  background:var(--surface-2);font-family:var(--font-telex);font-size:11px;line-height:1.5;
  color:var(--text-2);white-space:pre-wrap;overflow-x:auto;max-height:340px;overflow-y:auto}

/* ── Selections ──
   A bullet against each saved selection, so they read as a list of things
   rather than as indented text under the heading. */
.sb-item.sb-sub .sel-bullet{font-size:7px;color:var(--brand);margin-right:5px;opacity:.75;
  display:inline-flex;align-items:center}
.sb-item.sb-sub.active .sel-bullet{opacity:1}

/* Who sent it, in the list. An icon rather than initials: the column is
   narrow and the name is on hover anyway. */
/* The heading carries the icon; the rows carry initials. */
.lcol.ec-by{justify-content:center}
.lcol.ec-by .by-icon{font-size:12px;opacity:.6}
.ecell.ec-by{justify-content:center;font-size:10px;font-weight:700;color:var(--text-3);letter-spacing:.02em}
.erow:hover .ecell.ec-by{color:var(--text-2)}

/* Alarms now sit in the notifications panel alongside new mail, so each
   group needs naming. */
.notif-group{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--text-3);
  padding:8px 12px 4px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.notif-avatar.alarm{background:var(--orange);color:#fff}

/* An image the reader has chosen not to load. A quiet placeholder rather
   than a broken picture, so the message still reads properly. */
.img-blocked{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:1px dashed var(--border);border-radius:3px;
  font-size:11px;opacity:.5;vertical-align:middle}


/* ── Headings over a scrolling list ──
   The rows scroll inside their own container; the headings sit outside it.
   That makes the rows narrower than the headings by the width of the
   scrollbar, and the gap grows across the row — which is why the reference
   column looked worst and no amount of adjusting the grid helped. The width
   is measured once at startup and reserved here. */
.lcols{padding-right:var(--scrollbar-width,0px)}


/* ── A long list of recipients ──
   A circular goes to fifty brokers. Left to wrap, the addresses push the
   message itself off the screen; capped and scrolled, the header stays a
   header and the whole list is still there. */
.detail-chips{max-height:64px;overflow-y:auto;align-content:flex-start}
.detail-chips::-webkit-scrollbar{width:8px}
.detail-chips::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.detail-chips:hover::-webkit-scrollbar-thumb{background:var(--text-3)}
.detail-meta-row{align-items:flex-start}

/* In the address book — this exact address, not just the same company. */
.known-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#1f9d55;margin-right:6px;vertical-align:middle;flex-shrink:0}
/* A circular went to a list, not to a person. */
.circ-tag{font-size:10px;font-weight:700;letter-spacing:.4px;color:#7a5b00;
  background:#fdf0c8;border:1px solid #e8d089;border-radius:3px;padding:1px 5px}

/* The compose Options panel — under the button, not a window in the middle. */
.opts-pop{position:fixed;z-index:9000;width:340px;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:12px}
.opts-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.opts-lbl{font-size:11px;color:var(--text-2)}
.opts-ctl{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:5px;font-size:12px}
.opts-note{font-size:10px;color:var(--text-3);line-height:1.5;margin-bottom:10px}
.opts-actions{display:flex;justify-content:flex-end;gap:8px}

/* Selected by Ctrl+A in Deleted. Without a checkbox the row has to say so. */
.erow.bulk{background:#eaf3ff;box-shadow:inset 3px 0 0 var(--brand)}

/* The signature, while a message is being written. Shaded so it is obvious
   where your own words end and the signature begins — somebody typing at the
   bottom of a long offer could not see which was which.
   Scoped to the editor, so none of this is sent: the rule lives in the
   stylesheet, never in the message. */
.compose-body [data-alma-sig]{
  background:var(--surface-2,#f5f6f8);
  border-left:3px solid var(--border,#d8dce1);
  border-radius:0 4px 4px 0;
  padding:8px 10px;
  margin-top:4px}
.compose-body [data-alma-sig]::before{
  content:'signature';
  display:block;
  font-size:9px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--text-3,#8b939c);
  margin-bottom:4px;
  user-select:none}
/* Where the message is written: a little room above the signature so there is
   always somewhere to click, even on an empty message. */
.compose-body .write-here{min-height:1.6em}
/* Editable, so a phone number can be dropped for one message. */

/* Opened from the home screen, the page reaches under the notch and the home
   bar. Without this the top row sits behind the clock and the bottom row
   behind the swipe indicator. */
@supports (padding: env(safe-area-inset-top)) {
  .topnav{padding-top:env(safe-area-inset-top)}
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* Recipients as chips. The Bcc field has always looked like this; To and Cc
   now match it, so a reply to six people can have one of them removed with a
   click instead of by editing a line of text. */
.cf-tags.rcpt { display:flex; flex-wrap:wrap; align-items:center; gap:4px;
                flex:1; min-height:26px; padding:2px 4px }
.cf-tags.rcpt .rcpt-input { border:none; outline:none; background:transparent;
                            font-size:12px; flex:1; min-width:120px; color:var(--text) }
.cf-tag .tcode { display:inline-block; margin-right:5px; padding:0 4px;
                 background:var(--brand); color:#fff; border-radius:3px;
                 font-size:9px; letter-spacing:.3px; vertical-align:middle }

/* The "…" holding the sender's signature images, out of the way of the files
   that matter. */
.att-sig-more{background:var(--surface-3);border:1px solid var(--border);border-radius:11px;
  padding:2px 10px;font-size:12px;font-weight:600;letter-spacing:1px;color:var(--text-3);
  cursor:pointer;line-height:1.5}
.att-sig-more:hover{border-color:var(--text-3);color:var(--text-2)}
.att-sig-more.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* display:contents beats the browser's own [hidden] rule, so the box was
   never hidden and the "…" toggled an attribute that changed nothing on
   screen. The second line is what actually closes it. */
.att-sig-box{display:contents}
.att-sig-box[hidden]{display:none}

/* The same circular sent to three departments, folded into one row. */
.eb-copies{display:inline-block;margin-left:8px;background:var(--surface-3);
  border:1px solid var(--border);border-radius:10px;padding:0 7px;
  font-size:11px;font-weight:600;color:var(--text-2);cursor:pointer;vertical-align:1px}
.eb-copies:hover{border-color:var(--text-3);background:var(--brand-lt);color:var(--brand)}
.erow.copies-open .eb-copies{background:var(--brand);border-color:var(--brand);color:#fff}
/* Its copies, opened underneath and clearly subordinate to it. */
.erow-copy{background:var(--surface-2)}
.erow-copy .ec-from{padding-left:22px}
.erow-copy .eb-subj{color:var(--text-2);font-weight:400}
/* A menu item that is there to explain why nothing will happen. */
.ctx-item.disabled{color:var(--text-3);cursor:default}
.ctx-item.disabled:hover{background:none}
.ctx-head{padding:6px 12px;font-size:11px;color:var(--text-3);border-bottom:1px solid var(--border-lt);
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The icons in the column headings, quiet enough to be headings rather than
   buttons. */
.lcol .ai{color:var(--text-3);vertical-align:-2px}
.lcol.ec-attach,.lcol.ec-by{display:flex;align-items:center;justify-content:center}

/* ═══════════════════════════════════════════════════════════════
   THE 2010 PASS
   ═══════════════════════════════════════════════════════════════
   The palette below is the one this program has always used — the teal wash
   of an Admiralty chart, ink, telex paper. None of it is replaced. What dates
   the screen is not the colour but the execution: nine different text sizes
   between 9.5 and 15 pixels, six different corner radii, and a hairline
   around everything because borders were how structure used to be shown.

   So: one scale, one radius, and space doing the work borders used to do.
   Nothing here changes what anything does. Every rule is an override at the
   end of the file, so removing this block returns the program exactly to how
   it looked before.
   ─────────────────────────────────────────────────────────────── */
:root{
  /* Four sizes, each with a job. 11 for things you glance at, 12.5 for
     everything you read, 13.5 for the line that matters in a row, 15 for a
     title. Anything not on this scale is a decision nobody made. */
  --t-meta:11px; --t-ui:12.5px; --t-row:13.5px; --t-title:15px;
  /* One radius, and a pill for counts. */
  --r:6px; --r-pill:20px;
  /* One rhythm: 4, 8, 12, 16. */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
}

/* ── The list ──────────────────────────────────────────────── */
/* Headings are labels, not buttons: they no longer shout in capitals. */
.lcols{font-size:var(--t-meta);letter-spacing:0;text-transform:none;
       background:var(--surface-2);border-bottom:1px solid var(--border)}
.lcol{padding:7px 8px;font-weight:600;color:var(--text-3);border-right:0}
/* The row keeps the height it had. Taller rows would have been prettier and
   would have cost a message a screen, which is the wrong trade in a room
   reading three hundred a day. */
.erow{min-height:44px;border-bottom:1px solid var(--row-border)}
.ecell{padding:6px 8px}
/* The subject is the line being scanned; the preview is context. Weight and
   colour say which is which, so the row needs no separator to be read. */
.eb-subj{font-size:var(--t-row);color:var(--text);letter-spacing:-0.1px}
.erow.unread .eb-subj{font-weight:700}
.eb-snip{font-size:var(--t-ui);color:var(--text-3);line-height:1.45}
.ec-from{font-size:var(--t-ui)}
.erow.unread .ec-from{font-weight:600}
.ec-email{font-size:var(--t-meta);color:var(--text-3)}
.ec-recv,.ec-size,.ec-telix{font-size:var(--t-meta);color:var(--text-3)}
.erow.selected{background:var(--brand-lt);box-shadow:inset 3px 0 0 var(--brand)}

/* ── The sidebar ───────────────────────────────────────────── */
.sb-item{font-size:var(--t-row);padding:6px var(--sp3);border-radius:var(--r);
         gap:10px;color:var(--text-2)}
.sb-item .si-ico{display:inline-flex;align-items:center;justify-content:center;
                 width:18px;color:var(--text-3);flex:none}
.sb-item.active{background:var(--sb-sel);color:var(--brand);font-weight:600;
                box-shadow:inset 2px 0 0 var(--brand)}
.sb-item.active .si-ico{color:var(--brand)}
.sb-item .si-count{font-size:var(--t-meta);border-radius:var(--r-pill);font-weight:600}
/* Junk, NDR and Deleted matter less than the folders above them, and now
   look it. They are one click away, not in the way. */
.sb-item[data-folder="junk"],.sb-item[data-folder="ndr"],.sb-item[data-folder="deleted"]{
  color:var(--text-3)}
.sb-item[data-folder="junk"] .si-ico,.sb-item[data-folder="ndr"] .si-ico,
.sb-item[data-folder="deleted"] .si-ico{opacity:.65}
.sb-section{font-size:var(--t-meta);letter-spacing:.2px;text-transform:none;
            color:var(--text-3);font-weight:600;padding:var(--sp3) var(--sp3) var(--sp1)}

/* ── Buttons and the toolbar ───────────────────────────────── */
/* Every button used to look equally important, which meant none of them did.
   Reply, Forward and Delete are quiet; New Message is the one thing that
   carries colour, because it is the one thing that starts something. */
.btn,.tbtn{font-size:var(--t-ui);border-radius:var(--r);padding:6px 11px;
           border:1px solid var(--border);background:var(--surface);
           color:var(--text-2);font-weight:500;transition:background .1s,border-color .1s}
.btn:hover,.tbtn:hover{background:var(--surface-3);border-color:var(--text-3);color:var(--text)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
.btn.danger{color:var(--red);border-color:var(--border)}
.btn.danger:hover{background:#fdf2f3;border-color:var(--red)}
.btn .ai,.tbtn .ai{color:var(--text-3)}
.btn.primary .ai{color:#fff}
.toolbar{gap:var(--sp1);padding:var(--sp2) var(--sp3);border-bottom:1px solid var(--border-lt)}

/* ── Reading a message ─────────────────────────────────────── */
.detail-subject{font-size:var(--t-title);font-weight:600;letter-spacing:-0.2px;line-height:1.35}
.detail-meta,.detail-meta-row{font-size:var(--t-ui);color:var(--text-2)}
.dm-label{font-size:var(--t-meta);color:var(--text-3);font-weight:500;letter-spacing:0;text-transform:none}
.dchip{font-size:var(--t-ui);border-radius:var(--r);padding:2px 8px;
       background:var(--surface-2);border:1px solid var(--border-lt);color:var(--text-2)}
.att-chip{font-size:var(--t-ui);border-radius:var(--r)}
.att-size{font-size:var(--t-meta);color:var(--text-3)}

/* ── Forms ─────────────────────────────────────────────────── */
input,select,textarea{font-size:var(--t-ui);border-radius:var(--r)}
.field label{font-size:var(--t-meta);color:var(--text-3);letter-spacing:0;text-transform:none}

/* ── Structure without hairlines ───────────────────────────── */
/* A border around every panel is how a program looked when screens were
   small and grey. Space separates these now; the lines that remain are the
   ones that carry meaning. */
.sidebar{border-right:1px solid var(--border);background:var(--surface-2)}
.panel,.card,.sec-body{border-color:var(--border-lt)}
.ctx-menu{border-radius:var(--r);border:1px solid var(--border);
          box-shadow:0 8px 28px rgba(15,27,36,.14)}
.ctx-item{font-size:var(--t-ui);padding:6px 12px}
.ctx-sep{background:var(--border-lt)}

/* ── One line to a message ─────────────────────────────────────
   The row carried the subject on one line and the preview on another, which
   made it two lines tall for one message. They sit on the same line now: the
   subject first, taking what it needs, then the preview in grey filling
   whatever is left. Unread is carried by the weight of the subject alone —
   the preview is context and never competes with it.

   About half the height, so about twice the messages on a screen. */
.ec-body{flex-direction:row;align-items:baseline;gap:10px;
         padding-top:0;padding-bottom:0;min-width:0}
.eb-line1{display:flex;align-items:baseline;gap:8px;width:auto;flex:0 1 auto;
          min-width:0;max-width:58%}
.eb-line2{display:flex;align-items:baseline;gap:7px;flex:1 1 auto;
          width:auto;min-width:0;overflow:hidden}
.eb-subj{flex:0 1 auto;font-size:var(--t-row);font-weight:400;color:var(--text);
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto}
.erow.unread .eb-subj{font-weight:700}
/* Grey, and clearly a second voice — but still a voice. Measured against the
   list's background: #9aa4ad came out at 2.5 to 1, which is decoration
   rather than text. This is 4.8 to 1, the lightest grey a person can still
   read a line of a cargo offer in without leaning towards the screen. */
.eb-snip{flex:1 1 auto;font-size:var(--t-ui);color:var(--text-4,#67717a);
         font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
         width:auto;min-width:0}
.erow.unread .eb-snip{font-weight:400;color:var(--text-4,#67717a)}
.erow{min-height:28px}
.ecell{padding:4px 8px}
.ec-icons{padding-top:5px}
/* The sender keeps its own line-height so the three columns sit level. */
.ec-from,.ec-email,.ec-recv,.ec-size,.ec-telix,.ec-by{align-items:center}


/* ═══════════════════════════════════════════════════════════════
   NIGHT
   ═══════════════════════════════════════════════════════════════
   The same chart read by a different light. Nothing is inverted
   mechanically: the teal is lifted so it still reads as teal against a dark
   ground, the paper becomes deep ink rather than black, and text stops at a
   soft white — pure white on near-black is what makes a screen ache after an
   hour of cargo lists.

   Only the variables change. Every rule in this file is written against them,
   so nothing else in the program needs to know which light it is read in. */
/* Native controls — select arrows, date pickers, scrollbars in inputs — drawn
   for the theme the page is in, not for a light page on a dark screen */
html{color-scheme:light}
/* The message being answered, in a reply written at night: on white with
   dark text, as the reading pane shows it — its own colours were chosen for
   white, and the editor's light text made its unstyled words vanish */
html.theme-dark .compose-body .prev-orig{background:#fff;color:#16212c;border-radius:var(--r);padding:10px 12px}
/* Its Ref/From/To lines are black in the mail sent, as in Telix; in the
   editor at night they take the light text colour, or they vanish (13.49.33) */
html.theme-dark .compose-body .prev-hdr{color:var(--text)!important}
html.theme-dark{color-scheme:dark}
html.theme-dark{
  --ink:#e8edf1; --ink-2:#aab6c0; --ink-3:#7d8a95;
  --text:#e8edf1; --text-2:#aab6c0; --text-3:#7d8a95; --text-4:#8b98a3;
  --text2:#aab6c0; --text3:#7d8a95;

  --brand:#3f9dbb; --brand-dk:#5cb4d0; --brand-lt:#16323d; --brand-mid:#4aa8c6;
  --accent:#3f9dbb; --blue:#3f9dbb; --sea:#3f9dbb;
  --magenta:#d071a0; --orange:#d08a3e; --red:#e06b76; --green:#4fae86;
  --hull:#8f9daa;

  --bg:#0d1419; --surface:#131c23; --surface-2:#182229; --surface-3:#1e2a32;
  --border:#26333c; --border-lt:#1e2a32; --list-border:#1e2a32; --row-border:#1a242b;
  --nav-bg:#0a1014; --nav-border:#0a1014;
  --sb-bg:#101920; --sb-sel:#16323d; --sb-hover:#182229;
  --list-head:#131c23; --list-unread:#131c23; --list-read:#131c23;
}
/* A message is written by somebody else, on white, and stays that way. Turning
   a broker's letterhead inside out is how a signature becomes unreadable. */
html.theme-dark .detail-body,
html.theme-dark .msg-frame,
html.theme-dark .message-html{background:#fff;color:#16212c;border-radius:var(--r)}
/* The one thing that must not be lifted: a scrollbar you cannot see. */
html.theme-dark ::-webkit-scrollbar-thumb{background:#2b3a45}
html.theme-dark ::-webkit-scrollbar-track{background:#0d1419}
html.theme-dark img.logo,html.theme-dark .brand-mark{filter:brightness(1.6)}

/* ── The top of the window ─────────────────────────────────────
   A dark band across the top of a program is how a title bar looked when the
   program had to announce itself. This one is a strip of the same paper as
   everything else, and the tab you are on is marked rather than the whole bar
   being coloured. The teal is left to mean something. */
.topnav{background:var(--surface);border-bottom:1px solid var(--border);height:46px;
        box-shadow:none}
.nav-logo{border-right:1px solid var(--border-lt);min-width:auto;padding:0 var(--sp4) 0 var(--sp3)}
.nav-logo-text{color:var(--text);font-size:var(--t-title);font-weight:600}
.nav-logo-text span{color:var(--text-3)}
.nav-logo-mark{background:var(--brand-lt);border-radius:var(--r)}
.nav-logo-mark svg{stroke:var(--brand)}
.ntab{color:var(--text-2);font-size:var(--t-ui);font-weight:500;border-bottom:0;
      padding:6px 12px;margin:0 2px;border-radius:var(--r);height:auto;align-self:center}
.ntab:hover{background:var(--surface-3);color:var(--text)}
.ntab.active{background:var(--brand-lt);color:var(--brand);font-weight:600;border-bottom:0}
.ntab svg{stroke:currentColor}
.nav-search{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
.nav-search input{color:var(--text)}
.nav-icon-btn{color:var(--text-3)}
.nav-icon-btn:hover{color:var(--text);background:var(--surface-3)}
.nav-user{color:var(--text-2)}
.uavatar{background:var(--brand);color:#fff}

/* ── Panes with space between them ─────────────────────────────
   Every panel used to be fenced off with a hairline. They are separated by
   the background instead, and rounded — which is the difference between a
   window from 2010 and one from now, more than any colour is. */
.list-pane,.detail-pane,.sidebar,.tab-pane .panel{border-radius:var(--r)}
.list-pane,.detail-pane{background:var(--surface);border:1px solid var(--border-lt)}
#split-container{gap:var(--sp2);padding:var(--sp2);background:var(--bg)}
.sidebar{border-right:0;border-radius:0;background:var(--sb-bg)}
.detail-pane{overflow:hidden}

/* ── The message header ────────────────────────────────────────
   No row of actions here: they are in the toolbar above the list already. */
.detail-top-bar{padding:var(--sp3) var(--sp3) var(--sp2)}

/* ── Repairs to the light top bar ──────────────────────────────
   The bar used to be dark, so everything sitting in it was written in white.
   With the bar now the colour of paper, white text is invisible: the compose
   and search tabs had no labels, and the search box was a white box inside a
   pill. */
#compose-nav-tabs .ntab-compose,
#search-nav-tabs .ntab-compose{color:var(--text-2);border-bottom:2px solid transparent}
#compose-nav-tabs .ntab-compose:hover,
#search-nav-tabs .ntab-compose:hover{background:var(--surface-3);color:var(--text)}
#compose-nav-tabs .ntab-compose.active,
#search-nav-tabs .ntab-compose.active{color:var(--brand);background:var(--brand-lt);
                                      border-bottom-color:var(--brand)}
#compose-nav-tabs .ntab-compose .nx{color:var(--text-3)}
#compose-nav-tabs::-webkit-scrollbar-thumb{background:var(--border)}
.ntab.active{color:var(--brand)}

/* One box, not two: the pill is the box, and the field inside it is bare. */
.nav-search{background:var(--surface-2);border:1px solid var(--border);
            border-radius:var(--r);padding:3px 10px}
.nav-search:focus-within{background:var(--surface);border-color:var(--brand-mid)}
.nav-search input{background:transparent;border:0;color:var(--text);
                  font-size:var(--t-ui);width:190px;border-radius:0}
.nav-search input:focus{background:transparent;border:0;outline:none}
.nav-search input::placeholder{color:var(--text-3)}
.nav-search svg{stroke:var(--text-3)}

/* ── Two things that were already wrong ────────────────────────
   A dialog's heading was written in white over a pale grey bar, so every
   title was invisible; and a red button lost its label when the danger style
   above turned the text red as well. Both are older than this pass — the
   dialog is only noticed now because it is asked about more often. */
.modal-hdr{color:var(--text)}
.modal-hdr h3{color:var(--text)}
.modal-hdr button{background:var(--surface-3);color:var(--text-2)}
.modal-hdr button:hover{background:var(--border);color:var(--text)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{background:#8f2029;border-color:#8f2029;color:#fff}
.btn.danger .ai{color:#fff}
/* The rest of what lived on the dark bar: hovers, the bell, the user's name
   and the older nav-item names still used in places. */
.ntab:hover{background:var(--surface-3);color:var(--text)}
.nav-icon-btn{color:var(--text-3);background:transparent}
.nav-icon-btn:hover{color:var(--text);background:var(--surface-3)}
.nav-user,.nav-user span{color:var(--text-2)}
.nav-user:hover{background:var(--surface-3)}
.nav-item,.nav-tab{color:var(--text-2)}
.nav-item:hover,.nav-tab:hover{color:var(--text);background:var(--surface-3)}
.nav-item.active,.nav-tab.active{color:var(--brand);background:var(--brand-lt)}
.nav-logo-text{color:var(--text)}

/* ── Paper, not screen ─────────────────────────────────────────
   Somewhere below the original palette a second one was written over it, and
   the warm greys of this program — #f4f5f3, #fafaf8, #dfe3e0, the colours of
   telex paper — became #eef2f5, #f6f9fb, #d8e2e8, which are the colours of a
   screen pretending to be paper. The difference is a few points of blue, and
   it is the difference between a window you can read all day and one that
   glares.

   The warm set is restored. Only the daylight values: night is written
   separately and is unaffected. */
html:not(.theme-dark){
  /* A shade deeper than the original paper, because a 27-inch screen of it
     at midday is a lot of light to sit in front of. */
  --bg:#eceee9;
  --surface:#ffffff;
  --surface-2:#f7f7f4;
  --surface-3:#f1f2f0;
  --border:#dfe3e0;
  --border-lt:#ebeeeb;
  --list-border:#ebeeeb;
  --row-border:#f0f2ef;
  --list-head:#fafaf8;
  --list-read:#ffffff;
  --list-unread:#ffffff;
  --sb-bg:#f7f7f4;
  --sb-sel:#eaf2f5;
  --sb-hover:#f1f2ef;
}
/* The bar is paper too, a shade off the panes below it so the two are
   distinguishable without a line doing the work. */
html:not(.theme-dark) .topnav{background:var(--surface-2)}
/* And the list itself sits a hair off pure white — a page of three hundred
   rows is a lot of white to look into. */
html:not(.theme-dark) .list-pane{background:#fcfcfa}
html:not(.theme-dark) .erow{background:#fcfcfa}
html:not(.theme-dark) .erow:hover{background:var(--surface-3)}
html:not(.theme-dark) .erow.unread{background:#ffffff}

/* ── A message that is chosen ──────────────────────────────────
   The row background set above outranked both selection rules, so Ctrl-
   clicking marked messages the program knew about and the screen did not.

   Two different states, deliberately different to look at. The message being
   read is filled in the house teal. Messages picked out with Ctrl held down
   carry a teal edge and a tint — enough to count them at a glance across a
   list of thirty, without turning the screen into a block of colour. The
   #eaf3ff they used to use was a blue from no palette in this program. */
html:not(.theme-dark) .erow.bulk{background:#e4eef2;box-shadow:inset 4px 0 0 var(--brand)}
html:not(.theme-dark) .erow.bulk:hover{background:#dae8ee}
html:not(.theme-dark) .erow.selected{background:var(--brand-lt);
                                     box-shadow:inset 4px 0 0 var(--brand)}
html:not(.theme-dark) .erow.bulk .eb-subj,
html:not(.theme-dark) .erow.selected .eb-subj{color:var(--text)}
html:not(.theme-dark) .erow.bulk .eb-snip{color:#5d6a72}

html.theme-dark .erow.bulk{background:#1a2f38;box-shadow:inset 4px 0 0 var(--brand)}
html.theme-dark .erow.bulk:hover{background:#1f3843}
html.theme-dark .erow.selected{background:var(--brand-lt);box-shadow:inset 4px 0 0 var(--brand)}

/* Several chosen at once is worth saying out loud, since there is no longer a
   bar to say it: the count sits in the status line at the foot. */
.bulk-note{margin-left:auto;font-size:var(--t-meta);color:var(--brand);font-weight:600}
/* The files sit where the label used to, level with the rest of the header. */
.detail-meta-row.att-row{padding-left:0}
.detail-meta-row.att-row .att-chips{margin-left:0}
/* ── Night: the sidebar ────────────────────────────────────────
   Folder names were sitting too close to the background to read down a list
   of forty. Lifted, with the selected one lifted further. */
html.theme-dark .sb-item{color:#c3ced7}
html.theme-dark .sb-item .si-ico{color:#9aa7b2}
html.theme-dark .sb-item:hover{background:#1f2a33;color:#e6ebef}
html.theme-dark .sb-item.active{color:#7cc4dc;background:#17323d}
html.theme-dark .sb-item.active .si-ico{color:#7cc4dc}
html.theme-dark .sb-item.quiet,
html.theme-dark .sb-item[data-folder="junk"],
html.theme-dark .sb-item[data-folder="ndr"],
html.theme-dark .sb-item[data-folder="deleted"]{color:#93a1ac}
html.theme-dark .sb-section{color:#9aa7b2}
html.theme-dark .sb-tree-row,html.theme-dark .sb-sec-body .sb-item{color:#bcc7d1}
html.theme-dark .si-count{color:#9aa7b2}

/* ── The preview, as agreed ────────────────────────────────────
   The values from the preview you approved, applied over the ones arrived at
   piecemeal. The differences are small and all in the same direction: the
   teal a shade brighter so it still reads as teal at night, the greys a
   shade warmer, and the list a hair off the panel behind it so a read row
   and an unread row are told apart by tone rather than only by weight. */
html.theme-dark{
  --brand:#4aa6c2; --brand-dk:#6bbdd6; --brand-lt:#17323d;
  --text:#e6ebef; --text-2:#a8b4be; --text-3:#8a97a1; --text-4:#76828c;
  --bg:#0e151a; --surface:#141d24; --surface-2:#18222a; --surface-3:#1f2a33;
  --border:#26333c; --border-lt:#1d272f; --row-border:#1a232a;
  --list-read:#121a20; --list-unread:#141d24; --list-head:#18222a;
  --sb-bg:#111a20; --sb-sel:#17323d; --sb-hover:#1f2a33;
}
/* A message that is read, one that is not, and one that is chosen: three
   tones, all quiet. */
html.theme-dark .erow{background:#121a20}
html.theme-dark .erow.unread{background:#141d24}
html.theme-dark .erow:hover{background:#1a242c}
html.theme-dark .erow.bulk{background:#142a34;box-shadow:inset 4px 0 0 var(--brand)}
html.theme-dark .erow.selected{background:#17323d;box-shadow:inset 4px 0 0 var(--brand)}

/* ── The head of a message, as in the preview ──────────────────
   It was four stacked rows of boxed chips — Ref on its own line, From on
   another, To on another, files on a fourth — and took a third of the
   reading pane before a word of the offer showed. The preview puts From and
   To on one line each with the reference right-aligned against them, which
   is the same information in half the height.

   Structure is not changed here; only how it is laid out, so nothing that
   reads or writes these rows can break. */
.detail-top-bar{padding:var(--sp3) var(--sp4) var(--sp2);gap:2px}
.detail-subject{font-size:var(--t-title);font-weight:600;letter-spacing:-.2px;line-height:1.3;
  margin-bottom:var(--sp2)}
.detail-meta{display:grid;grid-template-columns:auto 1fr auto;gap:3px 10px;align-items:center}
.detail-meta-row{display:contents}
.dm-label{font-size:var(--t-meta);color:var(--text-3);font-weight:500;text-transform:none;
  letter-spacing:0;white-space:nowrap}
.detail-meta-row > .detail-chips{grid-column:2;min-width:0;display:flex;flex-wrap:wrap;gap:5px}
.dchip{font-size:var(--t-ui);border-radius:var(--r);padding:2px 9px;background:var(--surface-2);
  border:1px solid var(--border-lt);color:var(--text-2);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* The reference and the date sit at the end of the From line, where they are
   read once and never hunted for. */
.msg-ref{grid-column:3;grid-row:1;justify-self:end;font-size:var(--t-meta);color:var(--text-4);
  font-variant-numeric:tabular-nums;background:none;border:0;padding:0}
.detail-meta-row.att-row > .detail-chips{grid-column:2/4}
.att-chip{font-size:var(--t-ui);border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--border);padding:3px 10px}
.att-chip:hover{border-color:var(--brand);color:var(--brand)}

/* Reply, Reply to all and Forward carry words; the rest are icons. Eight
   boxed buttons of equal weight is how a toolbar stops being read. */
.toolbar .tbtn:not(.primary):not(#btn-reply):not(#btn-reply-all):not(#btn-forward):not(#btn-delete){
  border-color:transparent;background:none;padding:6px;color:var(--text-3)}
.toolbar .tbtn:not(.primary):not(#btn-reply):not(#btn-reply-all):not(#btn-forward):not(#btn-delete):hover{
  background:var(--surface-3);color:var(--text)}

/* ── The bar and the toolbar, now that the markup matches ──────
   The icons are drawn in the page and inherit the colour around them, so the
   rules here are only about size and weight. */
.topnav .nav-logo-mark{display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r);background:var(--brand-lt);color:var(--brand)}
.topnav .ntab .ai,.nav-search-btn .ai,.nav-icon-btn .ai{color:currentColor}
.nav-search-btn{background:none;border:0;padding:0;display:flex;align-items:center;cursor:pointer;color:var(--text-3)}
.toolbar .tbtn .ai{color:var(--text-3)}
.toolbar .tbtn.primary .ai{color:#fff}
/* The icon-only buttons: no box until they are pointed at. */
.toolbar .tbtn-icon{border-color:transparent;background:none;padding:6px 7px;color:var(--text-3)}
.toolbar .tbtn-icon:hover:not(:disabled){background:var(--surface-3);color:var(--text);border-color:transparent}
.toolbar .tbtn-icon:disabled{opacity:.4}
.toolbar .tbtn:disabled{opacity:.45}
/* The sidebar tree: the same drawn folder as everywhere else, in the same
   grey as the text beside it. A yellow pictogram was the last thing in here
   that came from somebody else's icon set. */
.sf-icon{display:inline-flex;align-items:center;color:var(--text-3)}
.sb-folder.active .sf-icon{color:var(--brand)}
.sf-toggle{width:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3)}
.sf-toggle .ai{transition:transform .12s ease}
.sf-toggle.open .ai{transform:rotate(90deg)}
.mf-icon{display:inline-flex;align-items:center;color:var(--text-3);margin-right:6px}
.sb-caret{display:inline-flex;align-items:center;justify-content:center;width:12px;color:var(--text-3)}
.sb-caret .ai{transition:transform .12s ease}
.sb-caret.open .ai{transform:rotate(90deg)}

/* ── The subject, whole ────────────────────────────────────────
   It was capped at 58% of the row and allowed to shrink, so a long one was
   cut to "ska…" while the preview beside it had room to spare. The subject is
   the line being scanned; the preview is whatever fits afterwards. Now the
   subject takes what it needs and the preview takes the rest — and when the
   subject is long enough to want the whole row, the preview simply gives way.
   Only a subject longer than the row itself is still trimmed. */
.eb-line1{flex:0 1 auto;max-width:none;min-width:0}
.eb-subj{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eb-line2{flex:1 1 auto;min-width:0}
/* The preview yields first: it shrinks to nothing before the subject loses a
   character. */
.eb-snip{flex:1 1 0;min-width:0}
/* Not shrinkable at all. The rule above still had the subject at flex-shrink
   1, so when the row ran short of room the subject gave up characters — which
   is the one thing it must never do. The preview absorbs the whole shortfall
   now, down to nothing. */
.eb-line1{flex:0 0 auto !important;max-width:none}
.eb-subj{flex:0 0 auto !important;white-space:nowrap;overflow:visible;text-overflow:clip}
.eb-line2{flex:1 1 0;min-width:0;overflow:hidden}
.eb-snip{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The cell clips whatever is still too long, so a subject the width of the
   screen cannot push the date and size columns off the row. */
.ec-body{overflow:hidden}

/* ── The head of a message, in two lines ───────────────────────
   It was four: the subject, "Ref: R260HWDC" on its own line, From on
   another, To on a fourth — and the To label had drifted to the far right,
   because the grid it sat in expected a different number of cells. Every
   one of those lines was paid for out of the reading pane.

   Now the subject is the first line and everything else is the second,
   read left to right: From, then To, then Cc. The reference is not repeated
   under the subject, since it already sits in the badge at the right beside
   the date. The addresses are plain text rather than boxes; a box around
   each address is a border to look past, not information. */
.detail-top-bar{padding:8px 16px 6px}
.detail-subject{font-size:var(--t-title);font-weight:600;line-height:1.3;margin:0 0 3px}
.detail-header-info > .msg-ref{display:none}
.detail-meta{display:flex !important;flex-wrap:wrap;align-items:baseline;gap:2px 18px;
  font-size:var(--t-ui);color:var(--text-2)}
.detail-meta-row{display:inline-flex !important;align-items:baseline;gap:6px;min-width:0;
  max-width:100%;margin:0;padding:0}
.detail-meta-row .dm-label{font-size:var(--t-meta);color:var(--text-4);font-weight:500;
  grid-column:auto;white-space:nowrap}
.detail-meta-row > .detail-chips{display:inline-flex;flex-wrap:wrap;gap:0 8px;min-width:0;grid-column:auto}
.detail-meta .dchip{background:none;border:0;padding:0;border-radius:0;color:var(--text-2);
  font-size:var(--t-ui);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Files, when there are any, take a line of their own under the addresses —
   they are clicked, not read, and want room. */
.detail-meta-row.att-row{flex-basis:100%;margin-top:3px}
.detail-meta-row.att-row > .detail-chips{gap:6px}
.detail-meta .att-chip{padding:2px 9px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface-2)}

/* ── The head of a message, tighter still ──────────────────────
   Most of its height was coming from the right-hand side, not the left: the
   star and flag as two tall boxed buttons, then the date on a line of its
   own, then the reference badge on a third. That column was three rows deep
   and set the height of the whole header. It is one row now — star, flag,
   date, reference — sitting level with the subject.

   From above To, as asked, each on its own short line, and the addresses
   kept as pills but at half the size: the pill says "this is an address you
   can act on" without costing a line of height to say it. */
.detail-top-bar{padding:6px 14px 6px;align-items:flex-start;gap:12px}
.detail-subject{margin:0 0 3px;line-height:1.25}
.detail-meta{display:flex !important;flex-direction:column;flex-wrap:nowrap;gap:2px}
.detail-meta-row{display:flex !important;align-items:center;gap:6px}
.detail-meta-row .dm-label{width:32px;flex:none;font-size:10.5px;color:var(--text-4)}
.detail-meta .dchip{display:inline-block;background:var(--surface-2);border:1px solid var(--border-lt);
  border-radius:9px;padding:0 7px;font-size:11.5px;line-height:17px;color:var(--text-2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-meta-row > .detail-chips{gap:4px}
.detail-meta-row.att-row{margin-top:2px}

/* The right-hand side, one row. */
.detail-header-right{display:flex !important;flex-direction:row !important;align-items:center;
  gap:8px;flex:none;white-space:nowrap}
.detail-header-right .dh-actions{display:flex;gap:2px;order:3}
.detail-header-right .dh-actions .tbtn{padding:2px 5px;min-height:0;height:22px;font-size:12px;
  border-color:transparent;background:none}
.detail-header-right .dh-actions .tbtn:hover{background:var(--surface-3)}
.detail-header-right > div[style]{order:1;font-size:10.5px !important}
.detail-header-right .telix-badge{order:2;padding:0 6px;line-height:17px;font-size:10.5px;
  border-radius:9px}

/* The divider between the list and the message: the space it took was the
   gap either side of it, not the line itself. Kept draggable, just thin. */
.resizer{height:3px;margin:0}
#split-container{gap:4px !important}

/* The "···" for images shown in the message: no pill, no border, just the
   dots, small and quiet. It is a place to reach the logos if they are ever
   wanted, not a button asking to be pressed. */
.att-sig-more{background:none !important;border:0 !important;padding:0 3px !important;
  font-size:12px;line-height:14px;height:14px;font-weight:700;letter-spacing:1px;
  color:var(--text-4) !important;border-radius:0;box-shadow:none;cursor:pointer;vertical-align:middle}
.att-sig-more:hover{color:var(--brand) !important}
.att-sig-more.on{color:var(--brand) !important;background:none !important}
/* When the dots are all there is, the row they sit in takes no more height
   than the dots themselves. */
.detail-meta-row.att-row{margin-top:0;min-height:0;line-height:14px}

/* ── The bar along the foot ────────────────────────────────────
   Its useful part is who in the office has read the message open above it.
   As a dark strip across a light window it drew the eye to "Connected,
   updated 12:35" instead. It is the same paper as the rest now, the status
   quiet, and the readers — the part that is actually looked at — in the
   house teal so they are found at once. */
html:not(.theme-dark) .status-bar{background:var(--surface-2);color:var(--text-3);
  border-top:1px solid var(--border-lt)}
.status-bar .sb-viewers{color:var(--brand);font-weight:600}
.status-bar .sb-viewers .vw{background:var(--brand-lt);color:var(--brand);
  border:1px solid rgba(18,101,127,.25);font-weight:700}
html.theme-dark .status-bar{background:var(--surface-2);color:var(--text-3);border-top:1px solid var(--border)}

/* ── One size of icon per place ────────────────────────────────
   Toolbar, sidebar, list and top bar each drew icons at their own sizes —
   14, 15, 16, 17 in different spots — which reads as unsettled even when
   nobody could say why. One size for each place. */
.topnav .ai{width:15px !important;height:15px !important}
.toolbar .ai{width:16px !important;height:16px !important}
.sidebar .ai{width:16px !important;height:16px !important}
.sidebar .sf-toggle .ai,.sidebar .sb-caret .ai{width:11px !important;height:11px !important}
.erow .ai,.lcols .ai{width:13px !important;height:13px !important}

/* ── The sidebar ───────────────────────────────────────────────
   Inbox, Sent and the Views are what is used all day; the forty company
   folders beneath are reached for. The top of the list is a size and a
   weight up, the folders a step quieter and more evenly spaced, so the eye
   lands on the first and runs down the second. */
.sidebar .sb-item{font-size:13px;font-weight:500;padding:5px 10px;margin:1px 0}
.sidebar .sb-folder{font-size:12.5px;font-weight:400;color:var(--text-2);padding:3px 10px;
  line-height:1.5}
.sidebar .sb-folder:hover{color:var(--text)}
.sidebar .sb-folder.active{color:var(--brand);font-weight:600}
.sidebar .sb-section{margin-top:10px}

/* ── A refused recipient ───────────────────────────────────────
   Red where it sits, and the reason beneath the field, so it is found at
   once among a dozen addresses. */
.cf-tag.bad{background:#fdecee !important;border-color:var(--red) !important;color:var(--red) !important;
  font-weight:600}
.rcpt-why{margin:2px 0 4px 72px;font-size:var(--t-meta);color:var(--red);line-height:1.4}
html.theme-dark .cf-tag.bad{background:#3a1c22 !important}

/* The quick filter row is retired — see wireQuickFilters. Hidden here as well
   as in the markup, so no rule elsewhere can bring it back into view. */
.qfilters{display:none !important}

/* The WhatsApp mark beside a number that can take it: green, small, and on
   the same line as the number it would message. */
.wa-mark{display:inline-flex;align-items:center;vertical-align:-2px;margin-left:6px;
  color:#1f9d55;text-decoration:none;border-radius:4px;padding:1px}
.wa-mark:hover{color:#15803d;background:rgba(31,157,85,.10)}
.ch.ch-wa{color:#1f9d55}

/* ── Files in a message, as Telix shows them ───────────────────
   Not buttons: the kind of file in its colour, then the name as a link.
   The size is in the tooltip; the copy control appears on hover. */
.detail-meta .att-chip{display:inline-flex;align-items:center;gap:4px;background:none !important;
  border:0 !important;padding:1px 2px !important;border-radius:3px;cursor:pointer;
  color:#5b2e91;font-size:var(--t-ui);max-width:100%}
.detail-meta .att-chip .att-name{text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-meta .att-chip:hover .att-name{text-decoration:underline}
.detail-meta .att-chip .att-size{display:none}
.detail-meta .att-chip .att-copy{opacity:0;margin-left:2px;color:var(--text-4);transition:opacity .12s}
.detail-meta .att-chip:hover .att-copy{opacity:1}
html.theme-dark .detail-meta .att-chip{color:#b99be6}
.detail-meta-row.att-row > .detail-chips{gap:4px 14px;align-items:center}

/* The kind of file, in its colour. */
.ft{display:inline-flex;line-height:0}
.ft-pdf{color:#d32f2f} .ft-doc{color:#2b579a} .ft-xls{color:#217346} .ft-ppt{color:#c43e1c}
.ft-img{color:#7b3fa0} .ft-zip{color:#a8741a} .ft-eml{color:var(--brand)} .ft-txt{color:#6b7280}

/* Every file at once, first on the line. */
.att-saveall{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:3px;
  background:#3a8fd6;color:#fff;font-size:var(--t-ui);font-weight:600;padding:3px 9px;cursor:pointer;order:-1}
.att-saveall:hover{background:#2f7bbd}
.att-saveall:disabled{opacity:.6;cursor:default}

/* ── The file viewer: a window inside the program ──────────── */
.fv{position:fixed;top:70px;right:40px;width:min(680px,60vw);height:min(86vh,900px);z-index:900;
  display:flex;flex-direction:column;background:var(--surface);border:3px solid #3a8fd6;border-radius:2px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);resize:both;overflow:hidden;min-width:360px;min-height:260px}
.fv[hidden]{display:none}
.fv-title{flex:none;display:flex;align-items:center;gap:8px;height:30px;padding:0 4px 0 10px;
  background:#3a8fd6;color:#fff;font-size:12.5px;cursor:move;user-select:none}
.fv-title .ft{color:#fff}
.fv-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-wbtn{width:26px;height:24px;border:0;background:none;color:#fff;font-size:14px;cursor:pointer;border-radius:2px}
.fv-wbtn:hover{background:rgba(255,255,255,.18)}
.fv-tools{flex:none;display:flex;align-items:center;gap:4px;padding:6px 10px;border-bottom:1px solid var(--border-lt)}
.fv-t{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:4px 8px;border-radius:3px;
  color:var(--brand);font-size:12.5px;cursor:pointer}
.fv-t:hover:not(:disabled){background:var(--brand-lt)}
.fv-t:disabled{color:var(--text-4);cursor:default}
.fv-count{margin-left:auto;font-size:11.5px;color:var(--text-3)}
.fv-body{flex:1;min-height:0;background:#fff;overflow:auto}
.fv-frame{width:100%;height:100%;border:0;display:block}
.fv-imgwrap{padding:12px;text-align:center}
.fv-imgwrap img{display:inline-block}
.fv-none{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-2)}
.fv-none .ft{transform:scale(3);margin-bottom:22px}
.fv-none-name{font-weight:600;color:var(--text)}
.fv-none-why{font-size:12.5px;color:var(--text-3)}
.fv-none-acts{display:flex;gap:8px;margin-top:6px}
/* Minimised to its title bar, bottom right; maximised to the window. */
.fv.min{height:30px !important;min-height:0;resize:none;top:auto !important;bottom:12px;left:auto !important;right:12px !important;width:320px !important}
.fv.min .fv-tools,.fv.min .fv-body{display:none}
.fv.max{top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:auto !important;height:auto !important;resize:none;border-width:0}

/* ── Colour buttons in compose, as in Telix ────────────────────
   The A with a bar of the current colour beneath it, and a narrow arrow
   beside it that opens the palette. */
.rsplit{display:inline-flex;align-items:stretch;border:1px solid transparent;border-radius:3px}
.rsplit:hover{border-color:var(--border)}
.rsplit .rb{margin:0}
.rsplit .rs-main{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:2px 5px 3px;border-radius:3px 0 0 3px}
.rsplit .rs-a{font-weight:700;font-size:13px;line-height:1}
.rsplit .rs-bar{display:block;width:14px;height:3px;border:1px solid rgba(0,0,0,.15)}
.rsplit.hl .rs-a{background:#9a9a9a;color:#fff;padding:0 3px;border-radius:2px}
.rsplit .rs-arrow{padding:0 3px;font-size:9px;color:var(--text-3);border-left:1px solid var(--border-lt);
  border-radius:0 3px 3px 0}
/* The palette: eight across, five down, the last cell taking colour away. */
.rte-palette{position:fixed;z-index:1200;display:grid;grid-template-columns:repeat(8,18px);gap:3px;
  padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.18)}
.rp-c{width:18px;height:18px;padding:0;border:1px solid rgba(0,0,0,.18);border-radius:1px;cursor:pointer}
.rp-c:hover{outline:2px solid var(--brand);outline-offset:1px}
.rp-none{background:var(--surface);color:var(--text-3);font-size:11px;font-weight:700;line-height:16px}

/* ── An on/off switch in Preferences ───────────────────────── */
.pref-switch-row{align-items:center;gap:14px}
.pswitch{position:relative;display:inline-block;width:38px;height:22px;flex:none;cursor:pointer}
.pswitch input{opacity:0;width:0;height:0;position:absolute}
.pswitch span{position:absolute;inset:0;border-radius:11px;background:var(--border);transition:background .15s}
.pswitch span::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.pswitch input:checked + span{background:var(--brand)}
.pswitch input:checked + span::after{transform:translateX(16px)}
.pswitch input:disabled + span{opacity:.5;cursor:default}
.pswitch input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.pref-note{font-size:var(--t-meta);color:var(--text-3);margin:2px 0 8px;line-height:1.45}

/* ── 13.47.7: reading density and colours (desktop review) ──────────────
   More of the message on screen at the same font size, and secondary text
   that can be read all day. */

/* The message frame carries its own padding now (10px 16px), so the box
   around it adds none — two layers of it put the first line 58px in. */
.detail-body:has(> iframe.msg-frame){padding:0}
/* A shorter header: From, To and Cc side by side, less padding */
#email-detail .detail-top-bar{padding:8px 16px 7px}
#email-detail .detail-subject{margin-bottom:3px}
#email-detail .detail-meta{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:2px}
#email-detail .detail-meta-row{margin-bottom:0}
#email-detail .att-row{flex-basis:100%}

/* Vertical layout: only the columns that fit beside the reading pane. Email
   repeats From (it is in its tooltip), Ref is on the open message, Size and
   who-sent-it are for the wide list. Horizontal keeps them all. */
#split-container.split-vertical .lcols,
#split-container.split-vertical .erow{grid-template-columns:62px 140px minmax(0,1fr) 22px 60px !important}
#split-container.split-vertical .ec-email,
#split-container.split-vertical .ec-by,
#split-container.split-vertical .ec-size,
#split-container.split-vertical .ec-telix,
#split-container.split-vertical .ec-actions{display:none !important}

/* The Subject heading sat 8px above the others */
.lcols .lcol.ec-body{align-items:center;padding-top:5px;padding-bottom:5px}

/* Secondary text — times, addresses, sizes, refs, headings, the status bar —
   was 3.3:1 at 11px. Now about 5:1 on the list, 4.6:1 on the page grey. */
html:not(.theme-dark){--text-3:#5f6d78;--text3:#5f6d78;--text-4:#5f6d78}
html:not(.theme-dark) .ri.star:not(.on){color:#87939d}
/* Night: white on the bright teal was 2.8:1; a deeper teal is 6:1 and
   calmer to look at in a dark room */
html.theme-dark .tbtn.primary,html.theme-dark .btn.primary{background:#1d6a85;border-color:#1d6a85;color:#fff}
html.theme-dark .tbtn.primary:hover,html.theme-dark .btn.primary:hover{background:#237a98;border-color:#237a98}

/* Tools → Connected Devices */
.dev-list{display:flex;flex-direction:column}
.dev-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--border-lt)}
.dev-row:last-child{border-bottom:none}
.dev-what{flex:1;min-width:0;font-size:12.5px}
.dev-meta{font-size:11.5px;color:var(--text-3);margin-top:2px}
.dev-this{font-size:10.5px;font-weight:600;color:var(--brand);background:var(--brand-lt);border-radius:3px;padding:1px 6px;margin-left:4px}
/* Night: the selected row was a pale band (#e0ecf1) with grey text on it —
   the light theme's colour, never given a night value */
html.theme-dark{--list-sel:#17323d}

/* ── Folder tree: one horizontal scrollbar, at the bottom of the screen ──
   Each section scrolled sideways on its own, so with sub-folders open the
   scrollbar sat under the last folder of the list and you had to scroll down
   to the end to reach it. Now the whole sidebar scrolls both ways and its
   sideways scrollbar stays at the bottom edge; the section headings, with
   their + and search buttons, stay in place while the tree moves. */
.sb-scroll{overflow:auto}
.sb-scroll > *{min-width:100%}
.sb-sec-body{overflow:visible;width:max-content;min-width:100%}
.sb-sec-hdr{position:sticky;left:0;z-index:1;background:var(--sb-bg)}
.sb-scroll::-webkit-scrollbar{width:6px;height:10px}
.sb-scroll::-webkit-scrollbar-thumb{background:#b8b8b8;border-radius:4px}
.sb-scroll::-webkit-scrollbar-thumb:hover{background:#9a9a9a}
.sb-scroll::-webkit-scrollbar-track{background:rgba(0,0,0,.04)}
html.theme-dark .sb-scroll::-webkit-scrollbar-thumb{background:#3a4a55}
html.theme-dark .sb-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}

/* ── A search is the mailbox screen ──────────────────────────────
   The search panel stands exactly where the folders stand, at the
   sidebar's width; everything to its right is the mailbox itself. */
.search-side{width:var(--sb-w);flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--sb-bg);border-right:1px solid var(--border)}
.search-side-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.search-side .search-panel{width:auto;flex:1;border-right:0;min-height:0}
.search-side .sp-actions{display:flex;flex-wrap:wrap;gap:6px}
.search-side .sp-actions .btn{padding-left:10px;padding-right:10px}
.ec-icons .sdir{margin-right:2px;font-weight:700}
.search-side .sp-radios{display:flex;flex-wrap:wrap;gap:4px 10px}
.search-side .sp-radios label{display:inline-flex;align-items:center;gap:3px;margin:0}

/* ── Estimator tab: the estimator page fills the space under the top bar ── */
.est-pane{flex:1;min-height:0;padding:0}
.est-pane iframe{flex:1;width:100%;height:100%;border:0;display:block;background:#fff}

/* ── A mail attached to a message, opened in the file viewer ── */
.fv-eml{display:flex;flex-direction:column;height:100%}
.fv-eml-head{padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text)}
.fv-eml-subj{font-weight:600;font-size:14px;margin-bottom:3px}
.fv-eml-meta{font-size:12px;color:var(--text-2);line-height:1.6;word-break:break-word}
.fv-eml-meta b{font-weight:600;color:var(--text-2)}
.fv-eml-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fv-eml-frame{flex:1;width:100%;border:0;display:block;background:#fff;min-height:120px}
.fv-t[hidden]{display:none}
/* a file's menu opened from inside the viewer shows above it */
#att-ctx{z-index:1000}

/* 13.49.14 — the general ".pref-row label {flex:1}" also caught the on/off
   switch (it is a label too) and stretched it across the whole box. */
.pref-row label.pswitch{flex:none;width:38px}
/* Night mode had no value for the toolbar colours, so the compose window's
   button bar (Submit, Save In, Add File…) stayed white with dark buttons on
   it. These are the toolbar, row-hover and folder-heading colours at night. */
html.theme-dark{--tb-bg:#131c23;--tb-border:#26333c;--list-hover:#182229;--sb-hdr:#182229}
/* Columns folded away in a narrow list (see foldColumns in app.js) */
body.lc-nosize .ec-size,body.lc-noemail .ec-email{visibility:hidden;padding:0!important;border:0!important;overflow:hidden;min-width:0}

/* The top bar in a narrower window. At 1024 wide it ran 53px past the edge
   and cut the avatar in half. The name, then the logo's words, give way first;
   the search box narrows; the tabs keep their labels. */
.topnav-right{flex-shrink:0}
@media (max-width:1240px){
  #nav-username{display:none}
  .nav-search input{width:130px}
}
@media (max-width:1100px){
  .nav-logo-text{display:none}
  .ntab{padding:6px 8px;margin:0 1px}
  .nav-search input{width:100px}
}
#compose-nav-tabs,#search-nav-tabs{flex:0 1 auto;min-width:0}

/* Address book: a wider list with a draggable edge, and the More menu */
.addr-list{width:560px;min-width:340px}
.addr-cols,.addr-row{grid-template-columns:56px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.3fr)}
.addr-resizer{width:5px;margin-left:-3px;cursor:col-resize;flex-shrink:0;position:relative;z-index:2}
.addr-resizer:hover{background:var(--brand-lt)}
.tmore{position:relative;display:inline-flex}
.tmore-caret{font-size:9px;margin-left:2px;opacity:.7}
.tmore-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:400;min-width:180px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:4px}
.tmore-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;background:none;
  font-size:12.5px;color:var(--text);cursor:pointer;border-radius:var(--r);text-align:left}
.tmore-item:hover{background:var(--surface-3)}
.tmore-item.danger{color:var(--red)}
.tmore-sep{height:1px;background:var(--border-lt);margin:4px 2px}

/* Favourites: sub-folders of a favourite folder, opened with a caret (13.49.37) */
#sec-favs .fav-caret{width:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);
  flex-shrink:0;margin-right:2px;cursor:pointer}
#sec-favs .fav-caret .ai{transition:transform .12s ease;width:10px !important;height:10px !important}
#sec-favs .fav-caret.open .ai{transform:rotate(90deg)}
#sec-favs .sb-item.sb-sub.fav-child{font-size:12px}
/* every favourite keeps an arrow's width before its icon — empty when it has
   no sub-folders — so the icons line up and the arrow stays inside the sidebar */

/* Rules: the page is the height of the window and the list scrolls by itself
   (13.49.43). It used to grow to the length of every rule, so the list ran
   off the bottom with no scroll bar of its own. */
#tool-rules.active{display:flex;flex-direction:column;overflow:hidden}
#tool-rules > .toolbar{flex-shrink:0}
#tool-rules .rules-body{min-height:0}
#tool-rules .rules-list, #tool-rules .rules-items, #tool-rules .rules-detail{min-height:0}

/* File in folder: Company, then Personal, as the sidebar's tree (13.49.45) */
.mcf-list{max-height:380px;overflow-y:auto;border:1px solid var(--border);border-radius:2px}
.mcf-sec{position:sticky;top:0;z-index:1;padding:5px 10px;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text-3);background:var(--surface-2);border-bottom:1px solid var(--border-lt)}
.mcf-row{display:flex;align-items:center;gap:5px;padding-top:4px;padding-bottom:4px;padding-right:10px;cursor:pointer;
  font-size:12px;border-bottom:1px solid var(--list-border)}
.mcf-row:hover{background:var(--list-hover)}
.mcf-caret{width:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0}
.mcf-caret .ai{transition:transform .12s ease;width:10px !important;height:10px !important}
.mcf-caret.open .ai{transform:rotate(90deg)}
.mcf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Rules activity, one day at a time (13.49.51) */
.modal.ra-modal{width:min(760px,94vw);max-width:none}
.ra-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ra-bar .btn{padding:4px 10px;min-width:0}
.ra-bar .ra-prev,.ra-bar .ra-next{font-size:15px;line-height:1;padding:3px 10px}
.ra-bar input[type=date],.ra-bar input[type=search],.ra-bar select{height:28px;font-size:12px;padding:2px 6px;
  border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text)}
.ra-bar input[type=search]{flex:1;min-width:150px}
.ra-bar select{max-width:220px}
.ra-count{font-size:12px;color:var(--text-2);margin:2px 0 6px}
.ra-list{height:min(56vh,520px);overflow:auto;border-top:1px solid var(--border-lt)}
.ra-row{padding:6px 2px;border-bottom:1px solid var(--border-lt);font-size:12px}
.ra-act{color:var(--text-2)}
.ra-subj{color:var(--text-3)}
.ra-when{color:var(--text-3);font-family:var(--font-data);font-size:10.5px}
.ra-empty{padding:18px 4px;font-size:12.5px;color:var(--text-3)}

/* A circular on its way (13.49.54) */
.pend-banner.sending{background:#eef6ee;border-color:#bfe0c0}
.pend-timer.sending{color:#1f7a3a;font-style:italic}

/* ── The contact card (13.49.59) ───────────────────────────── */
#addr-detail .addr-back{margin:10px 16px 0;font-size:12px;padding:3px 10px}
.cc-hdr{display:flex;align-items:flex-start;gap:14px;padding:14px 18px 10px}
.cc-hdr-txt{flex:1;min-width:0}
.cc-name{font-size:17px;font-weight:700;letter-spacing:.2px;color:var(--text)}
.cc-sub{color:var(--text-2);font-size:12.5px;margin-top:2px}
.cc-aka{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px;font-size:11.5px;color:var(--text-3)}
.cc-tag{border:1px solid var(--border);background:var(--surface);border-radius:4px;padding:0 6px;font-size:11px;color:var(--text-2);line-height:18px}
.cc-tag.code{font-family:var(--font-data);color:var(--brand);background:var(--brand-lt);border-color:transparent}
.cc-hdr .addr-code-chip{margin-top:3px}
.cc-reach{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px}
.cc-rb{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);border-radius:18px;
  padding:5px 13px;font-size:12.5px;font-weight:500;color:var(--text);text-decoration:none;cursor:pointer}
.cc-rb:hover{border-color:var(--brand);color:var(--brand)}
.cc-rb-mail{background:var(--brand-lt);border-color:transparent;color:var(--brand)}
.cc-rb-wa{color:var(--green)}
.cc-car{font-size:9px;opacity:.7}
.cc-body{background:var(--surface);border-top:1px solid var(--border);padding:4px 18px 16px}
.cc-sec{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--text-3);margin:16px 0 6px;display:flex;align-items:center;gap:8px}
.cc-n{background:var(--border-lt);border-radius:8px;padding:0 6px;color:var(--text-2);letter-spacing:0}
.cc-tbl{width:100%;border-collapse:collapse}
.cc-tbl td{padding:6px 6px;border-bottom:1px solid var(--border-lt);vertical-align:middle;font-size:12.5px}
.cc-tbl tr:last-child td{border-bottom:0}
.cc-emails td.cc-star{width:16px;color:#c79100;text-align:center}
.cc-addr{color:var(--brand);font-weight:500;text-decoration:none}
.cc-addr:hover{text-decoration:underline}
.cc-lbl{color:var(--text-2)}
.cc-lists{border:0;background:var(--surface-2);border-radius:9px;padding:1px 8px;font-size:11px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.cc-lists:hover{color:var(--brand)}
.cc-lists.none{color:var(--text-3);background:transparent;visibility:hidden}
.cc-emails tr:hover .cc-lists.none{visibility:visible}
.cc-act{text-align:right;width:34px}
.cc-act button{border:0;background:none;color:var(--text-3);cursor:pointer;padding:2px 4px;border-radius:4px}
.cc-act button:hover{color:var(--brand);background:var(--brand-lt)}
.cc-people .cc-who{font-weight:500;color:var(--text);width:32%}
.cc-people .cc-what{color:var(--text-3);font-size:11.5px;width:22%}
.cc-people a{color:var(--brand);text-decoration:none}
.cc-wa{margin-left:6px;font-size:10.5px;color:var(--green)!important;border:1px solid currentColor;border-radius:8px;padding:0 5px;opacity:.85}
.cc-grid{display:grid;grid-template-columns:90px 1fr 90px 1fr;row-gap:6px;column-gap:10px;font-size:12.5px}
.cc-k{color:var(--text-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;padding-top:2px}
.cc-grid a{color:var(--brand);text-decoration:none}
.cc-old{display:flex;flex-wrap:wrap;gap:16px;background:var(--surface-2);border:1px dashed var(--border);border-radius:7px;padding:7px 11px;color:var(--text-2);font-size:12px}
.cc-old b{font-weight:500;color:var(--text-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;margin-right:5px}
.cc-note{background:var(--surface-2);border:1px solid var(--border-lt);border-radius:7px;padding:9px 12px;white-space:pre-line;font-size:12.5px;color:var(--text);margin-bottom:6px}
.cc-note-tab{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);margin-bottom:4px;white-space:normal}
.cc-empty{color:var(--text-3);font-size:12.5px;padding:4px 2px}
.cc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--text-3);font-size:11px}
.cc-notes-btn{font-size:12px;padding:3px 10px}
.cc-menu{position:fixed;z-index:9500;background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 28px rgba(0,0,0,.18);
  padding:5px;min-width:300px;max-width:440px}
.cc-mi{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;background:none;border-radius:6px;font:inherit;font-size:12.5px;
  color:var(--text);text-align:left;cursor:pointer;text-decoration:none}
.cc-mi:hover,.cc-mi:focus{background:var(--brand-lt);outline:none}
.cc-mi .cc-star{width:12px;color:#c79100}
.cc-ma{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-ml{margin-left:auto;padding-left:14px;color:var(--text-3);font-size:11.5px;white-space:nowrap}
.cc-sep{border-top:1px solid var(--border-lt);margin:4px}
.cc-all{color:var(--brand)}
.ar-chan .ch-mail{cursor:pointer}
.ar-chan .ch-mail:hover{color:var(--brand)}
/* the Edit window's address rows */
.ec-ehead,.ec-erow{display:grid;grid-template-columns:24px 1fr 150px 24px;gap:8px;align-items:center}
.ec-ehead{font-size:11px;color:var(--text-3);margin-bottom:3px}
.ec-erow{margin-bottom:6px}
.ec-erow .ec-main{justify-self:center;accent-color:var(--brand);width:15px;height:15px}
.ec-erow input[type=email],.ec-erow input[type=text]{width:100%;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r);
  font-size:13px;color:var(--text);outline:none;background:var(--surface);transition:border-color .15s}
.ec-erow input[type=email]:focus,.ec-erow input[type=text]:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(15,108,189,.1)}
.ec-rm{border:0;background:none;color:var(--text-3);cursor:pointer;font-size:13px;border-radius:4px}
.ec-rm:hover{color:var(--red);background:var(--surface-2)}
.ec-onlists{grid-column:2 / 4;font-size:11px;color:var(--text-3);margin:-2px 0 2px}
.ec-addmail{border:0;background:none;color:var(--brand);cursor:pointer;font-size:12.5px;padding:2px 0 2px 32px}

/* Undo in a notice (13.49.60) */
.notif-undo{margin-left:10px;border:1px solid currentColor;background:none;color:inherit;border-radius:5px;padding:1px 9px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}

/* ── Icon sweep (13.49.61) — the drawn icons that replaced ✕ ⚠ ▶ ↙ ↗ ▾ ★ ── */
.sx .ai,.nx .ai,.tremove .ai,.notif-x .ai,#mx-btn .ai,.cm-del .ai,.rule-del-btn .ai,.ec-rm .ai,.cl-chip button .ai,.mini-btn .ai,.addr-search-clear .ai,#notif-close-btn .ai,.row-act .ai{display:block}
.tremove,.notif-x,.cm-del,.rule-del-btn,.ec-rm{display:inline-flex;align-items:center;justify-content:center}
.sx,.nx{display:inline-flex;align-items:center}
.notif-ico .ai{color:#fff;display:block}
.ctx-chk{display:inline-flex;width:14px;flex-shrink:0;color:var(--brand)}
.ctx-arrow{margin-left:auto;display:inline-flex}
.sel-bullet .ai{display:block}
.sb-sec-hdr .arrow{display:inline-flex;align-items:center}
.ri.star .ai{display:block}
.ri.star.on .ai{color:#f0a000}
#d-star.on .ai{color:#f0a000}
.ri.classify .ai,.ri-icon .ai{display:block}
.sp-ic{display:inline-flex;vertical-align:-2px;color:#f0a000}
.cc-car{display:inline-flex;vertical-align:-1px}
.cc-star .ai{display:inline-block;vertical-align:-1px}
.tic{display:inline-flex;vertical-align:-2px;opacity:.75}
.tbtn .ai,.btn .ai{vertical-align:-2px}
.att-copy .ai{vertical-align:-2px}
.eb-snip .ai,.detail-meta-row .dm-label .ai{vertical-align:-2px}
.tmore-caret{display:inline-flex;vertical-align:-2px}
.mk-text-tg .ai{vertical-align:-1px}

/* ═══════════════════════════════════════════════════════════════
   MODERNISATION (13.49.62)
   The look agreed from the picture of 29 Oct: the folder named over the
   list, Reply / Reply to all / Forward as one group, a quieter sidebar, a
   list without vertical rules, and a reading pane that starts with who the
   message is from. Nothing moved that is used to do something — every button,
   menu and key is where it was. All of it is this one block: deleting it puts
   the screens back as they were (the sidebar order is in index.html).
   ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar: what is open, then what can be done to it ── */
#mailbox-toolbar .tb-title{display:flex;align-items:baseline;gap:8px;min-width:0;max-width:280px;margin:0 10px 0 2px;flex-shrink:1}
#mailbox-toolbar .tb-name{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#mailbox-toolbar .tb-sub{font-size:12px;color:var(--text-3);white-space:nowrap;flex-shrink:0}
#mailbox-toolbar .tb-sub:empty{display:none}
/* Below about 1340 px the toolbar has no room to spare: the name gives way
   rather than push Top and the layout button onto a second line. */
@media (max-width:1340px){ #mailbox-toolbar .tb-title{display:none} }
#mailbox-toolbar .tgrp{display:inline-flex;align-items:stretch}
#mailbox-toolbar .tgrp .tbtn{border-radius:0;margin:0 0 0 -1px;border:1px solid var(--border);background:var(--surface)}
#mailbox-toolbar .tgrp .tbtn:first-child{border-radius:var(--r) 0 0 var(--r);margin-left:0}
#mailbox-toolbar .tgrp .tbtn:last-child{border-radius:0 var(--r) var(--r) 0}
#mailbox-toolbar .tgrp .tbtn:hover:not(:disabled){background:var(--surface-3);position:relative;z-index:1}
#mailbox-toolbar .tgrp .tbtn:disabled{background:var(--surface)}

/* ── Sidebar ── */
#sidebar .sb-quiet-sep{height:1px;background:var(--border-lt);margin:8px 12px}
#sidebar .sb-item.sb-quiet{color:var(--text-3);font-size:12.5px}
#sidebar .sb-item.sb-quiet .si-ico{color:var(--text-4,#a3acb4);opacity:.85}
#sidebar .sb-item.sb-quiet.active{color:var(--brand)}
#sidebar .sb-item.sb-quiet.active .si-ico{color:var(--brand);opacity:1}
/* A count only when there is something to count (the boxes were already
   hidden at nought); Inbox's in the sidebar's blue as a number, Alarms a red
   badge, Drafts keeps its orange "waiting to be sent". */
#sidebar #sb-unread{background:none;color:var(--brand);padding:0 2px;font-size:11.5px}
#sidebar #sb-alarms{background:var(--red);color:#fff}
#sidebar #sb-memos{background:none;color:var(--brand);padding:0 2px;font-size:11.5px}
#sidebar .sb-sec-hdr .si-ico{display:none}
#sidebar .sb-sec-hdr{font-size:10.5px;font-weight:600;letter-spacing:.07em;color:var(--text-3);padding-top:12px}
#sidebar .sb-folder .sf-icon{color:var(--text-4,#a3acb4)}
#sidebar .sb-folder.active .sf-icon{color:var(--brand)}
#sidebar .sb-folder.drag-over .sf-icon{color:#fff}

/* ── The list ── */
#list-pane .lcol{border-right-color:transparent;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;color:var(--text-3)}
#list-pane .lcol:hover{border-right-color:var(--border-lt)}
#list-pane .ecell{border-right-color:transparent}
#list-pane .erow{border-bottom-color:var(--row-border)}
#list-pane .ec-size,#list-pane .ec-recv{color:var(--text-3)}
#list-pane .ec-telix{color:var(--text-4,#a3acb4);letter-spacing:.02em}
#list-pane .erow.unread .ec-recv{color:var(--text-2)}
/* Unread is a blue dot at the very edge, where the bar was — the first column
   is full to the pixel, so the dot sits in its margin and costs no width. */
#list-pane .erow.unread::before{top:50%;bottom:auto;left:1px;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--brand)}
#list-pane .erow.selected{background:var(--list-sel)!important;box-shadow:none}
#list-pane .erow.selected::before{top:5px;bottom:5px;left:0;width:3px;height:auto;margin-top:0;
  border-radius:0 3px 3px 0;background:var(--brand)}
#list-pane .ri.via-tag{border-radius:5px}

/* ── Reading pane ── */
#email-detail .detail-top-bar{display:flex;align-items:flex-start;gap:12px;padding:12px 18px 10px}
#email-detail .detail-header-info{flex:1;min-width:0}
#email-detail .detail-subject{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0 0 4px}
/* From, To, Cc and Bcc stay one pill per address, as before. */
#email-detail .detail-meta-row{min-height:20px}
#email-detail .detail-header-right{gap:8px;padding-top:2px}
#email-detail .d-more{font-weight:700;letter-spacing:1px;color:var(--text-3);padding:0 6px}
/* Attachments: one short line each — a small file mark, the name and its size */
#email-detail .detail-meta .att-chip{height:24px;padding:0 9px 0 6px;gap:5px;border:1px solid var(--border)!important;
  border-radius:12px;background:var(--surface-2)!important;color:var(--text-2);font-size:12px}
#email-detail .detail-meta .att-chip .att-ic{display:inline-flex}
#email-detail .detail-meta .att-chip .att-ic svg,#email-detail .detail-meta .att-chip .att-ic img{width:14px;height:14px}
#email-detail .detail-meta .att-chip .att-name{max-width:260px}
#email-detail .detail-meta .att-chip:hover{border-color:var(--brand)!important;color:var(--brand)}
#email-detail .detail-meta .att-chips{gap:6px;margin-top:4px}
html.theme-dark #email-detail .detail-meta .att-chip{color:var(--text-2)}

/* The empty list's mailbox was an emoji (📭) — drawn now, like every other icon */
.empty-list:before{content:'';width:34px;height:34px;opacity:.55;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8894' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l1 2h6l1-2h4 M4 13l2-8h12l2 8v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}

/* ═══════════════════════════════════════════════════════════════
   MODERNISATION, PART 2 (13.49.64) — the writing window, Circular,
   Address and the Tools settings brought in line with the mailbox.
   Same rule as part 1: nothing that is used to do something moves.
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared: a group of buttons reads as one control ── */
.compose-toolbar .tgrp{display:inline-flex;align-items:stretch}
.compose-toolbar .tgrp .tbtn{border-radius:0;margin:0 0 0 -1px;border:1px solid var(--border);background:var(--surface)}
.compose-toolbar .tgrp .tbtn:first-child{border-radius:var(--r) 0 0 var(--r);margin-left:0}
.compose-toolbar .tgrp .tbtn:last-child{border-radius:0 var(--r) var(--r) 0}
.compose-toolbar .tgrp .tbtn:hover{background:var(--surface-3);position:relative;z-index:1}
.compose-toolbar .tgrp .tbtn.on,.compose-toolbar .tgrp .tbtn.active{background:var(--brand-lt);color:var(--brand);border-color:var(--brand);z-index:2;position:relative}
.compose-toolbar{padding:8px 10px;gap:6px;background:var(--surface)}

/* ── The writing window: labels in grey, fields on white ── */
.compose-fields .cf-row{background:var(--surface);min-height:36px}
.compose-fields .cf-lbl{background:transparent;border-right:0;width:72px;padding:6px 6px 6px 14px;
  font-size:12px;font-weight:500;color:var(--text-3)}
.compose-fields .cf-action{border-left:0;color:var(--text-3);padding:4px 12px}
.compose-fields .cf-action:hover{background:var(--surface-3);color:var(--brand)}
.compose-fields .cf-siglbl{font-size:11px;letter-spacing:.04em}
.compose-pane .drop-bar{margin:6px 10px;padding:4px 12px;border-radius:var(--r);font-size:11.5px;background:transparent}
.compose-pane .drop-bar:hover{border-color:var(--brand);color:var(--brand)}
.rte-bar{padding:4px 10px;gap:2px;background:var(--surface)}
.rte-bar .rb{min-width:28px;height:28px;border-radius:6px;padding:0 6px}
.rte-bar .rb .ai{display:block}
.rte-bar .rsep{height:18px;margin:0 6px}
.rte-bar .rsel,.rte-bar .rb-sel{height:28px;border-radius:6px}
.rsplit .rs-arrow{min-width:16px;padding:0 2px}

/* ── Circular ── */
.circ-item{border-bottom-color:var(--row-border);position:relative}
.circ-item.selected{background:var(--list-sel);font-weight:600;color:var(--brand)}
.circ-item.selected::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.circ-item .ci-handle{display:inline-flex;color:var(--text-4,#a3acb4)}
.circ-member .cm-addr.cm-empty,.circ-member .cm-country.cm-empty{color:var(--text-3);opacity:.6}
.cm-toolbar .btn.danger:disabled{background:var(--surface);color:var(--text-3);border-color:var(--border);opacity:.7}

/* ── Address: the letters on one line, the open company marked like a message ── */
.addr-row{position:relative}
.addr-row.selected::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}

/* ── Tools settings: the label on the left, the choice beside it ── */
.vbox .vrow[style*="column"]{align-items:flex-start!important}
.vbox .vrow[style*="column"] > div[style*="font-weight:700"]{font-size:12px!important;font-weight:500!important;color:var(--text)!important}
.vbox .radio-v{gap:7px;padding-left:2px}
.vbox h4{font-size:10.5px;font-weight:600;letter-spacing:.07em;color:var(--text-3)}
.vbox .vrow > span:first-child{flex:1;min-width:0!important;color:var(--text)}
/* On / Off as one two-part switch instead of two round buttons. The radio
   buttons are still there underneath — keyboard and saving work as before. */
.radio-g{gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;flex-shrink:0;background:var(--surface)}
.radio-g label{position:relative;gap:0;padding:4px 12px;font-size:12px;color:var(--text-2);border-left:1px solid var(--border);user-select:none}
.radio-g label:first-child{border-left:0}
.radio-g label input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.radio-g label:hover{background:var(--surface-3)}
.radio-g label:has(input:checked){background:var(--brand-lt);color:var(--brand);font-weight:600}
.radio-g label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:-2px}
.radio-g label:has(input:disabled){opacity:.5;cursor:default}
#circ-detail-pane,#addr-detail{background:var(--surface)}
.addr-letters{flex-wrap:nowrap!important;gap:1px!important;overflow:hidden}
.addr-letters .al-btn{flex:1 1 0;min-width:0!important;padding:2px 0!important;text-align:center}
.vbox h4:not(:first-child){margin-top:22px!important}

/* ── Pills (13.49.65) — what is selected is a rounded shape set in from the
   edges, as in the picture, in the sidebar and along the top alike. The
   stripe down the left edge, and the full-height block on the top bar's
   message and search tabs, are gone. ── */
#sidebar .sb-item,#sidebar .sb-folder{margin:1px 8px!important;border-radius:7px!important}
#sidebar .sb-item.active,#sidebar .sb-folder.active{background:var(--sb-sel)!important;box-shadow:none!important}
#sidebar .sb-item:not(.active):hover,#sidebar .sb-folder:not(.active):hover{background:var(--sb-hover)}
html.theme-dark #sidebar .sb-item.active,html.theme-dark #sidebar .sb-folder.active{background:#17323d!important}
.topnav .ntab{padding:6px 12px;margin:0 2px;border-radius:7px;align-self:center;border-bottom:0!important}
.topnav .ntab.active{background:var(--brand-lt)!important;color:var(--brand);font-weight:600}
#compose-nav-tabs .ntab-compose,#search-nav-tabs .ntab-compose{height:auto!important;align-self:center;
  padding:6px 8px 6px 12px;margin:0 2px;border-radius:7px;border-bottom:0!important}
#compose-nav-tabs,#search-nav-tabs{display:flex;align-items:center;align-self:stretch}
#compose-nav-tabs .ntab-compose.active,#search-nav-tabs .ntab-compose.active{background:var(--brand-lt);color:var(--brand);font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   MODERNISATION, PART 3 (13.49.66) — the search panel, the other Tools
   pages and the dialogs.
   ═══════════════════════════════════════════════════════════════ */

/* ── The search panel ── */
.search-panel .sp-title{font-size:12px;letter-spacing:.04em;text-transform:none;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:7px;padding:12px 14px}
.search-panel .sp-body{padding:12px 12px 16px}
.search-panel .sp-body .field{margin-bottom:12px}
.search-panel .sp-body .field > label{font-size:11.5px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--text-3);margin-bottom:4px}
.search-panel .sp-body input[type="text"],.search-panel .sp-body input[type="date"],.search-panel .sp-body select{height:30px;border-radius:var(--r);padding:0 9px}
.search-panel .sp-body .sp-q{height:34px;font-size:13px}
.search-panel .sp-actions{display:grid;grid-template-columns:1fr auto 34px;gap:6px;margin:0 0 12px!important;padding:0;border:0}
.search-panel .sp-actions .btn{height:32px;justify-content:center}
/* Save keeps its words for the tooltip and screen readers; the button shows the disk */
.search-panel .sp-actions .sp-save{font-size:0;padding:0;gap:0}
.search-panel .sp-actions .sp-save .ai{width:15px;height:15px}
/* In / Out / Doc / All as one switch */
.search-panel .sp-radios{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.search-panel .sp-radios label{position:relative;justify-content:center;padding:5px 0;font-size:12px!important;color:var(--text-2);
  border-left:1px solid var(--border);text-transform:none;letter-spacing:0;margin:0}
.search-panel .sp-radios label:first-child{border-left:0}
.search-panel .sp-radios input{position:absolute;opacity:0;width:1px!important;height:1px;margin:0;pointer-events:none}
.search-panel .sp-radios label:hover{background:var(--surface-3)}
.search-panel .sp-radios label:has(input:checked){background:var(--brand-lt);color:var(--brand);font-weight:600!important}
.search-panel .sp-radios label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:-2px}
/* Unread / Starred / Flagged / Attachment as four toggles */
.search-panel .sp-checks{grid-template-columns:1fr 1fr;gap:6px}
.search-panel .sp-checks label{position:relative;justify-content:center;gap:5px;height:28px;padding:0 6px;border:1px solid var(--border);
  border-radius:14px;background:var(--surface);color:var(--text-2);font-size:12px!important;text-transform:none;letter-spacing:0;margin:0;white-space:nowrap}
.search-panel .sp-checks input{position:absolute;opacity:0;width:1px!important;height:1px;margin:0;pointer-events:none}
.search-panel .sp-checks label:hover{background:var(--surface-3)}
.search-panel .sp-checks label:has(input:checked){background:var(--brand-lt);border-color:var(--brand);color:var(--brand);font-weight:600!important}
.search-panel .sp-checks label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:1px}
.search-panel .sp-checks .ai{display:block}
.search-panel .sp-body .sp-checks label,.search-panel .sp-body .sp-radios label{display:flex;align-items:center}
.search-panel .sp-body .field:has(.sp-checks){margin-bottom:14px}

/* ── Tools pages ── */
/* Classify: the ten lists side by side instead of one long column */
#tool-classify .vbox{max-width:none!important}
#classify-lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
#classify-lists .cl-list{margin:0;border-radius:var(--r-lg,10px)}
/* Signatures: Font and Size were stretched across the editor, a line each */
#sig-toolbar .rb-sel{width:auto!important;height:28px;padding:0 6px;border-radius:6px}
#sig-toolbar .rb{min-width:28px;height:28px;border-radius:6px}
#sig-toolbar .rb .ai{display:block}
/* Info */
#tool-info .info-card{display:flex;gap:14px;align-items:center;margin:16px;padding:18px 20px;max-width:420px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg,10px)}
#tool-info .info-mark{width:44px;height:44px;border-radius:10px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
#tool-info .info-name{font-size:16px;color:var(--text-3)}
#tool-info .info-name strong{color:var(--text)}
#tool-info .info-sub{font-size:12px;color:var(--text-2);margin-top:2px}
#tool-info .info-ver{font-size:11.5px;color:var(--text-3);margin-top:4px}

/* ── Dialogs: one look for all of them ── */
#modal-root .modal-ov{background:rgba(15,27,36,.34);backdrop-filter:blur(2px)}
html.theme-dark #modal-root .modal-ov{background:rgba(0,0,0,.55)}
#modal-root .modal{border-radius:12px;border:1px solid var(--border);box-shadow:0 18px 50px rgba(16,24,40,.22),0 2px 6px rgba(16,24,40,.08)}
#modal-root .modal-hdr{background:var(--surface);border-bottom:0;padding:16px 20px 6px;align-items:flex-start;gap:12px}
#modal-root .modal-hdr h3{font-size:15px;font-weight:600;line-height:1.35;color:var(--text)}
#modal-root .modal-hdr button{background:none;color:var(--text-3);width:28px;height:28px;border-radius:7px;margin:-4px -6px 0 0}
#modal-root .modal-hdr button:hover{background:var(--surface-3);color:var(--text)}
#modal-root .modal-body{padding:10px 20px 18px}
#modal-root .modal-body.cfm-empty{display:none}
#modal-root .modal-body .cfm-detail{font-size:12.5px;color:var(--text-2);line-height:1.55}
#modal-root .modal-footer{background:var(--surface);border-top:1px solid var(--border-lt);padding:12px 20px}
#modal-root .modal-footer .btn{min-width:84px;justify-content:center}
#modal-root .modal-body .field > label{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-2)}
#modal-root .modal-body .field input,#modal-root .modal-body .field select,#modal-root .modal-body .field textarea{border-width:1px;border-radius:7px}
#modal-root .modal-body .field input:focus,#modal-root .modal-body .field select:focus,#modal-root .modal-body .field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}

/* ── Spam (13.49.72) ── */
.junk-why{display:inline-flex;align-items:center;height:17px;padding:0 7px;margin-right:6px;border-radius:9px;
  background:#fdecea;color:#a32833;font-size:10.5px;font-weight:600;white-space:nowrap;flex-shrink:0}
html.theme-dark .junk-why{background:#3a1c20;color:#f0a0a8}
.pend-banner.junk-banner{background:#fdf3f2;border-color:#f1c9c4}
html.theme-dark .pend-banner.junk-banner{background:#2a1a1c;border-color:#4a2a2e}
#mailbox-toolbar .tb-empty-junk{color:var(--red)}
#mailbox-toolbar .tb-empty-junk .ai{color:var(--red)}
#tool-spam .spam-body{padding:16px;display:flex;flex-direction:column;gap:12px;max-width:980px;overflow:auto}
#tool-spam .vbox{margin:0}
#tool-spam .spam-intro p{font-size:12.5px;color:var(--text-2);line-height:1.6;margin:0}
.spam-add{display:flex;gap:8px}
.spam-add input{flex:1;max-width:360px;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text)}
.spam-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.spam-tbl th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);padding:4px 8px;border-bottom:1px solid var(--border-lt)}
.spam-tbl td{padding:6px 8px;border-bottom:1px solid var(--row-border);vertical-align:middle}
.spam-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.spam-kind{display:inline-block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);
  border:1px solid var(--border);border-radius:4px;padding:0 4px;margin-right:6px}
.spam-dim{color:var(--text-3);font-size:12px}
.spam-note{color:var(--text-3);font-size:11.5px;font-style:italic}
.spam-count{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:600;text-align:center}
.spam-empty{color:var(--text-3);font-size:12.5px;padding:6px 0}
.spam-learn-bar{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px}
.spam-learn{max-height:520px;overflow:auto;border:1px solid var(--border-lt);border-radius:var(--r)}
.sl-group{padding:8px 12px;border-bottom:1px solid var(--row-border)}
.sl-dom{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.sl-dom.off{cursor:default}
.sl-addrs{display:flex;flex-direction:column;gap:3px;margin:6px 0 0 26px}
.sl-addr{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;color:var(--text-2)}
.sl-addr input:disabled + *{opacity:.5}
#modal-root .confirm-modal .modal-footer .btn{white-space:nowrap}

/* ── Potential spam (13.49.73): orange, a question rather than a verdict ── */
.spam-maybe{display:inline-flex;align-items:center;height:17px;padding:0 7px;margin-right:6px;border-radius:9px;
  background:#fff1e0;color:#b45309;font-size:10.5px;font-weight:600;white-space:nowrap;flex-shrink:0}
html.theme-dark .spam-maybe{background:#3a2a14;color:#f5b971}
.pend-banner.suspect-banner{background:#fff6eb;border-color:#f3cf9f;border-left-color:#e08a1e}
html.theme-dark .pend-banner.suspect-banner{background:#2c2216;border-color:#5a4220;border-left-color:#e08a1e}
.spam-state{display:flex;align-items:center;gap:10px;font-size:12.5px}
.spam-state .dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.spam-state.off .dot{background:var(--red)}

/* Rules list: the whole name on its own line, owner and date beneath (13.49.76) */
.rules-item{align-items:flex-start;padding:7px 12px}
.rules-item .ri-icon{margin-top:1px}
.rules-item .ri-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rules-item .ri-name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35}
.rules-item .ri-sub{font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rules-item .ri-sub .ri-date{font-size:inherit}

/* Reply: bring in the original's files (13.49.77) */
.drop-bar .orig-att-btn{margin-left:10px;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:11px;
  border:1px solid var(--brand);background:var(--brand-lt);color:var(--brand);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;vertical-align:middle}
.drop-bar .orig-att-btn:hover{background:var(--brand);color:#fff}
.drop-bar .orig-att-btn:hover .ai{color:#fff}

/* Word and Excel in the file viewer (13.49.78) */
.fv-body:has(.fv-note){display:flex;flex-direction:column}
.fv-body:has(.fv-note) .fv-frame{flex:1;height:auto;min-height:0}
.fv-note{flex-shrink:0;padding:6px 12px;font-size:11.5px;color:#7a5410;background:#fff6e5;border-bottom:1px solid #f0dcb0}

/* A question with more than two answers: room for every button's words (13.49.78) */
#modal-root .confirm-modal.choice-modal{max-width:min(600px,96vw)}
#modal-root .choice-modal .modal-footer{flex-wrap:wrap}
#modal-root .choice-modal .modal-footer .btn{min-width:0;white-space:nowrap;flex:0 0 auto}

/* The search box is a search box (13.49.80): drawn as before, without the
   browser's own search styling and clear cross */
#nav-search-input{-webkit-appearance:none;appearance:none}
#nav-search-input::-webkit-search-cancel-button,#nav-search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}