body { background: #f6f7f9; font-size: .95rem; }

/* one colour per bucket, used as a dot or a left border everywhere */
.b-People     { --b: #0d6efd; }
.b-Community  { --b: #20c997; }
.b-Reading    { --b: #6610f2; }
.b-Records    { --b: #198754; }
.b-Updates    { --b: #6c757d; }
.b-Promotions { --b: #fd7e14; }
.bdot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--b); }
.bchip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; white-space: nowrap; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* triage layout */
.queue { max-height: calc(100vh - 9rem); overflow: auto; }
.queue-row { cursor: pointer; }
.queue-row td { padding-top: .45rem; padding-bottom: .45rem; }
.queue-row.table-active td:first-child { box-shadow: inset 3px 0 0 #0d6efd; }
.group-row th { background: #f1f3f5 !important; position: sticky; top: 0; z-index: 1; font-weight: 600; }
.subject { max-width: 22rem; }

/* labelling pane */
.bucket-opt { display: grid; grid-template-columns: 1.6rem 1fr 7rem; align-items: center; gap: .5rem;
              border-left: 4px solid var(--b); cursor: pointer; }
.bucket-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bucket-opt:has(input:checked) { background: #e7f1ff; outline: 2px solid #0d6efd; outline-offset: -2px; }
.bucket-opt.jev .name::after { content: "Jev"; font-size: .7rem; margin-left: .4rem; padding: 0 .3rem;
                               border: 1px solid #adb5bd; border-radius: .25rem; color: #495057; }
.pbar { height: .4rem; background: #e9ecef; border-radius: .2rem; overflow: hidden; }
.pbar > i { display: block; height: 100%; background: var(--b, #0d6efd); }
.email-body { white-space: pre-wrap; word-break: break-word; max-height: 32rem; overflow: auto;
              font-size: .9rem; line-height: 1.55; max-width: 80ch; }

/* toast */
#toast { position: fixed; bottom: 1rem; right: 1rem; z-index: 1080; }
#toast .alert { animation: fade 8s forwards; box-shadow: 0 .25rem .75rem rgba(0,0,0,.15); }
@keyframes fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.htmx-request #pane, #pane.htmx-request { opacity: .6; transition: opacity .1s; }