/* Sentinel v2 - home.css
   Home page and Docs fixes (Home's band, its horizon and three lists, Contracts grid, Ask hero, Inbox).
   Owned by the 'home' area of the v2 redesign; tokens come from v2/tokens.css (each colour below falls back to today's tokens,
   so the pages read right before and after the tokens area lands). */

/* ============================================================ the [hidden] attribute always wins inside Docs
   (the All-day event still showed its times, the List view its Today / ‹ / ›: a component's display rule beat [hidden]) */
.dx [hidden] { display: none !important; }
.dx .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.app .dx.dx {
  --hm-brand: var(--brand, var(--brand-blue, #1a2fe6));
  --hm-brand-ink: var(--brand-ink, var(--hm-brand));
  --hm-on-brand: var(--on-brand, var(--text-inverse, #fff));
  --hm-crit: var(--sev-critical, var(--severity-critical, #9f1239));
  --hm-high: var(--sev-high, var(--severity-high, #c2410c));
  --hm-med: var(--sev-medium, var(--severity-medium, #a16207));
  --hm-low: var(--sev-low, var(--severity-low, #5c6571));
  --hm-crit-soft: color-mix(in srgb, var(--hm-crit) 11%, transparent);
  --hm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================ HOME
   The owner, 2026-10-15: "Home B, but without the 5 sub-columns below the main Greeting ... only the 3 big lists, Overdue, Settle
   before signing and Coming up"; "Horizon option also seems best for an animation"; "dont make it feel stacked, make users feel free
   space but not too much". The band: the date, the greeting, one status line, what runs now at its corner, and under the words the
   horizon (v2/fx-horizon.js, laid by v2/home.js; its ceiling keeps every dot below the words). Then the three lists side by side in
   light cards, a few roomy rows each, and at most one quiet line for the documents not yet checked. On a phone, one list at a time. */
.dx .pg.hm2 { max-width: 1240px; padding-top: 28px; }
.dx .hm2-band {
  position: relative; isolation: isolate; overflow: hidden; min-height: 220px; margin-bottom: 44px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--canvas);
}
.dx .hm2-fx { position: absolute; inset: 0; z-index: 0; }
/* without the module (not loaded, or failing): a still dotted horizon along the band's foot */
.dx .hm2-fx.is-static {
  top: auto; height: 72px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-3) 46%, transparent) 0.9px, transparent 1.3px);
  background-size: 11px 9px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 75%);
  mask-image: linear-gradient(to bottom, transparent, #000 75%);
}
.dx .hm2-band-in { position: relative; z-index: 1; display: grid; gap: 10px; max-width: min(760px, 78%); padding: 36px 40px 84px; }
.dx .hm2-band.has-mark .hm2-band-in { max-width: min(760px, calc(100% - 250px)); }
.dx .hm2-band-in > .hm2-state { position: static; justify-self: start; max-width: 100%; margin-top: 4px; }
/* the mark (SNT-151): the three blades turning about their centre inside a ring of orbiting points (fx-places.js puts the ring in
   and sets the pace: quicker while Sentinel works, through the turn's playback rate, so it never jumps) */
.dx .hm2-mark {
  position: absolute; z-index: 1; top: 50%; right: 56px; width: 168px; height: 168px; margin-top: -96px;
  display: grid; place-items: center; pointer-events: none; color: var(--ink); perspective: 360px;
}
.dx .hm2-mark-orb, .dx .hm2-logo { grid-area: 1 / 1; }
.dx .hm2-mark-orb { display: grid; place-items: center; line-height: 0; }
/* the turn: the three blades about the upright axis, the side ones a little in front and behind the middle one */
.dx .hm2-logo { position: relative; width: 60px; height: 60px; transform-style: preserve-3d; animation: hm2-turn 16s linear infinite; opacity: .94; }
.dx .hm2-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dx .hm2-logo svg:nth-child(1) { transform: translateZ(9px); }
.dx .hm2-logo svg:nth-child(3) { transform: translateZ(-9px); }
@keyframes hm2-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.dx .hm2-date { margin: 0; font-size: 13px; color: var(--ink-3); }
.dx .hm2-hello { margin: 0; font: 500 clamp(28px, 3.4vw, 40px)/1.1 var(--font-doc, var(--serif)); letter-spacing: -.015em; color: var(--ink); }
.dx .hm2-status { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* what runs now, at the band's corner: the one document (a link to it) or how many; the horizon says it moves, the dot is still */
.dx .hm2-state {
  position: absolute; z-index: 1; top: 30px; right: 32px; max-width: 40%; display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas);
  font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.dx .hm2-state b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--ink); }
.dx .hm2-state:hover { border-color: var(--line-2); }
.dx .hm2-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hm-brand); }

.dx .hm2-h { margin: 0 0 12px; font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* the three lists */
.dx .hm3-seg { display: none; }
.dx .hm3-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.dx .hm3-lane { min-width: 0; padding: 20px 22px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.dx .hm3-lh { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dx .hm3-lh h2 { margin: 0; font: 600 15px/1.3 var(--font-ui); color: var(--ink); }
.dx .hm3-ct {
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--hover);
  font: 600 12px/20px var(--font-ui); color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums;
}
.dx .hm3-ct.is-crit { background: var(--hm-crit-soft); color: var(--hm-crit); }
.dx .hm3-all { margin-left: auto; font-size: 13px; color: var(--hm-brand-ink); text-decoration: none; white-space: nowrap; }
.dx .hm3-all:hover { text-decoration: underline; }
.dx .hm3-rows { list-style: none; margin: 0; padding: 0; }
.dx .hm3-r { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.dx .hm3-r:last-child { border-bottom: 0; }
.dx .hm3-rl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 15px 2px; color: inherit; text-decoration: none; }
.dx .hm3-rt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.dx .hm3-rt b { font: 500 14px/1.35 var(--font-ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx .hm3-rt > span { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx .hm3-rl:hover .hm3-rt b { color: var(--hm-brand-ink); }
.dx .hm3-rl:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 2px; border-radius: 8px; }
.dx .hm3-r.is-draft .hm3-rt b { color: var(--ink-2); }
.dx .hm3-d { flex: none; display: grid; gap: 2px; width: 50px; }
.dx .hm3-d b { font: 500 13px/1.2 var(--font-mono); color: var(--ink); }
.dx .hm3-d small { font: 11.5px/1.3 var(--font-mono); color: var(--ink-3); }
.dx .hm3-d.is-next b { color: var(--hm-brand-ink); }
.dx .hm3-rv { flex: none; display: flex; align-items: center; }
.dx .hm3-n { font: 500 12.5px var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dx .hm3-n.is-late { color: var(--hm-crit); }
.dx .hm3-sev { display: grid; justify-items: end; gap: 5px; width: 92px; }
.dx .hm3-sev .sb { max-width: 92px; }
.dx .hm3-tally { display: flex; gap: 10px; font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.dx .hm3-g-critical { color: var(--hm-crit); }
.dx .hm3-g-high { color: var(--hm-high); }
.dx .hm3-ok { flex: none; opacity: 0; transition: opacity 120ms var(--hm-ease); }
.dx .hm3-r:hover .hm3-ok, .dx .hm3-ok:focus-visible { opacity: 1; }
@media (hover: none) { .dx .hm3-ok { opacity: 1; } }
.dx .hm3-none { display: flex; align-items: center; gap: 8px; margin: 0; padding: 20px 2px 14px; font-size: 13.5px; color: var(--ink-3); }

/* the documents not yet checked: one quiet line under the lists, its choice opening in place */
.dx .hm3-check { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding: 20px 4px 0; border-top: 1px solid var(--line); }
.dx .hm3-cw { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 13.5px; color: var(--ink-3); }
.dx .hm3-cw b { font-weight: 500; color: var(--ink); }
.dx .hm3-cw .ic { color: var(--ink-3); }
.dx .hm2-pick { list-style: none; margin: 14px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: grid; gap: 2px; }
.dx .hm2-pick li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 4px; font-size: 13.5px; }
.dx .hm2-pick li > a.plain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx .hm2-est { color: var(--ink-3); }

/* severity: glyph first, colour second */
.dx .sv { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 12px; line-height: 1; flex: none; }
.dx .sv-critical { color: var(--hm-crit); }
.dx .sv-high { color: var(--hm-high); }
.dx .sv-medium { color: var(--hm-med); }
.dx .sv-low { color: var(--hm-low); }
.dx .sv-none::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
/* the findings bar: four segments as wide as their counts */
.dx .sb { position: relative; display: flex; gap: 2px; width: 100%; max-width: 120px; height: 6px; border-radius: 3px; overflow: hidden; }
.dx .sb i { display: block; min-width: 4px; flex-basis: 0; }
.dx .sb-critical { background: var(--hm-crit); }
.dx .sb-high { background: var(--hm-high); }
.dx .sb-medium { background: var(--hm-med); }
.dx .sb-low { background: color-mix(in srgb, var(--hm-low) 70%, transparent); }
.dx .sb-none i { flex: 1; background: var(--line); }

/* a counted figure's <integer> (the Obligations timeline sets --n inline) */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }

/* a narrower page: two lists side by side, Coming up across under them */
@container main (max-width: 1100px) {
  .dx .hm3-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .dx .hm3-lane[data-lane="up"] { grid-column: 1 / -1; }
}
/* a phone: one list at a time, chosen above them; what runs now under the words */
@container main (max-width: 640px) {
  .dx .pg.hm2 { padding: 16px 16px 88px; }
  .dx .hm2-band { min-height: 0; margin-bottom: 24px; border-radius: 14px; }
  .dx .hm2-band-in { max-width: none; padding: 24px 20px 12px; }
  .dx .hm2-band.has-mark .hm2-band-in { max-width: none; padding-right: 108px; }
  .dx .hm2-mark { top: 14px; right: 12px; margin-top: 0; width: 92px; height: 92px; }
  .dx .hm2-logo { width: 34px; height: 34px; }
  .dx .hm2-logo svg:nth-child(1) { transform: translateZ(5px); }
  .dx .hm2-logo svg:nth-child(3) { transform: translateZ(-5px); }
  .dx .hm2-state { position: relative; top: auto; right: auto; max-width: calc(100% - 40px); margin: 4px 20px 0; }
  .dx .hm2-band::after { content: ""; display: block; height: 64px; }
  .dx .hm3-seg { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
  .dx .hm3-seg button {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--canvas); font: 500 13.5px var(--font-ui); color: var(--ink-2); white-space: nowrap; cursor: pointer;
  }
  .dx .hm3-seg button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
  .dx .hm3-sn { font: 600 12px var(--font-ui); font-variant-numeric: tabular-nums; opacity: .8; }
  .dx .hm3-lanes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dx .hm3-lane { padding: 6px 16px 4px; }
  .dx .hm3-lane:not(.is-on) { display: none; }
  .dx .hm3-lh { display: none; }
  .dx .hm3-lane .hm3-all { display: none; }
  .dx .hm3-check { flex-direction: column; align-items: flex-start; margin-top: 28px; }
  .dx .hm2-pick li { grid-template-columns: minmax(0, 1fr) auto; }
  .dx .hm2-pick .hm2-est { grid-column: 1; }
}

/* ============================================================ A DRAFT'S DATES, dashed (Calendar, Obligations, Payments, the bell) */
.dx .dr-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; }
.dx .dr-sw { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--canvas); color: var(--ink-2); font: 500 12.5px var(--font-ui); cursor: pointer; }
.dx .dr-sw i { position: relative; width: 26px; height: 16px; border-radius: 999px; background: var(--line-2); transition: background 120ms var(--hm-ease); }
.dx .dr-sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform 160ms var(--hm-ease); }
.dx .dr-sw.is-on { color: var(--ink); }
.dx .dr-sw.is-on i { background: var(--hm-brand); }
.dx .dr-sw.is-on i::after { transform: translateX(10px); }
.dx .dr-sw:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 2px; }
.dx .dr-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px dashed var(--line-2); border-radius: 4px; font: 500 11px/17px var(--font-ui); color: var(--ink-3); vertical-align: 1px; }
.dx .row-dl.is-draft .nx-k { background: transparent !important; outline: 1.5px dashed var(--ink-3); outline-offset: -1.5px; }
.dx .cp.is-draft { background: transparent !important; outline: 1px dashed var(--line-2); outline-offset: -1px; }
.dx .cp.is-draft i { background: transparent !important; outline: 1.5px dashed currentColor; outline-offset: -1.5px; }
.dx .wk-e.is-draft { background: transparent !important; border-style: dashed !important; }
.dx .list-none { padding: 12px 16px; }

/* the inbox: new items marked, mark all read */
.dx .dx-notifs-h { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.dx .menu .dx-notifs-h .btn { width: auto; flex: none; align-items: center; height: 26px; padding: 0 8px; gap: 4px; font-size: 12px; color: var(--ink-2); }
.dx .dx-notifs-h > div { display: grid; gap: 1px; }
.dx .dx-notifs a.is-new { background: color-mix(in srgb, var(--hm-brand) 6%, transparent); }
.dx .dx-notifs a.is-new > div > b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--hm-brand); vertical-align: 2px; }
.dx .dx-notifs a.is-draft > .ic { opacity: .7; }

/* ============================================================ CONTRACTS: finding one (the owner, 2026-10-15: "no borders, too much
   colors, text, mess in one word"). One line per contract between clear rules, in a framed list whose header stays while it
   scrolls; the text neutral - a risk glyph only where a finding is high or critical, a date in red only when it is two weeks away
   or less; quiet tabs, a search that marks what it matched, facets, sortable heads, groups that fold. The cards say the same. */
.dx .pg-contracts { --c-rule: var(--line-2); --c-frame: color-mix(in srgb, var(--line-3, var(--line-2)) 62%, var(--line-2)); }
.dx .pg-contracts .ph { margin-bottom: 18px; }
/* the tabs: words with their counts, the one shown underlined - no boxes, no fills */
.dx .c-tabs { gap: 24px; margin: 0 0 18px; border-bottom-color: var(--c-rule); }
.dx .c-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0; border: 0; background: none;
  font: 500 13.5px var(--font-ui); color: var(--ink-3); white-space: nowrap; cursor: pointer; transition: color 120ms var(--hm-ease);
}
.dx .c-tab .num { font-size: 12px; font-weight: 500; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dx .c-tab:hover { color: var(--ink); }
.dx .c-tab.is-on { color: var(--ink); }
.dx .c-tab.is-on .num { color: var(--ink-3); }
.dx .c-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--ink); }
.dx .c-tab:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: -2px; border-radius: 4px; }

/* the toolbar: the search first, its width its own - a value picked in a facet never narrows it - and the facets beside it in the rest
   of the line, wrapping inside it when they run out of room; under it how many are shown, the order (where its column is gone), the
   grouping and the view */
.dx .c-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.dx .c-q {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 8px; flex: 0 0 360px; max-width: 100%; height: 38px;
  padding: 0 8px 0 12px; border: 1px solid var(--c-frame); border-radius: 10px; background: var(--canvas); color: var(--ink-3);
  transition: border-color 140ms var(--hm-ease), box-shadow 180ms var(--hm-ease);
}
.dx .c-q:hover { border-color: var(--line-3, var(--ink-4)); }
.dx .c-q:focus-within { border-color: color-mix(in srgb, var(--hm-brand) 40%, var(--c-frame)); box-shadow: 0 0 0 3px var(--brand-soft, color-mix(in srgb, var(--hm-brand) 10%, transparent)); color: var(--ink-2); }
.dx .c-q-i { display: inline-grid; flex: none; }
.dx .c-q input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--font-ui); color: var(--ink); }
.dx .c-q input::placeholder { color: var(--ink-3); }
.dx .c-q input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* the field's own box is the frame: the input, the facet menu's find and the selects inside theirs stay bare (the global field rule,
   components.css, would draw a second box inside) */
.dx.dx.dx .pg-contracts .c-q input[type="search"], .dx.dx.dx .pg-contracts .c-q input[type="search"]:focus,
.dx.dx.dx .c-fm .c-fm-q input[type="search"], .dx.dx.dx .c-fm .c-fm-q input[type="search"]:focus,
.dx.dx.dx .pg-contracts label.c-sel select, .dx.dx.dx .pg-contracts label.c-sel select:focus {
  border: 0; background: none; box-shadow: none; border-radius: 0; padding: 0; height: 100%; outline: none;
}
.dx .c-q-k {
  flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2);
  border-radius: 5px; font: 500 11.5px var(--font-mono, ui-monospace, monospace); color: var(--ink-3); background: var(--hover);
}
.dx .c-q:focus-within .c-q-k, .dx .c-q:has(input:not(:placeholder-shown)) .c-q-k { display: none; }
.dx .c-q-x { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; }
.dx .c-q-x:hover { background: var(--hover); color: var(--ink); }
.dx .c-q-x:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 0; }
/* THE BEAM (ported from border-beam, MIT - THIRD-PARTY.md): while the search has the caret, one short arc of the brand travels the
   field's edge - a conic gradient turned by a registered angle, masked to the 1 px ring. Quiet: the arc alone, no bloom, no hue. */
@property --c-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.dx .c-q::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--c-beam), transparent 0 64%, color-mix(in srgb, var(--hm-brand) 22%, transparent) 72%,
    var(--hm-brand) 81%, color-mix(in srgb, var(--hm-brand) 22%, transparent) 88%, transparent 94% 100%);
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity 360ms var(--hm-ease);
}
.dx .c-q:focus-within::after { opacity: 1; animation: c-beam 3.6s linear infinite; }
@keyframes c-beam { to { --c-beam: 360deg; } }

/* the facets: quiet buttons; one with a value picked is tinted and says it */
.dx .c-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 0; min-width: min(100%, 320px); padding: 3px 0; }  /* a first line level with the search's */
.dx .c-fc {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 11px; border: 1px solid var(--c-frame); border-radius: 8px;
  background: transparent; font: 500 13px var(--font-ui); color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: border-color 120ms var(--hm-ease), background 120ms var(--hm-ease), color 120ms var(--hm-ease);
}
.dx .c-fc .ic { color: var(--ink-4); }
.dx .c-fc:hover { border-color: var(--line-3, var(--ink-4)); color: var(--ink); background: var(--canvas); }
.dx .c-fc[aria-expanded="true"] { border-color: var(--line-3, var(--ink-4)); background: var(--canvas); color: var(--ink); }
.dx .c-fc.is-on { border-color: color-mix(in srgb, var(--hm-brand) 34%, transparent); background: var(--brand-soft, color-mix(in srgb, var(--hm-brand) 8%, transparent)); color: var(--ink); }
.dx .c-fc.is-on .ic { color: var(--hm-brand-ink); }
.dx .c-fv { display: inline-block; max-width: 140px; margin-left: -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--hm-brand-ink); }
.dx .c-fv::before { content: ":"; margin-right: 5px; font-weight: 500; color: var(--ink-3); }
.dx .c-fv > span + span::before { content: ", "; }
.dx .c-fc:focus-visible, .dx .c-sel:focus-within { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 1px; }
.dx .c-sel { position: relative; height: 32px; padding: 0 28px 0 10px; border-color: var(--c-frame); background: transparent; color: var(--ink-2); }
.dx .c-sel select { height: 100%; padding: 0; font: 500 13px var(--font-ui); color: var(--ink-2); }
.dx .c-sel > .ic:last-child { position: absolute; right: 9px; top: 50%; margin-top: -7px; color: var(--ink-4); pointer-events: none; }
.dx .c-sel > .ic:first-child { flex: none; color: var(--ink-3); }
.dx .c-sel:hover { border-color: var(--line-3, var(--ink-4)); }
.dx .c-sel-sort { display: none; }
.dx .c-ends { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dx .c-views { flex: none; }
.dx .seg-ic button { width: 32px; padding: 0; display: inline-grid; place-items: center; }
/* how many are shown, and the way back to all of them; the order, the grouping and the view at the end of the line */
.dx .c-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.dx .c-meta { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; min-height: 24px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dx .c-views.seg { padding: 2px; border-radius: 8px; }
.dx .c-views.seg button { height: 26px; width: 30px; border-radius: 6px; }
.dx .c-reset { height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; font: 500 12.5px var(--font-ui); color: var(--hm-brand-ink); cursor: pointer; }
.dx .c-reset:hover { background: var(--brand-soft, var(--hover)); }
.dx .c-reset:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 1px; }

/* THE LIST: a frame, a header that stays at the top while the page scrolls (nothing between it and the page's scroller clips:
   no overflow on the frame), one line per contract with a rule under it */
.dx .c-frame { border: 1px solid var(--c-frame); border-radius: 12px; background: var(--canvas); }
.dx .c-tbl { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.dx .c-tbl col.c-pc { width: 24%; }
.dx .c-tbl col.c-sc { width: 136px; }  /* the longest status whole: "Could not be read" (110 px) */
.dx .c-tbl col.c-rc { width: 64px; }
.dx .c-tbl col.c-nc { width: 104px; }
.dx .c-tbl col.c-dc { width: 104px; }
.dx .c-tbl col.c-st { width: 76px; }
.dx .c-tbl thead th {
  position: sticky; top: 0; z-index: 2; height: 40px; padding: 0 12px; background: var(--canvas); border-bottom: 1px solid var(--c-frame);
  font: 500 12.5px var(--font-ui); color: var(--ink-3); text-align: left; white-space: nowrap;
}
.dx .c-tbl thead th:first-child { border-top-left-radius: 11px; padding-left: 16px; }
.dx .c-tbl thead th:last-child { border-top-right-radius: 11px; }
.dx .c-tbl td {
  height: 46px; padding: 0 12px; border-bottom: 1px solid var(--c-rule); color: var(--ink-2); vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx .c-tbl td.c-c { padding-left: 16px; }
.dx .c-tbl td.c-st { padding: 0 8px 0 0; text-align: right; overflow: visible; }
.dx .c-tbl tbody tr:last-child td { border-bottom: 0; }
.dx .c-tbl tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.dx .c-tbl tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }
.dx .c-tbl tbody tr:hover td:first-child, .dx .c-tbl tbody tr:hover td:last-child { border-radius: 0; }
.dx .c-tbl tbody tr:last-child:hover td:first-child { border-bottom-left-radius: 11px; }
.dx .c-tbl tbody tr:last-child:hover td:last-child { border-bottom-right-radius: 11px; }
.dx .c-tbl tbody tr[data-go]:hover td { background: var(--hover); }
.dx .c-tbl tr[data-go]:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: -2px; }
.dx .c-tbl tr[data-go] { scroll-margin: 48px 0 8px; }  /* a row reached by the arrows clears the header that stays */
.dx .c-tbl .tr-empty td { height: 120px; text-align: center; white-space: normal; color: var(--ink-3); }
/* the heads sort: the one in use in ink with its arrow, the others show theirs on hover */
.dx .c-sb { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 28px; margin-left: -6px; padding: 0 6px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; cursor: pointer; }
.dx .c-sb:hover { color: var(--ink); background: var(--hover); }
.dx .c-sb.is-on { color: var(--ink); }
.dx .c-sb:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 0; }
.dx .c-sa { display: inline-grid; flex: none; opacity: 0; transition: opacity 120ms var(--hm-ease); }
.dx .c-sb:hover .c-sa { opacity: .45; }
.dx .c-sb.is-on .c-sa { opacity: 1; }
.dx .c-tbl th[aria-sort="ascending"] .c-sa .ic { transform: rotate(180deg); }
/* the title: one line, the contract's own words in ink, the file's that tell a twin apart quiet. The title and its family tag are one
   piece (.c-tg) that is never parted: the tag is never cut, the title only when the two alone do not fit. The file's words follow and
   give way first: they shrink to what is left, and where that is under 4.5em they wrap onto a second line the cell's height hides -
   dropped whole, never a stub like "r…" (the whole of each on hover) */
.dx .c-cl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dx .c-tbl .c-cl { flex-wrap: wrap; height: 20px; overflow: hidden; line-height: 20px; }
.dx .c-tg { display: flex; align-items: baseline; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.dx .c-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--ink); }
.dx .c-tf { flex: 1 1 4.5em; max-width: max-content; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-3); }
.dx .c-cl .fam-tag { flex: none; display: inline-block; margin: 0; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 4px; font: 500 11px/16px var(--font-ui); color: var(--ink-3); white-space: nowrap; }
.dx .c-kid { flex: none; align-self: center; width: 10px; height: 9px; margin: -6px 0 0 2px; border-left: 1.5px solid var(--line-3, var(--ink-4)); border-bottom: 1.5px solid var(--line-3, var(--ink-4)); border-bottom-left-radius: 3px; }
/* the other side: the company, its role quiet, "+1" for one more */
.dx .c-p { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dx .c-pn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.dx .c-pr { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-3); }
.dx .c-pr::before { content: "·"; margin-right: 6px; color: var(--ink-4); }
.dx .c-pr.is-solo { font-size: inherit; color: var(--ink-2); }
.dx .c-pr.is-solo::before { content: none; }
.dx .c-pm { flex: none; padding: 0 5px; border-radius: 4px; background: var(--hover-2, var(--hover)); font: 500 11px/17px var(--font-ui); color: var(--ink-3); }
.dx .c-pm.is-hit { background: var(--surface-mark, var(--bg-mark)); color: var(--ink); }
/* a row whose company and role overflow the line leaves the role out whole (clm.js cFit measures it): the company whole, "+1" beside
   it, the role on hover - never both cut ("Брайтмур Аналити… · Исполн… +1"). A role the search found stays, its match marked, so
   the reader sees why the row is there (here, where a laptop's column drops the roles, and on a phone) */
.dx .c-p.is-tight .c-pr:not(.is-solo):not(:has(.c-hit)) { display: none; }
/* ...and it is never the part cut: the company gives way to it ("Брайтмур Анал… · Исполнитель +1" - on a phone the role took the cut
   and read "·…", the match unreadable) */
.dx .c-pr:has(.c-hit) { flex-shrink: 0; max-width: 72%; }
/* the other side is also written under the title, shown only where its column is gone (a narrow window, below) */
.dx .c-tbl .c-sub { display: none; }
/* where it stands: a word */
.dx .c-s { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.dx .c-tbl .c-s { display: block; overflow: hidden; text-overflow: ellipsis; }
.dx .c-tbl .c-s .ic { margin-right: 5px; vertical-align: -2px; }
.dx .c-s-unread, .dx .c-s-reading, .dx .c-s-ended { color: var(--ink-3); }
.dx .c-s-signed { color: var(--ink); font-weight: 500; }
.dx .c-s-signed .ic { color: var(--ink-2); }
.dx .c-s-failed { color: var(--hm-crit); }
/* the risk: a glyph and a count, only for high and critical */
.dx .c-r { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dx .c-rg { display: inline-grid; place-items: center; width: 12px; font-size: 11px; line-height: 1; }
.dx .c-r-critical .c-rg, .dx .c-fg-critical { color: var(--hm-crit); }
.dx .c-r-high .c-rg, .dx .c-fg-high { color: var(--hm-high); }
.dx .c-fg-medium { color: var(--hm-med); }
.dx .c-fg-low { color: var(--hm-low); }
.dx .c-r-q { font-size: 12.5px; color: var(--ink-3); }
.dx .c-none { color: var(--ink-4); }
/* the next date, compact: the day; what falls due beside it where there is room */
.dx .c-n { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 100%; }
.dx .c-n .num { flex: none; color: var(--ink-2); }
.dx .c-n.is-soon .num { color: var(--hm-crit); font-weight: 500; }
.dx .c-ch { font-size: 12.5px; color: var(--ink-3); }
/* Russian words run longer: the status column takes its longest word whole at every width the table is drawn ("Не проанализирован",
   the most common, 134 px, and "Не удалось прочитать", 142), and when it changed its longest ("13 дней назад", 85) */
:root[lang="ru"] .dx .c-tbl col.c-sc { width: 168px; }
:root[lang="ru"] .dx .c-tbl col.c-dc { width: 116px; }
/* what the search matched */
.dx mark.c-hit { padding: 0 1px; margin: 0 -1px; border-radius: 3px; background: var(--surface-mark, var(--bg-mark)); color: inherit; }
/* a group's head: folds its rows */
.dx .c-tbl .c-gr th { position: static; height: 38px; padding: 0 10px; background: var(--surface-sunken, var(--hover)); border-bottom: 1px solid var(--c-rule); }
.dx .c-tbl tbody .c-gr:not(:first-child) th { border-top: 1px solid var(--c-rule); }
.dx .c-gb { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: none; font: 600 13px var(--font-ui); color: var(--ink); text-align: left; cursor: pointer; }
.dx .c-gb:hover { background: var(--hover); }
.dx .c-gb:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 0; }
.dx .c-gb .ic { flex: none; color: var(--ink-3); transition: transform 160ms var(--hm-ease); }
.dx .c-gb[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.dx .c-gl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx .c-gn { flex: none; font-weight: 500; font-size: 12px; color: var(--ink-3); }
/* the star: quiet until the row is pointed at */
.dx .c-star { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; }
.dx .c-star svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.dx .c-star:hover { background: var(--hover); color: var(--ink); }
.dx .c-star.is-on { color: var(--hm-med); }
.dx .c-star.is-on svg { fill: currentColor; }
.dx .c-tbl tr:not(:hover) .c-star:not(.is-on):not(:focus-visible) { opacity: .3; }
/* a contract's own menu (SNT-143): the ⋯ beside the star - quiet until the row is pointed at or focused */
.dx .c-more { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; }
.dx .c-more:hover, .dx .c-more[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.dx .c-tbl tr:not(:hover):not(:focus-within) .c-more:not(:focus-visible) { opacity: .3; }
.dx .c-empty { padding: 24px 4px; }
/* a contract's file name, quiet, beside its own title (Home's Recent contracts) */
.dx .c-file, .dx .hm2-file {
  font: 11.5px/1.4 var(--font-mono, ui-monospace, monospace); color: var(--ink-3); min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dx .hm2-file { margin-right: 6px; }
.dx .hm2-file::after { content: " ·"; font-family: var(--font-ui); }
/* the contract's own page lists its parties under this class too (clm-docs.css): its width there, as it was */
.dx .c-parties { max-width: 260px; font-size: 13px; color: var(--ink-2); }

/* THE CARDS: the same words as the rows - the title, the other side, a status word, the risk glyph, the date - under page 1 */
.dx .cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.dx .cc { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--c-frame); border-radius: 12px; background: var(--canvas); overflow: hidden; cursor: pointer; transition: border-color 120ms var(--hm-ease), box-shadow 160ms var(--hm-ease); }
.dx .cc:hover { border-color: var(--line-3, var(--ink-4)); box-shadow: var(--e1, var(--shadow)); }
.dx .cc:focus-within { border-color: var(--line-3, var(--ink-4)); }
.dx .cc-thumb { position: relative; display: block; height: 118px; background: var(--surface-sunken, var(--hover)); border-bottom: 1px solid var(--c-rule); overflow: hidden; }
.dx .cc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 220ms var(--hm-ease); }
.dx .cc-thumb.is-img .cc-img { opacity: 1; }
.dx .cc-thumb.is-img .cc-face { visibility: hidden; }
.dx .cc-face { position: absolute; inset: 14px 22px 0; display: grid; align-content: start; gap: 7px; padding: 14px 16px; background: var(--canvas); border: 1px solid var(--c-rule); border-bottom: 0; border-radius: 6px 6px 0 0; }
.dx .cc-face b { font: 500 12.5px var(--font-doc, var(--serif)); color: var(--ink-3); }
.dx .cc-face i { display: block; height: 4px; border-radius: 2px; background: var(--line-2); }
.dx .cc-face i:nth-of-type(2) { width: 86%; }
.dx .cc-face i:nth-of-type(3) { width: 92%; }
.dx .cc-face i:nth-of-type(4) { width: 64%; }
.dx .cc-b { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 12px; min-width: 0; }
.dx .cc-t { display: block; }
.dx .cc-t .c-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; }
.dx .cc-t .c-tf { display: block; margin-top: 1px; font-size: 12px; }
.dx .cc-t .fam-tag { display: inline-block; margin-top: 4px; }
.dx .cc-p .c-none { display: none; }
.dx .cc-t a.c-t:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 2px; border-radius: 3px; }
.dx .cc-p { min-width: 0; font-size: 12.5px; min-height: 18px; padding-bottom: 6px; }
.dx .cc-p .c-pn { color: var(--ink-3); }
.dx .cc-f { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--c-rule); font-size: 12.5px; }
.dx .cc-f .c-s { font-size: 12.5px; }
.dx .cc-f .c-n { margin-left: auto; font-size: 12.5px; }
.dx .cc .cc-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
.dx .cc .c-star, .dx .cc .c-more { background: color-mix(in srgb, var(--canvas) 85%, transparent); }
.dx .cc:not(:hover):not(:focus-within) .c-more:not(:focus-visible) { opacity: .55; }
.dx .cc:not(:hover) .c-star:not(.is-on):not(:focus-visible) { opacity: .55; }
.dx .cc-gh { grid-column: 1 / -1; margin: 6px 0 -2px; border-bottom: 1px solid var(--c-rule); padding-bottom: 4px; }
.dx .cc-gh:first-child { margin-top: 0; }
.dx .cc-gh .c-gb { width: auto; max-width: 100%; margin-left: -6px; }

/* A FACET'S MENU: values with a tick box, their counts at the end; the ones nothing would show are faint */
.dx .menu.c-fm { width: 288px; padding: 6px; }
.dx .c-fm-q { display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 0 6px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink-3); }
.dx .c-fm-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 13.5px var(--font-ui); color: var(--ink); }
.dx .c-fm-q:focus-within { border-color: color-mix(in srgb, var(--hm-brand) 45%, var(--line-2)); }
.dx .c-fm-l { max-height: min(340px, 52vh); overflow-y: auto; display: grid; gap: 1px; }
.dx .menu .c-fo { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; font: 400 13.5px var(--font-ui); color: var(--ink); }
.dx .menu .c-fo:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: -2px; }
.dx .menu .c-fo.is-zero { color: var(--ink-4); }
.dx .c-cb { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--line-3, var(--ink-4)); border-radius: 4px; color: transparent; }
.dx .c-fo.is-on .c-cb { background: var(--hm-brand); border-color: var(--hm-brand); color: var(--hm-on-brand); }
.dx .menu .c-fo .c-cb .ic { margin: 0; color: inherit; }
.dx .menu .c-fl { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: inherit; }
.dx .menu .c-fn { display: block; flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dx .c-fm-f { display: flex; justify-content: flex-end; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.dx .menu .c-fm-f .c-reset { display: inline-flex; width: auto; align-items: center; padding: 0 10px; }

/* narrower - a laptop's window (1256-1375 px; the main column 1001-1120): first the role goes from the Counterparty column (it stays
   on hover) and the company takes less, then when it changed goes - the order is said, and changed, in a menu beside the grouping
   then - and the other columns narrow, so neither the title nor the company is cut to a stub; under 1000 px the search takes a line
   of its own. A column that goes keeps its place in the table's grid at no width, its cells hidden: a group's head spans all seven,
   and with the column taken out of the grid (display: none) the head made columns of its own that took two thirds of the title's */
@container main (max-width: 1120px) {
  .dx .c-tbl td.c-pc .c-pr:not(.is-solo):not(:has(.c-hit)) { display: none; }  /* a role the search found stays, marked */
  .dx .c-tbl col.c-pc { width: 21%; }
  .dx .c-tbl col.c-nc { width: 96px; }
  :root[lang="ru"] .dx .c-tbl col.c-dc { width: 110px; }
}
@container main (max-width: 1060px) {
  .dx .c-tbl col.c-dc, :root[lang="ru"] .dx .c-tbl col.c-dc { width: 0; }  /* Russian's own width for it beaten too */
  .dx .c-tbl th.c-dc, .dx .c-tbl td.c-dc { padding: 0; overflow: hidden; visibility: hidden; }
  .dx .c-sel-sort { display: inline-flex; align-items: center; gap: 6px; }
  .dx .c-tbl col.c-pc { width: 24%; }
  .dx .c-tbl col.c-rc { width: 58px; }
  .dx .c-tbl col.c-st { width: 40px; }
}
@container main (max-width: 1000px) {
  .dx .c-q { flex-basis: 100%; }
}
/* Russian's status and change columns are wider (168 and 116 px against 136 and 104), so each step comes 50 px sooner there and the
   title keeps the room it has in English - 300 px at least, the look-alikes' words whole ("Data Licence Agreement rc fx2 licence v2
   (txt)"), the later version's title whole beside its tag. When it changed goes up to a main column of 1110 px (a 1320-1365 px window
   with the sidebar open read "rc fx2 licence…" twice), the role up to 1170 (1376-1425: "Data Licence Agre… [Новая редакция]") */
@container main (1060px < width <= 1110px) {
  :root[lang="ru"] .dx .c-tbl col.c-dc { width: 0; }
  :root[lang="ru"] .dx .c-tbl th.c-dc, :root[lang="ru"] .dx .c-tbl td.c-dc { padding: 0; overflow: hidden; visibility: hidden; }
  :root[lang="ru"] .dx .c-sel-sort { display: inline-flex; align-items: center; gap: 6px; }
  :root[lang="ru"] .dx .c-tbl col.c-pc { width: 24%; }
  :root[lang="ru"] .dx .c-tbl col.c-rc { width: 58px; }
  :root[lang="ru"] .dx .c-tbl col.c-st { width: 40px; }
}
@container main (1120px < width <= 1170px) {
  :root[lang="ru"] .dx .c-tbl td.c-pc .c-pr:not(.is-solo):not(:has(.c-hit)) { display: none; }
  :root[lang="ru"] .dx .c-tbl col.c-pc { width: 21%; }
  :root[lang="ru"] .dx .c-tbl col.c-nc { width: 96px; }
  :root[lang="ru"] .dx .c-tbl col.c-dc { width: 110px; }
}
/* narrower still - a 1000-1255 px window with the sidebar open, a tablet (the main column 1000 px or less): two columns side by side
   would cut the titles, the words that tell look-alikes apart and every company, so the Counterparty column goes and the other side
   is written under the title, quiet, with its role where it fits. Each row two lines - the title, its tag and the file's words whole on
   the first - and the status, the risk and the date stay in their columns under their heads. The title's line flows here and on a
   phone: the title, its tag and the file's words each whole, the file's words - where look-alikes differ, at their end ("rc fx2
   licence en", "rc fx2 licence v2 (txt)") - on the title's line where they fit and on a line of their own where they do not, never
   cut or dropped; the row grows a line for them */
@container main (max-width: 1000px) {
  .dx .c-tbl col.c-pc { width: 0; }
  .dx .c-tbl th.c-pc, .dx .c-tbl td.c-pc { padding: 0; overflow: hidden; visibility: hidden; }
  .dx .c-tbl td { height: 60px; }
  .dx .c-tbl td.c-c { padding-top: 8px; padding-bottom: 8px; }  /* a row that grows a line keeps clear of its rules */
  .dx .c-tbl .c-cl { display: block; height: auto; overflow: visible; white-space: normal; line-height: 20px; }
  .dx .c-tbl .c-tg { display: inline; }
  .dx .c-tbl .c-t { display: inline; margin-right: 8px; white-space: normal; overflow-wrap: anywhere; }
  .dx .c-tbl .c-cl .fam-tag { margin-right: 8px; vertical-align: 1px; }
  .dx .c-tbl .c-tf { display: inline-block; max-width: 100%; vertical-align: top; }
  .dx .c-tbl .c-kid { display: inline-block; margin: 0 6px 0 2px; vertical-align: 4px; }
  .dx .c-tbl .c-sub { display: block; margin-top: 2px; font-size: 12.5px; line-height: 18px; }
  .dx .c-tbl .c-sub .c-pr:not(.is-solo) { font-size: inherit; }
  .dx .c-tbl .c-sub .c-none { visibility: hidden; }  /* no other side: the line kept, so every title stands at one height */
  .dx .c-tbl col.c-rc { width: 52px; }
  .dx .c-tbl col.c-st { width: 36px; }
}
/* a phone, a phone held sideways, an iPad's Split View (the main column 720 px or less): each contract two lines - its title and
   risk; the other side, where it stands and its next date - the heads gone (the sort is a menu then), the strips scroll sideways.
   From 640 to 720 px the columns left the title too little room (in Russian 270 px: "Mutual Non-disclosure Agreem…", three rows of
   just "Data Licence Agreement"); the title takes the row's width here */
@container main (max-width: 720px) {
  .dx .pg-contracts .ph { flex-wrap: wrap; }
  /* the tabs and the facets scroll sideways, edge to edge, their end faded so it shows there is more (the last one clear of the fade
     once scrolled to) */
  .dx .c-tabs, .dx .c-facets {
    margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 32px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .dx .c-tabs::-webkit-scrollbar, .dx .c-facets::-webkit-scrollbar { display: none; }
  .dx .c-tabs { gap: 18px; margin-bottom: 14px; }
  .dx .c-tab, .dx .c-fc { flex: none; }
  .dx .c-q { flex: 1 1 100%; }
  .dx .c-facets { flex: 1 1 100%; flex-wrap: nowrap; margin-top: -3px; margin-bottom: -3px; padding-top: 3px; padding-bottom: 3px; }  /* room for a focus ring */
  .dx .c-ends { order: -1; flex: 1 1 100%; }  /* the order and the grouping on a line of their own, above the count */
  .dx .c-sel { flex: 1 1 0; min-width: 0; }
  .dx .c-sel-sort { gap: 6px; }
  .dx .c-sel select { width: 100%; min-width: 0; text-overflow: ellipsis; }
  .dx .c-sel-sort { display: inline-flex; align-items: center; }
  .dx .c-q-k { display: none; }
  .dx .c-tbl, .dx .c-tbl tbody { display: block; width: 100%; }
  .dx .c-tbl colgroup, .dx .c-tbl thead { display: none; }
  .dx .c-tbl tr[data-go] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "t t r" "p s n"; align-items: baseline;
    column-gap: 10px; row-gap: 3px; padding: 11px 14px; border-bottom: 1px solid var(--c-rule);
  }
  .dx .c-tbl tbody tr[data-go]:last-child { border-bottom: 0; }
  .dx .c-tbl tr[data-go] td { display: block; height: auto; padding: 0; border: 0; min-width: 0; background: transparent !important; }
  .dx .c-tbl tbody tr[data-go]:hover { background: var(--hover); }
  .dx .c-tbl td.c-c { grid-area: t; padding: 0; }
  .dx .c-tbl .tr-kid td.c-c { padding-left: 4px; }
  .dx .c-tbl td.c-rc { grid-area: r; justify-self: end; }
  .dx .c-tbl td.c-pc { grid-area: p; font-size: 12.5px; visibility: visible; }
  .dx .c-tbl td.c-sc { grid-area: s; justify-self: end; }
  .dx .c-tbl td.c-nc { grid-area: n; justify-self: end; font-size: 12.5px; }
  .dx .c-tbl tr[data-go] td.c-dc, .dx .c-tbl tr[data-go] td.c-st { display: none; }
  .dx .c-tbl .c-s { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }  /* longer words (Russian) wrap, never cut */
  .dx .c-tbl .c-pn { color: var(--ink-3); }
  .dx .c-tbl .c-pr:not(.is-solo):not(:has(.c-hit)), .dx .c-tbl .c-sub { display: none; }  /* a role the search found stays, marked */
  .dx .c-tbl td.c-pc .c-none, .dx .c-tbl td.c-rc .c-none, .dx .c-tbl td.c-nc .c-none { display: none; }
  .dx .c-tbl .c-gr, .dx .c-tbl .c-gr th { display: block; }
  .dx .c-tbl .tr-empty, .dx .c-tbl .tr-empty td { display: block; height: auto; padding: 32px 16px; }
}
/* The cards keep two wide columns down to a 641 px main column (a phone held sideways, an iPad's Split View): the phone's grid of
   150 px cards, short thumbnails and a wrapping foot starts at 640 px - moved with the list's phone rows to 720 px it cut every card
   at 680-735 px windows ("rc fx2 licence v2 (d…" against "(t…", every company) */
@container main (max-width: 640px) {
  .dx .cc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .dx .cc-thumb { height: 92px; }
  .dx .cc-f { flex-wrap: wrap; gap: 4px 10px; }
}

/* ============================================================ ONE CONTRACT: the overview */
.dx .c-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.dx .c-party { display: inline-flex; align-items: center; gap: 4px; padding-left: 10px; position: relative; font-size: 13px; }
.dx .c-party::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--party-a, #0f766e); }
.dx .c-party-b::before { background: var(--party-b, #6d28d9); }
.dx .c-party b { font-weight: 500; }
.dx .c-track { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; margin: 0 0 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.dx .ct > a, .dx .ct > span { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; border-radius: 6px; color: var(--ink-3); font-size: 13px; }
.dx .ct > a:hover { background: var(--hover); color: var(--ink); }
.dx .ct-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--hm-on-brand); }
.dx .ct.is-done .ct-dot { background: var(--hm-brand); border-color: var(--hm-brand); }
.dx .ct.is-done > * { color: var(--ink-2); }
.dx .ct.is-now .ct-dot { border-color: var(--hm-brand); box-shadow: inset 0 0 0 3px var(--canvas), inset 0 0 0 9px var(--hm-brand); }
.dx .ct.is-now .ct-l { color: var(--ink); font-weight: 600; }
.dx .ct-sep { width: 18px; height: 1px; background: var(--line-2); flex: none; }
.dx .ct-sp { flex: 1; }
.dx .c-verdict { padding: 18px 20px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); background: var(--canvas); }
.dx .c-verdict.is-urgent { border-left-color: var(--hm-crit); }
.dx .c-verdict.is-warn { border-left-color: var(--hm-med); }
.dx .c-verdict.is-ok { border-left-color: var(--green); }
.dx .c-v-h { margin: 6px 0 0; font: 500 20px/1.3 var(--font-doc, var(--serif)); letter-spacing: -.01em; color: var(--ink); }
.dx .c-v-s { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); max-width: 72ch; }
.dx .c-v-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.dx .c-v-f .sb { width: 120px; }
.dx .c-v-f .btn { margin-left: auto; }
.dx .c-fix { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dx .c-fix li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.dx .c-fix li b { display: block; font-weight: 500; font-size: 14px; }
.dx .c-fix .sv { margin-top: 1px; }
.dx .c-secs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dx .c-sec { height: 22px; padding: 0 7px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--canvas); font: 500 12px var(--font-mono, ui-monospace, monospace); color: var(--ink-2); cursor: pointer; }
.dx .c-sec:hover { border-color: var(--hm-brand); color: var(--hm-brand-ink); }
.dx .c-sec:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 1px; }
.dx .c-kt .kv-row dd { line-height: 1.5; }
.dx .c-kt .kt-rest { display: none; }
.dx .c-kt .kv-row.is-open .kt-rest { display: inline; }
.dx .kt-more { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--hm-brand-ink); font: 500 12.5px var(--font-ui); cursor: pointer; }
.dx .kt-more .kt-c, .dx .kv-row.is-open .kt-more .kt-o { display: none; }
.dx .kv-row.is-open .kt-more .kt-c { display: inline; }
.dx .kv-row:not(.is-open) .kt-more::before { content: "… "; color: var(--ink-3); }
.dx .c-kt-miss { margin: 10px 0 0; }
.dx .c-pmark { width: 3px; align-self: stretch; border-radius: 2px; background: var(--party-a, #0f766e); flex: none; }
.dx .c-pmark-b { background: var(--party-b, #6d28d9); }
.dx .c-side-q { color: var(--ink-2); }
.dx .c-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dx .c-pick button { height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--canvas); color: var(--ink); font: 500 12.5px var(--font-ui); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx .c-pick button:hover { border-color: var(--ink-3); }
.dx .c-pick button.is-on { background: var(--hm-brand); border-color: var(--hm-brand); color: var(--hm-on-brand); }
.dx .c-pick button:focus-visible { outline: 2px solid var(--focus, var(--hm-brand)); outline-offset: 2px; }
.dx .finding-sev .sev { display: inline-flex; align-items: center; gap: 4px; }
@container main (max-width: 760px) {
  .dx .c-track { gap: 4px 2px; }
  .dx .ct-sep { width: 8px; }
  .dx .ct-sp { flex-basis: 100%; height: 0; }
  .dx .c-v-f .btn { margin-left: 0; }
}

/* ============================================================ ASK: a hero page */
.dx .pg-ask { max-width: 1080px; }
.dx .ask-hero { position: relative; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px 0 8px; }
.dx .ask-hero h1 { margin: 0; font: 500 clamp(28px, 3.4vw, 40px)/1.15 var(--font-doc, var(--serif)); letter-spacing: -.015em; }
.dx .ask-lede { margin: 0; max-width: 62ch; font-size: 15px; color: var(--ink-2); }
/* the hero's orb (SNT-149): its canvas is put in by fx-places.js; the box keeps its place before the orb lands */
.dx .ask-orb { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 2px; }
.dx .ask-comp { width: 100%; max-width: 760px; margin-top: 12px; text-align: start; border: 1px solid var(--line-2); border-radius: 14px; background: var(--canvas); box-shadow: 0 1px 2px rgba(16, 20, 26, .04); transition: border-color 120ms var(--hm-ease), box-shadow 160ms var(--hm-ease); }
.dx .ask-comp:focus-within { border-color: var(--hm-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hm-brand) 16%, transparent); }
.dx .ask-comp textarea { display: block; width: 100%; min-height: 64px; max-height: 220px; padding: 16px 18px 6px; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--ink); font: 400 17px/1.5 var(--font-ui); }
.dx .ask-comp textarea::placeholder { color: var(--ink-3); }
.dx .ask-comp-f { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 10px 10px 18px; }
.dx .ask-comp-f .ask-status { margin: 0; flex: 1 1 auto; }
.dx .ask-comp-f .ask-hint { margin-left: auto; }
.dx .ask-comp-f .btn { height: 34px; padding: 0 18px; }
.dx .ask-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 28px; }
.dx .ask-body.has-hist { grid-template-columns: minmax(0, 1fr) 260px; }
.dx .ask-res { min-width: 0; }
.dx .ask-res .ask-tips { justify-content: center; }
.dx .ask-hist { min-width: 0; position: sticky; top: 24px; align-self: start; }
.dx .ask-hist-h { display: flex; align-items: center; justify-content: space-between; }
.dx .ask-hist-h .hm2-h { margin: 0; }
.dx .ask-hist ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.dx .ask-hist button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); text-align: start; font: 13px/1.4 var(--font-ui); cursor: pointer; }
.dx .ask-hist button:hover { background: var(--hover); color: var(--ink); }
.dx .ask-hist button.is-on { background: color-mix(in srgb, var(--hm-brand) 8%, transparent); color: var(--ink); }
.dx .ask-hist button > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dx .ask-ans .ask-st { animation: ask-in 360ms var(--hm-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes ask-in { from { opacity: 0; } }
.dx .ask-cite { cursor: pointer; }
.dx .ask-src-h .c-sec { height: 20px; }
@container main (max-width: 900px) {
  .dx .ask-body.has-hist { grid-template-columns: minmax(0, 1fr); }
  .dx .ask-hist { position: static; }
}
@container main (max-width: 640px) {
  .dx .ask-hint { display: none; }
  .dx .ask-comp textarea { font-size: 16px; }
  .dx .ask-hero { padding-top: 12px; }
}

/* ============================================================ COMPARE: navigator and a sanity check */
.dx .cmp-warn { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--hm-med) 40%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--hm-med) 8%, var(--canvas)); }
.dx .cmp-warn .ic { color: var(--hm-med); margin-top: 2px; }
.dx .cmp-warn div { display: grid; gap: 2px; font-size: 13.5px; }
.dx .cmp-warn span { color: var(--ink-2); }
.dx .cmp-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 8px; padding: 8px 0; background: var(--bg-app, var(--canvas)); border-bottom: 1px solid var(--line); }
.dx .cmp-nav .cmp-sum { margin: 0; }
.dx .cmp-pos { color: var(--ink-2); min-width: 92px; text-align: right; }
.dx .cmp-row.is-cur { box-shadow: inset 3px 0 0 var(--hm-brand); padding-left: 12px; background: color-mix(in srgb, var(--hm-brand) 4%, transparent); }

/* ============================================================ PHONE FIXES */
@container main (max-width: 760px) {
  .dx .fv-act { flex: 1 1 100%; min-width: 0; }
  .dx .fv-h { padding: 10px 12px; }
}
@container main (max-width: 640px) {
  .dx .list { margin: 0; }
  .dx .row { padding-left: 4px; padding-right: 4px; }
  .dx .row + .row::before { left: 4px; right: 4px; }
  .dx .c-bar .field { flex: 1 1 100%; order: 3; }
}

/* the docs-pages wiring: a past question forgotten from its row, what an answer cost, preparing the archive on a click, Obligations | Payments */
.dx .ask-hist li { display: flex; align-items: flex-start; gap: 2px; }
.dx .ask-hist li > button[data-act="ask-hist"] { flex: 1 1 auto; min-width: 0; }
.dx .ask-hist .ask-hist-x { flex: none; width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; opacity: 0; color: var(--ink-3); }
.dx .ask-hist li:hover .ask-hist-x, .dx .ask-hist .ask-hist-x:focus-visible { opacity: 1; }
@media (hover: none) { .dx .ask-hist .ask-hist-x { opacity: 1; } }
.dx .ask-cost { margin: 8px 0 0; }
.dx .ask-status { flex-wrap: wrap; }
.dx .ask-status .btn { margin-left: 2px; }
.dx .ask-status.is-off { color: var(--ink-2); }
.dx .ph .obl-nav { flex: none; }