/* Sentinel v2 - inbox.css
   The Inbox (#/inbox, clm.js pgInbox) and the bell's list (notifPop), shaped like Gmail's (the owner, 2026-10-15: "a bit more like
   gmail ... not too much text per each task ... light cognitively"): one card, a bar of actions, tabs with what is unread in each,
   one line a row. An unread row is the brightest surface (white in Parchment, raised in Midnight), bold and dotted; a read one sits
   back, light, on a faint tint; a row ticked takes the brand's tint; the keyboard's row has the brand's bar at its left. Under the
   pointer a row's day gives way to its Mark read and Done. At a phone's width a row is two lines (the contract and its day, then the
   subject), the tick box stays, the pointer's buttons go and the bar's buttons are their icons. Theme tokens only: Parchment and
   Midnight alike. */

.dx .pg-inbox { max-width: 1160px; padding-top: 32px; }
.dx .pg-inbox .ph { margin-bottom: 20px; }
.dx .pg-inbox .ph-sub { margin-top: 4px; }

.dx .ibx {
  /* a read row's tint: between the card and the sunken surface, so it sits back in either theme */
  --ibx-read: color-mix(in srgb, var(--surface-sunken) 42%, var(--surface-card));
  --ibx-sel: color-mix(in srgb, var(--brand) 9%, var(--surface-card));
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--e1); overflow: clip;
}

/* the bar: the box for every row, then Mark all read - or, with rows ticked, how many and what to do with them */
.dx .ibx-bar {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px 0 8px;
  background: var(--surface-card); border-bottom: 1px solid var(--line-1);
}
.dx .ibx-bar .btn { gap: 6px; height: 30px; padding: 0 12px; font-size: 13px; }
.dx .ibx-bar .btn .ic { width: 14px; height: 14px; }
.dx .ibx-bar .ibx-bb .ic { width: 15px; height: 15px; }
.dx .ibx-nsel { margin: 0 8px 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dx .ibx-sp { flex: 1 1 auto; }
.dx .ibx-ico { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); cursor: pointer; }
.dx .ibx-ico:hover { background: var(--surface-hover); color: var(--ink-1); }
.dx .ibx-ico:disabled { opacity: .45; cursor: default; }
.dx .ibx-ico:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* the tick box: drawn, never a native input (the morph keeps an attribute, not a checked state) */
.dx .ibx-ck {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
}
.dx .ibx-ck::before, .dx .ibx-ck::after { content: ""; grid-area: 1 / 1; box-sizing: border-box; }
.dx .ibx-ck::before { width: 16px; height: 16px; border: 1.5px solid var(--line-control); border-radius: 4px; background: var(--surface-card); transition: background-color 120ms ease, border-color 120ms ease; }
.dx .ibx-ck::after { width: 9px; height: 5px; margin-top: -2px; border: solid var(--on-brand); border-width: 0 0 2px 2px; transform: rotate(-45deg); opacity: 0; }
.dx .ibx-ck:hover { background: var(--surface-hover); }
.dx .ibx-ck:hover::before { border-color: var(--ink-2); }
.dx .ibx-ck[aria-checked="true"]::before, .dx .ibx-ck[aria-checked="mixed"]::before { background: var(--brand); border-color: var(--brand); }
.dx .ibx-ck[aria-checked="true"]::after { opacity: 1; }
.dx .ibx-ck[aria-checked="mixed"]::after { opacity: 1; width: 8px; height: 0; margin: 0; border-width: 0 0 2px; transform: none; }
.dx .ibx-ck:disabled { opacity: .4; cursor: default; }
.dx .ibx-ck:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }

/* the tabs: Gmail's categories - an icon, the name, and how many are unread in it (the brand's tint; none when nothing is); the one
   shown underlined. Where the strip runs past the screen (a phone in Russian) its edge fades (clm.js stripEdges) */
.dx .ibx-tabs { display: flex; border-bottom: 1px solid var(--line-1); overflow-x: auto; scrollbar-width: none; }
.dx .ibx-tabs.ovf-r { -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); }
.dx .ibx-tabs.ovf-l { -webkit-mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); }
.dx .ibx-tabs.ovf-l.ovf-r { -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); }
.dx .ibx-tabs::-webkit-scrollbar { display: none; }
.dx .ibx-tab {
  position: relative; flex: 0 1 210px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px;
  border: 0; background: transparent; color: var(--ink-3); font: 500 14px var(--font-ui); white-space: nowrap; cursor: pointer;
}
.dx .ibx-tab > span:not(.ibx-c) { overflow: hidden; text-overflow: ellipsis; }
.dx .ibx-tab .ic { flex: none; }
.dx .ibx-tab:hover { background: var(--surface-hover); color: var(--ink-1); }
.dx .ibx-tab.is-on { color: var(--brand-ink); }
.dx .ibx-tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.dx .ibx-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dx .ibx-c {
  flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--brand-soft-2);
  font: 600 12px/20px var(--font-ui); color: var(--brand-ink); text-align: center; font-variant-numeric: tabular-nums;
}

/* THE FOLDERS (the owner, 2026-10-15): the Inbox, the Archive, the Trash - a quiet strip above the bar; the Inbox's unread in the
   brand's blue, the others' count quiet */
.dx .ibx-boxes { display: flex; gap: 4px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; }
.dx .ibx-boxes::-webkit-scrollbar { display: none; }
.dx .ibx-box {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-3); font: 500 13.5px var(--font-ui); white-space: nowrap; cursor: pointer;
}
.dx .ibx-box:hover { background: var(--surface-hover); color: var(--ink-1); }
.dx .ibx-box.is-on { background: var(--surface-hover-2, var(--surface-hover)); color: var(--ink-1); }
.dx .ibx-box:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dx .ibx-bn { font: 500 12px var(--font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* the Inbox's two sections: what is unread, then what was read */
.dx .ibx-sec { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 18px 20px 8px; font: 600 12px/16px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.dx .ibx-secn { font-weight: 500; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* a note: one quiet line under its row (a click writes it again), and the note being written in place */
.dx .ibx-row.has-note { flex-wrap: wrap; }
.dx .ibx-noteline {
  flex: 1 0 100%; display: flex; align-items: center; gap: 8px; min-width: 0; margin: -6px 0 0; padding: 0 16px 10px 52px; border: 0;
  background: none; font: 13px/1.4 var(--font-ui); color: var(--ink-2); text-align: left; cursor: pointer;
}
.dx .ibx-noteline span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx .ibx-noteline .ic { flex: none; color: var(--ink-3); }
.dx .ibx-noteline:hover span { color: var(--ink-1); text-decoration: underline; text-underline-offset: 3px; }
/* in the Trash a note is read, not written */
.dx span.ibx-noteline { cursor: default; }
.dx span.ibx-noteline:hover span { color: inherit; text-decoration: none; }
.dx .ibx-noteline:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 6px; }
.dx .ibx-noted { flex: 1 0 100%; display: grid; gap: 8px; padding: 2px 16px 14px 52px; }
.dx .ibx-notet {
  width: 100%; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-raised, var(--canvas));
  font: 14px/1.5 var(--font-ui); color: var(--ink-1); resize: vertical;
}
.dx .ibx-notet:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.dx .ibx-noteb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dx .ibx-noteh { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.dx .ibx-notex .ic { width: 14px; height: 14px; }

/* a row */
.dx .ibx-row {
  --row-bg: var(--ibx-read);
  position: relative; display: flex; align-items: center; padding-left: 8px; background: var(--row-bg); border-bottom: 1px solid var(--line-1);
  transition: background-color 120ms ease;
}
.dx .ibx-row.is-unread { --row-bg: var(--surface-raised, var(--surface-card)); }
.dx .ibx-row.is-sel { --row-bg: var(--ibx-sel); }
.dx .ibx-list > .ibx-row:last-child, .dx .ibx-list > .ibx-kids:last-child > .ibx-row:last-child { border-bottom: 0; }
.dx .ibx-row:hover { z-index: 2; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-1) 14%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--ink-1) 12%, transparent); }
/* the keyboard's row: the brand's bar at its left (Gmail's) */
.dx .ibx-row:has(> .ibx-main:focus-visible) { box-shadow: inset 3px 0 0 var(--brand); }
.dx .ibx-main:focus-visible { outline: none; }
@supports not selector(:has(*)) { .dx .ibx-main:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } }

.dx .ibx-main {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto minmax(88px, max-content); align-items: center; gap: 18px;
  height: 44px; padding: 0 16px 0 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
/* j / k scroll a row into view by its .ibx-main (scrollIntoView, block: nearest), and it stops clear of the sticky bar, never under it.
   The page's scroller counts the bar's band (48 px and its line) as out of view (scroll-padding), and a row stops 8 px below it
   (scroll-margin, on .ibx-main - what is scrolled to; on .ibx-row it did nothing). A scroll margin alone was not enough: "nearest"
   leaves a row that is inside the scroller where it is, and every second k left one 30 px under the bar (live, 1024x700). */
.dx .dx-scroll:has(.pg-inbox) { scroll-padding-top: 49px; }
.dx .ibx-main { scroll-margin-top: 8px; }
.dx .ibx-from { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dx .ibx-from b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.dx .ibx-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.dx .ibx-row.is-unread > .ibx-main .ibx-dot { background: var(--brand); }
.dx .ibx-row.is-unread > .ibx-main .ibx-from b { font-weight: 600; color: var(--ink-1); }
/* a group's chip: "+3" more contracts saying the same thing, and on the page a chevron - the row opens in place (turned up, open) */
.dx .ibx-n {
  flex: none; display: inline-flex; align-items: center; gap: 1px; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--surface-hover-2); font: 600 11.5px/18px var(--font-ui); color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums;
}
.dx .ibx-n .ic { flex: none; width: 13px; height: 13px; margin-right: -3px; stroke-width: 2; transition: transform 160ms ease; }
.dx .ibx-grp.is-open > .ibx-main .ibx-n .ic { transform: rotate(180deg); }
/* the subject and its grey line: the subject whole when it fits, the line in what is left (Gmail's); where the line is counts (drafts to
   settle, analyses) they are the message and keep their room - the subject gives way first, down to a few words */
.dx .ibx-line { display: flex; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; color: var(--ink-3); }
.dx .ibx-line > .ibx-subj { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dx .ibx-line > .ibx-snip { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* (never shrunk by a fraction of a pixel - that alone put an ellipsis on "26 high"; cut only past its max-width, the subject's few words) */
.dx .ibx-line.is-sum > .ibx-snip { flex: none; max-width: calc(100% - 4em); }
/* read, the subject is plain ink (a page rule makes a <b> 500 at a phone's width: said again here); unread, bold */
.dx .ibx .ibx-subj { font-weight: 400; color: var(--ink-1); }
.dx .ibx .ibx-row.is-unread > .ibx-main .ibx-subj { font-weight: 600; }
.dx .ibx-snip::before { content: "\00a0— "; }      /* a flex item drops a leading space: the dash keeps its own */
.dx .ibx-own::before { content: none; }
.dx .ibx-tags { display: flex; align-items: center; gap: 6px; }
.dx .ibx-tags .dr-tag { margin: 0; }
.dx .ibx-when { justify-self: end; font-size: 13px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dx .ibx-row.is-unread > .ibx-main .ibx-when { color: var(--ink-1); font-weight: 600; }
.dx .ibx-row > .ibx-main .ibx-when.is-late { color: var(--sev-critical); }
.dx .ibx-row > .ibx-main .ibx-when.is-soon { color: var(--warn); }

/* a group opened: its rows indented under it */
.dx .ibx-grp.is-open { --row-bg: var(--surface-card); }
.dx .ibx-grp.is-open .ibx-n { background: var(--brand-soft-2); color: var(--brand-ink); }
.dx .ibx-kids { position: relative; background: var(--surface-card); }
.dx .ibx-kids::before { content: ""; position: absolute; left: 61px; top: 0; bottom: 10px; width: 1px; background: var(--line-2); }
.dx .ibx-kid { padding-left: 72px; --row-bg: var(--surface-card); }
.dx .ibx-kid:not(.is-unread) { --row-bg: color-mix(in srgb, var(--ibx-read) 60%, var(--surface-card)); }
.dx .ibx-kid .ibx-main { height: 38px; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto minmax(88px, max-content); }
.dx .ibx-kid .ibx-from b { font-size: 13.5px; }
.dx .ibx-kid .ibx-line { font-size: 13px; }

/* under the pointer (or the keyboard - a click's focus is not enough): Mark read and Done where the day was */
.dx .ibx-acts {
  position: absolute; top: 0; right: 10px; bottom: 0; display: none; align-items: center; gap: 2px; padding-left: 28px;
  background: linear-gradient(to right, transparent, var(--row-bg) 24px);
}
.dx .ibx-row:hover > .ibx-acts, .dx .ibx-row:has(> :focus-visible, > .ibx-acts :focus-visible) > .ibx-acts { display: flex; }
.dx .ibx-row:hover > .ibx-main .ibx-when, .dx .ibx-row:has(> :focus-visible, > .ibx-acts :focus-visible) > .ibx-main .ibx-when { visibility: hidden; }
@supports not selector(:has(*)) {
  .dx .ibx-row:focus-within > .ibx-acts { display: flex; }
  .dx .ibx-row:focus-within > .ibx-main .ibx-when { visibility: hidden; }
}
.dx .ibx-act { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.dx .ibx-act:hover { background: var(--surface-hover-2); color: var(--ink-1); }
.dx .ibx-act:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.dx .ibx-empty { display: grid; justify-items: center; gap: 6px; padding: 64px 24px 72px; text-align: center; font-size: 13.5px; color: var(--ink-3); }
.dx .ibx-empty .ic { width: 28px; height: 28px; margin-bottom: 6px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.dx .ibx-empty b { font-size: 15px; font-weight: 600; color: var(--ink-1); }

/* THE BELL: the same rows, two lines each. Narrower than 340 px (a 300 px phone) its Mark all read is its icon alone - its name in
   aria-label and title - so the header's Russian "Отметить всё прочитанным" is never cut at the edge */
.dx .menu.ibx-pop { width: 400px; padding: 0; overflow-x: hidden; container: ibxpop / inline-size; }
@container ibxpop (max-width: 340px) {
  .dx .menu.ibx-pop .dx-notifs-h .btn { justify-content: center; width: 30px; height: 30px; padding: 0; }
  .dx .menu.ibx-pop .dx-notifs-h .btn > span { display: none; }
  .dx .menu.ibx-pop .dx-notifs-h .btn .ic { width: 16px; height: 16px; margin: 0; }
}
.dx .menu.ibx-pop .dx-notifs-h { margin: 0; padding: 12px 14px 10px; }
.dx .menu.ibx-pop a.ibx-pr { display: grid; gap: 3px; padding: 10px 14px 10px 12px; border-radius: 0; border-bottom: 1px solid var(--line-1); background: var(--ibx-read, transparent); }
.dx .menu.ibx-pop a.ibx-pr.is-unread { background: var(--surface-raised, var(--surface-card)); }
.dx .menu.ibx-pop a.ibx-pr:hover { background: var(--surface-hover); }
.dx .menu.ibx-pop { --ibx-read: color-mix(in srgb, var(--surface-sunken) 42%, var(--surface-card)); }
.dx .menu.ibx-pop .ibx-pr-top { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.dx .menu.ibx-pop .ibx-pr-top b { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 400; }
.dx .menu.ibx-pop .ibx-pr-top .ibx-n { display: inline-flex; font-size: 11.5px; }
.dx .menu.ibx-pop .ibx-pr-top .ibx-when { display: inline-block; font-size: 12px; }
.dx .menu.ibx-pop .ibx-pr-line { display: block; padding-left: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-3); }
.dx .menu.ibx-pop .ibx-pr-line b, .dx .menu.ibx-pop .ibx-pr-line span { display: inline; font-size: inherit; }
.dx .menu.ibx-pop .ibx-pr-line .ibx-subj { color: var(--ink-1); font-weight: 400; }
.dx .menu.ibx-pop .is-unread .ibx-dot { background: var(--brand); }
.dx .menu.ibx-pop .is-unread .ibx-pr-top b, .dx .menu.ibx-pop .is-unread .ibx-subj { font-weight: 600; color: var(--ink-1); }
.dx .menu.ibx-pop .is-unread .ibx-when { color: var(--ink-1); font-weight: 600; }
.dx .menu.ibx-pop .ibx-when.is-late { color: var(--sev-critical); }
.dx .menu.ibx-pop .ibx-when.is-soon { color: var(--warn); }
.dx .menu.ibx-pop a.ibx-pop-all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 0; font-size: 13px; font-weight: 500; color: var(--brand-ink); }
.dx .menu.ibx-pop a.ibx-pop-all span { display: inline; font-size: 13px; color: inherit; }
.dx .menu.ibx-pop a.ibx-pop-all .ic { margin: 0; color: inherit; }

/* A NARROWER PAGE (a 1024 screen beside the sidebar, an 820 tablet): the contract's column gives the subject and its line 72 px (Gmail's
   sender column is as narrow), the columns sit closer - in Russian "Урегулировать до… - 6 критичных · 26 высоких" keeps its counts
   whole and a date's subject its clause */
@container main (max-width: 1000px) {
  /* 168 px left a name 66-102 px beside its chip ("Data Licence…", "Office L… 8 сроков"); 204 px and a chip without its chevron give
     it 130-170 px, and the settle row's counts still keep their room (the subject gives way, .is-sum) */
  .dx .ibx-main { grid-template-columns: minmax(0, 204px) minmax(0, 1fr) auto minmax(76px, max-content); gap: 12px; }
  .dx .ibx-main .ibx-n .ic { display: none; }
  .dx .ibx-kid .ibx-main { grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto minmax(76px, max-content); }
}

/* A PHONE'S WIDTH: two lines a row - the contract, a draft's tag and the day; then the subject across the whole row - the list edge to
   edge */
@container main (max-width: 640px) {
  .dx .ibx-noteline, .dx .ibx-noted { padding-left: 16px; }
  .dx .ibx-noteh { display: none; }
  .dx .ibx-boxes { padding: 8px 12px 0; }
  .dx .pg-inbox { padding: 20px 0 96px; }
  .dx .pg-inbox .ph { margin: 0 16px 14px; }
  .dx .ibx { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
  .dx .ibx-bar { padding: 0 12px 0 6px; }
  .dx .ibx-bar .ibx-ico[data-act="ibx-keys"] { display: none; }      /* a phone has no keyboard to list */
  .dx .ibx-bar { --ibx-tap: max(36px, var(--ctl-md, 36px)); }      /* 44 px under a finger */
  .dx .ibx-bar .ibx-ico { width: var(--ibx-tap); height: var(--ibx-tap); }
  /* the rows ticked: the icon alone, square (Gmail's), its name in its aria-label and title - the bar fits 390 px in Russian too */
  .dx .ibx-bar .ibx-bb { justify-content: center; width: var(--ibx-tap); min-width: var(--ibx-tap); height: var(--ibx-tap); padding: 0;
    border-color: transparent; border-radius: 50%; background: transparent; box-shadow: none; color: var(--ink-2); }
  .dx .ibx-bar .ibx-bb:hover:not(:disabled) { background: var(--surface-hover-2); color: var(--ink-1); }
  .dx .ibx-bar .ibx-bb > span { display: none; }
  .dx .ibx-bar .ibx-bb .ic { width: 18px; height: 18px; }
  .dx .ibx-tab { flex: 0 0 auto; gap: 6px; padding: 0 10px; font-size: 13.5px; }
  .dx .ibx-tab.is-on::after { left: 6px; right: 6px; }
  .dx .ibx-c { min-width: 20px; padding: 0 6px; }
  .dx .ibx-tab .ic { display: none; }
  .dx .ibx-row { align-items: flex-start; padding-left: 4px; }
  .dx .ibx-row > .ibx-ck { margin-top: 6px; }
  .dx .ibx-main { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; gap: 3px 8px; height: auto; padding: 10px 14px 11px 2px; }
  .dx .ibx-from { grid-column: 1; grid-row: 1; }
  .dx .ibx-tags { grid-column: 2; grid-row: 1; }
  .dx .ibx-when { grid-column: 3; grid-row: 1; }
  .dx .ibx-line { grid-column: 1 / -1; grid-row: 2; padding-left: 18px; font-size: 13.5px; }
  .dx .ibx-acts { display: none !important; }
  .dx .ibx-row > .ibx-main .ibx-when { visibility: visible !important; }
  .dx .ibx-kids::before { left: 22px; }
  .dx .ibx-kid { padding-left: 30px; }
  .dx .ibx-kid .ibx-main { height: auto; grid-template-columns: minmax(0, 1fr) auto auto; }
  .dx .ibx-kid .ibx-line:empty { display: none; }
}
/* NARROWER STILL (a 300 px screen): a long day ("просрочка 13 дней") takes two short lines at the right, so the contract keeps its
   first word or two - on one line it left the name a letter or three wide. A short day ("13 days late", "11 окт") stays one line. */
@container main (max-width: 340px) {
  .dx .ibx-main .ibx-when { max-width: 6.5em; white-space: normal; text-align: right; line-height: 1.25; }
}