/* Sentinel v2 - obligations.css
   Obligations and Payments (clm.js obBoard), three pictures of the same duties:
     the timeline - a lane per contract, a dot per dated duty on its day, today a line through every lane, each contract's progress;
     the board    - the columns by when each duty falls (Late, the next 7 days, the next 30, later), a card per duty: its done circle,
                    when, the clause, the contract's words, who owes whom as chips (ours in the brand's colour), a duty's other days as
                    a run of dots, the contract;
     the duties counted from an event - the same card with the trigger where a date would be - and the folded Done.
   Tokens from v2/tokens.css: the same sheet reads in Parchment and in Midnight. */

.dx .pg-ob {
  max-width: 1360px;
  container-type: inline-size;
  --ob-late: var(--sev-critical);
  --ob-near: var(--warn);
  --ob-ahead: var(--brand);
  --ob-card: var(--surface-card);
  --ob-lane: var(--surface-sunken);
}
.dx .pg-ob .ph { margin-bottom: 26px; }

/* ============================================================ the filters */
.dx .ob-bar { gap: 10px 14px; margin-bottom: 22px; }
.dx .ob-fs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.dx .ob-sel { position: relative; height: 32px; padding: 0; border-color: var(--line-2); background: var(--ob-card); }
.dx .ob-sel select { height: 30px; max-width: 230px; padding: 0 28px 0 11px; font: 500 13px var(--font-ui); color: var(--ink-2); text-overflow: ellipsis; }
.dx .ob-sel::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; pointer-events: none;
  border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.dx .ob-sel:hover { border-color: var(--line-3); }
.dx .ob-sel.is-on { border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-soft); }
.dx .ob-sel.is-on select { color: var(--brand-ink); }
.dx .ob-sel.is-on::after { border-color: var(--brand-ink); }
.dx .ob-clear .ic { width: 13px; height: 13px; }

/* ============================================================ section headings */
.dx .ob-sec { margin-top: 40px; }
.dx .ob-sh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; }
.dx .ob-sh h2 { margin: 0; font: 600 15px/22px var(--font-ui); letter-spacing: -.005em; color: var(--ink-1); }
.dx .ob-shs { font-size: 13px; color: var(--ink-3); }
.dx .ob-n {
  display: inline-block; min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--surface-hover-2);
  font: 500 11.5px/18px var(--font-ui); color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums;
}
.dx .ob-more {
  align-self: flex-start; height: 30px; padding: 0 12px; border: 1px dashed var(--line-3); border-radius: 9px; background: transparent;
  font: 500 12.5px var(--font-ui); color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.dx .ob-more:hover { border-style: solid; background: var(--surface-hover); color: var(--ink-1); }
.dx .ob-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx .ob-sec > .ob-more, .dx .ob-tl > .ob-more { margin-top: 10px; }
.dx .ob-more.is-m-only { display: none; }
.dx .ob-nodate { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }
.dx .ob-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 24px 0; color: var(--ink-3); }
.dx .ob-empty p { margin: 0; }
.dx .ob-hint { margin-top: 28px; }

/* ============================================================ the timeline */
.dx .ob-tl { margin: 0 0 30px; }
.dx .ob-lg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-left: auto; font-size: 12px; color: var(--ink-3); }
.dx .ob-lg span { display: inline-flex; align-items: center; gap: 6px; }
.dx .ob-lg i { --c: var(--ob-ahead); width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dx .ob-lg i.is-late { --c: var(--ob-late); }
.dx .ob-lg i.is-near { --c: var(--ob-near); }
.dx .ob-lg i.is-done { --c: var(--ok); }
.dx .ob-lg i.is-gone { --c: var(--ink-4); }
.dx .ob-lg i.is-many { --c: var(--ink-3); height: 15px; border-radius: 999px; }
.dx .ob-tl-box {
  --ob-lbl: 280px;
  overflow: hidden; border: 1px solid var(--line-1); border-radius: 14px; background: var(--ob-card); box-shadow: var(--e1);
}
.dx .ob-ax, .dx .ob-ln { display: grid; grid-template-columns: var(--ob-lbl) minmax(0, 1fr); padding: 0 20px 0 16px; }
.dx .ob-ax { height: 30px; }
.dx .ob-ax-t { position: relative; }
.dx .ob-ax-t span {
  position: absolute; top: 9px; padding-left: 5px; border-left: 1px solid var(--line-2);
  font: 500 11px/14px var(--font-ui); color: var(--ink-3); white-space: nowrap;
}
.dx .ob-ax-t span.is-year { font-weight: 600; color: var(--ink-2); }
.dx .ob-ax-t span.is-by { visibility: hidden; }
.dx .ob-ax-t em {
  position: absolute; z-index: 1; top: 7px; transform: translateX(-50%); padding: 0 7px; border-radius: 999px;
  background: var(--brand); font: 600 11px/17px var(--font-ui); font-style: normal; color: var(--on-brand); white-space: nowrap;
  box-shadow: 0 0 0 3px var(--ob-card);
}
.dx .ob-ln {
  width: 100%; min-height: 42px; border: 0; border-top: 1px solid var(--line-1); background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .12s, opacity .15s;
}
.dx .ob-ln:hover { background: var(--surface-hover); }
.dx .ob-ln:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dx .ob-ln.is-on { background: var(--brand-soft); }
.dx .ob-ln.is-dim { opacity: .55; }
.dx .ob-ln.is-dim:hover { opacity: .9; }
.dx .ob-ln-t { min-width: 0; display: grid; gap: 3px; align-content: center; padding: 5px 18px 5px 0; }
/* the contract's name (a draft said so beside it), then its progress: done of all, the late ones */
.dx .ob-ln-n { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dx .ob-ln-n b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/18px var(--font-ui); color: var(--ink-1); }
.dx .ob-ln-n .dr-tag { flex: none; margin: 0; }
.dx .ob-ln.is-on .ob-ln-n b { color: var(--brand-ink); }
.dx .ob-ln-m { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-size: 11.5px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
.dx .ob-ctl { color: var(--ob-late); }
.dx .ob-prog { flex: none; display: flex; width: 56px; height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-hover-2); }
.dx .ob-prog i { display: block; height: 100%; }
.dx .ob-prog i.is-done { background: var(--ok); }
.dx .ob-prog i.is-late { background: var(--ob-late); opacity: .85; }
/* a lane's track: the days before today tinted, a month a faint rule, today the brand's line, a day's duties a mark (taller for two or
   three); a draft's lane runs on a dashed line, as its dates are dashed everywhere else */
.dx .ob-tr {
  position: relative; align-self: stretch; min-height: 40px;
  background: linear-gradient(to right, color-mix(in srgb, var(--ob-late) 4%, transparent) var(--now), transparent var(--now));
}
.dx .ob-tr::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line-2); }
.dx .ob-ln.is-draft .ob-tr::before { border-top-style: dashed; }
/* today: the cobalt of its label on the axis, whole (at 70 % it read as a grey rule in Parchment) */
.dx .ob-tr::after { content: ""; position: absolute; top: 0; bottom: -1px; left: var(--now); margin-left: -1px; border-left: 2px solid var(--brand); }
.dx .ob-tr b { position: absolute; top: 0; bottom: -1px; border-left: 1px dashed var(--line-1); }
.dx .ob-tr i {
  --c: var(--ob-ahead); --h: calc(9px + (var(--n, 1) - 1) * 6px);
  position: absolute; z-index: 1; top: 50%; width: 9px; height: var(--h); margin: calc(var(--h) / -2) 0 0 -4.5px; border-radius: 999px;
  background: var(--c); box-shadow: 0 0 0 2px var(--ob-card); transition: transform .12s;
}
.dx .ob-tr i.is-late { --c: var(--ob-late); }
.dx .ob-tr i.is-near { --c: var(--ob-near); }
.dx .ob-tr i.is-done { --c: var(--ok); }
/* a draft's passed day: late nowhere (it binds nobody yet), a grey mark */
.dx .ob-tr i.is-gone { --c: var(--ink-4); }
.dx .ob-tr i:hover { transform: scale(1.35); }
.dx .ob-ln:hover .ob-tr i { box-shadow: 0 0 0 2px var(--surface-hover); }
.dx .ob-ln.is-on .ob-tr i { box-shadow: 0 0 0 2px var(--brand-soft); }
/* further than the drawn days: a small arrow at the edge, pointing out */
.dx .ob-tr i.is-clip {
  width: 0; height: 0; margin: -5px 0 0 -6px; border: solid transparent; border-width: 5px 0 5px 7px; border-left-color: var(--c);
  border-radius: 0; background: none; box-shadow: none;
}
.dx .ob-tr i.is-clip.is-past { margin-left: -1px; border-width: 5px 7px 5px 0; border-left-color: transparent; border-right-color: var(--c); }

/* ============================================================ the board */
.dx .ob-board { display: grid; grid-template-columns: var(--ob-cols, repeat(4, minmax(0, 1fr))); gap: 12px; align-items: start; }
/* the coming three: columns of the board side by side here, a stack beside Late where two columns are all that fit */
.dx .ob-ahead { display: contents; }
.dx .ob-col {
  min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 8px;
  border: 1px solid var(--line-1); border-radius: 14px; background: var(--ob-lane);
}
.dx .ob-col.is-late { background: color-mix(in srgb, var(--ob-late) 2.5%, var(--ob-lane)); }
/* a column's heading: its dot, its name (wrapping beside the dot in a narrow rail), its count, its days under the name */
.dx .ob-ch { display: grid; grid-template-columns: auto minmax(0, max-content) auto 1fr; align-items: center; gap: 2px 8px; padding: 2px 6px 4px; }
.dx .ob-ch h3 { min-width: 0; margin: 0; font: 600 13px/18px var(--font-ui); letter-spacing: -.003em; color: var(--ink-1); }
.dx .ob-cd { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.dx .ob-col.is-late .ob-cd { background: var(--ob-late); }
.dx .ob-col.is-late h3 { color: var(--ob-late); }
.dx .ob-col.is-week .ob-cd { background: var(--ob-near); }
.dx .ob-col.is-month .ob-cd { background: var(--ob-ahead); }
.dx .ob-span { grid-column: 2 / -1; font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
/* a rail (a column with nothing open in it) is as wide as its heading on one line at least (clm.js: minmax(min-content, .5fr)) - its
   "Nothing due" wraps if it must */
.dx .ob-col.is-empty .ob-ch { grid-template-columns: auto auto; }
.dx .ob-col.is-empty h3 { min-width: max-content; white-space: nowrap; }
.dx .ob-cards { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dx .ob-none {
  margin: 0; padding: 16px 10px; border: 1px dashed var(--line-2); border-radius: 10px;
  font-size: 12.5px; color: var(--ink-4); text-align: center;
}

/* ============================================================ a card */
.dx .ob-card {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 0;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--ob-card); box-shadow: var(--e1);
  transition: border-color .15s, box-shadow .15s;
}
.dx .ob-card:hover { border-color: var(--line-3); box-shadow: var(--e2); }
/* a draft's duty binds nobody yet: dashed, as its dates are everywhere else */
.dx .ob-card.is-draft { border-style: dashed; border-color: var(--line-3); box-shadow: none; }
/* the card's first line: the circle, when (its day and how late or how soon), the kind's mark under a contract's filter, the clause.
   How late a duty is is never cut: short of room it goes under its day ("2 мар" over "просрочено на 227 дней"), and the clause's chip
   is the one cut short when even that does not fit (its whole label in the clause it opens) */
.dx .ob-h { display: flex; align-items: flex-start; gap: 8px; min-height: 22px; min-width: 0; }
.dx .ob-h > .ob-ck, .dx .ob-h > .ob-k { margin-top: 1px; }
.dx .ob-h .c-sec {
  flex: 0 .001 auto; min-width: 0; max-width: 42%; height: 21px; margin: .5px 0 0 auto; padding: 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px;
}
/* under a contract's filter (no foot): the kind's mark by the clause */
.dx .ob-h .ob-k { margin-left: auto; }
.dx .ob-h .ob-k + .c-sec { margin-left: -2px; }
.dx .ob-when { flex: 1 1 auto; display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; white-space: nowrap; }
.dx .ob-when b { font: 600 13px/22px var(--font-ui); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.dx .ob-when span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.dx .ob-when.is-late span { color: var(--ob-late); }
.dx .ob-when.is-near span { color: var(--ob-near); }
.dx .ob-what {
  margin: 0; font: 500 13.5px/19px var(--font-ui); color: var(--ink-1); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* a duty served from its verb ("shall delete all Licensor Data…") starts as a sentence does - its letters are the contract's */
.dx .ob-what::first-letter { text-transform: uppercase; }
/* who owes whom on one line: each name cut short as it must be (the longer more), its whole name in its tip */
.dx .ob-pp { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dx .ob-p {
  flex: 0 1 auto; min-width: 52px; max-width: 100%; height: 22px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface-sunken); font: 500 11.5px/20px var(--font-ui); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dx .ob-p.is-us { border-color: transparent; background: var(--brand-soft); color: var(--brand-ink); }
/* who and its arrow stay together; the shorter of the two names is kept whole (up to 60 % of the line), the longer cut short */
.dx .ob-pw { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.dx .ob-pw.is-keep, .dx .ob-p.is-keep { flex-shrink: 0; max-width: 60%; }
.dx .ob-to { flex: none; display: grid; place-items: center; color: var(--ink-4); }
.dx .ob-to .ic { width: 12px; height: 12px; }
.dx .ob-note { margin: 0; font-size: 12px; color: var(--ink-3); }
/* where it comes from: the kind, the contract, a draft said so, the side, how often - under a rule */
.dx .ob-f {
  display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0 -12px; padding: 7px 12px 8px;
  border-top: 1px solid var(--line-1); font-size: 12px; line-height: 16px; color: var(--ink-3);
}
.dx .ob-card.is-draft .ob-f { border-top-style: dashed; }
.dx .ob-k {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  background: color-mix(in srgb, var(--k) 11%, transparent); color: var(--k);
}
.dx .ob-k .ic { width: 13px; height: 13px; }
.dx .ob-doc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.dx .ob-doc:hover { color: var(--ink-1); text-decoration: underline; text-underline-offset: 2px; }
.dx .ob-f .dr-tag, .dx .ob-f .dl-edited { flex: none; margin: 0; }
.dx .ob-side { flex: none; padding: 0 6px; border-radius: 5px; background: var(--brand-soft); font-size: 11px; line-height: 17px; color: var(--brand-ink); }
.dx .ob-run { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 22px; margin-top: -1px; }
/* under a contract's filter the card has no foot: a draft, a changed date and the side end the run's line (under it, at its right,
   when the two do not fit on one) */
.dx .ob-card.is-one .ob-run { flex-wrap: wrap; row-gap: 4px; }
.dx .ob-tags { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.dx .ob-tags .dr-tag, .dx .ob-tags .dl-edited { margin: 0; }
.dx .ob-card.is-one { padding-bottom: 10px; }
.dx .ob-grid .ob-card.is-one > .ob-run:last-child { margin-top: auto; }
.dx .ob-often { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.dx .ob-often .ic { width: 12px; height: 12px; }

/* the done circle: an empty ring to tick; ticked, it fills with the done green before the card goes */
.dx .ob-ck {
  position: relative; flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
  border: 1.5px solid var(--line-control); border-radius: 50%; background: transparent; color: transparent; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.dx .ob-ck::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.dx .ob-ck .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.dx .ob-ck:hover { border-color: var(--ok); color: var(--ok); }
.dx .ob-ck.is-on, .dx .ob-ck.is-ticking { border-color: var(--ok); background: var(--ok); color: var(--surface-card); }
.dx .ob-ck.is-ticking { transform: scale(1.12); }
.dx .ob-ck.is-on:hover { border-color: var(--line-control); background: transparent; color: var(--ink-3); }
/* a circle the drawing put under a pointer that has not moved since its click (clm.js obStillFrom): its ring alone, no check - the
   check read as that duty ticked too; a ticked one stays filled */
.dx .pg-ob.is-still .ob-ck:not(.is-on):not(.is-ticking):hover { color: transparent; }
.dx .pg-ob.is-still .ob-ck.is-on:hover { border-color: var(--ok); background: var(--ok); color: var(--surface-card); }
/* the card that stays when one of its days is marked done: its next day rises in where the ticked one was */
.dx .ob-card.is-next .ob-when { animation: ob-next .5s cubic-bezier(.22, 1, .36, 1) 1 both; }
@keyframes ob-next {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: none; }
}
.dx .ob-ck:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx .ob-card.is-done .ob-what { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.dx .ob-card.is-done .ob-when b { color: var(--ink-3); }

/* a duty's other days in this column: a run of dots (late red, done green) that unfolds into each day with its own circle */
.dx .ob-runs {
  flex: 0 1 auto; display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; height: 24px; margin: 0 0 0 -5px;
  padding: 0 5px; border: 0; border-radius: 6px; background: transparent; font: 12px var(--font-ui); color: var(--ink-3); cursor: pointer;
}
.dx .ob-runs > span:not(.ob-dots) { flex: none; white-space: nowrap; }
.dx .ob-runs:hover { background: var(--surface-hover); color: var(--ink-1); }
.dx .ob-runs:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dx .ob-runs .ic { flex: none; width: 12px; height: 12px; transition: transform .15s; }
.dx .ob-runs[aria-expanded="true"] .ic { transform: rotate(90deg); }
/* short of room, the run of dots gives way before its words do */
.dx .ob-dots { flex: 0 4 auto; display: inline-flex; align-items: center; gap: 3px; min-width: 13px; overflow: hidden; }
.dx .ob-dots i { flex: none; }
.dx .ob-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ob-ahead); opacity: .55; transition: background .3s, opacity .3s; }
.dx .ob-dots i.is-late { background: var(--ob-late); opacity: .9; }
.dx .ob-dots i.is-done { background: var(--ok); opacity: .9; }
.dx .ob-dots i.is-more { width: 3px; height: 3px; background: var(--ink-4); }
.dx .ob-occ { display: grid; gap: 4px; margin: 0; padding: 7px 0 1px; border-top: 1px dashed var(--line-2); list-style: none; }
.dx .ob-occ li { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.dx .ob-occ .ob-ck { width: 18px; height: 18px; }

/* a duty counted from an event: the same card, its trigger (the contract's words) where a date would be, on the brand's tint */
.dx .ob-card.is-rule .ob-h {
  align-items: flex-start; margin: -11px -12px 0; padding: 10px 12px 9px; border-bottom: 1px solid var(--line-1);
  border-radius: 11px 11px 0 0; background: color-mix(in srgb, var(--brand) 5%, var(--ob-card));
}
.dx .ob-card.is-rule.is-draft .ob-h { border-bottom-style: dashed; }
.dx .ob-card.is-rule .ob-ck { margin-top: -1px; }
.dx .ob-trig { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 7px; min-width: 0; font: 500 12.5px/18px var(--font-ui); color: var(--brand-ink); }
.dx .ob-trig .ic { flex: none; margin-top: 2px; }
.dx .ob-trig span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* the duties counted from an event, by kind: a row of cards each, under the kind's mark and name */
.dx .ob-rk + .ob-rk { margin-top: 22px; }
.dx .ob-rh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 13px/20px var(--font-ui); color: var(--ink-2); }
.dx .ob-rk > .ob-more { margin-top: 10px; }
/* the cards of a row as tall as each other, their contract at the foot */
.dx .ob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.dx .ob-grid .ob-f { margin-top: auto; }

/* the folded Done */
.dx .ob-fold {
  display: inline-flex; align-items: center; gap: 8px; margin-left: -6px; padding: 3px 8px 3px 4px; border: 0; border-radius: 8px;
  background: transparent; font: 600 15px/22px var(--font-ui); color: var(--ink-1); cursor: pointer;
}
.dx .ob-fold:hover { background: var(--surface-hover); }
.dx .ob-fold:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dx .ob-fold .ic { color: var(--ink-3); transition: transform .15s; }
.dx .ob-fold[aria-expanded="true"] .ic { transform: rotate(90deg); }

/* ============================================================ the beam
   The idea of border-beam (libraries.dev, MIT, Jakub Antalik - see THIRD-PARTY.md), in the brand's cobalt and run once: a card that a
   Reopen or the Undo of Mark done put back on the board is drawn round by a short light and a soft bloom, so the eye finds where it
   landed among two hundred. */
@property --ob-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.dx .ob-card.is-beam { animation: ob-bloom 1.6s cubic-bezier(.22, 1, .36, 1) 1 both; }
.dx .ob-card.is-beam::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ob-beam), transparent 0deg 240deg, color-mix(in srgb, var(--brand) 30%, transparent) 300deg, var(--brand) 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ob-beam 1.4s cubic-bezier(.45, .05, .3, 1) 1 both;
}
@keyframes ob-beam {
  0% { --ob-beam: 0deg; opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { --ob-beam: 360deg; opacity: 0; }
}
@keyframes ob-bloom {
  0% { box-shadow: var(--e1), 0 0 0 0 transparent; }
  30% { box-shadow: var(--e2), 0 0 0 4px var(--brand-soft); }
  100% { box-shadow: var(--e1), 0 0 0 0 transparent; }
}

/* ============================================================ narrower: a slimmer lane label, two columns, then one */
@container (max-width: 1080px) {
  .dx .ob-tl-box { --ob-lbl: 220px; }
}
/* TWO COLUMNS where four would make a card narrower than about 265 px (at 1280 px four were 242 px wide: both party chips cut, the
   contract cut, an empty column's heading in four lines). The four share the board's width less its gaps (36 px), a column with nothing
   in it half a share but never narrower than its heading on one line (in Russian some 165 px; clm.js says how many such rails there
   are: is-r0 .. is-r3) - so two columns below 1,164 px with no rail (1440 px with every column full), below 1,047 with one (1440 keeps
   four, 1366 and 1280 have two), below 940 with two or three.
   Two columns: Late, and beside it the coming ones stacked - an empty "Next 7 days" took half the width beside a Late of 1,300 px, and
   the next 30 days and later began below all of it (the critic, 1024 px). Nothing late: Late a line across the top, the coming ones
   side by side under it. An empty column is its heading and one quiet line, as on a phone. */
@container (max-width: 1163px) {
  .dx .ob-board:where(.is-r0) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx .ob-board:where(.is-r0) .ob-ahead { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
}
@container (max-width: 1046px) {
  .dx .ob-board:where(.is-r1) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .dx .ob-board:where(.is-r1) .ob-ahead { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .dx .ob-board:where(.is-r1):has(> .ob-col.is-late.is-empty) .ob-ahead { display: contents; }
  .dx .ob-board:where(.is-r1) .ob-col.is-late.is-empty, .dx .ob-board:where(.is-r1):has(> .ob-col.is-late.is-empty) .ob-col.is-empty { grid-column: 1 / -1; }
  .dx .ob-board:where(.is-r1) .ob-col.is-empty { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding-bottom: 8px; }
  .dx .ob-board:where(.is-r1) .ob-col.is-empty .ob-ch { flex: 0 1 auto; grid-template-columns: auto auto auto; padding-bottom: 2px; }
  .dx .ob-board:where(.is-r1) .ob-col.is-empty .ob-ch .ob-span { grid-column: 3; text-align: left; }
  .dx .ob-board:where(.is-r1) .ob-col.is-empty .ob-none { margin-left: auto; padding: 0 6px 2px; border: 0; text-align: right; }
}
@container (max-width: 940px) {
  .dx .ob-board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .dx .ob-ahead { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .dx .ob-board:has(> .ob-col.is-late.is-empty) .ob-ahead { display: contents; }
  .dx .ob-col.is-late.is-empty, .dx .ob-board:has(> .ob-col.is-late.is-empty) .ob-col.is-empty { grid-column: 1 / -1; }
  .dx .ob-col.is-empty { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding-bottom: 8px; }
  .dx .ob-col.is-empty .ob-ch { flex: 0 1 auto; grid-template-columns: auto auto auto; padding-bottom: 2px; }
  .dx .ob-col.is-empty .ob-ch .ob-span { grid-column: 3; text-align: left; }
  .dx .ob-col.is-empty .ob-none { margin-left: auto; padding: 0 6px 2px; border: 0; text-align: right; }
}
@container (max-width: 560px) {
  .dx .ob-board { grid-template-columns: minmax(0, 1fr); }
  .dx .ob-col { padding: 8px 6px 6px; }
  .dx .ob-ch { grid-template-columns: auto auto auto minmax(0, 1fr); }
  .dx .ob-ch .ob-span { grid-column: 4; text-align: right; }
  .dx .ob-fs { width: 100%; }
  .dx .ob-sel { flex: 1 1 150px; min-width: 0; }
  .dx .ob-sel select { width: 100%; max-width: none; }
  .dx .ob-grid { grid-template-columns: minmax(0, 1fr); }
  .dx .ob-sec { margin-top: 30px; }
  /* the timeline: each lane's name over its track, every other month named */
  .dx .ob-lg { margin-left: 0; flex-basis: 100%; }
  .dx .ob-ax, .dx .ob-ln { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
  .dx .ob-ax > span:first-child { display: none; }
  .dx .ob-ax-t span.is-odd { display: none; }
  .dx .ob-ax-t span.is-by-m { visibility: hidden; }
  .dx .ob-ln-t { gap: 2px; padding: 8px 0 0; }
  .dx .ob-tr { min-height: 30px; }
  .dx .ob-tr i { width: 7px; margin-left: -3.5px; --h: calc(7px + (var(--n, 1) - 1) * 5px); }
  /* four lanes on a phone, the rest behind Show all */
  .dx .ob-ln.is-extra { display: none; }
  .dx .ob-more.is-m-only { display: inline-block; }
}