:root {
  --brand: #1d4ed8;
  --brand-dark: #1e3a8a;
  --brand-tint: #eef2ff;
  --accent: #ea580c;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --row-hover: rgba(0, 0, 0, .075);   /* THE row hover grey - Bootstrap table-hover's own value, on every row list too (Dave 2026-09-06) */
  --card: #ffffff;
  --select-flash: #fde68a;
  --tl-file-bg: #ffffff;      /* timeline file-box - plain white (Dave 2026-09-03: the violet wash read badly) */
  --tl-file-border: #e2e8f0;
  --tl-summary-bg: #eff6ff;   /* timeline summary box - a very light blue, set apart from the white file box (Dave 2026-09-28) */
  --tl-summary-border: #bfdbfe;
  /* The density dials below are the floor: the page head sets them again from this browser's display profile (Settings >
     Display Profiles - DisplayProfiles.cs), and sfUI(fontPx, lineHeight, padY, padX) tries values out live (Dave 2026-10-09). */
  --app-fs: 14px;    /* base font size */
  --app-lh: 1.5;     /* base line-height for reading text (body, email, prose) - Dave's settled default (2026-09-25) */
  --row-lh: 1.25;    /* line-height for DENSE rows (list + table lines) - tighter than prose so every row matches (Dave 2026-09-25) */
  --cell-pad-y: 0.05rem;  /* THE vertical padding for every table cell / list line - the one density dial (Dave 2026-09-25) */
  --cell-pad-x: 0.5rem;   /* THE horizontal padding for every table cell / list line - live-tunable via sfUI(...,padY,padX) */
  /* Icon sizing in rem so every icon glyph + its button box tracks --app-fs like the text (Dave 2026-09-25).
     Buckets, not per-element px. The base SVG .icon already uses 1.05em; these cover the tabler <i> glyphs + boxes. */
  --icon: 1rem;        /* default icon glyph (~14px) */
  --icon-lg: 1.15rem;  /* larger glyph (~16px) - file-type, chevron, alerts */
  --icon-sm: 0.9rem;   /* small glyph (~13px) */
  --icon-btn: 1.7rem;  /* square icon-button box (~24px) */
  --row-tool: 24px;    /* THE list row's tool square - the note, star and PDF buttons and the compact mail actions; every list row stands this tall (.vlist) */
}
/* The density system's second setting (Dave 2026-10-05: the sharing tables "a little bit dense"): pages with a few rows
   to READ rather than a long list to SCAN put .roomy on their wrapper, and every table inside picks up the same tokens -
   no table rule of its own. The sharing pages use it. */
.roomy {
  --cell-pad-y: .55rem;
  --cell-pad-x: .75rem;
  --row-lh: 1.45;
}

* { box-sizing: border-box; }
html { font-size: var(--app-fs); }

body { margin: 0; line-height: var(--app-lh); background: var(--bg); color: var(--ink); font-family: var(--app-font, "Roboto Condensed"), "Arial Narrow", "Segoe UI", system-ui, sans-serif; }
a { color: var(--brand); }

.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(29, 78, 216, .25); }

/* ===== admin shell ===== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 206px; flex: 0 0 206px; background: var(--sidebar-bg, #0f172a); color: var(--sidebar-text, #cbd5e1); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sb-brand { display: block; padding: .6rem .8rem; border-bottom: 1px solid #1e293b; }
.sb-brand-logo { display: block; width: 100%; max-width: 160px; margin: 0 auto; border-radius: 10px; background: #fff; padding: .5rem; }
.sb-nav { padding: .35rem .4rem 1rem; }
.sb-cap { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #64748b; padding: .95rem .6rem .3rem; }
.sb-link { display: block; padding: .38rem .5rem; margin: .05rem 0; line-height: 1.2; border-radius: 8px; color: var(--sidebar-text, #cbd5e1); text-decoration: none; font-weight: 500; }
.sb-link:hover { background: var(--sidebar-hover, #1e293b); color: #fff; }
.sb-link.active { background: var(--sidebar-active, var(--brand)); color: #fff; }
/* per-link "open in a new tab" icon - right-aligned, revealed on hover; its own <a target=_blank> so it opens a new tab without navigating the row */
.sb-row { position: relative; display: block; }
.sb-newtab { position: absolute; right: .3rem; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 .4rem; color: var(--sidebar-text, #cbd5e1); text-decoration: none; opacity: 0; transition: opacity .15s; }
.sb-row:hover .sb-newtab { opacity: .55; }
.sb-newtab:hover { opacity: 1; color: #fff; }
.sb-link-foot { margin-top: .6rem; border-top: 1px solid rgba(148, 163, 184, .18); padding-top: .8rem; }
.sb-sep { flex-basis: 100%; height: 1px; background: rgba(148, 163, 184, .18); margin: .5rem .3rem; }

.main-area { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.6rem; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topbar-title { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.topbar-heading { font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; }
.topbar-info { display: flex; align-items: center; }
.topbar-actions { display: flex; align-items: center; }
.topbar-sep { width: 1px; height: 22px; background: var(--line); margin: 0 .15rem 0 .5rem; }
.content { padding: .9rem 1.1rem; }
/* A tabbed page's bar - its one filter box, the tabs and their counts - pinned just under the topbar (54px) while the tab
   content scrolls. The guest folder screen uses it; the folder page and Contact Details still carry the same as inline styles. */
.tab-bar { position: sticky; top: 54px; z-index: 4; background: var(--bg); padding-top: .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }

/* the menu toggle, at the top of the menu itself; remembered per browser (localStorage) */
/* the toggle sits 11px in from the left in BOTH states (= centred in the 56px rail), so it never moves under the mouse */
.sb-top { display: flex; align-items: center; justify-content: flex-start; padding: .45rem 12px 0 11px; }
.sb-ver { margin-left: auto; font-size: .72rem; color: var(--sidebar-text, #cbd5e1); opacity: .72; white-space: nowrap; }   /* app version, right of the hamburger; hidden on the collapsed rail (see .sb-collapsed rule) */
.sb-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; font-size: 1.15rem; color: var(--sidebar-text, #cbd5e1); background: transparent; border: 1px solid rgba(148, 163, 184, .25); border-radius: 8px; cursor: pointer; }
.sb-toggle:hover { background: var(--sidebar-hover, #1e293b); color: #fff; }
/* collapsed = a 56px icon rail: the logo, the names and the new-tab arrows go; each link's name is its tooltip */
body.sb-collapsed .sidebar { width: 56px; flex: 0 0 56px; }
body.sb-collapsed .sb-brand { display: none; }
body.sb-collapsed .sb-nav { padding-left: .35rem; padding-right: .35rem; }
body.sb-collapsed .sb-link { padding: .55rem 0; text-align: center; }
body.sb-collapsed .sb-link .icon { margin: 0 !important; }
body.sb-collapsed .sb-label, body.sb-collapsed .sb-newtab, body.sb-collapsed .sb-ver { display: none; }

@media (max-width: 820px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-basis: auto; height: auto; position: static; }
  .sb-nav { display: flex; flex-wrap: wrap; }
  .sb-cap { width: 100%; }
}

/* ===== components ===== */
.content h2 { font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .4rem; }   /* = the page title: one size for every heading */
.card { border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); background: var(--card); color: var(--ink); }
.card-header { background: var(--card); border-bottom: 1px solid var(--line); font-weight: 600; }
.table { --bs-table-hover-bg: var(--row-hover); }   /* table-hover uses THE row hover grey */
/* ONE density dial for EVERY table (sm or not) - overrides Bootstrap's per-cell padding via the shared tokens, so
   the whole system tightens together and tweaks live through sfUI(...,padY,padX). No per-page table CSS. Dave 2026-09-25. */
.table > :not(caption) > * > * { padding: var(--cell-pad-y) var(--cell-pad-x); line-height: var(--row-lh); }
.table > thead th { color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--line); }
/* A grouped table's heading row - ONE table with a heading row per group (the Sharing page: one per project), so every
   group's columns line up; a table per group sized its own. A band, not bold - and no hover, it isn't a row you act on. */
.table > tbody > tr.table-group > td { background: var(--bg); color: var(--ink); }
.table-hover > tbody > tr.table-group:hover > * { --bs-table-accent-bg: transparent; }
/* The virtual list scrolls inside its own box, so its header sticks to the box - with an explicit card
   background. It used Bootstrap's .bg-body, which resolves dark under color-scheme and rendered black. */
.vlist thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); }
/* Every list row stands at least as tall as a row tool (--row-tool) with its padding and its line, whether it carries a
   tool or not: a guest's rows carry none, so theirs came out lower than the owner's (Dave 2026-10-18, 187: guest rows
   "match yours"). Now every row - owner's or guest's, with a folder pill or without - is the one height. Never the
   spacers, which hold the rows not drawn (virtual-list.js). */
.vlist tbody tr:not(.vlist-spacer) { height: calc(var(--row-tool) + 2 * var(--cell-pad-y) + 1px); }
.list-group-item a { font-weight: 600; color: var(--brand); text-decoration: none; }
.list-group-item a:hover { text-decoration: underline; }
.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background-color: var(--brand); border-color: var(--brand); }
.folder-tree, .folder-tree ul { list-style: none; padding-left: 1rem; }
/* ===== TREE-INDENT-V2 (Dave 2026-09-30): stronger per-level indent + explorer-style vertical guide lines on the
   Folders / filing trees. ROLLBACK: delete this whole block to return to the flat 1rem indent above. ===== */
.folder-tree ul { margin-left: .5rem; padding-left: .85rem; border-left: 1px solid var(--line); }
/* ===== end TREE-INDENT-V2 ===== */
.folder-tree summary, .folder-tree .tree-leaf { display: flex; align-items: center; cursor: pointer; list-style: none; }
/* focus star sits at the right (just before the open-in-new-tab arrow) so it never shifts the tree indentation */
.folder-tree .folder-star { order: 8; margin-left: auto; }
.folder-tree .folder-open { order: 9; }
/* a star + the arrow both had margin-left:auto -> free space split, star floated to the middle. When a star is
   present, zero the arrow's own auto-margin so ONLY the star pushes right and it sits slap-bang by the arrow. */
.folder-tree summary:has(.folder-star) .folder-open, .folder-tree .tree-leaf:has(.folder-star) .folder-open { margin-left: 0 !important; }
.folder-tree summary::-webkit-details-marker { display: none; }
.folder-tree a { text-decoration: none; }
.folder-tree a:hover { text-decoration: underline; }
/* The SELECTED folder gets the pale-amber highlight; a bookmarked one is shown by its gold star, not a fill. */
.folder-tree summary.tree-current, .folder-tree .tree-leaf.tree-current { background: #fffbeb; border-radius: 6px; }
.folder-tree summary.tree-current > a, .folder-tree .tree-leaf.tree-current > a { font-weight: 700; color: var(--brand-dark); }
/* +/- expander on nodes; an empty gutter the same width on leaves, so every row lines up at its level */
.folder-tree details > summary::before, .folder-tree .tree-leaf::before {
	content: "+"; flex: 0 0 auto; width: 1.2em; text-align: center; font-weight: 700; font-size: 1rem; color: var(--brand); }
.folder-tree details[open] > summary::before { content: "\2212"; }
.folder-tree .tree-leaf::before { content: ""; }
.folder-open { flex: 0 0 auto; font-size: .85rem; color: var(--muted); text-decoration: none; padding: 0 .25rem; opacity: .55; }
.folder-open:hover { color: var(--brand); opacity: 1; }
/* A guest's red X on each folder shared with them - Leave Folder (190) - at the right, where the owner's tree has its arrow. */
.folder-tree .tree-leave { order: 9; flex: 0 0 auto; margin-left: auto; padding: 0 .25rem; font-size: .85rem; color: #dc2626; opacity: .55; }
.folder-tree .tree-leave:hover { opacity: 1; text-decoration: none; }

/* The sign-in pages (Views/Shared/_LayoutAccount) - PropertyTracker's layout in Sensifile's look: logo top-left,
   sign-in top-right (forgot link stacked above the button), the story or one card below. */
.acct-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 2rem; background: var(--card); border-bottom: 1px solid var(--line); }
.acct-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.acct-brand img { height: 64px; width: auto; }   /* the wide logo (sensifile-rectangle.png = v0.7 rectangle at 600px) */
.acct-version { font-size: .75rem; color: var(--muted); }
.acct-signin-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.acct-field .form-label { font-size: .8rem; margin-bottom: .15rem; }
.acct-field .form-control { width: 200px; }
.acct-stack { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; font-size: .8rem; }
.acct-error { color: var(--bs-danger); font-size: .85rem; margin-top: .4rem; text-align: right; max-width: 560px; }
.acct-main { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.acct-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; padding: 2rem 0; }
.acct-hero-text { flex: 1 1 380px; }
.acct-hero-text h1 { font-size: 2rem; font-weight: 400; line-height: 1.3; color: var(--ink); margin: 0; }
.acct-hero-image { flex: 0 1 300px; text-align: center; }
.acct-hero-image img { max-width: 100%; height: auto; }
.acct-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; padding: 1rem 0 2rem; }
.acct-feature { display: flex; align-items: center; gap: .75rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; color: var(--ink); }
.acct-feature i { font-size: 1.6rem; color: var(--brand); }
.acct-auth { max-width: 420px; margin: 2.5rem auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.75rem; }
.acct-auth h1 { font-size: 1.25rem; font-weight: 400; margin: 0 0 1.1rem; color: var(--ink); }
.acct-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-size: .9rem; }
.acct-msg { font-size: .9rem; margin: 0 0 .9rem; }
/* The Accounts list: Disabled rows greyed out, Pending rows amber - PropertyTracker's cue, in the theme's own tones. */
.acct-row-disabled > td { opacity: .55; }
.acct-row-pending > td { background: color-mix(in srgb, var(--select-flash, #fde68a) 40%, transparent) !important; }
/* The signed-in person + Sign Out, in the account layout's header (Shared With Me). */
.acct-person { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--ink); }

/* THE error page (Views/Shared/Error, 180): one card in the middle of the page - the logo on the left, the heading beside
   it in the sign-in pages' size, the error's own description underneath, then the way on. On a phone it stacks. */
.err-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.err-card { display: flex; align-items: center; gap: 2.25rem; width: 100%; max-width: 760px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 2rem 2.25rem; }
.err-mark { flex: 0 0 auto; width: 170px; height: auto; }
.err-text { flex: 1 1 auto; min-width: 0; }
.err-text h1 { font-size: 2rem; font-weight: 400; line-height: 1.3; color: var(--ink); margin: 0 0 .5rem; }
.err-text p { font-size: 1.05rem; color: var(--muted); margin: 0 0 1.25rem; overflow-wrap: anywhere; }
.err-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.err-dev { margin-top: 1.25rem; }
.err-dev summary { cursor: pointer; color: var(--bs-danger); font-size: .85rem; }
.err-dev pre { margin: .5rem 0 0; padding: .75rem; background: var(--ink); color: var(--line); border-radius: 8px; overflow: auto; max-height: 340px; font-size: .72rem; line-height: 1.45; }
.err-ref { margin-top: 1.25rem; font-size: .72rem; color: var(--muted); }
.err-ref code { color: inherit; }
@media (max-width: 600px) {
	.err-card { flex-direction: column; text-align: center; padding: 1.5rem 1.25rem; gap: 1.25rem; }
	.err-mark { width: 130px; }
	.err-actions { justify-content: center; }
}

/* The sharing screen (Views/Share/OutgoingFolder, its Share tab): your project and folder on the left, the names your
   contact sees on the right (decision 37), then every folder beneath, which goes across by its own name (Dave 2026-10-10).
   Your names sit in grey boxes the height of the name boxes beside them (Bootstrap's full-size inputs), so each row lines up. */
.share-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem 1.25rem; align-items: center; max-width: 960px; }
.share-names-head { font-size: .85rem; color: var(--muted); }
.share-names-theirs { color: var(--brand); background: palegoldenrod; padding: .3rem .6rem; border-radius: var(--bs-border-radius, .375rem); }   /* the names that go across - "careful with names!" (Dave 2026-10-05) */
.share-names-ours { display: flex; align-items: center; gap: .55rem; min-height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem;
	border: 1px solid var(--line); border-radius: var(--bs-border-radius, .375rem); background: var(--bg); }
.share-names input[type="text"] { border-color: var(--brand); }
.share-names input[type="text"]:disabled { border-color: var(--line); }

/* Dojo panes: line up the email-list header with the topic-tree header (same height + grey rule) */
.pane-head { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 .6rem;
	border-bottom: 1px solid var(--line); font-weight: 600; font-size: .85rem; }
.dojo-pane-list thead th { height: 42px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .85rem; position: sticky; top: 0; background: var(--card); z-index: 2; }
.flash-node { background: var(--select-flash, #fde68a); box-shadow: inset 3px 0 0 var(--brand); transition: background 2s ease, box-shadow 2s ease; border-radius: 6px; }
/* the tree panel: filter + tools stay put, only the tree scrolls (the whole panel used to scroll, taking the box with it) */
.folder-panel { position: sticky; top: 58px; height: calc(100vh - 70px); display: flex; flex-direction: column; border-right: 1px solid var(--line); padding-right: .4rem; }
.folder-panel .folder-tree { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* focus (topic-level priority) — quiet amber accent */
/* THE bookmark star (_BookmarkStar + virtual-list starHtml) and THE "add a todo / note" button (_NoteButton + noteHtml)
   match their NEIGHBOURS (Dave 2026-10-06). In a list row that's the compact mail action squares beside them: the same
   square (--row-tool, 24px), 5px corners, border + wash in the button's own colour (teal note, amber star, grey when not
   bookmarked), the same icon size. 24px is the line the old bare star was pinned to, so no list row grows. */
.bk-star, .note-add, .msg-add, .pdf-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--row-tool); height: var(--row-tool); padding: 0; line-height: 1; vertical-align: middle; cursor: pointer; border-radius: 5px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); }
.bk-star:hover, .note-add:hover, .msg-add:hover, .pdf-btn:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.msg-add { font-size: var(--icon); color: var(--brand); }   /* THE message button (197) - beside the note button, in the brand blue of the messages panel */
.bk-star { font-size: 1.3rem; }   /* the star glyph sits small in its box - a size up so it reads as big as the icons beside it */
.star-on { color: #d97706; }
.star-off { color: #94a3b8; }
.star-off:hover { color: #d97706; }
.note-add { font-size: var(--icon); color: #0891b2; }
.note-add:hover { color: #0e7490; }
/* THE mail action bar (_MailActionBar - Reply, Reply All, Forward, Ignore, Spam...): the email viewer, the timeline cards
   and every email list, on the owner's screens and a guest's alike - so its look lives here, never inside one page's pop-up
   (it used to sit in _ComposeModal, which a guest's layout doesn't load - their buttons came out unstyled). */
.mail-actbar { display:flex; flex-wrap:wrap; gap:.4rem; }
.mail-act { display:inline-flex; align-items:center; gap:.35rem; border:1px solid color-mix(in srgb, var(--mac,#2563eb) 40%, transparent); background:color-mix(in srgb, var(--mac,#2563eb) 8%, transparent); color:var(--mac,#2563eb); border-radius:7px; padding:.28rem .6rem; font-size:.82rem; font-weight:600; cursor:pointer; }
.mail-act:hover { background:color-mix(in srgb, var(--mac,#2563eb) 16%, transparent); }
.mail-act i { font-size:16px; line-height:1; }
/* Compact = little icon-only squares, per email row (req: correct colour + icon, no text). */
.mail-actbar.compact { gap:.22rem; flex-wrap:nowrap; }   /* never wrap the row of squares onto a second line */
.mail-actbar.compact .mail-act { padding:0; width:var(--row-tool); height:var(--row-tool); justify-content:center; border-radius:5px; }
.mail-actbar.compact .mail-act i { font-size:var(--icon); }
.mail-actbar.compact .mail-act-t { display:none; }
/* The PDF buttons (the email viewer, Dave 2026-10-15) - PDF red, one look. "PDF + V" (.pdf-save) files it into the folder:
   busy while the server prints, the green tick once filed. Plain "PDF" (.pdf-open) opens it in a new tab. */
.pdf-btn { font-size: var(--icon); color: #dc2626; }
.pdf-btn:hover { color: #b91c1c; }
.pdf-v { font-size: .8em; margin-left: -.2em; }   /* the V: a smaller chevron tucked in against the PDF icon */
.pdf-save { width: auto; min-width: 24px; padding: 0 3px; }   /* two glyphs: a row's 24px height, a little wider */
.pdf-save.busy { opacity: .55; cursor: progress; }
.pdf-save.done { color: #16a34a; }
/* In the email viewer's header bar their neighbours are Share and Full screen (.hdr-ibtn), so they are ONE set there: the
   same 31px square, the same grey border (Bootstrap's outline-secondary), each icon in its own colour. */
.modal-header .hdr-ibtn, .modal-header .bk-star, .modal-header .note-add, .modal-header .msg-add, .modal-header .pdf-btn { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; padding: 0; line-height: 1; border: 1px solid var(--bs-secondary, #6c757d); border-radius: var(--bs-border-radius-sm, .25rem); background: transparent; }
.modal-header .hdr-ibtn:hover, .modal-header .bk-star:hover, .modal-header .note-add:hover, .modal-header .msg-add:hover, .modal-header .pdf-btn:hover { background: var(--bs-tertiary-bg, #f1f5f9); }
.modal-header .hdr-ibtn { color: var(--bs-secondary, #6c757d); }
.modal-header .hdr-ibtn i, .modal-header .note-add i, .modal-header .msg-add i, .modal-header .pdf-btn i { font-size: var(--icon-lg); }
.modal-header .pdf-save { width: auto; min-width: 31px; padding: 0 4px; }   /* two glyphs: as tall as its neighbours, a little wider */
.modal-header .pdf-btn .pdf-v { font-size: calc(var(--icon-lg) * .8); }
.modal-header .bk-star { font-size: 1.6rem; }
/* On the full-page email view (/Mail/Item - no header bar) they stay beside the LABELLED mail action buttons, so they take
   those buttons' height and corners (the 16px icon + .28rem padding is what sets that height). */
.mail-shell-main .mail-head-acts .note-add, .mail-shell-main .mail-head-acts .msg-add, .mail-shell-main .mail-head-acts .bk-star, .mail-shell-main .mail-head-acts .pdf-btn { width: auto; height: auto; padding: .28rem .45rem; border-radius: 7px; font-size: 16px; line-height: 1; }
.mail-shell-main .mail-head-acts .bk-star { font-size: 20px; line-height: 16px; }
/* ...but the folder tree and the dashboard keep the BARE star: a plain glyph pinned to the text line (1.5rem = 24px,
   top-aligned) so it can be any size without growing a row - a 31.5px row stays 31.5px up to 2rem. */
.folder-tree .bk-star, .dash-act .bk-star { width: auto; height: 1.5rem; border: 0; border-radius: 0; background: none; font-size: 1.5rem; line-height: 1.5rem; vertical-align: top; }
.folder-tree .star-off, .dash-act .star-off { color: #cbd5e1; }
.folder-tree .star-off:hover, .dash-act .star-off:hover { color: #d97706; }
/* the file-type icon in front of every file name (FileExtension GenList) */
.file-ico { font-size: 1rem; vertical-align: -2px; margin-right: .3rem; }
/* the folder page's tree column: fixed width, so the folder gets every other pixel */
.folder-col { flex: 0 0 410px; min-width: 0; }   /* wide enough for "[_BLOCK A PROGRESS IMAGES PICS]" on one line (was 340; 2026-09-06) */

/* timeline (per-topic) */
.tl { position: relative; padding: .5rem 0; }
.tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #cbd5e1; transform: translateX(-1px); }
.tl-row { position: relative; display: flex; flex-direction: column; margin: 0 0 .5rem; }   /* tight-but-clear gap - each email fully below the last, no overlap */
.tl-row.left { align-items: flex-start; }
.tl-row.right { align-items: flex-end; }
/* .tl-main holds the card + its date pill / dot, so they centre on the CARD - the row may also carry the email's notes
   above it (.tl-notes-side, Dave 2026-10-12). */
.tl-main { position: relative; display: flex; width: 100%; }
.tl-row.left .tl-main { justify-content: flex-start; }
.tl-row.right .tl-main { justify-content: flex-end; }
.tl-card { width: 47%; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; box-shadow: 0 1px 2px rgba(15,23,42,.05); position: relative; }
.tl-card::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 7.5%; height: 2px; background: #cbd5e1; }   /* centred on the card; 7.5% reaches the midline dot (card is 47%, channel ~3%) */
.tl-row.left .tl-card::after { right: -7.5%; }
.tl-row.right .tl-card::after { left: -7.5%; }
.tl-dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #1d4ed8; border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px #cbd5e1; z-index: 1; }   /* centred vertically on the card, level with the connector */
.tl-dot.sent { background: #16a34a; }
/* EXPERIMENT (Dave 2026-09-25): the email date as a PILL on the centre line, vertically mid-card, its near edge
   overlapping the card so it reads as part of the box - it replaces the dot + connector. Roll back = delete these two
   rules + the markup pill, un-hide .tl-dot/.tl-card::after, restore the in-card date span. */
.tl-dot, .tl-card::after { display: none; }
.tl-email-pill { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; background: #fff; color: var(--ink, #1f2937); font-size: .95em; padding: .12rem .85rem; border-radius: 8px; white-space: nowrap; }   /* matches the files tab's font/size/shape; NO border/shadow so it reads as extending out of the (white) card, not a floating chip */
.tl-ms-row { display: flex; justify-content: center; margin: 1.1rem 0; }
.tl-ms { background: #fffbeb; border: 1.5px solid #d97706; color: #92400e; border-radius: 999px; padding: .35rem 1rem; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .5rem; z-index: 1; }
.tl-atts { border-top: 1px dashed var(--line); padding-top: .4rem; margin-top: .35rem; }
.tl-att { display: flex; align-items: center; gap: .5rem; font-size: .8rem; line-height: 1.5; padding: .12rem 0; }
.tl-att a { text-decoration: none; }
.tl-att-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-att-acts { flex: 0 0 auto; display: inline-flex; gap: .3rem; }
/* 24px squares, matched to the compact mail action buttons; colour comes from --mac (green Save Here / orange Save As) */
.tl-att-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn); height: var(--icon-btn); padding: 0; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--mac, #2563eb) 40%, transparent); background: color-mix(in srgb, var(--mac, #2563eb) 8%, transparent); color: var(--mac, #2563eb); cursor: pointer; }
.tl-att-btn:hover { background: color-mix(in srgb, var(--mac, #2563eb) 16%, transparent); }
.tl-att-btn i { font-size: var(--icon); line-height: 1; }
.tl-att-btn.busy { opacity: .55; pointer-events: none; }
.tl-att-btn.done { --mac: #16a34a; cursor: default; }
.tl-att-ph { font-size: .7rem; font-style: italic; color: #94a3b8; margin-left: .4rem; }
.tl-file-row { display: flex; justify-content: center; margin: .5rem 0; }
.tl-file { display: inline-flex; align-items: center; gap: .5rem; max-width: 72%; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .8rem; font-size: .82rem; color: var(--ink); text-decoration: none; z-index: 1; }
.tl-file:hover { border-color: var(--brand); }
.tl-file-ic { color: #475569; }
.tl-file-nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-file-dt { color: var(--muted); font-size: .72rem; white-space: nowrap; }
/* Timeline notes, files box and summary box - moved verbatim from _Timeline.cshtml's inline <style> (2026-10-05) so
   every timeline shares them (the owner's folder timeline and the guest's). */
/* Notes / Todos - a compact tile (like a file box), tinted a very pale wash of its status colour.
   Title only; the whole tile opens the read-only viewer (which carries Edit). */
/* Notes and todos - full width across the timeline, like the files and summary boxes (Dave 2026-10-12; was a small
   centred tile). Washed in their status colour - a completed one green, never struck through or faded. */
.tl-note-row{margin:.6rem 0;display:flex;justify-content:center}
.tl-note-box{position:relative;z-index:1;display:flex;flex-direction:column;gap:.3rem;width:100%;border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:.5rem .7rem;box-shadow:0 1px 3px rgba(15,23,42,.06);cursor:pointer}
.tl-note-box:hover{box-shadow:0 3px 12px rgba(15,23,42,.13)}
.tl-note-head{display:flex;align-items:center;gap:.45rem}
.tl-note-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tl-note-status{font-size:.68rem;font-weight:600;color:#475569}
.tl-note-date{font-size:.72rem;color:var(--muted,#64748b);font-weight:600;margin-left:auto}
.tl-note-x{color:#c0c7d1;text-decoration:none;font-size:1.05rem;line-height:1;opacity:0;transition:opacity .12s}
.tl-note-box:hover .tl-note-x{opacity:1}
.tl-note-x:hover{color:#dc2626}
.tl-note-title{font-weight:400;color:#1f2937;overflow-wrap:anywhere;font-family:var(--app-font,"Roboto Condensed"),"Arial Narrow","Segoe UI",system-ui,sans-serif}
/* The down arrow opens the note's own text inside the tile (site.js .tl-note-more) - the rest of the tile opens the note. */
.tl-note-titlerow{display:flex;align-items:flex-start;gap:.5rem}
.tl-note-titlerow .tl-note-title{flex:1 1 auto;min-width:0}
.tl-note-more{flex:0 0 auto;border:0;background:transparent;color:var(--muted,#64748b);padding:0 .15rem;line-height:1;font-size:1.1rem;cursor:pointer}
.tl-note-more:hover{color:var(--ink,#0f172a)}
.tl-note-more .ti{display:inline-block;transition:transform .15s}
.tl-note-box.open .tl-note-more .ti{transform:rotate(180deg)}
.tl-note-body{display:none;border-top:1px solid color-mix(in srgb, currentColor 12%, transparent);padding-top:.4rem;color:#334155;font-size:.92em;overflow-wrap:anywhere;cursor:auto}
.tl-note-body p{margin:0 0 .4rem}
.tl-note-body p:last-child{margin-bottom:0}
.tl-note-box.open .tl-note-body{display:block}
/* An email's notes: THE note tile, stacked ABOVE the email's card on the same side and at the card's width - half the
   timeline (Dave 2026-10-12; they were small tags inside the card). In the email's own row, so they go where it goes. */
.tl-notes-side{width:47%;display:flex;flex-direction:column;gap:.35rem;margin-bottom:.35rem;position:relative;z-index:1}
/* Files - one dated box per folder per day, its files as a details table (_TimelineFiles, below).
   Plain white (Dave 2026-09-03): the violet wash read badly - the box is defined by its border, not a fill. */
.tl-files-box{position:relative;z-index:1;background:var(--tl-file-bg,#e9f1fd);border:1px solid var(--tl-file-border,#c8dcf7);border-radius:10px;padding:.45rem .65rem;margin:2.8rem 0 .9rem;box-shadow:0 1px 3px rgba(15,23,42,.06)}   /* extra top margin: the tab sticks up into it, so this gap sits ABOVE the tab (Dave 2026-09-25) */
/* The date is a TAB that straddles the top edge, centred + dominant - so a long folder path can run full-width underneath it without ever colliding (Dave 2026-09-25). */
/* The date is a real TAB of the same paper: white, sitting just ABOVE the box, border on top+sides only, and its
   bottom overlaps the box's top border by 1px so it merges seamlessly - like a folder tab sticking up (Dave 2026-09-25). */
.tl-files-date{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:-1px;background:#fff;color:var(--ink,#1f2937);font-size:.95em;padding:.12rem .85rem;border:1px solid var(--tl-file-border,#c8dcf7);border-bottom:none;border-radius:8px 8px 0 0;white-space:nowrap;z-index:2}
.tl-files-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.3rem}
.tl-files-folder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875em;color:var(--muted,#64748b);font-weight:400;text-decoration:none}
.tl-files-folder:hover{text-decoration:underline;color:var(--brand,#2563eb)}
.tl-files-count{flex:0 0 auto;font-size:.875em;color:var(--muted,#64748b);font-weight:400}
/* The day box's files - a details table a bit like Windows Explorer's (Dave 2026-10-08), in white: quiet headings split
   by thin lines, a click on one sorts (the active one carries Explorer's small chevron at its top edge), no lines between
   rows, a soft hover. The name takes the room and cuts off with "..." (the full path is its hover); dates and size stay
   on one line. Rows ride THE density dials (.table). Too narrow for its columns, the table scrolls sideways in the box. */
.tl-files-view{overflow-x:auto}
.tl-files-table{min-width:520px;--bs-table-bg:transparent;--bs-table-hover-bg:#f1f5fd}
.tl-files-table > thead > tr > th{position:relative;font-weight:400;font-size:.9rem;text-transform:none;letter-spacing:normal;color:var(--muted,#64748b);padding-top:.55rem;border-bottom:1px solid var(--line,#e2e8f0);border-right:1px solid #eef2f6}
.tl-files-table > :not(:last-child) > :last-child > *{border-bottom-color:var(--line,#e2e8f0)}   /* Bootstrap 5.1 paints the heading line in the text colour - the same selector, later, keeps it light */
.tl-files-table > thead > tr > th:last-child{border-right:0}
.tl-files-table > thead > tr > th:hover{background:#f8fafc;color:var(--ink,#0f172a)}
.tl-files-table .th-sort::after{content:none}
.tl-files-table .th-sort.sort-asc::after,.tl-files-table .th-sort.sort-desc::after{content:"";position:absolute;left:50%;top:3px;width:6px;height:6px;margin-left:-3px;border:solid var(--muted,#64748b);border-width:1.5px 0 0 1.5px;transform:rotate(45deg)}
.tl-files-table .th-sort.sort-desc::after{top:0;transform:rotate(225deg)}
/* Synchronised with the email cards (Dave 2026-10-15): the text black; a file's name full size like an email's subject,
   its dates and size small like an email's time and snippet. Only the headings stay grey. */
.tl-files-table > tbody > tr > td{border-bottom:0;white-space:nowrap;color:var(--ink,#0f172a);font-size:.875em}
.tl-files-table > tbody > tr > td.tl-files-name{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis;font-size:1em}
.tl-files-name a{color:inherit;text-decoration:none}
.tl-files-name a:hover{color:var(--brand,#1d4ed8);text-decoration:underline}
/* The upgrade pop-up (_UpgradeModal): one box per tier, the next step tinted - set apart by colour and size, never weight. */
.upgrade-tier{border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:.75rem 1rem}
.upgrade-tier.next{background:var(--brand-tint,#eef2ff);border-color:#c7d2fe}
.upgrade-tier-name{font-size:1.15rem;color:var(--brand,#1d4ed8)}
.upgrade-tier ul{margin:.4rem 0 0;padding-left:1.1rem}
.upgrade-tier li{margin:.15rem 0}
/* Folder summary (Claude) - the files box's shape in a very light blue, full width, with the same tab on top. Closed, it
   shows its headline; click to drop it down and read it (Dave 2026-09-28). A native <details>, so no script. */
.tl-summary-box{position:relative;z-index:1;background:var(--tl-summary-bg,#eff6ff);border:1px solid var(--tl-summary-border,#bfdbfe);border-radius:10px;padding:.45rem .65rem;margin:2.8rem 0 .9rem;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.tl-summary-date{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:-1px;background:var(--tl-summary-bg,#eff6ff);color:var(--ink,#1f2937);font-size:.95em;padding:.12rem .85rem;border:1px solid var(--tl-summary-border,#bfdbfe);border-bottom:none;border-radius:8px 8px 0 0;white-space:nowrap;z-index:2}
.tl-summary-head{display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none}
.tl-summary-head::-webkit-details-marker{display:none}
.tl-summary-title{flex:1 1 auto;min-width:0;color:var(--ink,#1f2937)}
.tl-summary-x{color:#c0c7d1;text-decoration:none;font-size:1.05rem;line-height:1;opacity:0;transition:opacity .12s}
.tl-summary-box:hover .tl-summary-x{opacity:1}
.tl-summary-x:hover{color:#dc2626}
.tl-summary-chev{color:var(--muted,#64748b);transition:transform .15s}
.tl-summary-box[open] .tl-summary-chev{transform:rotate(180deg)}
.tl-summary-body{margin-top:.45rem;padding-top:.4rem;border-top:1px solid var(--tl-summary-border,#bfdbfe)}
.tl-summary-line{position:relative;padding:.1rem 0 .1rem .95rem;color:var(--ink,#1f2937)}
.tl-summary-line.pt::before{content:"";position:absolute;left:.2rem;top:.72em;width:5px;height:5px;border-radius:50%;background:#60a5fa}
.tl-card-acts{display:flex;justify-content:flex-end;margin-top:.4rem}

/* ===== dashboard ===== */
.stat-card { text-decoration: none; color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.stat-card:hover { border-color: var(--brand); box-shadow: 0 4px 12px rgba(29, 78, 216, .12); transform: translateY(-1px); }
.stat-card .text-muted { transition: color .12s ease; }
.stat-card:hover .text-muted { color: var(--brand) !important; }

/* ===== centred fade toast (replaces the top alert banners) ===== */
.app-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96);
	background: rgba(15, 23, 42, .93); color: #fff; padding: .55rem .7rem .55rem 1.15rem; border-radius: 10px;
	font-size: .92rem; font-weight: 500; box-shadow: 0 10px 34px rgba(0, 0, 0, .28); z-index: 1090;
	opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; max-width: 80vw;
	display: inline-flex; align-items: flex-start; gap: .55rem; }
.app-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }   /* interactive when shown -> selectable + closable */
.app-toast .toast-msg { user-select: text; -webkit-user-select: text; white-space: pre-wrap; word-break: break-word; text-align: left; max-height: 60vh; overflow: auto; }
.app-toast .toast-x { flex: 0 0 auto; background: none; border: 0; color: #fff; opacity: .7; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .15rem; }
.app-toast .toast-x:hover { opacity: 1; }

/* Notes / Todos grid (shared by the Updates page + the folder Updates tab).
   One plain font across every column - same weight, size and colour as the other folder tabs. */
.note-table td { vertical-align: middle; }
.note-table tbody tr { cursor: pointer; }               /* click a row to open the note viewer */
.note-table .note-detail { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-table .note-title { max-width: 620px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-table tbody tr:hover .note-title { color: var(--brand, #2563eb); }
.note-type { color: inherit; }
/* Notes: the status is a small dropdown in the list itself (Dave 2026-09-06) - pick to change; the text takes the status colour */
.note-stat { width: auto; display: inline-block; font-size: .85rem; padding-top: .1rem; padding-bottom: .1rem; }
.note-link { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; max-width: 320px; }
.note-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-link i { font-size: var(--icon); color: #94a3b8; flex: 0 0 auto; }
/* The row's TYPE ICON is a blue link to the containing folder (Windows folder for a folder/file, the Sensifile folder
   for an email). row-ficon-plain = nothing to jump to (e.g. a contact) - still blue, dimmed, not clickable. Blue
   everywhere (Dave 2026-09-17). Fixed width so the label lines up. */
.linkcell { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; gap: .35rem; }
.row-ficon { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-lg); flex: 0 0 var(--icon-lg); color: var(--brand, #2563eb); text-decoration: none; }
.row-ficon i { font-size: var(--icon); line-height: 1; }
.row-ficon:hover { color: var(--brand, #2563eb); filter: brightness(.85); }
.row-ficon-plain { color: var(--brand, #2563eb); opacity: .45; cursor: default; }
/* Drag grip to reorder a list: Hard Rules (engine run order) + Projects (which one loads first). */
.rule-drag, .proj-drag { cursor: grab; color: #cbd5e1; user-select: none; margin-right: .2rem; }
.rule-drag:active, .proj-drag:active { cursor: grabbing; }
.rule-dragging, .proj-dragging { opacity: .5; }
.note-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn); height: var(--icon-btn); padding: 0; border-radius: 5px; border: 1px solid var(--line, #e2e8f0); background: #f8fafc; color: #64748b; cursor: pointer; }
.note-btn:hover { background: #fff; border-color: #94a3b8; color: #334155; }
.note-btn.del:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.note-btn i { font-size: var(--icon); line-height: 1; }
/* Pin to top (195): a pinned todo or note sits first in every list it is in - the pin lit in amber, like a bookmark's star. */
.note-pin.on { color: #d97706; border-color: color-mix(in srgb, #d97706 45%, transparent); background: color-mix(in srgb, #d97706 8%, transparent); }
.tl-note-pin { border: 0; background: none; padding: 0; color: #c0c7d1; font-size: .95rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tl-note-box:hover .tl-note-pin, .tl-note-pin.on { opacity: 1; }
.tl-note-pin.on { color: #d97706; }
.tl-note-pin:hover { color: #d97706; }

/* ===== THE messages panel (198 - 201, _MessagesPanel): docked on the right of every page - the page narrows to make room,
   like the left menu - and shut, a 56px rail of projects carrying their unread (199). Open or shut = the sfMsgs cookie,
   so the first paint is already the right width. Its parts: the list (_MessagesList), one thread (_MessagesThread),
   the rail (_MessagesRail); the pop-up cards (#sfMsgsPop). Every person's face is THE face (Faces - .face). ===== */
.msgs { flex: 0 0 360px; width: 360px; position: sticky; top: 0; height: 100vh; align-self: flex-start; z-index: 6; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--line); overflow: hidden; transition: flex-basis .22s ease, width .22s ease; }
.msgs.shut { flex-basis: 56px; width: 56px; }
.msgs-pane { width: 359px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.msgs-grow { flex: 1; }
.msgs-ib { width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.msgs-ib:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.msgs-ib:disabled { opacity: .4; cursor: default; }
/* a thread's thing - a folder, an email or a file - in its project's colours */
.msgs-thing { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 1.1rem; background: var(--tile-back, var(--bg)); color: var(--tile-fore, var(--muted)); border: 1px solid color-mix(in srgb, var(--tile-fore, var(--muted)) 25%, transparent); }

/* THE face (Faces) - a person's shapes; their full name is its hover */
.face { width: var(--face); height: var(--face); flex: none; display: inline-block; vertical-align: middle; border-radius: 50%; overflow: hidden; outline: 1px solid rgba(15, 23, 42, .08); outline-offset: -1px; }
.face svg { display: block; width: 100%; height: 100%; }

/* the rail (199) */
.msgs-rail { display: flex; flex-direction: column; align-items: center; gap: .6rem; height: 100%; padding: 8px 0 12px; overflow-y: auto; scrollbar-width: none; }
.msgs-rail-sep { width: 32px; height: 1px; flex: none; background: var(--line); }
.msgs-tile { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 10px; font-size: .8rem; letter-spacing: .03em; cursor: pointer; background: var(--tile-back, var(--bg)); color: var(--tile-fore, var(--muted)); border: 1px solid color-mix(in srgb, var(--tile-fore, var(--muted)) 30%, transparent); transition: transform .12s; }
.msgs-tile:hover { transform: translateY(-1px); }
.msgs-tile.here { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--tile-fore, var(--brand)); }
.msgs-home { --tile-back: var(--brand-tint); --tile-fore: var(--brand); font-size: 1.15rem; }
.msgs-count { position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; font-size: .66rem; line-height: 17px; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--card); }

/* the list (200) */
.msgs-head { flex: none; border-bottom: 1px solid var(--line); }
.msgs-head-row { height: 54px; display: flex; align-items: center; gap: .35rem; padding: 0 .55rem 0 .95rem; border-bottom: 1px solid var(--line); }
.msgs-title { font-size: 1.15rem; color: var(--ink); }
.msgs-proj { margin-left: .3rem; padding: 1px 8px; border-radius: 999px; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; background: var(--tile-back); color: var(--tile-fore); border: 1px solid color-mix(in srgb, var(--tile-fore) 30%, transparent); }
.msgs-scopes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: .6rem .7rem .5rem; padding: 3px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.msgs-scopes button { height: 27px; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: 0 .3rem; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: .82rem; white-space: nowrap; cursor: pointer; }
.msgs-scopes button:hover:not(:disabled) { color: var(--ink); }
.msgs-scopes button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
.msgs-scopes button:disabled { opacity: .45; cursor: default; }
.msgs-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dc2626; color: #fff; font-size: .66rem; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.msgs-search { display: flex; align-items: center; gap: .4rem; margin: 0 .7rem .65rem; padding: 0 .6rem; height: 32px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.msgs-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.msgs-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .88rem; }
.msgs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .2rem 0 .8rem; }
.msgs-sec { padding: .7rem 1.05rem .3rem; color: var(--muted); font-size: .75rem; }
.msgs-row { display: flex; align-items: center; gap: .6rem; margin: 0 .4rem; padding: .5rem .6rem; border-radius: 10px; cursor: pointer; }
.msgs-row:hover { background: var(--bg); }
.msgs-row.unread { background: var(--brand-tint); }
.msgs-row-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.msgs-row-line { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.msgs-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: .98rem; }
.msgs-row-time { color: var(--muted); font-size: .74rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.msgs-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .84rem; }
.msgs-row-who { color: var(--ink); }
.msgs-pill { min-width: 18px; height: 18px; padding: 0 5px; flex: none; border-radius: 9px; background: #dc2626; color: #fff; font-size: .7rem; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.msgs-empty { display: grid; justify-items: center; gap: .4rem; padding: 2.5rem 1rem; color: var(--muted); }
.msgs-empty .ti { font-size: 1.8rem; }
.msgs-empty[hidden] { display: none; }

/* one thread (194) */
.msgs-th { flex: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: .45rem; row-gap: 1px; min-height: 54px; padding: .45rem .55rem; border-bottom: 1px solid var(--line); }
.msgs-th .msgs-thing { width: 30px; height: 30px; font-size: 1rem; }
.msgs-th-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 1.05rem; }
.msgs-th-sub { grid-column: 3 / 5; display: flex; align-items: center; gap: .5rem; min-width: 0; padding-right: .2rem; }
.msgs-th-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .75rem; }
.msgs-stack { display: flex; align-items: center; flex: none; padding: 2px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.msgs-stack:hover { background: var(--bg); }
.msgs-stack .face { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.msgs-stack .face:first-child { margin-left: 0; }
.msgs-more { margin-left: -6px; min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-size: .68rem; box-shadow: 0 0 0 2px var(--card); }
.msgs-flow { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: .5rem; }
.msgs-flow::before { content: ""; flex: none; height: 10px; }   /* the gap at the top - not padding, so a day's heading sticks right at the top */
.msgs-about { margin: auto .8rem .5rem; padding: .7rem; display: flex; gap: .7rem; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--bg), var(--card)); }
.msgs-about .msgs-thing { width: 44px; height: 44px; font-size: 1.35rem; border-radius: 12px; }
.msgs-about-body { min-width: 0; display: grid; gap: 2px; justify-items: start; }
.msgs-about-name { color: var(--ink); font-size: 1rem; overflow-wrap: anywhere; }
.msgs-about-where { color: var(--muted); font-size: .76rem; margin-bottom: .35rem; }
.msgs-day-name { position: sticky; top: 0; z-index: 1; display: flex; justify-content: center; padding: .3rem 0 .5rem; pointer-events: none; background: linear-gradient(180deg, var(--card) 70%, transparent); }
.msgs-day-name span { padding: 1px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .74rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.msgs-msg { display: flex; gap: .6rem; padding: .35rem .9rem .2rem; }
.msgs-msg:hover { background: var(--bg); }
.msgs-msg.cont { padding-top: 0; }
.msgs-gut { width: 34px; flex: none; display: flex; justify-content: center; }
.msgs-gut time { padding-top: 3px; color: var(--muted); font-size: .68rem; opacity: 0; }
.msgs-msg.cont:hover .msgs-gut time { opacity: 1; }
.msgs-face { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; line-height: 0; }
.msgs-mb { flex: 1; min-width: 0; }
.msgs-who { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.msgs-handle { padding: 0; border: 0; background: none; color: var(--ink); font-size: .96rem; cursor: pointer; }
.msgs-handle:hover { text-decoration: underline; }
.msgs-role { padding: 0 5px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); font-size: .66rem; line-height: 15px; }
.msgs-role.owner { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.msgs-who time { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.msgs-text { color: var(--ink); font-size: .93rem; line-height: 1.45; overflow-wrap: anywhere; }
.msgs-text p { margin: 0; }
.msgs-seen { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; padding: .3rem .9rem 0; color: var(--muted); font-size: .72rem; }
/* writing - Enter sends, Shift+Enter is a new line */
.msgs-comp { flex: none; padding: .5rem .7rem .7rem; border-top: 1px solid var(--line); }
.msgs-box { border: 1px solid #cbd5e1; border-radius: 12px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.msgs-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.msgs-box textarea { display: block; width: 100%; min-height: 42px; max-height: 140px; resize: none; border: 0; outline: 0; background: transparent; padding: .55rem .7rem .15rem; color: var(--ink); font-size: .93rem; line-height: 1.45; }
.msgs-bar { display: flex; justify-content: flex-end; padding: .1rem .4rem .4rem; }
.msgs-send { display: inline-flex; align-items: center; gap: .3rem; height: 28px; padding: 0 .75rem; border: 0; border-radius: 8px; background: var(--brand); color: #fff; font-size: .82rem; cursor: pointer; }
.msgs-send:disabled { background: var(--line); color: var(--muted); cursor: default; }

/* the cards a face or the header's faces open (#sfMsgsPop) */
.msgs-pop { position: fixed; z-index: 1080; width: 290px; max-width: calc(100vw - 24px); display: grid; gap: .7rem; padding: 1rem; background: var(--card); border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 24px 48px -18px rgba(15, 23, 42, .4), 0 2px 6px rgba(15, 23, 42, .08); }
.msgs-pop[hidden] { display: none; }
.msgs-pop.people { gap: 2px; padding: .6rem; }
.msgs-pop-head { display: flex; justify-content: space-between; padding: .1rem .35rem .4rem; color: var(--muted); font-size: .75rem; }
.msgs-pop-row { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .35rem; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.msgs-pop-row:hover { background: var(--bg); }
.msgs-pop-handle { color: var(--ink); }
.msgs-pop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.msgs-card-head { display: flex; align-items: center; gap: .75rem; }
.msgs-card-id { min-width: 0; }
.msgs-card-name { color: var(--ink); font-size: 1.1rem; overflow-wrap: anywhere; }
.msgs-card-handle { color: var(--muted); font-size: .85rem; }
.msgs-you { margin-left: .35rem; padding: 0 6px; border-radius: 5px; background: var(--brand-tint); color: var(--brand); font-size: .68rem; vertical-align: middle; }
.msgs-card-facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: .84rem; }
.msgs-card-facts dt { color: var(--muted); font-weight: 400; }
.msgs-card-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.msgs-sel { user-select: all; }
.msgs-card-go { justify-self: start; }

/* a narrow window: the panel opens over the page, and shut it is the top bar's button alone */
@media (max-width: 820px) {
  .msgs { position: fixed; top: 0; right: 0; bottom: 0; height: auto; align-self: stretch; width: min(100vw, 380px); z-index: 1040; box-shadow: -12px 0 32px -16px rgba(15, 23, 42, .35); }   /* stretch: a fixed box honours align-self now - flex-start would shrink it to its content */
  .msgs.shut { display: none; }
  .msgs-pane { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .msgs, .msgs-tile { transition: none; } }
.note-empty { color: var(--bs-secondary-color); padding: 2.5rem; text-align: center; }

/* ===== topic tree: scroll area + real-time name filter ===== */
.folder-scroll { max-height: 60vh; overflow: auto; }
.folder-filter { padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.folder-filter-box { width: 100%; }
.topics-scroll { overflow: auto; }

/* email modal: smaller body text (save vertical space); open-in-topics icon alignment */
.email-body { font-size: .88rem; line-height: 1.5; }
.email-body img { max-width: 100%; height: auto; }
.folder-open svg { display: inline-block; }

/* a worklist row filed/ignored from the email pop-up (visual progress until the page reloads) */
.email-filed { opacity: .45; }
.email-filed td a { text-decoration: line-through; }

/* right-click "Search" context menu (worklist + topic tree) */
.folder-colour-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 .3rem 0 .1rem; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }
/* Email-viewer keyboard-shortcuts overlay (press ?). Dave 2026-09-29. */
.sfkeys { display: none; position: fixed; inset: 0; z-index: 3500; background: rgba(15,23,42,.4); align-items: center; justify-content: center; padding: 1rem; }
.sfkeys.show { display: flex; }
.sfkeys-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(15,23,42,.3); padding: 20px 24px; min-width: 340px; max-width: 440px; }
.sfkeys-head { font-size: 1.05rem; font-weight: 600; margin-bottom: .75rem; }
.sfkeys-sub { color: var(--muted); font-weight: 400; font-size: .82rem; }
.sfkeys-tbl { width: 100%; border-collapse: collapse; }
.sfkeys-tbl td { padding: .35rem .4rem; border-top: 1px solid var(--line); }
.sfkeys-tbl tr:first-child td { border-top: 0; }
.sfkeys-tbl td:first-child { white-space: nowrap; width: 1%; }
.sfkeys kbd { display: inline-block; min-width: 1.5em; text-align: center; padding: .12rem .45rem; font-family: inherit; font-size: .82rem; color: #1f2937; background: #f1f5f9; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 5px; }
.sfkeys-x { margin-top: 1rem; }
.sfkeys-grp { padding-top: .7rem !important; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border-top: 0 !important; }
.sfkeys-tbl tr:first-child .sfkeys-grp { padding-top: .1rem !important; }
.ctx-swatches { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px 6px; max-width: 190px; }
.ctx-sw { width: 20px; height: 20px; border-radius: 5px; border: 2px solid rgba(0,0,0,.12); cursor: pointer; padding: 0; }
.ctx-sw.none { background: #fff; color: #64748b; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.ctx-sw.sel { outline: 2px solid #111827; outline-offset: 1px; border-color: #fff; }
.ctx-item.ctx-has-sub { position: relative; display: flex; align-items: center; }
.ctx-caret { margin-left: auto; padding-left: .6rem; opacity: .55; }
.ctx-submenu { position: absolute; left: 100%; top: -5px; display: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(15,23,42,.15); padding: 4px; z-index: 1101; }
.ctx-item.ctx-has-sub:hover > .ctx-submenu, .ctx-item.ctx-has-sub:focus-within > .ctx-submenu { display: block; }
.ctx-menu { position: absolute; z-index: 1100; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 23, 42, .15); padding: 4px; min-width: 130px; }
.ctx-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .35rem .6rem; border-radius: 6px; font-size: .85rem; color: var(--ink); cursor: pointer; }
.ctx-item:hover { background: var(--brand-tint); color: var(--brand-dark); }
.ctx-sep { height: 1px; background: var(--line); margin: 4px 2px; }
span.ctx-search { cursor: context-menu; }

/* self-hosted Tabler icons (SVG sprite) - size with font-size, colour via currentColor */
.icon { width: 1.05em; height: 1.05em; vertical-align: -.15em; display: inline-block; flex: 0 0 auto; }
/* topbar icon buttons (refresh, rules, lists, settings) - uniform 31px square, aligned to the search box */
.topbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; padding: 0; font-size: 1rem; margin-left: .4rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.topbar-btn:hover { color: var(--brand); border-color: var(--brand); }
/* THE messages button (188, 198): how many you haven't read, on its top right corner; it opens and closes the panel. */
.topbar-msgs { position: relative; cursor: pointer; }
.topbar-msgs.on { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.topbar-count { position: absolute; top: -7px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; font-size: .68rem; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--card); pointer-events: none; }
.topbar-count[hidden] { display: none; }
.topbar-me { border-color: transparent; background: none; border-radius: 50%; }   /* the account menu's button is your face (Faces) */
.topbar-me:hover { border-color: var(--line); }
.topbar-btn-text { width: auto; padding: 0 .6rem; gap: .35rem; font-size: .82rem; }
/* The topbar job menus match the compact button they drop from (.82rem), not Bootstrap's 1rem - so the menu doesn't
   read as oversized under a small button (Dave 2026-09-25). Scoped to the topbar; other dropdowns are unaffected.
   A real font-size on the menu (Bootstrap 5.1 has no --bs-dropdown-font-size), so its plain text lines - who you are -
   match its items; and items in standard menu text, not link blue (the template's a { #0077cc } in _Layout.cshtml.css
   reached them) - Dave 2026-10-05. */
.topbar-actions .dropdown-menu { font-size: .82rem; }
.topbar-actions .dropdown-item { font-size: .82rem; color: inherit; }
.topbar-actions .dropdown-header { font-size: .72rem; }
.sf-caret { font-size: 1rem; opacity: .6; margin-left: .1rem; }   /* the dropdown chevron on the topbar action buttons - a touch bigger than the text */
/* ===== Shared mail modals: the reading (viewer) + compose popups share ONE shell (Dave 2026-09-24) =====
   Both dialogs max out at 1040px, shrink to 92vw on smaller windows, and are a fixed near-full height so the header
   bar + footer buttons never move whatever the content length. */
#emailModal .modal-dialog, #composeModal .cmp-dialog { max-width: 1280px; width: 94vw; height: calc(100vh - 2.5rem); margin: 1.25rem auto; }
#emailModal .modal-content, #composeModal .cmp-dialog .modal-content { height: 100%; }
/* Fullscreen toggle (the header expand button) - Bootstrap's own class, applied to our custom-sized dialog. */
#emailModal .modal-dialog.modal-fullscreen, #composeModal .cmp-dialog.modal-fullscreen { max-width: none; width: 100vw; height: 100vh; margin: 0; }
/* TinyMCE must FILL the message column (it was sizing to its toolbar width, ~581px in a 705px column). */
#composeModal #cmpBodyBlock .tox-tinymce { flex: 1 1 auto; width: 100%; }

/* The body is a flex ROW: [thread rail?] [main] [right rail]. The main column scrolls; the right rail is a fixed
   width whose Attachments block grows and whose "Go to" nav pins to the bottom (always visible). Stacks when narrow. */
#emailModal .modal-body { min-height: 0; overflow: hidden; }   /* bound the body so the shell + rails scroll INSIDE it, not past the dialog */
.mail-shell { display: flex; gap: .9rem; flex: 1 1 auto; min-height: 0; }
.mail-shell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.mail-rail { flex: 0 0 258px; width: 258px; display: flex; flex-direction: column; gap: .7rem; border-left: 1px solid var(--line); padding-left: .85rem; min-height: 0; }
.mail-rail-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .3rem; }
/* Each rail section its own bordered box; in the Filing box the [v] sits top-right, on the label's line. */
.mail-rail-box { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .55rem; }
.mail-rail-filebox { position: relative; }
.mail-rail-filebox .mail-rail-head { padding-right: 34px; }
.mail-rail-filebox .dojo-more { position: absolute; top: .35rem; right: .45rem; float: none; margin: 0; }
.mail-rail-atts { flex: 1 1 auto; min-height: 40px; overflow: auto; }
.mail-rail-nav { margin-top: auto; border-top: 1px solid var(--line); padding-top: .5rem; display: flex; flex-direction: column; gap: .1rem; }
.mail-rail-nav a { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--ink); text-decoration: none; padding: .28rem .35rem; border-radius: 6px; }
.mail-rail-nav a:hover { background: var(--row-hover); color: var(--brand); }
.mail-rail-nav a .icon, .mail-rail-nav a i { width: var(--icon-lg); height: var(--icon-lg); color: var(--muted); }
@media (max-width: 820px) {
	.mail-shell { flex-direction: column; }
	.mail-rail { flex-basis: auto; width: auto; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: .6rem; }
	.mail-rail-atts { overflow: visible; }
}
/* one attachment row in the rail: type icon + name (ellipsis) + a Save Here (viewer, only when the email is filed) */
.mail-att { display: flex; align-items: center; gap: .4rem; font-size: .8rem; padding: .18rem 0; min-width: 0; }
.mail-att-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--ink); }
.mail-att-name:hover { text-decoration: underline; }
.mail-att-save { flex: 0 0 auto; font-size: .72rem; padding: .05rem .35rem; }

/* ===== button colour language (Dave 2026-09-17) =====
   Solid pastel fill = the ONE commit action per context (File / Save / Accept) - deep text keeps it legible,
   never a harsh primary block. Everything else is outline + coloured text: blue = filters, green = create,
   violet = batch jobs. */
.btn-commit { background: #93c5fd; border: 1px solid #60a5fa; color: #1e3a8a; }
.btn-commit:hover, .btn-commit:focus { background: #7fb4f7; border-color: #3b82f6; color: #1e3a8a; }
.btn-commit-go { background: #86efac; border: 1px solid #4ade80; color: #14532d; }
.btn-commit-go:hover, .btn-commit-go:focus { background: #6ee7a0; border-color: #22c55e; color: #14532d; }
/* segmented filter switches: brand-blue outline; the ACTIVE segment gets a light tint, not a solid fill */
.dojo-seg .btn { color: var(--brand); border-color: #a9c2ef; }
.dojo-seg .btn-check:checked + .btn,
.dojo-seg .btn.active { background-color: rgba(29, 78, 216, .12); border-color: var(--brand); color: var(--brand-dark); box-shadow: none; }   /* .active = a JS button-toggle (the dashboard Important box reuses this) */
/* topbar families: green = create (New Email), violet = batch jobs (Refresh / Suggest) - coloured text + faint border, deepening on hover */
.topbar-btn-text.tb-create { color: #15803d; border-color: #bbf7d0; }
.topbar-btn-text.tb-create:hover { color: #166534; border-color: #4ade80; }
.topbar-btn-text.tb-job { color: #6d28d9; border-color: #ddd6fe; }
.topbar-btn-text.tb-job:hover { color: #5b21b6; border-color: #a78bfa; }
/* topbar centre slot - a page drops live content (the Dojo progress) mid-way between title and actions */
.topbar-center { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; min-width: 0; }

/* hover greying to aid navigation (emails use Bootstrap table-hover; this covers the topic tree) */
.folder-tree summary:hover, .folder-tree .tree-leaf:hover { background: var(--row-hover); border-radius: 6px; }
/* Filter hit inside a tree node - the same grey as the row hover, so a match reads as "this is why you are
   seeing this node" without adding a colour. Stronger alpha than the hover itself, or it vanishes on a hovered row. */
mark.tree-hit { background: rgba(100, 116, 139, .28); color: inherit; padding: 0 1px; border-radius: 3px; }
/* A ROOT node is a container, not a destination: clicking one would load every email beneath it. Name only. */
.folder-tree .tree-root-name { color: var(--ink); cursor: default; }
/* An Important folder reads red by NAME in every treeview (browse link, root name, pick label) - the node carries
   data-important on .ctx-folder, so this one rule covers all trees. Colour only (no weight bump) per the UI rule. */
.ctx-folder[data-important="1"] > a:not(.folder-open),
.ctx-folder[data-important="1"] .tree-root-name,
.ctx-folder[data-important="1"] .ctx-search { color: #dc2626; }
/* Tree toolbar: expand / collapse / clear, sitting tight under the header. */
.folder-tools { display: flex; align-items: center; gap: .5rem; font-size: .72rem; margin: 0 0 .35rem .1rem; }
.folder-tools button { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; text-decoration: underline; }
.folder-tools button:hover { color: var(--brand); }
.folder-tools .ft-sep { color: var(--line-strong, #cbd5e1); }

/* selected row / ticked tree node - a GREY highlight, distinct from the blue unread tint (Dave 2026-09-20). Targets the
   cells directly + higher specificity so a selected row that is ALSO unread reads as selected, not unread. */
.table tbody tr:has(input[type="checkbox"]:checked) > td { background-color: rgba(100, 116, 139, .22); }
.folder-tree summary:has(> input[type="checkbox"]:checked), .folder-tree .tree-leaf:has(> input[type="checkbox"]:checked) { background: var(--brand-tint); border-radius: 6px; }

/* click-to-sort table headers (table.sortable) */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort::after { content: " \2195"; opacity: .35; font-size: .85em; }
.th-sort.sort-asc::after { content: " \2191"; opacity: .9; }
.th-sort.sort-desc::after { content: " \2193"; opacity: .9; }

/* rule-tier colours (junk / bulk / topic) - distinct across screens; themes may override the vars */
:root { --rule-junk: #dc2626; --rule-bulk: var(--brand); --rule-topic: #0d9488; }
.badge-junk { background: var(--rule-junk); color: #fff; }
.badge-bulk { background: var(--rule-bulk); color: #fff; }
.badge-topic { background: var(--rule-topic); color: #fff; }
.rule-card-junk { border-left: 4px solid var(--rule-junk); }
.rule-card-bulk { border-left: 4px solid var(--rule-bulk); }
.rule-card-topic { border-left: 4px solid var(--rule-topic); }
.rule-card-exclude { border-left: 4px solid #64748b; }
.badge-exclude { background: #64748b; color: #fff; }
/* Rules page: collapsible tier cards + stepped Add/Edit modal */
.rule-acc { color: inherit; }
.rule-acc:hover, .rule-acc:focus { color: inherit; box-shadow: none; }
.rule-acc .rule-caret::before { content: "\25B8"; display: inline-block; margin-right: .35rem; color: var(--muted); transition: transform .15s ease; }
.rule-acc[aria-expanded="true"] .rule-caret::before { transform: rotate(90deg); }
.rule-list-body { max-height: 60vh; overflow-y: auto; }
.step-label { font-weight: 600; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--brand-dark); color: #fff; font-size: .8rem; font-weight: 700; margin-right: .35rem; }
#bulkTreeWrap .folder-card { box-shadow: none; border: 1px solid var(--line); }
.contact-none { background: transparent; border: 1px solid var(--line); color: var(--muted); }
/* read/unread: unread = soft tint + a small dot (no bold); read = plain. */
tr.mail-unread > td { background: var(--brand-tint); }
tr.mail-unread td.mail-date::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-left: 8px; vertical-align: -1px; }
.clip { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ===== GenList admin: compact + pastel action buttons ===== */
.gl-edit { background: #e7f1ff; color: #0b5ed7; border: 1px solid #b6d4fe; }
.gl-edit:hover { background: #d3e5ff; color: #0a4bb3; border-color: #9ec5fe; }
.gl-add { background: #e4f7ec; color: #157347; border: 1px solid #bfe3cd; }
.gl-add:hover { background: #d3f0df; color: #0f5132; border-color: #a7d9ba; }
.gl-table > :not(caption) > * > * { padding-top: .35rem; padding-bottom: .4rem; }
.gl-table thead th { font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }

/* ===== Topbar email-sync chip: live status + link to the /EmailSync dashboard ===== */
/* New mail - LEFT of Compose, always shown (Dave 2026-10-10: no disappearing controls). It is the header's own button box
   (.topbar-btn .topbar-btn-text: same height, corners, font and gap as its neighbours) - only the colour speaks: a quiet
   grey "0 New", turning green (Compose's green) with a slow heartbeat dot - lit ~4s, a quick quarter-second flash, repeat -
   when mail arrives. Figures are fixed-width and the box has a floor, so 0 -> 12 never changes its size. */
.topbar-new { min-width: 4.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.topbar-new-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #cbd5e1; flex: none; }
.topbar-new.on { color: #15803d; border-color: #bbf7d0; }
.topbar-new.on:hover { color: #166534; border-color: #4ade80; }
.topbar-new.on .topbar-new-dot { background: #16a34a; animation: sfNewPulse 4.2s ease-in-out infinite; }
@keyframes sfNewPulse { 0%, 92% { opacity: 1; } 96% { opacity: .15; } 100% { opacity: 1; } }

/* ===== Hard Rules card (Global on the Engine, Project on the project page) - clean + professional ===== */
.hardrules { border: 1px solid var(--line); }
.hardrules .card-header { background: var(--card); border-bottom: 1px solid var(--line); }
.hr-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem;
	padding: 0 .4rem; margin-left: .35rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
	color: var(--muted); font-size: .72rem; font-weight: 700; }
.hr-tbl td { padding: .6rem .9rem; border-top: 1px solid var(--line); vertical-align: middle; }
.hr-tbl tr:first-child td { border-top: 0; }
.hr-cond { line-height: 1.5; }
/* the pattern value - a soft pill, NOT a monospace code chip */
.rule-val { display: inline-block; padding: .05rem .45rem; border-radius: 6px; background: var(--bg);
	border: 1px solid var(--line); color: #0f172a; font-size: .82rem; }
/* kind labels - quiet, not shouty */
.hr-kind { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: .12rem .5rem; border-radius: 6px; border: 1px solid transparent; }
.hr-kind-file   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.hr-kind-ignore { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.hr-kind-junk   { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.hr-folder { color: #0f172a; margin-left: .3rem; }
.hr-actions { width: 1%; }
/* modal step number */
.hr-steplabel { font-weight: 600; }
.hr-stepnum { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem;
	border-radius: 50%; background: var(--brand-dark); color: #fff; font-size: .74rem; font-weight: 700; margin-right: .35rem; }

/* ===== Folder browser (Browse... picker) ===== */
.fb-list { max-height: 46vh; overflow-y: auto; }
.fb-row { display: flex; align-items: center; padding: .35rem .6rem; cursor: pointer; border-bottom: 1px solid var(--line); font-size: .88rem; }
.fb-row:last-child { border-bottom: 0; }
.fb-row:hover { background: var(--row-hover); }

/* ===== Email viewer thread rail: the conversation down the LEFT of an open email (only when 2+ in the
   thread). More room horizontally than vertically, so the siblings live in a side column, current highlighted. */
.email-thread-layout { display: flex; gap: 1rem; align-items: flex-start; }
.email-thread-main { flex: 1 1 auto; min-width: 0; }   /* min-width:0 lets long subjects/bodies shrink, not overflow */
.modal-dialog.modal-thread { max-width: min(1260px, 96vw); }   /* email + 240px thread rail + the folders rail + gaps */
.modal-dialog.modal-folders { max-width: min(1020px, 96vw); }   /* email + the folders rail (no thread) */
.email-thread-rail { flex: 0 0 240px; width: 240px; position: sticky; top: 0; max-height: calc(100vh - 120px); overflow: auto;
	border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .35rem; }
.etr-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: .3rem .4rem .4rem; }
.etr-count { display: inline-block; min-width: 1.3em; text-align: center; background: var(--line); color: var(--muted); border-radius: 999px; padding: 0 .4em; font-size: .72rem; }
.etr-list { list-style: none; margin: 0; padding: 0; }
.etr-item { display: block; padding: .4rem .5rem; border-radius: 8px; border-left: 3px solid transparent; margin-bottom: 2px; transition: background .12s, box-shadow .12s; }
.etr-item[data-jump] { cursor: pointer; }
.etr-item[data-jump]:hover { background: var(--card); border-left-color: var(--line); box-shadow: 0 1px 5px rgba(15,23,42,.12); }
.etr-item[data-jump]:hover .etr-who { color: var(--brand); }   /* clear "this row is clickable" cue */
.etr-item[data-jump]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.etr-current { background: var(--card); border-left-color: var(--brand); box-shadow: 0 1px 4px rgba(15,23,42,.08); }
.etr-when { display: block; font-size: .7rem; color: var(--muted); }
.etr-who { display: block; font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etr-current .etr-who { color: var(--brand); }
.etr-unread .etr-who::before { content: "\2022"; color: var(--brand); margin-right: .3rem; font-size: 1.1em; line-height: 0; }
.etr-subj { display: block; font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Per-sibling folder: the open email's folder plain, a match a quiet tick, a STRAY its folder name in colour. */
.etr-folder { display: block; margin-top: 2px; }
.etr-pick { float: right; margin: 2px 0 0 .4rem; cursor: pointer; }   /* thread File-All selector - default all ticked */
.etr-fchip { display: inline-flex; align-items: center; gap: .1em; max-width: 100%; font-size: .76rem; line-height: 1.5; padding: 1px .35em 1px .5em; border: 1px solid #cbd5e1; border-radius: 5px; vertical-align: bottom; }
.etr-fchip-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etr-fchip .folder-chip-x { font-size: 1rem; flex: 0 0 auto; }   /* the un-file x, sized for the compact rail pill */
.etr-unfiled { font-size: .68rem; color: var(--muted); font-style: italic; }
.etr-elsewhere { font-size: .66rem; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 0 .5em; margin-left: .35rem; font-weight: 600; }
.etr-item.etr-stray { background: #fffbeb; }   /* a sibling filed in a different folder - gently flagged */
.etr-tidy { padding: .5rem .35rem .3rem; position: sticky; bottom: 0; background: var(--bg); }
.etr-tidy-hint { font-size: .66rem; color: var(--muted); text-align: center; margin-top: .25rem; }
/* Folders rail: the email's homes on the RIGHT of the viewer, stacked vertically - room to add/remove across
   projects (Dave 2026-09-14). Reuses the shared _FolderCell; only the layout (column) differs here. */
.email-folders-rail { flex: 0 0 190px; width: 190px; position: sticky; top: 0; max-height: calc(100vh - 120px); overflow: auto;
	border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .35rem; }
.efr-cell { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.efr-cell .folder-chip { max-width: 100%; }
.efr-cell .dojo-more { float: none; align-self: flex-start; margin: .2rem 0 0; }

/* Thread rail inside the shared shell: a normal flex column child that scrolls within the fixed-height dialog
   (its page-scroll sticky/max-height rules don't apply here). Compose's main must not scroll - the editor fills it. */
.mail-shell > .email-thread-rail { position: static; max-height: none; overflow: auto; align-self: stretch; }
#composeModal .mail-shell-main { overflow: visible; }

/* ===== Shared Folder cell: filed/suggested chips + the [v] pick menu. Rendered by _FolderCell in BOTH the
   Dojo worklist rows and the email viewer, so the styling lives here (global), not on either page. ===== */
.dojo-folder-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.dojo-folder-cell .dojo-more { margin-left: auto; }
/* In a TABLE the cell must stay a table-cell - a flex <td> leaves the row's grid, so its bottom border no longer
   lines up with its neighbours (seen on /Search). The chips are inline-flex and wrap on their own; the [v] floats right. */
td.dojo-folder-cell { display: table-cell; vertical-align: middle; min-width: 340px; max-width: 340px; white-space: normal; }   /* a bit more room per pill; the column is capped so a 2nd pill WRAPS to a new line instead of crashing the [v] (Dave 2026-09-15) - long names still truncate (folder-chip-name) with the hover for the full path */
td.dojo-folder-cell .dojo-more { float: right; margin-left: .3rem; }
.folder-chip-tick { font-size: .9rem; opacity: .85; }
.folder-chip { display: inline-flex; align-items: center; gap: .15rem; height: 22px; border-radius: 6px; padding: 0 .2rem 0 .45rem; font-size: .8rem; margin: 1px .3rem 1px 0; vertical-align: middle; }
.folder-chip-name { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.folder-chip-name { text-decoration: none; color: inherit; }
a.folder-chip-name:hover { text-decoration: underline; }
/* Solid = actually filed, dashed = a suggestion. Colour is the PAGE's project (--proj-back/--proj-fore, set on
   .app-shell by _Layout) unless the chip carries its own inline colour - which it does wherever one list mixes
   projects (the Dojo, Contact Details, Search). So a chip is never grey by accident. */
.folder-chip-filed { background: var(--proj-back, #f1f5f9); color: var(--proj-fore, #1f2937); border: 1px solid var(--proj-fore, #cbd5e1); }
.folder-chip-sug { border: 1px dashed var(--proj-fore, #cbd5e1); color: var(--proj-fore, inherit); background: transparent; }
.folder-chip-state { background: #eef1f4; color: #64748b; border: 1px solid #d7dee6; }   /* Spam / Ignore - a plain grey pill, no project colour, standing in for the missing folder */

/* Coloured project dropdown (sfColourSelect, site.js). Native <option> backgrounds do not render in the OPEN list
   on Chrome/Windows, so a real <select> can only ever colour its closed box. This custom control shows each
   project's colour on every row; the native <select> stays in the DOM (hidden) as the value + form control. */
.sfcs { position: relative; display: inline-block; vertical-align: middle; }
.sfcs > select.sfcs-native { display: none !important; }   /* beat Bootstrap's .d-inline-block (display:inline-block !important) on the topbar select */
.sfcs-btn { display: inline-flex; align-items: center; width: 100%; padding: .25rem 1.6rem .25rem .6rem; font-size: .875rem; line-height: 1.5; border: 1px solid var(--line, #ced4da); border-radius: .375rem; cursor: pointer; text-align: left; white-space: nowrap; position: relative; background: #fff; }
.sfcs-btn::after { content: ""; position: absolute; right: .55rem; top: 50%; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .55; }
.sfcs-list { position: fixed; z-index: 3000; min-width: 160px; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--line, #ced4da); border-radius: .5rem; padding: .25rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.sfcs-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .6rem; border-radius: .35rem; cursor: pointer; white-space: nowrap; font-size: .875rem; }
.sfcs-row + .sfcs-row { margin-top: 2px; }
.sfcs-row:hover, .sfcs-row.sfcs-active { outline: 2px solid rgba(0,0,0,.28); outline-offset: -2px; }
.sfcs-tick { opacity: .8; }
.folder-chip-go, .folder-chip-x, .folder-chip-dismiss { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 1px; line-height: 1; display: inline-flex; align-items: center; opacity: .72; }
.folder-chip-go { font-size: .95rem; }
.folder-chip-x, .folder-chip-dismiss { font-size: 1.05rem; }
.folder-chip-go:hover, .folder-chip-x:hover, .folder-chip-dismiss:hover { opacity: 1; }
.folder-chip-x:hover, .folder-chip-dismiss:hover { color: #dc2626; }   /* the destructive x warns in red on hover, as the old folder tags did */
/* The optional parts (FolderChipVM switches): project name on the left, a count, an open-in-new-tab icon. */
.folder-chip-proj { opacity: .6; font-size: .72rem; padding-right: .3rem; margin-right: .1rem; border-right: 1px solid currentColor; white-space: nowrap; }
.folder-chip-count { font-variant-numeric: tabular-nums; opacity: .7; font-size: .74rem; padding-left: .15rem; }
.folder-chip-open { color: inherit; opacity: .55; text-decoration: none; display: inline-flex; align-items: center; padding: 0 1px; font-size: .85rem; }
.folder-chip-open:hover { opacity: 1; }
/* THE [v] file-picker trigger - the single most-used action, so it reads as "fire": a warm amber flame that stands
   out on every row (Dave 2026-09-24). Same size, just unmistakable. */
.dojo-pick { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn); height: var(--icon-btn); border: 1px solid #86efac; border-radius: 6px; background: #f0fdf4; color: #16a34a; cursor: pointer; vertical-align: middle; }
.dojo-pick:hover { border-color: #16a34a; background: #dcfce7; color: #15803d; }
.dojo-pick i { font-size: var(--icon-lg); }
.folder-chip[disabled], .folder-chip-go[disabled], .folder-chip-x[disabled], .folder-chip-dismiss[disabled], .dojo-pick[disabled] { opacity: .38; cursor: not-allowed; pointer-events: none; }
.email-filed { opacity: .4; }
/* [v] top-picks menu - fixed position so a scroll box never clips it */
.dojo-pick-menu { position: fixed; z-index: 3000; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(15,23,42,.14); padding: .25rem; min-width: 250px; max-width: 360px; max-height: 320px; overflow: auto; }
.dpm-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; border-radius: 6px; cursor: pointer; font-size: .85rem; border-left: 3px solid transparent; margin-bottom: 2px; }
.dpm-item:hover { filter: brightness(0.95); }   /* darkens the project tint (same feel as the badges) */
.dpm-item.dpm-sel { box-shadow: inset 0 0 0 2px #2563eb; filter: brightness(0.97); }   /* keyboard highlight (M -> up/down) - a blue ring that reads on tinted AND plain items */
.dpm-ic { font-size: 1rem; flex: 0 0 auto; }
.dpm-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpm-proj { font-size: .74rem; opacity: .72; margin-left: .3rem; }
.dpm-conf { font-size: .74rem; opacity: .82; flex: 0 0 auto; font-weight: 600; }
.dpm-sep { height: 1px; background: var(--line); margin: .3rem .2rem; }
.dpm-plain { border-left-color: transparent; color: #334155; }
.dpm-plain:hover { filter: none; background: var(--bg); }
/* "Choose Folder" - the [v] menu's next step, in the SAME green as the [v] button (.dojo-pick) that opens it */
.dpm-choose { background: #f0fdf4; color: #16a34a; border-left-color: #16a34a; }
.dpm-choose:hover { filter: none; background: #dcfce7; color: #15803d; }

/* ===== Dashboard-style shortcut rows (_DashRow): the dashboard's three panels and the folder page's Bookmarks tab.
   [type icon] Project | Label [meta] [star] - one font, one shape, no chips. */
.dash-panel .card-header .icon { width: var(--icon-lg); height: var(--icon-lg); }
.dash-list .dash-row { padding: var(--cell-pad-y) .75rem; line-height: var(--row-lh); border-top: 1px solid var(--bs-border-color); }   /* vertical + line-height on THE density dials so list rows match table rows; .75rem edge gutter kept */
.dash-list .dash-row:first-child { border-top: 0; }
.dash-list .dash-row:hover { background: var(--row-hover); }
.dash-main { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.dash-type { width: 15px; height: 15px; flex-shrink: 0; color: var(--brand, #2563eb); opacity: .9; }   /* type icon blue everywhere (Dave 2026-09-17) */
.dash-open { display: inline-flex; align-items: center; text-decoration: none; }
.dash-open .dash-type { opacity: 1; }
.dash-open:hover .dash-type { opacity: 1; filter: brightness(.85); }
/* the project greyed right back, the bookmark itself black - never bold - the star is the bookmark (chosen from three looks, Dave 2026-09-06) */
.dash-proj { flex-shrink: 0; font-size: .95rem; color: #94a3b8; white-space: nowrap; }
.dash-sep { flex-shrink: 0; color: #cbd5e1; }
.dash-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: #0f172a; font-size: 1rem; }
.dash-label:hover { color: var(--brand, #2563eb); text-decoration: underline; }   /* black at rest, blue + underline on hover - THE dashboard row-link hover (Dave 2026-09-09) */
.dash-meta { flex-shrink: 0; font-size: .8rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.dash-act { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0 .1rem; line-height: 1; }
.dash-empty { padding: 1rem .75rem; font-size: .82rem; color: var(--bs-secondary-color); }
.dash-pager { padding: .35rem .5rem; }
.dash-pager[hidden] { display: none; }
.dash-pager .dash-page { font-variant-numeric: tabular-nums; }

/* --- Dashboard top-row boxes (Important + Notes/Todo). Moved out of Home/Index.cshtml's inline <style> so cosmetic
   tweaks are refresh-only, no rebuild (Dave 2026-09-19). All .dash-notes-scoped; the /Notes page is untouched. --- */
.dash-top .card { height: 524px; }                 /* ONE fixed height for both top boxes - tune this single number */
.dash-notes .card-body { min-height: 0; padding: 0.5rem 0.5rem; }
.dash-note-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }   /* the notes list scrolls to fill the fixed box */
.dash-important .card-body { overflow: hidden; }   /* Important box PAGES (clips); its pager steps through */
.dash-filter { flex: 0 1 150px; width: 150px; }   /* per-box filter input; the count badge's ms-auto pushes it hard right */
/* Important box v2: one-line header - [Emails|Folders] blue toggle + narrow working-days dropdown + filter fills the rest */
.dash-important .card-header { flex-wrap: nowrap; }
.dash-important .dash-filter { flex: 0 1 150px; width: 150px; min-width: 0; }   /* same as every other dashboard filter (was flex-grow:1, so it ballooned wider than the rest on roomy headers); shrinks gracefully if the header is tight */
.imp-tabs { flex: 0 0 auto; }
.imp-days { flex: 0 0 auto; width: auto; }   /* same height as the -sm filter/toggle to its sides (no custom padding) */
/* Filter / search boxes stay PLAIN - white bg, grey "Filter" placeholder (Dave 2026-09-20). The Dojo's blue is only on
   the segmented toggles (.dojo-seg), which the Important box's Emails/Folders toggle now reuses so they match exactly. */
/* a dashboard box header that is a link to its full page (Notes) - reads as the header, underlines on hover */
.dash-box-title { color: inherit; text-decoration: none; }
.dash-box-title:hover { color: var(--brand, #2563eb); text-decoration: underline; }
.dash-notes .table-responsive { overflow-x: auto; }   /* residual overflow scrolls INSIDE the box, never under the vertical scrollbar */
.dash-notes .note-table { margin-bottom: 0; width: 100%; }
/* Title + Linked-to trimmed to the SAME width so the row fits the box; every other column keeps its natural width. */
.dash-notes .note-title { max-width: 350px; }
.dash-notes .note-link { max-width: 350px; color: inherit; }   /* match the title width; black at rest, not Bootstrap blue (base .note-link caps at 320) */
.dash-notes .note-link:hover { color: var(--brand, #2563eb); text-decoration: underline; }
.dash-notes .note-table th { position: sticky; top: 0; background: var(--card, #fff); z-index: 1; border-bottom: 0; }   /* one th rule - sticky header, no rule line */
.dash-notes .note-table > :not(caption) > * > * { border-bottom-width: 0; padding: var(--cell-pad-y) var(--cell-pad-y); line-height: var(--row-lh); }   /* rows on THE density dials - no bespoke .22rem */
.dash-notes .note-table .note-stat { padding-top: .05rem; padding-bottom: .05rem; min-height: 0; height: auto; }   /* the stats sub-line stays deliberately hair-tight */
/* A todo row's HEIGHT is set by its tallest control, not by padding. Two of those overran the plain list rows on the
   Status dropdown and the action button - shrink both so a todo row is no taller than a Recent/Important row. Scoped
   to .dash-notes, so the full /Notes page keeps its roomier controls. Dave 2026-09-25. */
.dash-notes .note-table select.note-stat { line-height: var(--row-lh); padding-top: 0; padding-bottom: 0; min-height: 0; height: auto; background-position: right .3rem center; }
.dash-notes .note-table .note-btn { width: 1.43rem; height: 1.43rem; }
.dash-notes .note-table .note-btn i { font-size: var(--icon-sm); }
.dash-notes .note-table tbody tr:hover .note-title { color: var(--brand, #2563eb); text-decoration: underline; }

/* ===== Dashboard super-layout (wide screens only): fill the visible area (viewport - topbar - .content padding) with
   TWO equal halves - Important + Todo on top, the three panels below. Each box fills its half; content SCROLLS inside
   for now (row COUNT unchanged - we tune counts after eyeballing). Narrow screens keep the natural stacked flow. Dave 2026-09-25. */
@media (min-width: 992px) {
	.dash-fill { height: calc(100vh - 54px - 1.8rem); display: flex; flex-direction: column; gap: 1rem; }   /* vertical gap between rows = 1rem, MATCHING the g-3 horizontal gutter */
	/* nowrap is the crux: a wrapping .row stretches its cols only to the WRAP-LINE height (their content), not to the
	   row's 50% - which let the top boxes grow to content height and spill over the bottom row. nowrap makes stretch
	   work against the row height. And the card fills via flex (height:100% won't resolve against a stretched parent). */
	.dash-fill > .row { flex: 1 1 0; min-height: 0; margin-bottom: 0 !important; --bs-gutter-y: 0; flex-wrap: nowrap; align-items: stretch; }   /* kill Bootstrap's mb-3 (!important utility) + vertical gutter, so the ONLY vertical spacing is the fill's own gap */
	.dash-fill > .row > [class*="col"] { display: flex; flex-direction: column; min-height: 0; }   /* each col is a flex column so its card can fill + scroll */
	.dash-fill .card { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }   /* card fills its half */
	.dash-fill .card-body { flex: 1 1 auto; min-height: 0; overflow: auto; }                        /* the body is the scroll area */
}

/* The project as plain text - a touch larger, in the project's ink colour - where a pill used to sit (Dave 2026-09-06) */
.proj-name { font-size: .95rem; letter-spacing: .01em; white-space: nowrap; }

/* Two lines, then an ellipsis - the hover carries the rest */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Hard Rules - the Run/preview assessment panel (the sweep). Muted, legible; no weight bumps (colour + size only). */
.rules-group td { border-top: 0; }
.rsp-intent { font-size: 1rem; }
.rsp-tiles { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rsp-tile { flex: 1 1 0; min-width: 90px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.rsp-tile .n { font-size: 1.55rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rsp-tile .l { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.rsp-lines { font-size: .93rem; line-height: 1.8; }
.rsp-lines .ti { width: var(--icon-lg); color: var(--muted); margin-right: 4px; }

/* Hard Rules - the clash pill + the conflict cards (severity in colour, not weight - no-bold rule). */
.rules-pill { display: inline-block; font-size: inherit; padding: .05rem .55rem; border-radius: 999px; vertical-align: middle; }   /* match the line it sits on - no smaller pill font (Dave 2026-09-07) */
.rules-pill-quiet  { background: var(--bg); color: var(--muted); }
.rules-pill-grey   { background: #f1f5f9; color: #475569; }
.rules-pill-warn   { background: #fff7ed; color: #b45309; }
.rules-pill-danger { background: #fef2f2; color: #b91c1c; }
.conflict-card { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .7rem; }
.conflict-card.sev-contradiction { border-left-color: #dc2626; }
.conflict-card.sev-shadowed      { border-left-color: #d97706; }
.conflict-card.sev-redundant     { border-left-color: #94a3b8; }
.conflict-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .9rem; }
.conflict-lab { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .5rem; border-radius: 999px; }
.conflict-lab.lab-contradiction { background: #fef2f2; color: #b91c1c; }
.conflict-lab.lab-shadowed      { background: #fff7ed; color: #b45309; }
.conflict-lab.lab-redundant     { background: #f1f5f9; color: #475569; }
.conflict-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; }
.conflict-rule { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; }
.conflict-act { margin-top: .35rem; display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.conflict-vs { font-size: .75rem; color: var(--muted); text-align: center; white-space: nowrap; }
.badge-terminal { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; }
@media (max-width: 640px) { .conflict-pair { grid-template-columns: 1fr; } .conflict-vs { text-align: left; } }

/* Drag and drop (wwwroot/js/drag-drop.js, decision 160): ONE look for every page - the folder pages, Move & Merge, and an
   Editor's upload. drop-on = the tree folder under the cursor; drop-area = a list or pane that takes the drop as a whole. */
.folder-tree .drop-on { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 4px; background: var(--brand-tint); }
.drop-area { outline: 2px dashed var(--brand); outline-offset: -4px; background: var(--brand-tint); }