/* Eudora -- the admin mail interface.
 *
 * Written in the idiom the /ai pages established (see the .ai-* block in
 * application.css): flat panels, a restrained palette, colour used only where
 * it carries meaning. The app around this is a table layout from 2009 and this
 * does not try to escape it -- it sits inside #content and behaves.
 */

/* ---- palette and base ---------------------------------------------------
 * One set of tokens for these pages; the rest of the site is untouched.
 * A system font stack on #content only, so the mail reads like a mail
 * client and the site's 2009 tables keep their own face. */
body.ctl-eudora {
  --e-ink: #1f2933; --e-ink-2: #4b5563; --e-ink-3: #7b8794; --e-ink-4: #9aa5b1;
  --e-line: #e1e6eb; --e-line-2: #cbd2d9; --e-bg: #f5f7f9; --e-bg-2: #eceff3;
  --e-card: #fff; --e-accent: #1975D7; --e-accent-2: #22407f; --e-accent-bg: #e8f0fb;
  /* filled controls match the "All rules" / open-folder highlight: pale blue ground, dark blue text */
  --e-fill: var(--e-accent-bg); --e-fill-hover: #d6e4f7; --e-fill-line: #b9cde8; --e-fill-ink: var(--e-accent-2);
  --e-green-bg: #f2f9f4; --e-green: #1c5a2a; --e-green-2: #2e7d4f; --e-red: #c0392b;
  --e-radius: 6px; --e-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}
body.ctl-eudora #content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--e-ink); font-size: 13px; line-height: 1.45;
}
body.ctl-eudora #content a { color: var(--e-accent-2); }
body.ctl-eudora #content :focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; }
/* A thin bar across the top of the window while the script fetches. */
.eudora-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 200;
  background: var(--e-accent); transition: width .25s ease, opacity .3s ease; opacity: 0;
}
.eudora-progress.on { width: 70%; opacity: 1; }
.eudora-progress.done { width: 100%; opacity: 0; }

/* ---- the site menu, folded away ----------------------------------------
 * Mail wants the width. On the eudora controller only (the layout stamps
 * body.ctl-<controller>), the 215px sidebar cell shrinks to an 18px handle
 * and the menu itself becomes an overlay that slides in while the handle or
 * the menu is hovered (or holds keyboard focus). Nothing else in the layout
 * is touched: the cell is still there, so the table keeps its shape. */
/* And the page itself fills the window: layout.css caps the container at
 * 1500px so prose stays readable, but a mail list is a table of short cells
 * and the client panel beside a message is a fixed 290px, so width here is
 * subject lines and snippets, not line length. */
body.ctl-eudora .layout_container { max-width: none; }

body.ctl-eudora .layout_container td.sidebar {
  width: 18px; position: relative; padding: 0;
  background: #e9edf1; border-right: 1px solid #c9d0d7; cursor: pointer;
}
/* The footer row shares the first column and pins it: its cell carries
 * width="150" and holds a 34px corner image, so the column stayed at 150px
 * however narrow the sidebar cell asked to be. Author CSS outranks the
 * attribute; the corner image goes, the footer background still draws. */
body.ctl-eudora .layout_footer td:first-child { width: 18px; padding: 0; }
body.ctl-eudora .layout_footer td:first-child img { display: none; }
body.ctl-eudora td.sidebar::after {
  content: 'menu'; position: absolute; left: 4px; top: 22px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6b7480;
}
body.ctl-eudora td.sidebar #sidebar {
  position: absolute; left: 0; top: 0; z-index: 40;
  width: 150px; padding: 15px 12px 1em; margin: 0;
  background: #fff; border-right: 1px solid #c9d0d7; box-shadow: 4px 0 14px rgba(0, 0, 0, .18);
  visibility: hidden; opacity: 0; transform: translateX(-10px);
  transition: opacity .15s ease .3s, transform .15s ease .3s, visibility 0s linear .45s;
}
body.ctl-eudora td.sidebar:hover #sidebar,
body.ctl-eudora td.sidebar:focus-within #sidebar {
  visibility: visible; opacity: 1; transform: none;
  transition-delay: .08s, .08s, 0s;
}

/* ---- the folder column ------------------------------------------------ */
.eudora-shell { display: flex; align-items: flex-start; gap: 12px; }   /* the same 12px as between the column's two blocks */
/* The column sticks under the nav, the way the nav sticks under the top of
 * the window, and is sized to what is left of the viewport so it scrolls
 * on its own when the folders outrun it. --e-nav-h is the nav's measured
 * height (eudora.js navHeight), the same offset the table header uses. */
.eudora-folders {
  flex: 0 0 172px; position: sticky; top: var(--e-nav-h, 0px);
  height: calc(100vh - var(--e-nav-h, 0px) - 12px); overflow-y: auto; box-sizing: border-box;
  padding: 2px 0 8px 0; font-size: 12px; color: var(--e-ink-2);
  /* The mail column scrolls inside its categories block (below); the rules
   * and labels columns, which have no such block, scroll as a whole. */
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable;
}
.eudora-folders:hover { scrollbar-color: var(--e-line-2) transparent; }
.eudora-folders::-webkit-scrollbar { width: 6px; }
.eudora-folders::-webkit-scrollbar-track { background: transparent; }
.eudora-folders::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.eudora-folders:hover::-webkit-scrollbar-thumb { background: var(--e-line-2); }
.eudora-folders::-webkit-scrollbar-button { display: none; height: 0; }
/* With a categories block, the column is a flex column that does not
 * scroll itself: the standing block keeps its height and the categories
 * block takes the rest and scrolls, with the same slim overlay scrollbar. */
.eudora-folders-pinned:has(.eudora-folder-cats) { display: flex; flex-direction: column; overflow: hidden; scrollbar-gutter: auto; }   /* no gutter: the blocks reach the column edge */
.eudora-folders-pinned .eudora-folder-standing { flex: 0 0 auto; }
.eudora-folders-pinned .eudora-folder-cats {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable;
}
.eudora-folders-pinned .eudora-folder-cats:hover { scrollbar-color: var(--e-line-2) transparent; }
.eudora-folder-cats::-webkit-scrollbar { width: 6px; }
.eudora-folder-cats::-webkit-scrollbar-track { background: transparent; }
.eudora-folder-cats::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.eudora-folder-cats:hover::-webkit-scrollbar-thumb { background: var(--e-line-2); }
.eudora-folder-cats::-webkit-scrollbar-button { display: none; height: 0; }
.eudora-body { flex: 1 1 auto; min-width: 0; }
.eudora-folder-cat { margin: 6px 0 0; }
.eudora-folder-cat summary {
  cursor: pointer; list-style: none; padding: 4px 6px; border-radius: 4px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--e-ink-3); font-weight: 600;
}
.eudora-folder-cat summary::-webkit-details-marker { display: none; }
.eudora-folder-cat summary::before { content: '\25B8'; display: inline-block; width: 10px; color: #9aa3ac; }
.eudora-folder-cat[open] summary::before { content: '\25BE'; }
.eudora-folder-cat summary:hover { background: #e3e8ed; }
.eudora-folder-unread {
  float: right; font-weight: bold; color: #1975D7; text-transform: none; letter-spacing: 0;
}
a.eudora-folder {
  display: block; padding: 4px 8px 4px 16px; border-radius: 6px; margin: 1px 0;
  color: var(--e-ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.eudora-folder:hover { background: var(--e-bg-2); color: var(--e-ink); }
a.eudora-folder-on { background: var(--e-accent-bg); color: var(--e-accent-2); font-weight: 600; }
a.eudora-folder-all { padding-left: 4px; margin-bottom: 2px; }
a.eudora-folder-trash { color: #6b7480; }
/* The three standing views on one block: a card with the entries stacked
 * inside, a hairline between them, the open one filled. */
.eudora-folder-standing, .eudora-folder-cats {
  margin: 0 0 12px; border: 1px solid var(--e-line-2); border-radius: 8px; box-shadow: var(--e-shadow); overflow: hidden;
}
.eudora-folder-standing { background: var(--e-card); }
.eudora-folder-cats { background: var(--e-bg); padding: 4px 6px 6px; }
.eudora-folder-cats .eudora-folder-cat:first-child > summary { padding-top: 6px; }
.eudora-folder-standing a.eudora-folder { border-radius: 0; margin: 0; padding: 6px 10px; border-top: 1px solid var(--e-line); }
.eudora-folder-standing a.eudora-folder:first-child { border-top: none; }
.eudora-folder-standing a.eudora-folder:hover { background: var(--e-bg); }
.eudora-folder-standing a.eudora-folder-on { background: var(--e-accent-bg); color: var(--e-accent-2); }
.eudora-toggle { font-variant-numeric: normal; }

/* ---- the message pane (a message opened from the list) ----------------- */
.eudora-msgpane-banner {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px;
  background: var(--e-accent-bg); color: #3a5580; padding: 9px 14px; border-radius: var(--e-radius); border: 1px solid #cfdcf0;
}
.eudora-msgpane-back { color: var(--e-accent-2); font-weight: 600; font-size: 13px; text-decoration: none; }
/* the banner spans the message column only: the client column beside a
 * message is pinned (position: fixed) from the nav down, and a full-width
 * banner ran underneath it */
.eudora-msgpane:has(.eudora-side:not(.eudora-side-top)) .eudora-msgpane-banner,
.eudora-body:has(> .eudora-page .eudora-side:not(.eudora-side-top)) > .eudora-msgpane-banner { margin-right: 304px; }
.eudora-msgpane-back:hover { text-decoration: underline; }
.eudora-msgpane-hint { flex: 1; font-size: 11px; }
.eudora-msgpane-hint kbd {
  display: inline-block; padding: 0 4px; border: 1px solid #9db8dc; border-radius: 3px;
  background: #fff; color: #22407f; font-family: inherit; font-size: 10px; line-height: 15px;
}

/* ---- p: the preview, and the script's pager ---------------------------- */
.eudora-preview {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(20, 30, 40, .45); backdrop-filter: blur(2px);
}
@keyframes eudora-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.eudora-preview-card, .eudora-keyhelp-card { animation: eudora-rise .18s ease-out; }
.eudora-preview-card {
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%);
  width: 780px; max-width: 94vw; max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  font-size: 13px;
}
.eudora-preview-bar {
  display: flex; align-items: center; gap: 14px;
  background: var(--e-accent-2); color: #dfe7f5; padding: 12px 18px; border-radius: 10px 10px 0 0;
}
.eudora-preview-title { font-weight: bold; color: #fff; font-size: 16px; }
.eudora-preview-hint { flex: 1; font-size: 12px; }
.eudora-preview-hint kbd {
  display: inline-block; padding: 0 4px; border: 1px solid #6f8fd8; border-radius: 3px;
  background: #2f52a0; color: #fff; font-family: inherit; font-size: 10px; line-height: 15px;
}
.eudora-preview-close {
  background: transparent; border: 0; color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.eudora-preview-close:hover { color: #ffcc66; }
.eudora-preview-body { overflow: auto; padding: 0 0 14px; }
/* Under the blue bar, the message's own header on a grey band -- subject,
 * who, when, attachments -- then the body on white. */
.eudora-preview-body .eudora-peekhead {
  background: #e9edf1; border-bottom: 1px solid #c9d0d7; padding: 12px 18px; margin: 0; font-size: 12px;
}
.eudora-preview-body .eudora-peekhead b { display: block; font-size: 15px; color: #1b2026; margin: 3px 0 5px; }
.eudora-preview-body .eudora-peekdir { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #6b7480; }
.eudora-preview-body .eudora-peekatt { background: #f2f4f7; border-bottom: 1px solid #dfe4e9; padding: 6px 18px; }
.eudora-preview-body .eudora-peekbody > :not(.eudora-peekhead):not(.eudora-peekatt) { padding-left: 18px; padding-right: 18px; }
.eudora-preview-body .eudora-peekhead .eudora-peekopen { float: right; margin-top: 2px; }
/* The thread panel on the message page caps the body at 320px; the preview
 * has the whole card to scroll in, so it does not. */
.eudora-preview-body pre.eudora-body { max-height: none; }
.eudora-preview-card .eudora-peekopen { float: right; }
.eudora-jspager { text-align: center; margin: 10px 0; }
.eudora-jspager .eudora-dim { margin: 0 10px; }
.eudora-jspager a[hidden] { display: none; }

/* ---- the ? key reference ---------------------------------------------- */
.eudora-keyhelp {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100;
  background: rgba(20, 30, 40, .45); backdrop-filter: blur(2px);
}
.eudora-keyhelp-card {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  width: 440px; max-width: 92vw; background: #fff; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: 16px 20px 12px; font-size: 13px;
}
.eudora-keyhelp-card h3 { margin: 0 0 10px; font-size: 13px; color: #1b2026; }
.eudora-keyhelp-close { float: right; cursor: pointer; color: #8a929b; font-size: 16px; line-height: 1; }
.eudora-keyhelp-close:hover { color: #1b2026; }
.eudora-keyhelp-card table { width: 100%; border-collapse: collapse; }
.eudora-keyhelp-card th {
  text-align: left; padding: 8px 0 3px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: #6b7480; font-weight: normal;
}
.eudora-keyhelp-card th.eudora-keyhelp-here { color: #1975D7; }
.eudora-keyhelp-card td { padding: 2px 0; vertical-align: top; }
.eudora-keyhelp-card td:first-child { width: 110px; white-space: nowrap; }
.eudora-keyhelp-card kbd {
  display: inline-block; padding: 0 5px; border: 1px solid #c9d0d7; border-bottom-width: 2px;
  border-radius: 3px; background: #f4f6f8; font-family: inherit; font-size: 11px; line-height: 16px;
}
.eudora-keyhelp-card p { margin: 10px 0 0; font-size: 11px; }
.eudora-trash td { color: #8a929b; }
.eudora-trash .eudora-pip { background: #e0c4c4; }
.eudora-folder-count { float: right; color: #8a929b; font-size: 10px; }
.eudora-folder-count b { color: var(--e-accent); margin-right: 4px; }
a.eudora-folder-on .eudora-folder-total { color: #6b7480; }
/* A Eudora box's label on a row or a message: a quiet grey tag, not one of
 * the coloured hand labels. */
.eudora-rowlabel[class*="eudora-label-box-"] { background: #e6eaee; color: #2b3540; }
.eudora-chip[class*="eudora-label-box-"] { border-left-color: #9aa3ac; }

/* ---- two columns: the message, and the client's record --------------- */
.eudora-page { display: flex; align-items: flex-start; gap: 14px; }
.eudora-main { flex: 1 1 auto; min-width: 0; }
.eudora-side { flex: 0 0 290px; }
/* Pinned by the script (pinSide), the same way as the folder column. */
.eudora-side-spacer { flex: 0 0 290px; }
.eudora-side-pinned { position: fixed; width: 290px; z-index: 20; overflow-y: auto; box-sizing: border-box; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
.eudora-side-pinned:hover { scrollbar-color: var(--e-line-2) transparent; }
.eudora-side-pinned::-webkit-scrollbar { width: 6px; }
.eudora-side-pinned::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.eudora-side-pinned:hover::-webkit-scrollbar-thumb { background: var(--e-line-2); }
.eudora-side-top { display: block; width: auto; margin: 0 0 12px; }
.eudora-side-top .eudora-card { max-width: none; }

/* ---- toolbar and filters --------------------------------------------- */
.eudora-toolbar { margin: 4px 0 10px; }
.eudora-search { display: inline; margin-left: 12px; }
.eudora-searchnote { margin: 0 0 8px; font-size: 12px; }
.eudora-search input[type=text] {
  border: 1px solid var(--e-line-2); border-radius: 999px; padding: 5px 12px; font-size: 12.5px;
  background: var(--e-bg); width: 240px; transition: border-color .15s, background .15s;
}
.eudora-search input[type=text]:focus { background: #fff; border-color: var(--e-accent); outline: none; }

.eudora-button, body.ctl-eudora #content a.eudora-button {
  background: var(--e-fill); border: 1px solid var(--e-fill-line); color: var(--e-fill-ink);
  border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  text-decoration: none; line-height: 1.3;
}
.eudora-button:hover, body.ctl-eudora #content a.eudora-button:hover { background: var(--e-fill-hover); border-color: var(--e-accent); }
.eudora-button[disabled] { background: var(--e-bg-2); border-color: var(--e-line-2); color: var(--e-ink-4); cursor: default; }
.eudora-button.quiet, body.ctl-eudora #content a.eudora-button.quiet {
  background: var(--e-card); color: var(--e-ink); border: 1px solid var(--e-line-2); font-weight: 500;
}
.eudora-button.quiet:hover, body.ctl-eudora #content a.eudora-button.quiet:hover { border-color: var(--e-accent); color: var(--e-fill-ink); background: var(--e-fill); }
.eudora-send { padding: 5px 18px; font-weight: bold; }

/* ---- the mail nav ---------------------------------------------------- */
/* No card around the whole nav: the tabs float on the page and the
 * toolbar rows beneath them are the block they attach to, the way browser
 * tabs sit on a toolbar. The nav paints the page white behind itself
 * because it is sticky and the list scrolls under it. */
/* The gap under the nav is padding, not margin: a margin paints nothing,
 * and rows scrolled through it between the nav and the stuck table header. */
.eudora-nav { position: sticky; top: 0; z-index: 30; margin: 0; padding-bottom: 14px; background: #fff; }
.eudora-navrow { padding: 8px 12px; }
.eudora-nav > .eudora-navrow { background: var(--e-card); border-left: 1px solid var(--e-line-2); border-right: 1px solid var(--e-line-2); }
.eudora-modebar + .eudora-navrow { border-top: 1px solid var(--e-line-2); border-radius: 0 var(--e-radius) 0 0; }
.eudora-nav > .eudora-navrow:last-child { border-bottom: 1px solid var(--e-line-2); border-radius: 0 0 var(--e-radius) var(--e-radius); box-shadow: var(--e-shadow); }
.eudora-navmain { border-bottom: 1px solid var(--e-line); }
/* The sub row is a flex line, not text with a float: a floated toolbar
 * taller than the text beside it ran past the row and the nav's
 * overflow: hidden clipped the bottom of its buttons. */
.eudora-navsub { background: var(--e-bg); font-size: 11.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px 9px; }
.eudora-navtitle {
  font-weight: 700; font-size: 15px; color: var(--e-ink); margin-right: 14px; letter-spacing: -.01em;
  vertical-align: middle;
}
.eudora-navlabel {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: #6b7480; margin-right: 8px;
}
.eudora-navsep {
  display: inline-block; width: 1px; height: 14px; background: #b0bac4;
  margin: 0 8px; vertical-align: middle;
}
.eudora-navtools { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eudora-navtools .eudora-search { display: inline; margin: 0; }
.eudora-navtools form { display: inline; }

.eudora-filters { margin: 0 0 10px; font-size: 11px; }
.eudora-filter-group { display: inline-block; margin-right: 18px; }
a.eudora-filter, span.eudora-filter {
  display: inline-block; margin: 0 3px 3px 0; padding: 3px 11px;
  border: 1px solid var(--e-line-2); border-radius: 999px; color: var(--e-ink);
  text-decoration: none; background: var(--e-card); font-size: 12px; line-height: 1.3;
}
a.eudora-filter:hover { border-color: var(--e-accent); color: var(--e-fill-ink); }
a.eudora-filter-on, span.eudora-filter-on { background: var(--e-fill); border-color: var(--e-fill-line); color: var(--e-fill-ink); font-weight: 600; }
a.eudora-filter-on:hover { color: var(--e-fill-ink); border-color: var(--e-accent); }

/* ---- the list -------------------------------------------------------- */
/* Fixed layout: the header widths are the column widths and Subject takes
 * the rest, so a long URL in a snippet or a bare address cannot widen the
 * table past its cell -- with auto layout it did, once the folder column
 * took 168px away. Long tokens wrap inside the cell instead. */
table.eudora-list { border-collapse: separate; border-spacing: 0; font-size: 12.5px; table-layout: fixed; width: 100%; background: var(--e-card); border: 1px solid var(--e-line); border-radius: var(--e-radius); box-shadow: var(--e-shadow); }
table.eudora-list td { overflow: hidden; overflow-wrap: break-word; word-wrap: break-word; }
.eudora-body { overflow: clip; }   /* clip, not hidden: hidden makes a scroll container and unsticks the nav and header */
table.eudora-list th:first-child { border-top-left-radius: var(--e-radius); }
table.eudora-list th:last-child { border-top-right-radius: var(--e-radius); }
table.eudora-list th {
  position: sticky; top: var(--e-nav-h, 0px); z-index: 5; background: var(--e-bg);
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--e-ink-3); font-weight: 600;
  border-bottom: 1px solid var(--e-line-2); padding: 7px 8px;
}
table.eudora-list td { padding: 8px; border-bottom: 1px solid var(--e-line); vertical-align: top; }
table.eudora-list tbody tr:last-child td { border-bottom: none; }
table.eudora-list tr:hover td { background: var(--e-bg); }
/* The whole row is a target (index.rhtml wires data-href); say so. */
table.eudora-list tr.eudora-row-link { cursor: pointer; }
/* The keyboard cursor (j/k): an edge on the first cell plus a tint, so it
 * reads as "here" without competing with the unread bold or the hover. */
/* The cursor row is grey with a dark rule: unread rows own the blue. */
table.eudora-list tr.eudora-row-cur td { background: #e4e8ed; }
table.eudora-list tr.eudora-row-cur td:first-child { box-shadow: inset 3px 0 0 var(--e-ink-2); }

.eudora-dot { text-align: center; }
.eudora-pip {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #dfe4e9;
}
.eudora-unread .eudora-pip  { background: #1975D7; }
/* Replied: a << (an answer went back) in place of a dot. */
.eudora-replied .eudora-pip { display: none; }
.eudora-replied .eudora-dot::before { content: "<<"; color: #2e7d4f; font-weight: 700; font-size: 11px; letter-spacing: -1px; }
.eudora-read .eudora-pip    { display: none; }   /* read is the quiet state: no dot at all */
.eudora-rowlabel.eudora-replied-tag { background: #d8efe0; color: #0f4a22; text-transform: none; letter-spacing: 0; font-weight: 600; }
.eudora-out .eudora-pip     { background: #c3d0f0; }
.eudora-failed .eudora-pip  { background: #d9534f; }
.eudora-archived .eudora-pip{ background: #eceff2; border: 1px solid #d2d8de; }

/* Unread: weight on the sender and the subject only. Bolding every cell
 * made the whole row shout, and the date and snippet have nothing to say
 * louder. */
.eudora-unread .eudora-from, .eudora-unread .eudora-subject > a { font-weight: 600; color: var(--e-ink); }
.eudora-out td { color: var(--e-ink-3); }
.eudora-current td { background: #ebf2fa; box-shadow: inset 3px 0 0 #7ba3d4; }
.eudora-failed td { background: #f6d8d8; }

/* Something that arrived, was not answered and is now two days old. An edge
 * on the first cell only -- not a bar down every cell in the row, which is
 * what made it read as seven lines rather than one marker. */
.eudora-row-waiting td:first-child { box-shadow: inset 3px 0 0 #c0392b; }

.eudora-from { color: var(--e-ink-2); }
.eudora-sub { margin-top: 2px; font-size: 10px; color: #6b7480; }
.eudora-unread .eudora-sub { font-weight: normal; }
a.eudora-rowlabel { text-decoration: none; }
a.eudora-rowlabel:hover { filter: brightness(.94); }
.eudora-refkind { color: #9aa3ac; }
.eudora-bubbles .eudora-rowlabel { margin: 0 4px 2px 0; vertical-align: middle; }
.eudora-labelbox-card { width: 360px; }
.eudora-labelbox-list label { display: block; padding: 3px 0; cursor: pointer; }
.eudora-labelbox-list input { margin-right: 8px; vertical-align: middle; }
.eudora-labelbox-list .eudora-rowlabel { vertical-align: middle; font-size: 10px; }
.eudora-labelbox-new { margin-top: 10px; }
.eudora-labelbox-new input[type=text] { border: 1px solid var(--e-line-2); border-radius: 6px; padding: 5px 9px; font-size: 12.5px; width: 220px; font-family: inherit; }
.eudora-refs a { color: #22407f; text-decoration: none; }
.eudora-refs a:hover { text-decoration: underline; }
.eudora-refs .eudora-invref { margin-left: 4px; }
/* A client's message: pale green across the row. Hover and the keyboard
 * cursor still tint over it; the unread bold and the waiting edge still show. */
/* Unread rows carry the tint (a pale blue, with a blue rule down the left
 * edge); the CLIENT tag says who is a client, so client rows no longer
 * need a colour of their own. The cursor row's blue wins over both. */
table.eudora-list tr.eudora-unread td { background: #eef4fc; }
table.eudora-list tr.eudora-unread td:first-child { box-shadow: inset 3px 0 0 #9cc3ee; }
table.eudora-list tr.eudora-unread:hover td { background: #e4edf9; }
table.eudora-list tr.eudora-unread.eudora-row-cur td { background: #dfe4ea; }
table.eudora-list tr.eudora-unread.eudora-row-cur td:first-child { box-shadow: inset 3px 0 0 var(--e-ink-2); }
/* Replied rows take the pale green the client rows used to have. */
table.eudora-list tr.eudora-replied td { background: var(--e-green-bg); }
table.eudora-list tr.eudora-replied:hover td { background: #e6f0e9; }
table.eudora-list tr.eudora-replied.eudora-row-cur td { background: #e0e6e2; }
.eudora-subject a { color: var(--e-ink); text-decoration: none; }
.eudora-subject a:hover { text-decoration: underline; }
.eudora-snippet { display: block; color: var(--e-ink-3); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eudora-when { color: var(--e-ink-2); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eudora-ago { color: #9aa3ac; font-size: 10px; margin-top: 1px; }
.eudora-unread .eudora-ago { font-weight: normal; }
.eudora-account { color: #7a828b; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.eudora-about { font-size: 11px; }
.eudora-invref { color: #7a828b; }
.eudora-nomatch { color: #b0863a; font-size: 11px; font-style: italic; }
.eudora-arrow { color: #6f8fd8; font-weight: bold; }
.eudora-clip { color: #8a929b; }
.eudora-empty { color: #8a929b; font-style: italic; }
.eudora-dim { color: #8a929b; font-size: 11px; }

/* ---- one message ----------------------------------------------------- */
.eudora-message {
  border: 1px solid var(--e-line); border-radius: var(--e-radius); background: var(--e-card);
  box-shadow: var(--e-shadow); padding: 16px 20px; margin-bottom: 16px;
}
.eudora-msgsubject { margin: 0 0 12px; font-size: 19px; font-weight: 650; color: var(--e-ink); letter-spacing: -.01em; line-height: 1.3; }

table.eudora-headers { font-size: 12px; margin-bottom: 10px; }
table.eudora-headers th {
  text-align: left; font-weight: normal; color: #7a828b; font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 10px 2px 0; vertical-align: top; width: 70px;
}
table.eudora-headers td { padding: 2px 0; color: #33383d; }
table.eudora-headers td.eudora-wrap { overflow-wrap: anywhere; }
.eudora-fullheaders { margin: -4px 0 12px; font-size: 11px; }
.eudora-fullheaders summary { cursor: pointer; color: #22407f; }
.eudora-fullheaders summary:hover { text-decoration: underline; }
.eudora-fullheaders table.eudora-headers { margin: 6px 0 8px; font-size: 11px; }
pre.eudora-rawheaders {
  font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto;
  background: #f4f6f8; border: 1px solid #dfe4e9; border-radius: 3px; padding: 8px 10px; margin: 4px 0 0;
}
table.eudora-headers tr.eudora-alert td { color: #8a1f1f; }

.eudora-attachments {
  border-top: 1px solid #ccd4dc; border-bottom: 1px solid #ccd4dc;
  padding: 7px 0; margin-bottom: 10px; font-size: 12px;
}
a.eudora-attachment {
  display: inline-block; margin: 0 4px 0 8px; padding: 2px 9px;
  border: 1px solid var(--e-line-2); border-radius: 6px; background: var(--e-bg);
  color: var(--e-accent-2); text-decoration: none;
}
a.eudora-attachment:hover { border-color: var(--e-accent); }

/* The body is a <pre> because it is plain text and its line breaks are
 * meaningful. pre-wrap keeps them without the horizontal scrollbar. */
a.eudora-link { color: #22407f; text-decoration: none; border-bottom: 1px dotted #7ba3d4; }
a.eudora-link:hover { border-bottom-style: solid; }
pre.eudora-body {
  white-space: pre-wrap; word-wrap: break-word; font-size: 13.5px;
  line-height: 1.55; color: var(--e-ink); margin: 0; max-width: 78ch;
  font-family: inherit;
}
.eudora-quoted { color: #8a929b; }

.eudora-msgactions { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ccd4dc; }
.eudora-backlink { margin-left: 12px; font-size: 11px; }

/* ---- reply ----------------------------------------------------------- */
.eudora-reply {
  border: 1px solid var(--e-line); border-radius: var(--e-radius); background: var(--e-card);
  box-shadow: var(--e-shadow); padding: 16px 20px; margin-bottom: 16px;
}
.eudora-reply h3 { margin: 0 0 10px; font-size: 13px; color: #33383d; }
.eudora-replyas { font-weight: normal; color: #6b7480; }
.eudora-replyaddr {
  display: inline-block; padding: 1px 8px; border-radius: 10px; margin-left: 2px;
  background: #dbe7f5; border: 1px solid #b9cde8; color: #22407f; font-weight: bold; font-size: 12px;
}
table.eudora-form { width: 100%; font-size: 12px; }
table.eudora-form th {
  text-align: left; font-weight: normal; color: #7a828b; font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 10px 5px 0; vertical-align: top; width: 70px;
}
table.eudora-form td { padding: 4px 0; }
table.eudora-form input[type=text] {
  border: 1px solid var(--e-line-2); border-radius: 6px; padding: 6px 9px;
  font-size: 12.5px; width: 100%; box-sizing: border-box; background: var(--e-card); font-family: inherit;
}
table.eudora-form input[type=text]:focus { border-color: var(--e-accent); outline: none; }
textarea.eudora-textarea {
  border: 1px solid var(--e-line-2); border-radius: 6px; padding: 10px; background: var(--e-card);
  font-family: inherit; font-size: 13.5px; min-height: 220px; resize: vertical;
  line-height: 1.55; width: 100%; box-sizing: border-box;
}
textarea.eudora-textarea:focus { border-color: var(--e-accent); outline: none; }

.eudora-thread { margin-bottom: 14px; }
.eudora-thread h3 { font-size: 13px; color: #33383d; margin: 0 0 6px; }

/* The panel the thread links load into. Inset and a shade darker than the
 * message below it, so a message being glanced at is never mistaken for the
 * one being answered. */
#eudora_peek:empty { display: none; }
#eudora_peek.loading { color: #55606b; font-style: italic; font-size: 12px; }
#eudora_peek {
  border: 1px solid #b6c0ca; border-left: 4px solid #7ba3d4; border-radius: 4px;
  background: #dfe5ea; padding: 10px 12px; margin: 8px 0 0;
}
.eudora-peekhead {
  border-bottom: 1px solid #c4ccd4; padding-bottom: 6px; margin-bottom: 8px;
  font-size: 12px; color: #1b2026;
}
.eudora-peekdir {
  display: inline-block; font-size: 9px; text-transform: uppercase;
  letter-spacing: .05em; color: #4a5560; background: #cbd4dc;
  border-radius: 2px; padding: 1px 5px; margin-right: 6px; vertical-align: middle;
}
a.eudora-peekopen { float: right; font-size: 11px; color: #16305e; }
.eudora-peekatt { margin-bottom: 8px; font-size: 11px; }
.eudora-peekbody pre.eudora-body { font-size: 12px; max-height: 320px; overflow-y: auto; }
.eudora-thisone {
  font-size: 10px; color: #55606b; font-style: italic; margin-left: 6px;
  white-space: nowrap;
}

/* The conversation block sits on the darkest part of the page and is read
 * last, when someone is checking what was already said. Its text is set
 * darker than the inbox's -- the inbox is scanned, this is read -- and the
 * greyed-out treatment for our own replies is dropped here, because in a
 * thread both sides matter equally. */
.eudora-thread table.eudora-list td { color: #1b2026; }
.eudora-thread .eudora-from { color: #1b2026; }
.eudora-thread .eudora-out td { color: #1b2026; }
.eudora-thread .eudora-snippet { color: #55606b; }
.eudora-thread .eudora-when { color: #55606b; }
.eudora-thread table.eudora-list a { color: #16305e; }

/* ---- the client's record -------------------------------------------- */
.eudora-card {
  border: 1px solid var(--e-line); border-radius: var(--e-radius); background: var(--e-card);
  box-shadow: var(--e-shadow); padding: 12px 14px; margin-bottom: 12px;
}
.eudora-card h3 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: #7a828b; font-weight: normal;
  border-bottom: 1px solid #ccd4dc; padding-bottom: 5px;
}
.eudora-card h3 a { color: #22407f; font-size: 13px; text-transform: none;
  letter-spacing: 0; font-weight: bold; text-decoration: none; }
.eudora-card-warn { background: #f7edcf; border-color: #d9bd68; }

/* Each card in the record column is white with a coloured rule down its left
 * edge, ranked by hue rather than by the grey ladder these used to carry: the
 * client card says WHO this is and takes the accent, papers and invoices the
 * green, correspondence and notes fade to grey. Open invoices keep the amber --
 * money is the one thing that should not be ranked by position. */
.eudora-card-client { border-left: 4px solid var(--e-accent); }
.eudora-card-papers { border-left: 4px solid #2e7d4f; }
.eudora-card-corr   { border-left: 4px solid var(--e-line-2); }
.eudora-card-notes  { border-left: 4px solid var(--e-line); }
.eudora-card h3 { border-bottom-color: var(--e-line); color: var(--e-ink-3); font-weight: 600; }
.eudora-card h3 a { color: var(--e-ink); }
.eudora-card-warn { background: #fff8e6; border-color: #e6cf8a; border-left: 4px solid #d9a43a; }

table.eudora-kv { width: 100%; font-size: 11.5px; }
table.eudora-kv th {
  text-align: left; font-weight: normal; color: #8a929b;
  padding: 2px 8px 2px 0; vertical-align: top; width: 74px;
}
table.eudora-kv td { padding: 2px 0; color: #33383d; word-wrap: break-word; }

table.eudora-papers { width: 100%; font-size: 11.5px; }
table.eudora-papers td { padding: 4px 3px; border-bottom: 1px solid #ccd4dc;
  vertical-align: top; }
table.eudora-papers tr:last-child td { border-bottom: none; }
.eudora-refnum { white-space: nowrap; }
.eudora-refnum a { color: #22407f; text-decoration: none; font-weight: bold; }
.eudora-papertitle { color: #33383d; line-height: 1.35; }
.eudora-thispaper td { background: #c5d6ef; }
.eudora-express {
  display: inline-block; background: #d9534f; color: #fff; font-size: 9px;
  border-radius: 2px; padding: 0 3px; margin-left: 3px; vertical-align: middle;
}
tr.eudora-total th { border-top: 1px solid #dbe1e8; padding-top: 5px;
  font-size: 11px; color: #33383d; }

ul.eudora-corr { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
ul.eudora-corr li { padding: 4px 0; border-bottom: 1px solid #ccd4dc; line-height: 1.4; }
ul.eudora-corr li:last-child { border-bottom: none; }
ul.eudora-corr .eudora-when { display: inline-block; min-width: 56px; }
ul.eudora-corr a { color: #22407f; text-decoration: none; }
ul.eudora-corr a:hover { text-decoration: underline; }

.eudora-reassign { margin-top: 8px; padding-top: 8px; border-top: 1px solid #ccd4dc; }
.eudora-reassign input[type=text] {
  border: 1px solid #ccd3da; border-radius: 3px; padding: 2px 5px; font-size: 11px;
}

/* ---- what the poller last did ---------------------------------------- */
div.eudora-sync { margin-top: 22px; }   /* the Last fetch block; the Check mail form carries the class too and must not move */
.eudora-sync h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: #7a828b; font-weight: normal; margin: 0 0 5px;
}
table.eudora-synctable { font-size: 11px; border-collapse: collapse; width: 100%; }
table.eudora-synctable th {
  text-align: left; color: #8a929b; font-weight: normal;
  border-bottom: 1px solid #ccd4dc; padding: 3px 8px 3px 0;
}
table.eudora-synctable td { padding: 3px 8px 3px 0; color: #56606a;
  border-bottom: 1px solid #ccd4dc; }
tr.eudora-syncfail td { color: #8a1f1f; background: #f6d8d8; }


/* ---- labels ----------------------------------------------------------- */
/* Each label gets a left colour bar rather than a full fill: the nav already
 * sits on grey, and three saturated pills would compete with the unread
 * counts, which are the thing to look at first. */
a.eudora-label { border-left-width: 4px; }
a.eudora-label-urgent   { border-left-color: #c0392b; }
a.eudora-label-client   { border-left-color: #2e7d4f; }
a.eudora-label-personal { border-left-color: #6f4bab; }

.eudora-labels { margin: 0 0 10px; }
.eudora-chip {
  border: 1px solid var(--e-line-2); border-left-width: 4px; border-radius: 999px;
  background: var(--e-card); color: var(--e-ink-2); font-size: 11.5px; padding: 3px 11px;
  margin-right: 5px; cursor: pointer;
}
.eudora-chip:hover { border-color: #7ba3d4; color: #16305e; }
.eudora-chip-on { background: #dfe5ec; color: var(--e-ink); font-weight: 700; border-color: var(--e-ink-4); }
.eudora-labels { display: flex; align-items: flex-start; gap: 12px; }
.eudora-labels-on { flex: 1; }
.eudora-labels-off { text-align: right; }
.eudora-labelform { display: inline; }
.eudora-chip-x { margin-left: 4px; color: #6b7480; font-weight: normal; }
.eudora-chip-on:hover .eudora-chip-x { color: #c0392b; }
.eudora-chip-plus { color: #9aa3ac; margin-right: 1px; }
.eudora-chip.eudora-label-urgent   { border-left-color: #c0392b; }
.eudora-chip.eudora-label-client   { border-left-color: #2e7d4f; }
.eudora-chip.eudora-label-personal { border-left-color: #6f4bab; }

/* A label's colour, shown against the subject in the list. */
.eudora-rowlabels { margin-left: 6px; }
.eudora-rowlabel {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 1px 6px; border-radius: 3px; margin-right: 3px;
  background: #dfe5ec; color: #1f2933; vertical-align: middle; line-height: 1.5;
}
.eudora-rowlabel.eudora-label-urgent   { background: #f6d5d0; color: #7a1010; }
.eudora-rowlabel.eudora-label-client   { background: #cfe8d8; color: #0f4a22; }
.eudora-rowlabel.eudora-label-personal { background: #e0d5f3; color: #351a6b; }


/* ---- draft assistance -------------------------------------------------- */
.eudora-draftbox {
  border: 1px solid var(--e-line); border-radius: var(--e-radius); background: var(--e-bg);
  padding: 8px 10px; margin-bottom: 12px;
}
.eudora-draftrow input[type=text] {
  border: 1px solid var(--e-line-2); border-radius: 6px; padding: 5px 9px; font-family: inherit;
  font-size: 12px; background: #fff; margin-right: 6px;
}
.eudora-draftnote { margin-top: 6px; line-height: 1.45; }

/* ---- the filter editor ------------------------------------------------ */
.eudora-filters-head p { margin: 4px 0 10px; }
.eudora-filters-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12px; }
.eudora-filters-tools input[type=text] { width: 60px; border: 1px solid var(--e-line-2); border-radius: 6px; padding: 4px 7px; font-family: inherit; }
table.eudora-filters td { vertical-align: top; }
tr.eudora-filter-off td { color: var(--e-ink-4); }
tr.eudora-filter-off td b { color: var(--e-ink-3); }
tr.eudora-filter-editing td { background: var(--e-accent-bg); }
tr.eudora-filter-row { cursor: pointer; }
tr.eudora-filter-row:hover td { background: var(--e-bg); }
tr.eudora-filter-row td:first-child a { color: var(--e-ink-4); text-decoration: none; }
.eudora-filter-cond { display: inline-block; margin: 0 4px 3px 0; }
.eudora-filter-cond i { color: var(--e-ink-3); }
.eudora-filter-cond code { background: var(--e-bg-2); border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }
.eudora-filter-then .eudora-rowlabel { margin: 0 3px 3px 0; }
.eudora-filter-ops { white-space: nowrap; font-size: 11.5px; }
.eudora-filter-ops a { margin-right: 4px; }
.eudora-linkbutton {
  background: none; border: none; padding: 0 3px; margin: 0; color: var(--e-accent-2); cursor: pointer;
  font: inherit; font-size: 11.5px;
}
.eudora-linkbutton:hover { text-decoration: underline; }
.eudora-linkbutton.eudora-danger { color: var(--e-red); }
.eudora-filter-form h3, .eudora-filter-json h3 { margin: 0 0 10px; font-size: 13px; color: var(--e-ink-2); }
.eudora-filter-form th { text-align: left; font-weight: normal; color: var(--e-ink-3); font-size: 11px; padding: 6px 8px 6px 0; vertical-align: top; }
.eudora-filter-form td { padding: 4px 0; }
.eudora-filter-form select { border: 1px solid var(--e-line-2); border-radius: 6px; padding: 4px 6px; font-family: inherit; font-size: 12.5px; background: var(--e-card); }
.eudora-filter-form input[type=text] { width: auto; }
.eudora-filter-condrow { margin: 0 0 6px; }
.eudora-filter-inline { margin-right: 14px; white-space: nowrap; }
textarea.eudora-json { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; min-height: 120px; }
.eudora-filters-result h3 { margin-bottom: 4px; }

.eudora-filters-find { margin: 0 0 8px; }
.eudora-filters-findbox { border: 1px solid var(--e-line-2); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; background: var(--e-bg); width: 320px; font-family: inherit; }
.eudora-filters-findbox:focus { background: #fff; border-color: var(--e-accent); outline: none; }
.eudora-filters-findnote { margin-left: 8px; }
.eudora-filter-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.eudora-filter-word { flex: 0 0 48px; color: var(--e-ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.eudora-filter-conds { margin: 0 0 4px 56px; }
.eudora-filter-conds .eudora-filter-condrow { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.eudora-filter-condx { color: var(--e-ink-4); font-size: 15px; }
.eudora-filter-condx:hover { color: var(--e-red); text-decoration: none; }
.eudora-filter-then-choices { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.eudora-filter-preview { margin: 4px 0 10px 56px; padding: 8px 12px; background: var(--e-bg); border: 1px solid var(--e-line); border-radius: var(--e-radius); font-size: 12px; }
.eudora-filter-preview-count { font-weight: 600; }
.eudora-filter-preview-list { margin: 4px 0 0; padding: 0 0 0 16px; color: var(--e-ink-2); }
.eudora-filter-preview-list li { margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eudora-filter-preview-list .eudora-when { margin-right: 6px; }
.eudora-filter-form.eudora-filter-inline-editor { margin: 0; border-radius: 0; box-shadow: none; border-left: 4px solid var(--e-accent); }
tr.eudora-filter-editrow > td { padding: 0; background: var(--e-accent-bg); }
.eudora-filter-formclose { float: right; cursor: pointer; color: var(--e-ink-4); font-size: 18px; line-height: 1; }
.eudora-filter-formclose:hover { color: var(--e-ink); }
.eudora-filter-json summary { cursor: pointer; font-size: 13px; }
.eudora-filter-json form { margin-top: 10px; }

/* ---- Mail | Filters ------------------------------------------------- */
.eudora-modebar { display: flex; gap: 2px; padding: 6px 0 0; align-items: flex-end; }   /* no side padding: the tabs start at the block's left edge and Check mail ends at its right */
.eudora-modebar .eudora-navcheck { align-self: center; padding-bottom: 4px; }
/* the listener pip, right of the tabs before Check mail: green listening,
 * amber reconnecting, red stale, grey stopped or never run */
.eudora-modebar .eudora-listener { margin-left: auto; margin-right: 12px; align-self: center; padding-bottom: 4px; }
.eudora-listener { font-size: 11.5px; color: var(--e-ink-3); white-space: nowrap; }
.eudora-listener-pip { font-size: 13px; line-height: 1; vertical-align: -1px; margin-right: 3px; color: var(--e-ink-4); }
.eudora-listener-live .eudora-listener-pip { color: var(--e-green-2); }
.eudora-listener-trouble .eudora-listener-pip { color: #d08a12; }
.eudora-listener-stale .eudora-listener-pip { color: var(--e-red); }
.eudora-listener-stale .eudora-listener-word { color: var(--e-red); font-weight: 600; }
.eudora-listener-age { margin-left: 3px; color: var(--e-ink-4); }
.eudora-mode {
  display: inline-block; padding: 6px 28px 8px; border-radius: 6px 6px 0 0; font-size: 12.5px; font-weight: 600;
  color: var(--e-ink-3); text-decoration: none; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
.eudora-mode:hover { color: var(--e-green); background: var(--e-green-bg); }
/* The open tab is the block's own white with the block's border, one pixel
 * over the row's top edge, so it reads as part of the block below and the
 * other tabs float on the page beside it. */
.eudora-mode-on { color: var(--e-green); background: var(--e-card); border-color: var(--e-line-2); box-shadow: inset 0 3px 0 var(--e-green-2); position: relative; z-index: 1; }
/* The mail nav is one row, so it is main and sub at once: the flex layout
 * of a sub row on the block's white rather than the sub row's grey. */
.eudora-navmain.eudora-navsub { background: var(--e-card); }
.eudora-nav > .eudora-navmain:last-child { border-bottom: 1px solid var(--e-line-2); }
.eudora-rulechip .eudora-count { opacity: .7; margin-left: 3px; font-size: 11px; }
.eudora-rulefolders .eudora-folder-cat { margin-bottom: 8px; }
.eudora-folder-archive { margin-top: 10px; border-top: 1px solid var(--e-line); padding-top: 6px; }
.eudora-folder-archive summary { color: var(--e-ink-4); }
.eudora-folder-archive a.eudora-folder { color: var(--e-ink-3); }
.eudora-rulerun { padding: 3px 6px; font-size: 11.5px; }
.eudora-rulerun input[type=text] { width: 48px; border: 1px solid var(--e-line-2); border-radius: 5px; padding: 2px 5px; font-family: inherit; font-size: 11.5px; }
.eudora-rulerun .eudora-button { padding: 3px 9px; font-size: 11.5px; }
.eudora-rulesearch { margin-left: 0; }

/* ---- the conversation tree -------------------------------------------- */
.eudora-tree { border: 1px solid var(--e-line); border-radius: var(--e-radius); background: var(--e-card); padding: 4px 0; }
.eudora-tree-row {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 12px 5px calc(12px + var(--depth, 0) * 22px);
  font-size: 12.5px; position: relative; border-top: 1px solid var(--e-line);
}
.eudora-tree-row:first-child { border-top: none; }
.eudora-tree-rail { position: absolute; left: calc(12px + var(--depth, 0) * 22px - 12px); top: 0; bottom: 0; width: 1px; background: var(--e-line-2); }
.eudora-tree-row[style="--depth: 0"] .eudora-tree-rail, .eudora-tree-row[style="--depth:0"] .eudora-tree-rail { display: none; }
/* US / THEM: who sent each entry. Two colours, two alignments, so the
 * exchange reads at a glance even before the words are read. */
.eudora-tree-who {
  flex: 0 0 44px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-align: center;
  padding: 1px 0; border-radius: 3px; background: #e6eaee; color: #4b5563;
}
.eudora-tree-out .eudora-tree-who { background: #d9e6f7; color: var(--e-accent-2); }
.eudora-tree-when { flex: 0 0 auto; margin-left: auto; color: var(--e-ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.eudora-tree-subject { flex: 1 1 auto; min-width: 0; color: var(--e-ink); text-decoration: none; overflow-wrap: anywhere; }
.eudora-tree-row { cursor: pointer; }
.eudora-tree-row:not(.eudora-tree-me):not(.eudora-tree-ghost):hover { background: var(--e-bg); }
.eudora-tree-ghost, .eudora-tree-me { cursor: default; }
a.eudora-tree-subject:hover { text-decoration: underline; }
.eudora-tree-out .eudora-tree-subject { color: var(--e-accent-2); }
/* The line from the marked entry down to the open message, drawn by the
 * script (drawTreeLink) at the tree's left edge; the message card carries
 * the same rule so the two read as one. */
/* The gutter the connector runs down. Inside .eudora-main, because the
 * enclosing .eudora-body clips at its own edge (overflow: clip) and a line
 * drawn in the margin outside it was cut off to two stubs. */
.eudora-main { position: relative; padding-left: 24px; }
svg.eudora-tree-link { position: absolute; pointer-events: none; z-index: 1; overflow: visible; }
.eudora-tree-link-line { fill: none; stroke: var(--e-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.eudora-tree-link-head, .eudora-tree-link-dot { fill: var(--e-accent); }
.eudora-message.eudora-message-linked { box-shadow: var(--e-shadow), inset 3px 0 0 var(--e-accent); }
/* The lighter pair: an entry opened to look at, and its panel above the reply message. */
polyline.eudora-tree-link-view { stroke: #8fb8e8; }
polygon.eudora-tree-link-view, circle.eudora-tree-link-view { fill: #8fb8e8; }
.eudora-tree-row.eudora-tree-viewed { background: #edf4fc; box-shadow: inset 3px 0 0 #8fb8e8; }
.eudora-tree-view {
  border: 1px solid var(--e-line); border-radius: var(--e-radius); background: var(--e-card);
  box-shadow: var(--e-shadow); margin: 0 0 14px; overflow: hidden;   /* above the conversation, flush with it */
}
.eudora-tree-view.eudora-tree-view-linked { box-shadow: var(--e-shadow), inset 3px 0 0 #8fb8e8; }
.eudora-tree-view-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #edf4fc; border-bottom: 1px solid var(--e-line); font-size: 12px; color: var(--e-accent-2); }
.eudora-tree-view-title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eudora-tree-view-close { background: none; border: none; font-size: 18px; line-height: 1; color: var(--e-ink-4); cursor: pointer; padding: 0 2px; }
.eudora-tree-view-close:hover { color: var(--e-ink); }
.eudora-tree-view-body { padding: 10px 14px; font-size: 12.5px; }
.eudora-tree-view-body pre.eudora-body { max-height: 420px; overflow-y: auto; max-width: none; }
.eudora-tree-mark { color: #2e7d4f; font-weight: 700; font-size: 11px; letter-spacing: -1px; }
.eudora-tree-out { background: #f6f9fe; }
.eudora-tree-ghost { color: var(--e-ink-4); font-style: italic; background: repeating-linear-gradient(45deg, #f6f9fe, #f6f9fe 6px, #fff 6px, #fff 12px); }
.eudora-tree-ghost .eudora-tree-who { opacity: .55; }
.eudora-tree-unread .eudora-tree-subject { font-weight: 600; }
.eudora-tree-me { background: var(--e-accent-bg); box-shadow: inset 3px 0 0 var(--e-accent); }
.eudora-tree-me .eudora-tree-subject b { color: var(--e-accent-2); }

/* ---- the label editor ------------------------------------------------- */
.eudora-cats { display: flex; flex-direction: column; gap: 14px; }
.eudora-catcard { border: 1px solid var(--e-line); border-radius: var(--e-radius); background: var(--e-card); box-shadow: var(--e-shadow); overflow: hidden; }
.eudora-catcard-fixed { border-style: dashed; box-shadow: none; }
.eudora-catcard-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--e-bg); border-bottom: 1px solid var(--e-line); }
.eudora-cat-rename { display: inline-flex; align-items: center; gap: 8px; }
.eudora-cat-namefield, .eudora-cat-fixed { font-size: 14px; font-weight: 700; color: var(--e-ink); }
.eudora-cat-namefield { border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; margin-left: -8px; font-family: inherit; background: transparent; }
.eudora-cat-namefield:hover { border-color: var(--e-line-2); background: var(--e-card); }
.eudora-cat-namefield:focus { border-color: var(--e-accent); background: var(--e-card); outline: none; }
.eudora-catcard-count { color: var(--e-ink-3); font-size: 12px; white-space: nowrap; }
.eudora-catcard-note { color: var(--e-ink-4); font-size: 11.5px; flex: 1; }
.eudora-catcard-empty { padding: 12px 14px; color: var(--e-ink-4); font-style: italic; font-size: 12px; }
.eudora-label-row { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-top: 1px solid var(--e-line); font-size: 12.5px; }
.eudora-catcard-head + .eudora-label-row { border-top: none; }
.eudora-label-row:hover { background: var(--e-bg); }
.eudora-label-row .eudora-rowlabel { flex: 0 0 auto; }
.eudora-label-rename { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.eudora-label-namefield { width: 100%; max-width: 360px; border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; margin-left: -8px; font-family: inherit; font-size: 12.5px; background: transparent; color: var(--e-ink); }
.eudora-label-namefield:hover { border-color: var(--e-line-2); background: var(--e-card); }
.eudora-label-namefield:focus { border-color: var(--e-accent); background: var(--e-card); outline: none; }
.eudora-label-meta { flex: 0 0 auto; color: var(--e-ink-3); font-size: 11.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.eudora-label-sep { color: var(--e-line-2); }
.eudora-label-archtag { background: #e6eaee; color: var(--e-ink-3); }
.eudora-label-archived .eudora-label-namefield { color: var(--e-ink-3); }
.eudora-label-catselect { flex: 0 0 auto; border: 1px solid var(--e-line-2); border-radius: 6px; padding: 3px 6px; font-family: inherit; font-size: 12px; background: var(--e-card); color: var(--e-ink-2); }
.eudora-label-catform { display: inline; }
.eudora-ops { display: inline-flex; gap: 2px; align-items: center; }
.eudora-label-row .eudora-ops, .eudora-label-row .eudora-label-open { opacity: 0; transition: opacity .12s; }
.eudora-label-row:hover .eudora-ops, .eudora-label-row:hover .eudora-label-open, .eudora-label-row:focus-within .eudora-ops { opacity: 1; }
.eudora-opbtn {
  border: 1px solid var(--e-line-2); background: var(--e-card); color: var(--e-ink-2); border-radius: 6px;
  width: 26px; height: 24px; padding: 0; font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
}
.eudora-opbtn:hover { border-color: var(--e-accent); color: var(--e-accent-2); }
.eudora-opbtn-danger { width: auto; padding: 0 8px; font-size: 11.5px; color: var(--e-red); }
.eudora-opbtn-danger:hover { border-color: var(--e-red); color: var(--e-red); }
.eudora-label-open { font-size: 11.5px; margin-left: 4px; }
.eudora-labelchip .eudora-count { opacity: .7; margin-left: 3px; font-size: 11px; }
.eudora-label-none { padding: 14px; color: var(--e-ink-4); font-style: italic; }
.eudora-cat-add { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eudora-cat-add form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eudora-cat-add input[type=text] { border: 1px solid var(--e-line-2); border-radius: 6px; padding: 5px 9px; font-family: inherit; }
.eudora-catcard-divider { padding: 4px 14px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--e-ink-4); background: var(--e-bg); border-top: 1px solid var(--e-line); }
.eudora-catcard-arch > summary { cursor: pointer; user-select: none; list-style: none; }
.eudora-catcard-arch > summary::-webkit-details-marker { display: none; }
.eudora-catcard-arch > summary:hover { color: var(--e-ink-2); background: var(--e-bg-2); }
.eudora-catcard-caret { display: inline-block; width: 10px; }
.eudora-catcard-arch[open] .eudora-catcard-caret { transform: rotate(90deg); }
.eudora-navmain { display: flex; align-items: flex-start; gap: 10px; }
.eudora-navchips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; }
/* the two forms stretch to the taller button (Check mail's two lines) and
 * each button fills its form, so Logout is exactly Check mail's height */
.eudora-navcheck { flex: 0 0 auto; display: inline-flex; align-items: stretch; gap: 8px; }
/* one word, but the same height as Check mail: stretched to the row and centred */
.eudora-checkbtn.eudora-lockbtn { justify-content: center; }
/* Check mail is the green one, Log out the red one; the same two-line
 * shape (.eudora-checkbtn). An armed Log out goes solid until it is
 * clicked again or four seconds pass. */
.eudora-checkbtn.eudora-checkbtn-go { background: var(--e-green-bg); color: var(--e-green); border-color: #a9d3b8; }
.eudora-checkbtn.eudora-checkbtn-go:hover { background: #e3f2e8; border-color: var(--e-green-2); }
.eudora-checkbtn.eudora-lockbtn { background: #fdeceb; color: var(--e-red); border-color: #efb4ad; }
.eudora-checkbtn.eudora-lockbtn:hover { background: #fadbd8; border-color: var(--e-red); }
.eudora-checkbtn.eudora-lockbtn[data-armed] { background: var(--e-red); color: #fff; border-color: var(--e-red); }
/* the unlock page and the settings view */
.eudora-unlock { width: max-content; max-width: 100%; margin: 40px auto; padding: 18px 26px 20px; border: 1px solid var(--e-line-2); border-radius: var(--e-radius); background: var(--e-card); box-shadow: var(--e-shadow); }
.eudora-unlock h2 { margin: 0 0 6px; font-size: 17px; }
.eudora-unlock-form { display: flex; align-items: center; gap: 8px; margin-top: 10px; white-space: nowrap; }
.eudora-unlock-form input[type=password], .eudora-pwform input[type=password], .eudora-settings input[type=number] { border: 1px solid var(--e-line-2); border-radius: 5px; padding: 4px 7px; font-family: inherit; font-size: 13px; }
/* Settings in two balanced columns (CSS columns, so a tall card like From
 * names does not leave a hole beside it); one column below ~900px */
.eudora-settings { columns: 2 420px; column-gap: 14px; max-width: 1100px; }
.eudora-setcard { break-inside: avoid; display: inline-block; width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 14px 18px 16px; border: 1px solid var(--e-line-2); border-radius: var(--e-radius); background: var(--e-card); box-shadow: var(--e-shadow); }
.eudora-setcard h3 { margin: 0 0 4px; font-size: 14px; }
.eudora-setcard form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.eudora-pwform label { flex: 0 0 100%; margin-top: 4px; font-size: 11.5px; color: var(--e-ink-3); }
.eudora-pwform .eudora-button { margin-top: 10px; }
.eudora-fromnames { flex-direction: column; align-items: flex-start !important; }
.eudora-fromname-row { display: flex; align-items: center; gap: 8px; }
.eudora-fromname-addr { font-size: 12.5px; color: var(--e-ink-2); }
.eudora-fromname-row input { border: 1px solid var(--e-line-2); border-radius: 5px; padding: 3px 7px; font-family: inherit; font-size: 12.5px; }
.eudora-msghead { display: flex; align-items: flex-start; gap: 12px; }
.eudora-msghead .eudora-msgsubject { flex: 1 1 auto; min-width: 0; }
.eudora-bodybar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 11.5px; margin-top: 2px; white-space: nowrap; }
.eudora-bodybar .eudora-button { padding: 4px 12px; font-size: 12px; font-weight: 600; }
.eudora-bodybar .eudora-button.quiet { font-weight: 500; }
.eudora-bodybar .eudora-unsubbtn, body.ctl-eudora #content a.eudora-unsubbtn { background: #fdeceb; color: var(--e-red); border-color: #efb4ad; }
.eudora-bodybar .eudora-unsubbtn:hover, body.ctl-eudora #content a.eudora-unsubbtn:hover { background: #fadbd8; border-color: var(--e-red); }
.eudora-htmlframe { display: block; width: 100%; height: 70vh; min-height: 300px; border: 1px solid var(--e-line); border-radius: var(--e-radius); background: #fff; resize: vertical; }
.eudora-composeform { margin: 0 0 8px; }
/* green, like Check mail, so it reads as an action rather than a folder */
.eudora-composebtn { display: block; width: 100%; padding: 7px 10px; font-weight: 600; font-size: 12.5px; text-align: center;
  background: var(--e-green-bg); color: var(--e-green); border-color: #a9d3b8; }
.eudora-composebtn:hover { background: #e3f2e8; border-color: var(--e-green-2); color: var(--e-green); }
.eudora-compose { max-width: 820px; }
.eudora-msgpane .eudora-compose { margin-top: 4px; }
.eudora-compose .eudora-replytable th { text-align: left; padding: 4px 10px 4px 0; color: var(--e-ink-3); font-weight: 600; font-size: 11.5px; width: 60px; }
.eudora-compose input[type=text], .eudora-compose select { border: 1px solid var(--e-line-2); border-radius: 5px; padding: 4px 7px; font-family: inherit; font-size: 13px; width: 100%; box-sizing: border-box; }
.eudora-compose select#compose_from { width: auto; min-width: 260px; }
.eudora-fromshortcuts { display: inline-flex; gap: 6px; vertical-align: middle; flex-wrap: wrap; }
.eudora-fromshortcuts[hidden] { display: none; }
.eudora-fromshortcut, .eudora-fromother { padding: 3px 9px; font-size: 12px; }
.eudora-fromother { color: var(--e-ink-3); }
/* a gap between the header fields and the draft box */
.eudora-compose .eudora-draftbox { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--e-line); }
.eudora-fromshortcut.eudora-fromshortcut-on { background: var(--e-fill); color: var(--e-fill-ink); border-color: var(--e-fill-line); }
.eudora-compose textarea { width: 100%; box-sizing: border-box; margin-top: 8px; }
.eudora-compose .eudora-draftrow { display: flex; gap: 8px; align-items: center; }
.eudora-compose .eudora-draftrow input[type=text] { flex: 1 1 auto; }
.eudora-compose .eudora-replyfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.eudora-compose-back { margin-left: auto; font-size: 11.5px; }
.eudora-addresspick { position: relative; display: block; }
.eudora-whois { position: absolute; right: 8px; top: 5px; font-size: 11px; pointer-events: none; }
.eudora-addresspick-list { min-width: 360px; }
.eudora-addresspick-name { font-weight: 600; }
.eudora-attachment-remote::after { content: " \2193"; color: var(--e-ink-4); font-size: 10px; }
.eudora-labelpick { position: relative; display: inline-block; vertical-align: middle; }
.eudora-filter-labelfind { border: 1px solid var(--e-line-2); border-radius: 5px; padding: 3px 7px; font-family: inherit; font-size: 12px; }
.eudora-labelpick-list { position: absolute; left: 0; top: 100%; z-index: 40; margin: 2px 0 0; padding: 4px 0; list-style: none; min-width: 260px; max-height: 300px; overflow-y: auto;
  background: var(--e-card); border: 1px solid var(--e-line-2); border-radius: var(--e-radius); box-shadow: var(--e-shadow); font-size: 12px; }
.eudora-labelpick-item { padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.eudora-labelpick-item:hover, .eudora-labelpick-cur { background: var(--e-fill); color: var(--e-fill-ink); }
.eudora-labelpick-none { padding: 4px 10px; color: var(--e-ink-4); }
.eudora-filter-apply { font-size: 11.5px; margin-left: 10px; white-space: nowrap; }
.eudora-filter-apply input { vertical-align: -2px; margin-right: 3px; }
.eudora-fastsearch { background: var(--e-green-bg); color: var(--e-green); border: 1px solid #cfe5d6; margin-left: 8px; }
.eudora-fastsearch-off { background: var(--e-bg-2); color: var(--e-ink-4); border-color: var(--e-line); }
.eudora-navcheck form { display: inline-flex; align-items: stretch; margin: 0; }
.eudora-checkbtn { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 4px 14px 5px; white-space: nowrap; width: max-content; }
.eudora-checkbtn-label { white-space: nowrap; }
.eudora-checkbtn-label { font-size: 13px; font-weight: 600; }