/* ============================================================================
   bodek_theme — Bodek Solutions webmail (v18, 2026-09-18)
   ----------------------------------------------------------------------------
   Implements design_handoff_webmail/README.md (Modernist design system) on top
   of Roundcube's elastic skin. Nothing in skins/elastic/ or core is touched.

   The design is the source of truth. Everything from v2–v13 (indigo brand kit,
   ink/grey compose palette, 8/12px radii, popover shadows, the compose MODAL,
   the compose FAB, the account chip, the injected list toolbar / select bar)
   has been DELETED rather than reconciled — see THEME.md v14.

   Modernist rules honoured here:
     1. Three fixed columns; compose takes the reading column; no modals except
        the dialog pattern.
     2. Red = unread + primary action only.
     3. Rules, not shadows. 2px divider between columns/sections, 1px
        neutral-300 inside lists. Selection = 2px inset ink edge + lighter fill.
     4. Weight marks unread (700 vs 400).
     5. Flush left, including button labels.
     6. Zero radius everywhere. Shadow on the toast only.
   ============================================================================ */

/* ---- Archivo, self-hosted. The design's styles.css @imports Google Fonts;
   we never let the running mail server make external CDN calls, so the
   variable woff2 is vendored into fonts/ instead. ---- */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;          /* variable: covers 400 / 600 / 800 */
    font-display: swap;
    src: url('fonts/archivo-latin-variable.woff2') format('woff2');
}

/* ============================================================================
   TOKENS — verbatim from _ds/modernist-…/styles.css
   ============================================================================ */
:root {
    --color-bg: #f3f2f2;
    --color-surface: #eae9e9;
    --color-text: #201e1d;
    --color-accent: #ec3013;
    --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

    --color-neutral-100: #f8f4f4;
    --color-neutral-200: #eae7e7;
    --color-neutral-300: #d7d3d3;
    --color-neutral-400: #bab6b6;
    --color-neutral-500: #9b9797;
    --color-neutral-600: #7d7979;
    --color-neutral-700: #605d5d;
    --color-neutral-800: #444141;
    --color-neutral-900: #2d2b2b;

    --color-accent-100: #fff2ef;
    --color-accent-400: #ff9783;
    --color-accent-600: #dd2b0f;
    --color-accent-700: #ae1800;
    --color-accent-800: #7c1405;

    --font-heading: "Archivo", system-ui, sans-serif;
    --font-body: "Archivo", system-ui, sans-serif;

    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-6: 24px; --space-8: 32px;

    --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;

    --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* The design has no dark mode. Elastic stamps html.dark-mode before first
   paint; neutralise it so the palette is the one the design specifies. */
html.dark-mode { color-scheme: light; }

/* ============================================================================
   BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-family: var(--font-body) !important;
    font-size: 13px;                     /* UI default */
    line-height: 1.4;
    font-weight: 400;
}

/* The viewport lock belongs to the APP SHELL only. Our stylesheet also loads
   inside #messagecontframe (the message is a real Roundcube page), and there
   `height:100%; overflow:hidden` stopped the message scrolling. */
html:has(body.post-shell), body.post-shell { height: 100%; overflow: hidden; }
body.iframe, body.framed, body.action-show, body.action-preview {
    height: auto !important; overflow: auto !important;
}

/* zero radius, everywhere, no exceptions */
*, *::before, *::after { border-radius: 0 !important; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent) !important; outline-offset: 2px; }

/* BUG 5: message rows were picking up that focus ring. outline-offset:2px
   draws it OUTSIDE the row box, so it floated off-centre and its bottom edge
   ran past the row into the divider below. Selection in this design is the
   inset ink edge + lighter fill, never a floating red box. */
.messagelist tbody tr:focus,
.messagelist tbody tr:focus-visible,
.messagelist tbody tr > td:focus,
.messagelist tbody tr > td:focus-visible,
.messagelist tbody tr a:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* 8px scrollbars, neutral-400 thumb */
html { scrollbar-width: thin; scrollbar-color: var(--color-neutral-400) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--color-neutral-400); }
*::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-500); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Kill every elastic shadow. The toast is the only elevated thing (and the
   confirmation dialog, which is the one allowed modal). */
#layout, #layout *, .popupmenu, .ui-dialog, .listbox, .header, .footer { box-shadow: none !important; }

/* ============================================================================
   APPLICATION SHELL
   Elastic's #layout is a flex row of columns with no global header. We inject
   #post-header (bodek_theme.js) as a sibling before it and make <body> the
   52px + 1fr grid the design specifies.
   ============================================================================ */
/* The 52px|1fr grid is applied ONLY once the JS has actually inserted the
   header (it adds body.post-shell). Previously this keyed off body.task-mail,
   so if our JS failed the grid still applied, #layout landed in the 52px row,
   and the whole app was squeezed into a 52px strip — a JS fault turned into a
   catastrophic-looking layout. Now a JS failure degrades to elastic's own
   layout and the mail client stays usable. */
body.post-shell {
    display: grid !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
}

/* elastic's icon rail is retired — the header owns global nav */
#taskmenu, #layout-menu { display: none !important; }

#post-header {
    grid-row: 1;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr) auto;
    align-items: center;
    height: 52px;
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-divider);
    min-width: 0;
}

/* every header cell separated by a 2px vertical rule */
#post-brand, #post-search { border-right: 2px solid var(--color-divider); height: 100%; }

#post-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px; min-width: 0;
}
#post-brand .post-mark { width: 14px; height: 14px; background: var(--color-accent); flex: none; }
#post-brand .post-name {
    font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
}
#post-brand .post-domain {
    font-size: 11px; color: var(--color-neutral-600);
    margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#post-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-width: 0; }
#post-search .post-slash {
    font-size: 11px; color: var(--color-neutral-600);
    border: 1px solid var(--color-neutral-400); padding: 1px 6px; flex: none;
}

#post-actions { display: flex; align-items: center; gap: 0; height: 100%; }

/* Compose — one of the only two red things in the product */
#post-compose {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
    height: 100%; padding: 0 20px; border: 0;
    border-right: 2px solid var(--color-divider);
    background: var(--color-accent); color: var(--color-bg);
    font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
#post-compose:hover { background: var(--color-accent-600); }
#post-compose:active { background: var(--color-accent-700); }
#post-compose .post-hint { font-size: 11px; opacity: .75; font-weight: 600; }

#post-settings {
    width: 52px; height: 100%; border: 0;
    border-right: 2px solid var(--color-divider);
    background: transparent; color: var(--color-text);
    display: grid; place-items: center; cursor: pointer;
}
#post-settings:hover { background: var(--color-neutral-200); }
body.task-settings #post-settings { background: var(--color-neutral-100); }

#post-avatar {
    width: 52px; height: 100%;
    display: grid; place-items: center;
    font-family: var(--font-heading); font-weight: 800; font-size: 12px;
    background: var(--color-neutral-900); color: var(--color-bg);
    cursor: pointer; border: 0;
}

/* ---- the three columns ---- */
body.post-shell #layout {
    grid-row: 2;
    display: grid !important;
    grid-template-columns: 224px clamp(260px, 34%, 380px) minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    overflow: hidden !important;
    background: var(--color-bg) !important;
}

/* elastic toggles .hidden on columns when navigating at narrow widths; the
   design's three columns are fixed, so keep them all mounted. */
/* elastic hides a pane with .hidden while navigating, and its resizer writes
   inline `width`/`flex` — both would break the three-column shell. */
body.post-shell #layout-sidebar.hidden:not(.sidebar-right),
body.post-shell #layout-list.hidden,
body.post-shell #layout-content.hidden { display: flex !important; }
body.post-shell #layout-sidebar:not(.sidebar-right),
body.post-shell #layout-list,
body.post-shell #layout-content { width: auto !important; flex: none !important; }
body.post-shell #layout .column-resizer { display: none !important; }

/* BUG 1 ROOT CAUSE FIX (v16)
   #layout has FOUR children (layout-menu, layout-sidebar, layout-list,
   layout-content) and elastic mutates them at runtime — it hides panes with
   .hidden when navigating, and its column-resizer writes inline width/flex onto
   them. Our grid declared three tracks and relied on IMPLICIT auto-placement,
   so the moment a pane was hidden or an extra child appeared, every pane
   shifted one track left: #layout-content landed in the ~285px list track (the
   narrow column the message was rendering into) and the 1fr track sat empty.
   Fix: pin each pane to its own track by ID and neutralise elastic's inline
   widths. Placement is now immune to hidden siblings, extra children and
   source order. */
body.post-shell #layout-sidebar:not(.sidebar-right) { grid-column: 1 !important; grid-row: 1 !important; }
body.post-shell #layout-list                        { grid-column: 2 !important; grid-row: 1 !important; }
body.post-shell #layout-content                     { grid-column: 3 !important; grid-row: 1 !important; }

body.post-shell #layout-sidebar:not(.sidebar-right),
body.post-shell #layout-list,
body.post-shell #layout-content {
    position: relative !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    flex: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.post-shell #layout-sidebar:not(.sidebar-right) { border-right: 2px solid var(--color-divider) !important; background: var(--color-surface) !important; }
body.post-shell #layout-list { border-right: 2px solid var(--color-divider) !important; background: var(--color-bg) !important; }
body.post-shell #layout-content { background: var(--color-neutral-100) !important; min-width: 0 !important; }
/* BUG 2: the preview frame fills the right-hand pane with normal text flow */
body.post-shell #layout-content #messagecontframe,
body.post-shell #layout-content .iframe-wrapper {
    flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important;
    min-height: 0 !important; border: 0 !important; display: block !important;
}

/* ============================================================================
   FOLDER RAIL  (left, bg surface)
   ============================================================================ */
#layout-sidebar > .header,            /* elastic's column header — the design has none here */
#layout-sidebar > .footer { display: none !important; }

#folderlist-content, #layout-sidebar .scroller {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    background: var(--color-surface) !important;
    padding: 0 !important;
}

.post-rail-label {
    padding: 14px 16px 6px;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-neutral-600);
}

.folderlist, .folderlist ul { list-style: none; margin: 0; padding: 0; background: transparent !important; }
.folderlist li { border: 0 !important; background: transparent !important; }

.folderlist li a {
    display: flex !important; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    border: 0 !important; margin: 0 !important;
    padding: 7px 16px !important;
    font-size: 13px; font-weight: 400;
    color: var(--color-text) !important;
    text-decoration: none; cursor: pointer;
    background: transparent !important;
    position: relative;
}
.folderlist li a:hover { background: var(--color-neutral-300) !important; }
.folderlist li.selected > a { background: var(--color-neutral-100) !important; font-weight: 600; }

/* the 6px dot: red only on Inbox when it has unread, else transparent */
.folderlist li a:before {
    content: "" !important;
    width: 6px; height: 6px; flex: none;
    background: transparent;
    font-family: inherit !important;   /* kill elastic's icon font entirely */
    -webkit-mask: none !important; mask: none !important;
}
.folderlist li.inbox.unread > a:before,
.folderlist li.mailbox.unread.inbox > a:before { background: var(--color-accent); }

/* folder (label) rows use a 14px lucide folder glyph in place of the dot */
.folderlist li.post-label > a:before {
    width: 14px; height: 14px;
    background: var(--color-neutral-700);
    -webkit-mask: center / 14px 14px no-repeat !important;
            mask: center / 14px 14px no-repeat !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E") !important;
}

/* name takes the space, count sits right */
.folderlist li a .post-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.folderlist .unreadcount,
.folderlist li .unreadcount {
    position: static !important;
    margin: 0 !important; padding: 0 !important;
    min-width: 0 !important;
    background: transparent !important;
    font-size: 11px; font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--color-text) !important;   /* ink when Inbox has unread */
}
.folderlist li:not(.inbox) .unreadcount { color: var(--color-neutral-600) !important; }

/* 2px rule (inset 16px) between MAILBOXES and FOLDERS */
.post-rail-rule { height: 2px; background: var(--color-divider); margin: 10px 16px 4px; }

/* storage block pinned to the bottom */
#post-storage {
    margin-top: auto; padding: 14px 16px;
    border-top: 2px solid var(--color-divider);
    font-size: 11px; color: var(--color-neutral-700);
    display: flex; flex-direction: column; gap: 8px;
}
#post-storage .post-bar { height: 4px; background: var(--color-neutral-300); }
#post-storage .post-bar > i { display: block; height: 100%; background: var(--color-text); }
#post-storage .post-figures { display: flex; justify-content: space-between; }

/* ============================================================================
   CONVERSATION LIST  (middle column, bg ground)
   ============================================================================ */
#messagelist-header {
    flex: none;
    display: flex !important; align-items: center; gap: 12px;
    height: 44px; min-height: 44px;
    padding: 0 16px !important;
    border-bottom: 2px solid var(--color-divider) !important;
    background: var(--color-bg) !important;
    overflow: visible !important;
    justify-content: flex-start !important;
}

/* elastic chrome in this header that the design does not have */
#messagelist-header .toolbar,
#messagelist-header .toolbar-menu-button,
#messagelist-header .toolbar-list-button,
#messagelist-header a.button.toolbar-button,
#messagelist-header .back-sidebar-button,
#messagelist-header .task-menu-button { display: none !important; }

#messagelist-header .header-title,
#post-list-title {
    font-family: var(--font-heading); font-weight: 800; font-size: 14px;
    color: var(--color-text); margin: 0 !important; flex: none;
    text-align: left !important; white-space: nowrap;
}
#post-list-count { font-size: 12px; color: var(--color-neutral-600); flex: none; }

/* select-all checkbox */
.post-check {
    width: 14px; height: 14px; flex: none;
    border: 1px solid var(--color-neutral-600);
    background: transparent; cursor: pointer; padding: 0;
    display: grid; place-items: center;
}
.post-check.is-on { background: var(--color-text); border-color: var(--color-text); }
.post-check.is-on:after {
    content: ""; width: 8px; height: 8px; background: var(--color-bg);
    -webkit-mask: center / 8px 8px no-repeat; mask: center / 8px 8px no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* filter toggles: Unread / Attachments */
#post-filters { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.post-filter {
    font-size: 11px; padding: 3px 8px; cursor: pointer;
    border: 1px solid var(--color-neutral-400);
    background: transparent; color: var(--color-neutral-700);
    font-family: var(--font-body);
}
.post-filter.is-on { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

/* bulk-action header (swaps in when ≥1 row is checked) */
#post-bulk { display: none; align-items: center; gap: 8px; width: 100%; }
body.post-has-checked #post-bulk { display: flex; }
body.post-has-checked #post-list-title,
body.post-has-checked #post-list-count,
body.post-has-checked #post-filters { display: none !important; }
#post-bulk .post-bulk-count { font-size: 12px; font-weight: 600; margin-right: 4px; }
.post-btn-secondary {
    font-size: 12px; font-weight: 600; padding: 4px 8px; cursor: pointer;
    background: transparent; color: var(--color-text);
    border: 1px solid transparent; font-family: var(--font-heading);
}
.post-btn-secondary:hover { border-color: var(--color-divider); background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* ---- the scroller + rows ---- */
#messagelist-content, .listbox .scroller {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    background: var(--color-bg) !important;
}
.messagelist { background: var(--color-bg) !important; width: 100%; border-collapse: collapse; }
.messagelist thead, .messagelist .branch, table.fixedcopy { display: none !important; }

.messagelist tbody tr {
    cursor: pointer;
    background: transparent;
    border: 0 !important;
}
.messagelist tbody tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--color-neutral-300) !important;
    padding: 11px 16px !important;
    vertical-align: top;
    font-size: 13px !important;
    background: transparent !important;
}
.messagelist tbody tr:hover > td { background: var(--color-neutral-200) !important; }

/* Selection = lighter fill + 2px inset ink edge. Never a tinted card. */
.messagelist tbody tr.selected > td,
.messagelist tbody tr.focused.selected > td { background: var(--color-neutral-100) !important; }
.messagelist tbody tr.selected > td:first-child { box-shadow: inset 2px 0 0 var(--color-text); }

/* checked (bulk) rows use the accent tint */
.messagelist tbody tr.post-checked > td { background: var(--color-accent-100) !important; }

/* elastic's widescreen row is [td.threads][td.subject][td.flags]; the design's
   row is a 14px | 1fr grid. Collapse the side cells and lay the subject cell
   out as the two/three-line block. */
.messagelist td.threads { display: none !important; }
.messagelist td.flags {
    width: 2em; padding: 11px 8px 11px 0 !important;
    vertical-align: middle !important; text-align: right;
    border-bottom: 1px solid var(--color-neutral-300) !important;
}

/* v15.3: the real widescreen subject cell contains fromto, date, size, status
   and subject as SIBLINGS. .date had no grid placement, so it auto-flowed into
   the next free cell and landed on top of the subject — that was the overlap.
   Three explicit columns: dot | text | date. */
.messagelist tbody tr td.subject {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    width: 100% !important;
    align-items: start;
}

/* the 6px unread square lives in the 14px gutter of line 1 */
.messagelist tbody tr td.subject:before {
    content: "";
    grid-column: 1; grid-row: 1;
    width: 6px; height: 6px; align-self: center;
    background: transparent;
}
.messagelist tbody tr.unread td.subject:before { background: var(--color-accent); }

/* line 1: sender + date */
.messagelist td.subject .fromto {
    grid-column: 2; grid-row: 1;
    display: block; min-width: 0;
    font-size: 13px; font-weight: 400;
    color: var(--color-text) !important;
    padding: 0 !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.messagelist tbody tr.unread td.subject .fromto { font-weight: 700; }

.messagelist td.subject .date {
    grid-column: 3; grid-row: 1;
    justify-self: end; align-self: center;
    margin: 0 !important; flex: none; white-space: nowrap;
    font-size: 11px !important; font-weight: 400 !important;
    color: var(--color-neutral-600) !important;
    font-variant-numeric: tabular-nums;
}

/* line 2: subject (+ count / paperclip / star), aligned under the sender */
.messagelist td.subject .subject {
    grid-column: 2 / span 2; grid-row: 2;
    display: flex; align-items: center; gap: 8px; min-width: 0;
    font-size: 13px; font-weight: 400;
    color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.messagelist tbody tr.unread td.subject .subject { font-weight: 700; }

/* line 3: snippet */
.messagelist td.subject .snippet,
.messagelist td.subject .preview {
    grid-column: 2 / span 2; grid-row: 3;
    font-size: 12px; font-weight: 400 !important;
    color: var(--color-neutral-700) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block !important;
}

/* elastic's status circle is not part of this design */
.messagelist td.subject span.msgicon.status { display: none !important; }
.messagelist span.size { display: none !important; }
.messagelist tr:hover span.date { display: inline !important; }   /* never swap date→size */
.messagelist tr:hover span.size { display: none !important; }

/* attachment paperclip + star, inline on line 2 */
.messagelist span.attachment span:before,
.messagelist span.flagged:before {
    content: "" !important; font-family: inherit !important;
    display: inline-block; width: 12px; height: 12px; margin: 0 !important;
    -webkit-mask: center / 12px 12px no-repeat; mask: center / 12px 12px no-repeat;
}
.messagelist span.attachment span:before {
    background-color: var(--color-neutral-600);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}
/* starred: the accent appears ONLY as the small filled star glyph */
.messagelist span.flagged:before {
    background-color: var(--color-accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
.messagelist span.unflagged { display: none !important; }
.messagelist tr.flagged td, .messagelist tr.flagged td.subject span.subject a { color: var(--color-text) !important; }

/* per-row checkbox injected by the JS, in the 14px gutter */
.post-row-check { grid-column: 1; grid-row: 1; align-self: center; }

/* empty state */
#post-list-empty {
    padding: 16px; font-size: 13px; color: var(--color-neutral-600);
}

.pagenav, .messagelist tfoot { display: none !important; }

/* ============================================================================
   READING COLUMN  (bg neutral-100)
   ============================================================================ */
body.post-shell #layout-content > .header {
    flex: none; height: 44px; min-height: 44px;
    padding: 0 20px !important;
    border-bottom: 2px solid var(--color-divider) !important;
    background: var(--color-neutral-100) !important;
    display: flex !important; align-items: center; gap: 8px;
    justify-content: flex-start !important;
    overflow: visible !important;
}
body.post-shell #layout-content > .header .header-title { display: none !important; }

/* thread toolbar: secondary buttons, transparent border that shows on hover */
#toolbar-menu.toolbar {
    display: flex !important; align-items: center; gap: 8px;
    background: transparent !important; border: 0 !important;
    padding: 0 !important; margin: 0 !important; list-style: none;
    flex-wrap: wrap;
}
#toolbar-menu.toolbar > li { display: inline-flex !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#toolbar-menu.toolbar > li.spacer, #toolbar-menu.toolbar .spacer { display: none !important; }

/* BUG 4 (v16): Reply / Reply all / Forward are wrapped in <span class="dropbutton">
   while Delete / Archive / Mark / More are bare <a>. The wrapper was an
   unstyled inline box with its own baseline, so those three sat higher than
   the rest. Every item — wrapper or not — now gets the SAME fixed height and
   is centred in a single flex row, so all icons and labels share one baseline. */
#toolbar-menu.toolbar { align-items: center !important; }
#toolbar-menu.toolbar > li { align-items: center !important; height: 32px !important; }
#toolbar-menu.toolbar > li > .dropbutton {
    display: inline-flex !important; align-items: center !important;
    height: 32px !important; margin: 0 !important; padding: 0 !important;
    vertical-align: middle !important;
}

#toolbar-menu.toolbar > li > a:not(.dropdown):not(.hidden),
#toolbar-menu.toolbar > li > .dropbutton > a:not(.dropdown):not(.hidden) {
    display: inline-flex !important; align-items: center; gap: 6px;
    height: 32px !important; width: auto !important;
    box-sizing: border-box !important;
    padding: 0 8px !important; margin: 0 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: 1.2;
    color: var(--color-text) !important;
    text-decoration: none !important; white-space: nowrap;
    flex-direction: row !important;
}
#toolbar-menu.toolbar > li > a:not(.dropdown):hover { border-color: var(--color-divider) !important; background: color-mix(in srgb, var(--color-text) 7%, transparent) !important; }
/* v15.2: these :before boxes used to set background-color + mask-size with NO
   mask-image, so they painted as solid near-black squares. Icons are real
   inline SVG now (paintIcons in the JS); suppress the pseudo-element entirely
   so nothing can paint a block again. */
#toolbar-menu.toolbar a:before,
#toolbar-list-menu a:before,
.popupmenu a:before,
.bodek-account-menu a:before,
#messagelist-header a:before {
    content: none !important;
    display: none !important;
}

/* the injected icon */
.post-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 14px; height: 14px; color: inherit;
}
.post-ico svg { display: block; width: 14px; height: 14px; }
#toolbar-menu.toolbar a .inner {
    display: inline !important; position: static !important; clip: auto !important;
    width: auto !important; height: auto !important; overflow: visible !important;
    font-size: 12px; font-weight: 600; color: inherit;
}
#toolbar-menu.toolbar a.disabled { opacity: .45; }
/* controls the design does not have in this toolbar */
#toolbar-menu.toolbar a.compose, #toolbar-menu.toolbar a.options,
#toolbar-menu.toolbar a.print, #toolbar-menu.toolbar a.more,
#toolbar-menu.toolbar a.select, #toolbar-menu.toolbar a.threads,
#toolbar-menu.toolbar .dropbutton a.dropdown { display: none !important; }
#post-position { margin-left: auto; font-size: 11px; color: var(--color-neutral-600); flex: none; }

/* the message frame fills the column */
#messagecontframe, .iframe-wrapper {
    flex: 1 1 auto !important; min-height: 0 !important;
    width: 100% !important; border: 0 !important; margin: 0 !important;
    background: var(--color-neutral-100) !important;
}

/* empty reading pane */
#post-empty {
    flex: 1 1 auto; display: grid; place-items: center; padding: 24px 20px;
    background: var(--color-neutral-100);
}
#post-empty .post-empty-inner { max-width: 360px; }
#post-empty h2 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; margin: 0 0 8px; letter-spacing: -0.01em; }
#post-empty p { font-size: 13px; color: var(--color-neutral-700); margin: 0 0 16px; }
#post-empty dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 12px; }
#post-empty dt { font-weight: 600; color: var(--color-text); }
#post-empty dd { margin: 0; color: var(--color-neutral-700); }

/* ============================================================================
   MESSAGE (inside #messagecontframe — same stylesheet, framed body)
   ============================================================================ */
body.task-mail.action-show,
body.iframe.action-show { display: block !important; background: var(--color-neutral-100) !important; overflow: auto !important; }

#message-header, .message-header {
    max-width: 880px; margin: 0 !important;
    padding: 24px 20px 16px !important;
    background: var(--color-neutral-100) !important;
    border: 0 !important; border-bottom: 2px solid var(--color-divider) !important;
}
#message-header > .subject {
    font-family: var(--font-heading); font-weight: 800; font-size: 20px;
    letter-spacing: -0.01em; line-height: 1.12;
    text-wrap: pretty; margin: 0 0 12px !important; color: var(--color-text);
}
#message-header > .header { display: grid !important; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; background: transparent !important; border: 0 !important; padding: 0 !important; }

/* 32px initials square, never a circle */
#message-header .contactphoto, #message-header .post-avatar {
    width: 32px !important; height: 32px !important; flex: none;
    display: grid; place-items: center;
    background: var(--color-neutral-300) !important; color: var(--color-neutral-800) !important;
    font-family: var(--font-heading); font-weight: 800; font-size: 11px;
    border: 0 !important; margin: 0 !important;
}
#message-header .header-headers { width: 100%; border-collapse: collapse; }
#message-header .header-headers td { padding: 1px 0; font-size: 12px; vertical-align: top; }
#message-header .header-headers td.header-title { color: var(--color-neutral-600); padding-right: 10px; width: 64px; }
#message-header .header-headers td.header { color: var(--color-neutral-700); }
#message-header .header-headers a { color: var(--color-text); text-decoration: none; }
#message-header .header-headers a:hover { text-decoration: underline; }

#message-header .header-links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#message-header .header-links a {
    font-size: 12px; font-weight: 600; color: var(--color-neutral-700) !important;
    padding: 4px 8px; border: 1px solid transparent; background: transparent; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
#message-header .header-links a:hover { border-color: var(--color-divider); color: var(--color-text) !important; }
#message-header .header-links a:before { display: none !important; }

/* body: 14px/1.6, max 68ch, indented to clear the avatar column */
#messagebody, .message-part, .message-htmlpart {
    font-size: 14px !important; line-height: 1.6 !important;
    max-width: 68ch; color: var(--color-text) !important;
    padding: 18px 20px 22px 64px !important;
    background: var(--color-neutral-100) !important;
    border: 0 !important;
}
#messagebody p { margin: 0 0 12px; }

/* attachment tiles */
#attachment-list.attachmentslist, .attachmentslist {
    display: flex !important; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0 !important;
    padding: 0 20px 24px 64px !important;
    background: transparent !important; border: 0 !important;
}
.attachmentslist li {
    display: grid !important; grid-template-columns: 32px 1fr; gap: 8px; align-items: center;
    width: 240px; max-width: 100%;
    border: 1px solid var(--color-neutral-400) !important;
    background: var(--color-bg) !important;
    padding: 8px 12px 8px 8px !important; margin: 0 !important;
    font-size: 12px;
}
.attachmentslist li:hover { border-color: var(--color-text) !important; }
.attachmentslist li:before {
    content: attr(data-ext);
    width: 32px; height: 32px; display: grid; place-items: center;
    background: var(--color-neutral-900); color: var(--color-bg);
    font-family: var(--font-heading); font-weight: 800; font-size: 9px; text-transform: uppercase;
    -webkit-mask: none !important; mask: none !important;
}
.attachmentslist li a.filename { font-size: 12px; font-weight: 600; color: var(--color-text) !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachmentslist li .attachment-size { font-size: 11px; color: var(--color-neutral-600); }

/* ============================================================================
   COMPOSE — takes the reading column. NOT a modal.
   ============================================================================ */
body.action-compose #layout-sidebar.sidebar-right,
body.action-compose #messagetoolbar,
body.action-compose #toolbar-menu,
body.action-compose .toolbar-menu-button,
body.action-compose .content-frame-navigation,
body.action-compose #compose-attachments .upload-form,
body.action-compose #compose-objects,
#composebodycontainer .editor-toolbar,
#editor-selector { display: none !important; }

#compose-content, #compose-content.formcontainer {
    display: flex !important; flex-direction: column !important;
    height: 100% !important; min-height: 0 !important;
    padding: 0 !important; background: var(--color-neutral-100) !important;
    overflow: hidden !important;
}
#compose-content > form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; }

#compose-headers, .compose-headers { padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; flex: none; max-width: 880px; width: 100%; }

#compose-headers .form-group.row:not(.hidden),
.compose-headers .form-group.row:not(.hidden) {
    display: grid !important; grid-template-columns: 72px 1fr !important;
    align-items: center !important; column-gap: 12px !important;
    min-height: 40px !important; margin: 0 !important; padding: 0 20px !important;
    border-bottom: 1px solid var(--color-neutral-300) !important;
}
/* 2px rule under Subject separates header from body */
#compose_subject.form-group.row, #compose-headers #compose_subject { border-bottom: 2px solid var(--color-divider) !important; }

#compose-headers .form-group.row > .col-form-label,
#compose-headers .form-group.row > label {
    grid-column: 1 !important; justify-self: start !important; text-align: left !important;
    margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important;
    font-size: 12px !important; font-weight: 400 !important; text-transform: none !important;
    letter-spacing: 0 !important; color: var(--color-neutral-600) !important;
}
#compose-headers .form-group.row > :last-child { grid-column: 2 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }

#compose-headers input, #compose-headers select,
#compose-headers .input-group, #compose-headers .recipient-input {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important;
    font-size: 13px !important; font-family: var(--font-body) !important;
    color: var(--color-text) !important;
}
#compose_subject input { font-size: 13px !important; font-weight: 600 !important; }
#compose-headers .input-group-prepend, #compose-headers .input-group-text,
#compose-headers .input-group-append a.icon.add { display: none !important; }

/* recipient chips */
.recipient-input { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 0 !important; }
li.recipient, .recipient-input li.recipient {
    display: inline-flex !important; align-items: center; gap: 6px;
    border: 1px solid var(--color-neutral-400) !important;
    background: transparent !important; color: var(--color-text) !important;
    padding: 2px 4px 2px 8px !important; margin: 0 !important; font-size: 12px !important;
}
li.recipient a.delete, li.recipient .remove { color: var(--color-neutral-600) !important; }

/* body */
#composebodycontainer { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 220px; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
#composebody, #composebodycontainer .tox.tox-tinymce {
    flex: 1 1 auto !important; border: 0 !important; background: var(--color-neutral-100) !important;
    font-size: 14px !important; line-height: 1.6 !important; max-width: 72ch;
    padding: 20px 20px 8px !important;
}
.tox .tox-editor-header { display: none !important; }
.tox .tox-edit-area::before { border: 0 !important; box-shadow: none !important; }

/* ---- formatting row (v15) --------------------------------------------------
   The design's prototype composer is a plain textarea, but this is a business
   mail client, so rich text stays. TinyMCE's own chrome is hidden; this row is
   the only formatting UI and it is built to the design's own rules: flush left,
   radius 0, 1px neutral-300 rule above, Archivo, Lucide at 1.75 stroke in
   currentColor, secondary-button behaviour (transparent border that appears on
   hover), and the design's "active = ink fill + ground text" state. */
#post-format {
    flex: none;
    display: flex; align-items: center; justify-content: flex-start; gap: 4px;
    padding: 8px 20px;
    border-top: 1px solid var(--color-neutral-300);
    background: var(--color-neutral-100);
}
.post-fmt {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-neutral-700);
    cursor: pointer;
}
.post-fmt:hover {
    border-color: var(--color-divider);
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}
.post-fmt:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.post-fmt.is-on {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-bg);
}

/* sticky footer */
#compose-content > .formbuttons {
    flex: none !important; display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 20px !important; margin: 0 !important;
    border-top: 2px solid var(--color-divider) !important;
    background: var(--color-neutral-100) !important;
    height: auto !important; min-height: 0 !important;
}
#compose-content > .formbuttons .btn.send {
    order: 0; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 8px;
    padding: 8px 14px !important; border: 0 !important;
    background: var(--color-accent) !important; color: var(--color-bg) !important;
    font-family: var(--font-heading) !important; font-weight: 800 !important; font-size: 14px !important;
    line-height: 1.2 !important; cursor: pointer;
}
#compose-content > .formbuttons .btn.send:hover { background: var(--color-accent-600) !important; }
#compose-content > .formbuttons .btn.send:active { background: var(--color-accent-700) !important; }
#compose-content > .formbuttons .btn.send:before {
    content: ""; width: 16px; height: 16px; flex: none; background-color: currentColor;
    -webkit-mask: center / 16px 16px no-repeat; mask: center / 16px 16px no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
}
#compose-content > .formbuttons .btn.send .inner { display: inline !important; position: static !important; clip: auto !important; width: auto !important; height: auto !important; }

/* every other footer control is a secondary button */
#compose-content > .formbuttons .btn:not(.send),
#compose-content > .formbuttons button:not(.send),
#compose-content > .formbuttons a.button {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 8px 14px !important;
    border: 1px solid var(--color-divider) !important;
    background: transparent !important; color: var(--color-text) !important;
    font-family: var(--font-heading) !important; font-weight: 800 !important; font-size: 14px !important;
}
#compose-content > .formbuttons .btn:not(.send):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent) !important; }
#compose-content > .formbuttons .float-right:empty { display: none !important; }

/* ============================================================================
   TOAST — fixed bottom-left, the only shadowed thing
   ============================================================================ */
#messagestack, #post-toast {
    position: fixed !important; left: 240px !important; bottom: 16px !important;
    right: auto !important; top: auto !important;
    z-index: 2000; display: flex; flex-direction: column; gap: 8px;
    width: auto !important; max-width: min(420px, calc(100vw - 260px));
}
#messagestack div, .post-toast {
    display: flex !important; align-items: center; gap: 12px;
    background: var(--color-neutral-900) !important; color: var(--color-bg) !important;
    font-size: 13px !important; font-family: var(--font-body) !important;
    padding: 10px 14px !important; margin: 0 !important;
    box-shadow: var(--shadow-md) !important; border: 0 !important;
    min-width: 0; width: auto !important;
}
#messagestack div.loading { display: none !important; }
.post-toast .post-undo {
    color: var(--color-accent-400); font-weight: 600; cursor: pointer;
    background: none; border: 0; padding: 0; font-size: 13px; font-family: inherit;
    margin-left: auto; flex: none;
}

/* ============================================================================
   DIALOG — the one permitted modal (confirmations)
   ============================================================================ */
.ui-widget-overlay { background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent) !important; opacity: 1 !important; }
.ui-dialog {
    border: 0 !important; padding: 16px !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-lg) !important;
    width: min(440px, 100%) !important;
    font-family: var(--font-body) !important;
}
.ui-dialog .ui-dialog-titlebar { background: transparent !important; border: 0 !important; padding: 0 0 12px !important; }
.ui-dialog .ui-dialog-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.ui-dialog .ui-dialog-content { font-size: 14px; opacity: .85; padding: 0 !important; }
.ui-dialog .ui-dialog-buttonpane { border: 0 !important; margin: 8px 0 0 !important; padding: 0 !important; }
.ui-dialog .ui-dialog-buttonset { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================================
   SHARED COMPONENT LAYER (.btn / .input / .tag / .table / .radio / .field)
   ported from the Modernist token sheet
   ============================================================================ */
.btn, button.btn, .button.btn {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
    cursor: pointer; text-decoration: none;
    font-family: var(--font-heading) !important; font-weight: 800 !important;
    font-size: 14px !important; line-height: 1.2;
    color: var(--color-text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 8px 14px !important;
}
.btn-primary, button.mainaction, #login-form button.btn-primary, #login-form input[type=submit] {
    background: var(--color-accent) !important; color: var(--color-bg) !important; border-color: transparent !important;
}
.btn-primary:hover, button.mainaction:hover { background: var(--color-accent-600) !important; }
.btn-primary:active, button.mainaction:active { background: var(--color-accent-700) !important; }
.btn-secondary { border-color: var(--color-divider) !important; }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent) !important; }
.btn-danger, a.button.delete { color: var(--color-accent-700) !important; background: transparent !important; }

input[type=text], input[type=password], input[type=email], input[type=search],
input[type=tel], input[type=number], textarea, select, .form-control, .input {
    width: 100%; min-height: 36px; padding: 6px 10px !important;
    font-family: var(--font-body) !important; font-size: 14px !important;
    color: var(--color-text) !important; caret-color: var(--color-accent);
    background: var(--color-surface) !important;
    border: 1px solid var(--color-divider) !important;
    box-shadow: none !important;
}
input:hover, textarea:hover, select:hover, .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent) !important; }
input:focus-visible, textarea:focus-visible, select:focus-visible, .input:focus-visible { border-color: var(--color-accent) !important; outline-offset: 0; }
textarea.input, textarea { min-height: 90px; resize: vertical; }

.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: 8px; border-bottom: 2px solid var(--color-divider); }
.table td { padding: 8px; border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* ============================================================================
   SETTINGS — list column becomes the section nav, reading column the section
   ============================================================================ */
body.task-settings #layout-list > .header,
body.task-settings #layout-content > .header {
    height: 44px; min-height: 44px; padding: 0 16px !important;
    border-bottom: 2px solid var(--color-divider) !important;
    background: var(--color-bg) !important;
    display: flex !important; align-items: center; justify-content: flex-start !important;
}
body.task-settings #layout-list > .header .header-title,
body.task-settings #layout-content > .header .header-title {
    font-family: var(--font-heading); font-weight: 800; font-size: 16px;
    text-align: left !important; margin: 0 !important; display: block !important;
}
body.task-settings #layout-content > .header .header-title { font-size: 14px; }

#settings-menu, #sections-table, .settingslist { list-style: none; margin: 0; padding: 0; background: var(--color-bg) !important; }
#settings-menu li, #sections-table li, .settingslist li { border: 0 !important; border-bottom: 1px solid var(--color-divider) !important; background: transparent !important; }
#settings-menu li > a, #sections-table li > a, .settingslist li > a {
    display: block; padding: 12px 16px !important;
    font-size: 13px; font-weight: 600; color: var(--color-text) !important; text-decoration: none;
    background: transparent !important;
}
#settings-menu li > a:after, #sections-table li > a:after, .settingslist li > a:after { display: none !important; }
#settings-menu li.selected > a, #sections-table li.selected > a, .settingslist li.selected > a {
    background: var(--color-neutral-100) !important;
    box-shadow: inset 2px 0 0 var(--color-text);
}
#preferences-frame, #preferences-box { background: var(--color-neutral-100) !important; border: 0 !important; }

/* ============================================================================
   LOGIN
   ============================================================================ */
body.task-login { display: grid !important; grid-template-rows: 1fr !important; place-items: center; background: var(--color-bg) !important; }
#login-form {
    background: var(--color-surface) !important; border: 0 !important;
    padding: 32px !important; max-width: 380px; width: 100%;
    box-shadow: none !important;
}
#login-form input { background: var(--color-bg) !important; }
.task-login #logo { display: none !important; }

/* the wordmark, laid out exactly as the header's brand cell */
#post-login-brand {
    display: flex; align-items: center; gap: 10px;
    max-width: 380px; width: 100%; margin: 0 auto 16px;
}
#post-login-brand .post-mark { width: 14px; height: 14px; background: var(--color-accent); flex: none; }
#post-login-brand .post-name {
    font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
}
#post-login-brand .post-domain { font-size: 11px; color: var(--color-neutral-600); margin-left: auto; }

/* ============================================================================
   ELASTIC CHROME THE DESIGN DOES NOT HAVE
   ============================================================================ */
.searchbar, #mailsearchform.searchbar { display: none !important; }   /* search moved into the header */
#messagelist-header .searchbar { display: none !important; }
.floating-action-buttons, #bodek-compose-fab { display: none !important; }   /* no FAB — Compose is in the header */
.content-frame-navigation { display: none !important; }
#quotadisplay, #layout-sidebar #quotadisplay { display: none !important; }
.popupmenu.toolbar, #toolbar-list-menu { display: none !important; }

/* popup menus (folder actions etc.): rules, not shadows; zero radius */
.popupmenu:not(.toolbar), .dropdown-menu, .searchoptions {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-divider) !important;
    box-shadow: none !important; padding: 0 !important;
    font-family: var(--font-body) !important;
}
.popupmenu:not(.toolbar) ul.listing > li { border-bottom: 1px solid var(--color-divider) !important; }
.popupmenu:not(.toolbar) ul.listing > li:last-child { border-bottom: 0 !important; }
.popupmenu:not(.toolbar) ul.listing > li > a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px !important; margin: 0 !important;
    font-size: 13px; color: var(--color-text) !important; text-decoration: none;
}
.popupmenu:not(.toolbar) ul.listing > li > a:hover { background: var(--color-neutral-200) !important; }
.popupmenu:not(.toolbar) ul.listing > li > a .post-ico { color: var(--color-neutral-700); }
.popupmenu:not(.toolbar) ul.listing > li > a:hover .post-ico { color: var(--color-text); }

/* ============================================================================
   COMPOSE WINDOW (v16) — Gmail pattern, bottom-right, non-modal.
   Intentional deviation from the design's compose-in-reading-column (THEME.md).
   No backdrop: the inbox, list and reading pane stay visible and usable.
   ============================================================================ */
.post-cw {
    position: fixed;
    right: 16px; bottom: 0;
    width: 540px; height: 580px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 68px);
    display: flex; flex-direction: column;
    background: var(--color-bg);
    border: 2px solid var(--color-divider);
    border-bottom: 0;
    box-shadow: var(--shadow-lg);
    z-index: 1200;                 /* above the app, below nothing else we own */
}

/* minimised: just the title bar sitting on the bottom edge */
.post-cw.is-min { height: auto !important; }
.post-cw.is-min .post-cw-frame { display: none; }

/* expanded: large and centred */
.post-cw.is-max {
    right: 50%; bottom: 50%;
    transform: translate(50%, 50%);
    width: min(1000px, calc(100vw - 96px));
    height: min(760px, calc(100vh - 96px));
    max-height: calc(100vh - 96px);
    border-bottom: 2px solid var(--color-divider);
}

.post-cw-bar {
    flex: none; height: 40px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 8px 0 14px;
    background: var(--color-neutral-900); color: var(--color-bg);
    cursor: pointer; user-select: none;
}
.post-cw-title {
    font-family: var(--font-heading); font-weight: 800; font-size: 13px;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-cw-ctrls { display: flex; align-items: center; gap: 2px; flex: none; }
.post-cw-btn {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--color-bg); cursor: pointer;
}
.post-cw-btn:hover { background: rgba(255, 255, 255, .14); }
.post-cw-frame {
    flex: 1 1 auto; width: 100%; min-height: 0;
    border: 0; display: block; background: var(--color-bg);
}

/* ---- the compose page INSIDE the window: fit 540px, no crushed columns ---- */
body.post-cw-page #compose-content,
body.post-cw-page #compose-content { padding: 0 !important; }

/* label column narrows so From/To/Subject never wrap at 540px */
body.post-cw-page #compose-headers .form-group.row:not(.hidden),
body.post-cw-page .compose-headers .form-group.row:not(.hidden) {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    padding: 0 14px !important;
    min-height: 36px !important;
}
body.post-cw-page #compose-headers .form-group.row > .col-form-label,
body.post-cw-page #compose-headers .form-group.row > label {
    font-size: 11px !important; white-space: nowrap;
}
body.post-cw-page #composebody,
body.post-cw-page #composebodycontainer .tox.tox-tinymce {
    padding: 14px !important; max-width: none !important;
}
body.post-cw-page #post-format { padding: 6px 14px; height: auto; min-height: 0; }
body.post-cw-page #compose-content > .formbuttons { padding: 10px 14px !important; }
body.post-cw-page #compose-content > .formbuttons .btn.send { padding: 7px 12px !important; font-size: 13px !important; }
body.post-cw-page #compose-content > .formbuttons .btn:not(.send) { padding: 7px 10px !important; font-size: 13px !important; }
/* nothing in the window may cause a horizontal scrollbar */
body.post-cw-page { overflow-x: hidden !important; }
body.post-cw-page #compose-headers, body.iframe .compose-headers { max-width: none !important; }
/* the window must never scroll sideways */
body.post-cw-page { overflow-x: hidden !important; }
body.post-cw-page #compose-content, body.post-cw-page #compose-content > form { overflow-x: hidden !important; }

/* BUG 2 (v17): the empty state must never coexist with an open message. */
body.post-msg-open #post-empty { display: none !important; }
body:not(.post-msg-open) #messagecontframe { display: none !important; }

/* ============================================================================
   READING PANE (v17) — finished to the Modernist language.
   Real markup (verified against the rendered page):
     .content.frame-content
       #message-header  -> h2.subject (a.extwin) + .header (img.contactphoto +
                           .header-content > .header-summary, table.header-headers,
                           .header-links)
       #message-content -> .leftcol (attachments) + .rightcol (#messagebody)
   ============================================================================ */

/* the frame's own wrapper must not add a second inset */
body.action-show .content.frame-content,
body.action-preview .content.frame-content {
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    background: var(--color-neutral-100) !important; width: 100% !important; max-width: none !important;
}

/* THE SEAM: elastic lays #message-content out as two columns (attachments |
   body). With no attachments the left column still reserved width, leaving a
   band and a visible seam down the middle. Stack them instead. */
body.action-show #message-content,
body.action-preview #message-content {
    display: block !important; width: 100% !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important; background: var(--color-neutral-100) !important;
}
body.action-show #message-content > .leftcol:empty { display: none !important; }
body.action-show #message-content > .leftcol,
body.action-show #message-content > .rightcol {
    width: auto !important; max-width: none !important; float: none !important;
    display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
}

/* header block: no grey box — the pane's own ground, a 2px rule beneath */
body.action-show #message-header,
body.action-preview #message-header {
    background: var(--color-neutral-100) !important;
    border: 0 !important; border-bottom: 2px solid var(--color-divider) !important;
    padding: 20px 24px 16px !important; margin: 0 !important;
    max-width: none !important; width: 100% !important; box-shadow: none !important;
}
body.action-show #message-header > .subject {
    font-family: var(--font-heading); font-weight: 800; font-size: 20px;
    letter-spacing: -0.01em; line-height: 1.2; color: var(--color-text);
    margin: 0 0 14px !important; display: flex; align-items: center; gap: 8px;
}

/* the external-link arrow: family icon, never browser blue */
body.action-show #message-header .subject a.extwin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: none;
    color: var(--color-neutral-700) !important; text-decoration: none !important;
    background: transparent !important; border: 1px solid transparent;
}
body.action-show #message-header .subject a.extwin:hover { border-color: var(--color-divider); color: var(--color-text) !important; }
body.action-show #message-header .subject a.extwin .inner,
body.action-show #message-header .subject a.extwin:before { display: none !important; }

/* avatar: initial-in-a-square (built by initMessageAvatar), never a silhouette */
body.action-show #message-header img.contactphoto { display: none !important; }
.post-msg-avatar {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    background: var(--color-neutral-300); color: var(--color-neutral-800);
    font-family: var(--font-heading); font-weight: 800; font-size: 11px;
    text-transform: uppercase;
}

body.action-show #message-header > .header {
    display: grid !important; grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px; align-items: start;
    background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
body.action-show #message-header .header-content { min-width: 0; }
body.action-show #message-header .header-summary { font-size: 12px; color: var(--color-neutral-700); margin-bottom: 4px; }
body.action-show #message-header .header-headers { width: 100%; border-collapse: collapse; }
body.action-show #message-header .header-headers td { padding: 1px 0; font-size: 12px; vertical-align: top; border: 0 !important; }
body.action-show #message-header .header-headers td.header-title { color: var(--color-neutral-600); padding-right: 10px; width: 56px; white-space: nowrap; }
body.action-show #message-header .header-headers td.header { color: var(--color-neutral-700); }

/* sender name: the app's text treatment, not browser blue */
body.action-show #message-header a,
body.action-show #message-header a.rcmContactAddress,
body.action-show #message-header .adr a {
    color: var(--color-text) !important; text-decoration: none !important; font-weight: 600;
}
body.action-show #message-header a.rcmContactAddress:hover { text-decoration: underline !important; }
body.action-show #message-header a.rcmaddcontact { color: var(--color-neutral-600) !important; font-weight: 400; }

/* Details / Headers / Plain text: quiet controls, not floating text */
body.action-show #message-header .header-links {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding: 0 !important;
}
body.action-show #message-header .header-links a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    color: var(--color-neutral-700) !important;
    padding: 4px 8px; border: 1px solid transparent;
    background: transparent !important; text-decoration: none !important;
}
body.action-show #message-header .header-links a:hover {
    border-color: var(--color-divider); color: var(--color-text) !important;
    background: color-mix(in srgb, var(--color-text) 7%, transparent) !important;
}
body.action-show #message-header .header-links a:before { display: none !important; }

/* ---- the body: fills the pane, readable measure, EVEN padding both sides ---- */
body.action-show #messagebody,
body.action-preview #messagebody {
    width: auto !important; max-width: none !important;
    padding: 20px 24px 28px !important; margin: 0 !important;
    background: var(--color-neutral-100) !important; border: 0 !important;
}
body.action-show .message-part,
body.action-show .message-htmlpart,
body.action-preview .message-part,
body.action-preview .message-htmlpart {
    max-width: 72ch;                      /* readability, not a narrow column */
    width: auto !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important;
    font-size: 14px !important; line-height: 1.6 !important;
    color: var(--color-text) !important;
}
body.action-show .message-part div, body.action-show .message-part p { margin: 0 0 12px; }

/* quoted replies: a quiet left rule, never a browser-default blue block */
body.action-show blockquote,
body.action-preview blockquote,
body.action-show .message-part blockquote {
    margin: 12px 0 !important; padding: 2px 0 2px 14px !important;
    border: 0 !important; border-left: 2px solid var(--color-neutral-400) !important;
    background: transparent !important; color: var(--color-neutral-700) !important;
    quotes: none;
}

/* embedded HTML mail must stay inside the pane — no overflow, no seams */
body.action-show #messagebody img,
body.action-show .message-htmlpart img { max-width: 100% !important; height: auto !important; }
body.action-show #messagebody table,
body.action-show .message-htmlpart table { max-width: 100% !important; }
body.action-show #messagebody pre,
body.action-show .message-part pre { white-space: pre-wrap !important; word-break: break-word; }
body.action-show #messagebody, body.action-show .message-part { overflow-wrap: anywhere; }

/* attachments below the body, as tiles */
body.action-show #message-content .attachmentslist { padding: 0 24px 24px !important; }

/* ============================================================================
   IN-APP DIALOG (v18) — the design's .dialog pattern. Replaces every native
   window.prompt / window.confirm, which cannot be styled at all.
   ============================================================================ */
.post-dialog-backdrop {
    position: fixed; inset: 0; z-index: 3000;
    display: grid; place-items: center; padding: 16px;
    background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.post-dialog-box {
    width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px;
    padding: 16px; background: var(--color-surface); box-shadow: var(--shadow-lg);
    font-family: var(--font-body);
}
.post-dialog-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.2; }
.post-dialog-body { font-size: 14px; color: var(--color-neutral-700); }
.post-dialog-input { width: 100%; }
.post-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ============================================================================
   COMPOSE ATTACHMENTS (v18) — compact chips above the Send bar
   ============================================================================ */
body.post-cw-page #compose-attachments,
body.action-compose #compose-attachments {
    display: block !important; flex: none;
    padding: 8px 14px 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important;
}
body.action-compose #compose-attachments .upload-form,
body.action-compose #compose-attachments > .header { display: none !important; }
body.action-compose #compose-attachments #attachment-list {
    display: flex !important; flex-wrap: wrap; gap: 6px;
    list-style: none; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important;
}
body.action-compose #attachment-list li {
    display: inline-flex !important; align-items: center; gap: 8px;
    width: auto !important; max-width: 240px;
    height: 28px; padding: 0 8px !important; margin: 0 !important;
    border: 1px solid var(--color-neutral-400) !important;
    background: var(--color-bg) !important; font-size: 12px;
}
body.action-compose #attachment-list li:before { content: none !important; display: none !important; }
body.action-compose #attachment-list li a.filename {
    color: var(--color-text) !important; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.post-dropping #compose-content { outline: 2px dashed var(--color-accent); outline-offset: -8px; }

/* ============================================================================
   REFINEMENT 6 — reading-pane attachments as a compact chip row
   ============================================================================ */
body.action-show #message-content .attachmentslist,
body.action-preview #message-content .attachmentslist {
    display: flex !important; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0 !important;
    padding: 12px 24px 16px !important;
    background: transparent !important; border: 0 !important;
}
body.action-show .attachmentslist li {
    display: inline-flex !important; align-items: center; gap: 10px;
    width: auto !important; max-width: 280px;
    height: 36px; padding: 0 10px !important; margin: 0 !important;
    border: 1px solid var(--color-neutral-400) !important;
    background: var(--color-bg) !important; font-size: 12px;
}
body.action-show .attachmentslist li:hover { border-color: var(--color-text) !important; }
/* kill the broken placeholder glyph and the stray floating arrow */
body.action-show .attachmentslist li:before { content: none !important; display: none !important; }
body.action-show .attachmentslist li a.filename {
    color: var(--color-text) !important; font-weight: 600; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
body.action-show .attachmentslist li .attachment-size { color: var(--color-neutral-600); flex: none; }
body.action-show .attachmentslist li a.drop,
body.action-show .attachmentslist li a.dropdown { display: none !important; }
body.action-show .attachmentslist li a.download {
    margin-left: auto; flex: none; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-neutral-700) !important; text-decoration: none !important;
}
body.action-show .attachmentslist li a.download:hover { color: var(--color-text) !important; }
/* the file-type badge our JS injects */
.post-file-badge {
    width: 22px; height: 22px; flex: none;
    display: grid; place-items: center;
    background: var(--color-neutral-900); color: var(--color-bg);
    font-family: var(--font-heading); font-weight: 800; font-size: 8px;
    text-transform: uppercase; letter-spacing: .02em;
}

/* ============================================================================
   REFINEMENT 7 — the selected row must be unmistakable, still flush
   ============================================================================ */
.messagelist tbody tr.selected > td,
.messagelist tbody tr.focused.selected > td {
    background: var(--color-neutral-200) !important;   /* darker than neutral-100 */
}
.messagelist tbody tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--color-text) !important;   /* heavier ink edge */
}
/* the edge must sit inside the row on all four sides — no overhang */
.messagelist tbody tr.selected > td { border-bottom-color: var(--color-neutral-400) !important; }

/* REFINEMENT 3 — the wordmark is a link */
#post-brand { cursor: pointer; }
#post-brand:hover .post-name { text-decoration: underline; text-underline-offset: 3px; }
#post-brand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }