/* ============================================================
   Sentinel Docs — the pieces of the page that read the account's own
   documents (clm.js, 2026-09-29): Files as an explorer beside the
   selected document and its original, the contract's Original tab,
   the context menu, notifications, the upload tray, the loading state.
   Built on clm.css's tokens, so every theme follows.
============================================================ */

/* ---------------- small things ---------------- */
.dx .hm-main, .dx .finding-b { min-width: 0; }
.dx.dx .btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.dx.dx .btn-danger .ic { color: inherit; }
.dx.dx .btn-danger:hover { background: var(--red); opacity: .88; }
.dx .st-draft { --c: var(--amber); }
.dx .st-ended { --c: var(--ink-4); color: var(--ink-3); }
.dx .row-i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); color: var(--ink-3); }
.dx .fx-empty > .btn { margin-top: 12px; }
.dx .fx-empty > span { max-width: 52ch; line-height: 1.55; }
.dx .seg-sm button { height: 26px; padding: 0 9px; font-size: 12px; }
.dx .kv-terms .kv-row { grid-template-columns: 180px minmax(0, 1fr) auto; }
.dx .kv-terms dd { overflow-wrap: anywhere; }
.dx .kv-ref { max-width: 180px; font: 500 11.5px var(--font-mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx .ph-c h1 { overflow-wrap: anywhere; }
/* a document's name is read whole on Home: two documents that read the same differ only at the end ("… (docm)") */
.dx .td-b b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* a deadline marked done: struck through, the day greyed - and the change eases in */
.dx .row-dl .row-main b, .dx .row-dl .when b, .dx .row-dl .when span { transition: color .25s ease, text-decoration-color .25s ease; }
.dx .row-dl.is-done .row-main b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.dx .row-dl.is-done .when b, .dx .row-dl.is-done .when span { color: var(--ink-4); }
.dx .row-dl.is-done .nx-k { opacity: .45; }
.dx .row-dl .row-end .btn .ic { width: 13px; height: 13px; }
.dx .dl-h { margin: 40px 0 6px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.dx .dl-h .muted { font-weight: 400; font-size: 13px; }
/* a deadline listed outside a calendar month says its date in full: "Mar 1 ’28" over "in 519 days" */
.dx .row-dl .when.when-wide { flex: 0 0 104px; }
.dx .row-dl .when.when-wide b { font-size: 14px; font-weight: 500; white-space: nowrap; }
.dx .row-dl .when.when-wide span { white-space: nowrap; }
@container main (max-width: 520px) {
  .dx .row-dl:has(.when-wide) { grid-template-columns: 78px 8px minmax(0, 1fr); }
  .dx .row-dl .when.when-wide b { font-size: 13px; }
}

/* ---------------- loading ---------------- */
.dx .dxl-skel { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.dx .dxl-skel i {
  display: block; height: 16px; border-radius: 6px;
  background: linear-gradient(90deg, var(--hover) 0%, var(--hover-2) 50%, var(--hover) 100%); background-size: 200% 100%;
  animation: dxl-shimmer 1.3s ease-in-out infinite;
}
.dx .dxl-skel i:nth-child(1) { width: 34%; height: 30px; margin-bottom: 22px; }
.dx .dxl-skel i:nth-child(2) { width: 86%; }
.dx .dxl-skel i:nth-child(3) { width: 70%; }
.dx .dxl-skel i:nth-child(4) { width: 78%; }
.dx .dxl-skel-sm { margin: 4px 0 24px; }
.dx .dxl-skel-sm i:nth-child(1) { width: 58%; height: 16px; margin: 0; }
@keyframes dxl-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ============================================================
   FILES - the explorer on a page of its own, and each document on a page of its own (the owner, 2026-10-13: "make the file
   viewer bigger ... make it a sub-page itself, and make it easier to navigate the content of the file")
============================================================ */
.dx .pg-files3 { max-width: 1240px; padding-top: 24px; padding-bottom: 32px; }
.dx .fx3 {
  min-height: calc(100vh - var(--modebar-h) - 56px);
  border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; background: var(--bg-pane);
}
.dx .fx3 .xp { background: var(--bg-pane); }

/* the document's page: the explorer on its left; on its right the document - its facts and ways out above, the original under
   them, its contents in a panel beside it when opened */
.dx .fv { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100vh - var(--modebar-h)); min-height: 420px; }
.dx .fv-files { min-height: 0; overflow-y: auto; border-right: 1px solid var(--border-subtle); background: var(--bg-pane); scrollbar-width: thin; }
.dx .fv-files .xp { background: var(--bg-pane); }
.dx .fv-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
/* another document picked beside the explorer: only the document crossfades (SentinelMotion.navigate type "docsel") */
html[data-vt="docsel"] .dx .fv-main { view-transition-name: dx-detail; }
.dx .fv-h {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px 12px 22px; min-width: 0;
  border-bottom: 1px solid var(--border-subtle); background: var(--bg-app);
}
.dx .fv-id { flex: 1 1 320px; min-width: 0; }
.dx .fv-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dx .fv-title h1 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx .fv-meta { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 12.5px; color: var(--ink-3); }
.dx .fv-f { display: inline-flex; gap: 4px; }
.dx .fv-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: none; }
.dx .fv-step { display: inline-flex; gap: 2px; margin-left: 4px; }
.dx .fv-step .is-off { opacity: .35; cursor: default; }
.dx .fv-step .is-off:hover { background: transparent; }
.dx .fv-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.dx .fv.toc-open .fv-body { grid-template-columns: minmax(0, 1fr) 290px; }
.dx .fv-toc { display: none; flex-direction: column; min-height: 0; border-left: 1px solid var(--border-subtle); background: var(--bg-pane); }
.dx .fv.toc-open .fv-toc { display: flex; }
.dx .fv-toc-h { display: flex; flex-direction: column; gap: 8px; flex: none; padding: 12px 12px 10px; border-bottom: 1px solid var(--border-hairline); }
.dx .fv-toc-h b { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.dx .fv-q {
  height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: var(--bg-sunken);
  font: 12.5px var(--font-ui); color: var(--ink); outline: none; transition: border-color .12s, background .12s;
}
.dx .fv-q:focus { border-color: var(--focus, var(--accent)); background: var(--bg-pane); }
.dx .fv-list { min-height: 0; overflow-y: auto; padding: 6px 6px 18px; scrollbar-width: thin; }
.dx .fv-ti {
  display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 1px 0; padding: 5px 8px 5px calc(8px + var(--d, 0) * 14px);
  border: 0; border-radius: 6px; background: none; text-align: left; font: 12.5px/1.4 var(--font-ui); color: var(--ink-2); cursor: pointer;
}
.dx .fv-ti:hover { background: var(--bg-soft); color: var(--ink); }
.dx .fv-ti.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.dx .fv-ti.is-head { margin-top: 8px; font-weight: 600; color: var(--ink); }
.dx .fv-ti:first-child { margin-top: 0; }
.dx .fv-ti .n { flex: none; min-width: 2.4em; font: 11.5px/1.4 var(--font-mono); color: var(--ink-3); }
.dx .fv-ti .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx .fv-none { margin: 0; padding: 16px 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.dx .fv-doc { min-width: 0; min-height: 0; }
.dx .fv-doc > .pv { height: 100%; border-radius: 0; }
.dx .fv.toc-open .fv-toc-btn { background: color-mix(in srgb, var(--accent) 12%, var(--bg-pane)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle)); }
/* a narrower page: the explorer gives way to the document (Files, in the bar, is one click back to it); the contents lie over it */
@container main (max-width: 980px) {
  .dx .fv { grid-template-columns: minmax(0, 1fr); }
  .dx .fv-files { display: none; }
}
@container main (max-width: 760px) {
  .dx .fv.toc-open .fv-body { grid-template-columns: minmax(0, 1fr); }
  .dx .fv-toc { position: absolute; z-index: 6; top: 0; bottom: 0; right: 0; width: min(320px, 86%); box-shadow: var(--shadow); }
}
@media (max-width: 760px) {
  .dx .fv { height: calc(100dvh - var(--modebar-h) - var(--phone-bar-h, 52px)); }
}
}

/* ============================================================
   ONE CONTRACT - parties, "we are", the original
============================================================ */
.dx .c-parties { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dx .c-parties li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dx .c-parties li > div { display: flex; flex-direction: column; min-width: 0; }
.dx .c-parties b { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.dx .c-parties span { font-size: 12px; color: var(--ink-3); }
.dx .c-side { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.dx .c-side .seg { flex-wrap: wrap; overflow: visible; }
.dx .c-side .seg button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dx .c-orig-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dx .c-orig {
  height: min(1100px, calc(100vh - 140px)); min-height: 480px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--hover);
  animation: dx-in .28s var(--ease) both;
}
.dx .pg-orig { padding-bottom: 32px; }

/* ============================================================
   LAYERS - the context menu (the explorer's and the page's),
   notifications, the upload tray
============================================================ */
.dx .dx-ctx {
  position: fixed; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto;
  padding: 5px; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow);
  animation: dx-pop .14s var(--ease) both; transform-origin: top left;
}
.dx .dx-ctx-i {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px;
  border: 0; border-radius: 7px; background: none; font: 13px var(--font-ui); color: var(--ink); text-align: left; cursor: pointer;
}
.dx .dx-ctx-i:hover, .dx .dx-ctx-i:focus-visible { background: var(--hover); outline: 0; }
.dx .dx-ctx-ic { flex: none; width: 16px; height: 16px; display: grid; place-items: center; color: var(--ink-3); }
.dx .dx-ctx-ic svg { width: 15px; height: 15px; }
.dx .dx-ctx-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx .dx-ctx-h { flex: none; font-size: 11.5px; color: var(--ink-4); }
.dx .dx-ctx-i.is-danger, .dx .dx-ctx-i.is-danger .dx-ctx-ic { color: var(--red); }
.dx .dx-ctx-i.is-danger:hover { background: color-mix(in srgb, var(--red) 8%, var(--canvas)); }
.dx .dx-ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); }

.dx .dx-notifs { width: 380px; max-height: min(520px, calc(100vh - 80px)); overflow-y: auto; }
.dx .dx-notifs-h { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.dx .dx-notifs-h b { font-size: 14px; font-weight: 600; }
.dx .dx-notifs b.red { color: var(--red); }
.dx .dx-notifs b.amber { color: var(--amber); }
.dx .dx-notifs-none { padding: 14px 12px; margin: 0; }

.dx .dx-up {
  position: fixed; right: 20px; bottom: 20px; z-index: 110; width: min(360px, calc(100vw - 32px));
  padding: 6px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--canvas); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .28s var(--ease);
}
.dx .dx-up.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dx .dx-up-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 4px 10px; }
.dx .dx-up-h b { font-size: 13px; font-weight: 600; }
.dx .dx-up-h .icon-btn { width: 28px; height: 28px; }
/* the server's kinds and size limit, under the tray's head */
.dx .dx-up-lim { margin: 0; padding: 0 10px 6px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.dx .dx-up-r {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 9px 10px 12px; border-radius: 8px; font-size: 13px; overflow: hidden; animation: dx-in .22s var(--ease) both;
}
.dx .dx-up-r + .dx-up-r { border-top: 1px solid var(--line); border-radius: 0; }
.dx .dx-up-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.dx .dx-up-s { font-size: 12px; color: var(--ink-3); max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx .dx-up-r.is-failed .dx-up-s { color: var(--red); white-space: normal; }
.dx .dx-up-r.is-done .dx-up-s { color: var(--green); }
.dx .dx-up-bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.dx .dx-up-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 2px; background: var(--ink); animation: dx-up-run 1.1s ease-in-out infinite; }
.dx .dx-up-r.is-read .dx-up-bar i { background: var(--blue); }
.dx .dx-up-r.is-done .dx-up-bar i { width: 100%; animation: none; background: var(--green); transition: width .3s ease; }
.dx .dx-up-r.is-failed .dx-up-bar { display: none; }
@keyframes dx-up-run { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

/* ---- the owner's list of 2026-10-10 (clm.js): a document's family, the approval route, the auto-renewal, questions asked of the
   whole archive, two versions compared */
.dx .fam-up a, .dx .fam-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.dx .fam-act { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; }
.dx .fam-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dx .fam-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 13px; }
.dx .fam-list li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dx .fam-list li > div a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx .fam-list .lnk { flex: none; }
.dx .fam-tag { display: block; margin-top: 1px; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.dx .tr-kid .cell-main { position: relative; padding-left: 26px; }
.dx .tr-kid .cell-main::before {
  content: ""; position: absolute; left: 8px; top: 2px; width: 10px; height: 14px;
  border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-bottom-left-radius: 4px;
}
.dx .route { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.dx .route li { position: relative; display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 10px; padding: 0 0 12px; }
.dx .route li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 2px; width: 1px; background: var(--line-2); }
.dx .route-dot { width: 13px; height: 13px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--ink-4); background: var(--canvas); box-sizing: border-box; transition: background .2s ease, border-color .2s ease; }
.dx .route li.is-approved .route-dot { border-color: var(--green); background: var(--green); }
.dx .route li.is-rejected .route-dot { border-color: var(--red); background: var(--red); }
.dx .route li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.dx .route-note { color: var(--ink-2); font-style: italic; }
.dx .box .callout-act { margin-top: 4px; gap: 8px; }
.dx .renew-day b { font-weight: 600; }
.dx .renew-who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
/* support access (the contract Overview): the length and the ticket side by side, the replays a quiet list under them */
.dx .sup-form { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 8px; margin: 8px 0 4px; }
.dx .sup-form .fld input, .dx .sup-form .fld select { height: 32px; font-size: 13px; }
.dx .sup-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.dx .ask-bar { display: flex; gap: 10px; margin: 4px 0 24px; }
.dx .ask-bar input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--canvas); font: 15px var(--font-ui); color: var(--ink); outline: 0;
}
.dx .ask-bar input:focus { border-color: var(--ink-4); box-shadow: 0 0 0 3px var(--hover); }
.dx .ask-bar .btn { height: 42px; flex: none; }
.dx .ask-a { white-space: pre-wrap; }
.dx .row-main > span.ask-q { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dx .cmp-pair { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dx .cmp-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dx .cmp-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.dx .cmp-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.dx .cmp-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.dx .cmp-l { min-width: 44px; font-size: 13.5px; font-weight: 600; }
.dx .cmp-st { font-size: 12px; color: var(--ink-3); }
.dx .cmp-row.is-added .cmp-st { color: var(--green); }
.dx .cmp-row.is-removed .cmp-st { color: var(--red); }
.dx .cmp-t { font-size: 14px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.dx .cmp-t ins { text-decoration: none; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.dx .cmp-t del {
  text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--ink-3); border-radius: 3px; padding: 0 2px;
}
@media (max-width: 640px) { .dx .ask-bar { flex-direction: column; } .dx .ask-bar .btn { width: 100%; } }

/* Settings (the Docs page): the theme, and the legal documents moved here from the sidebar (the owner, 2026-10-12). */
.dx .set-sec + .set-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.dx .set-sec-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.dx .set-sec-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); }
.dx .set-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.dx .set-theme { height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--canvas); color: var(--ink); font: 13px var(--font-ui); cursor: pointer; }
.dx .set-theme.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--hover); font-weight: 600; }
.dx .sheet .sd-legal { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; }
.dx .sheet .sd-legal a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.dx .sheet .sd-legal a:hover { background: var(--hover); }
.dx .sheet .sd-legal a::after { content: " ↗"; color: var(--ink-3); }

/* ASK YOUR CONTRACTS: the answer, its citations as links to its numbered sources, the sources, example questions */
.dx .ask-ans { margin: 0 0 26px; padding: 16px 20px 18px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--canvas); }
.dx .ask-a { margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.dx .ask-cite {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0 1px; padding: 0 4px; border-radius: 5px; vertical-align: 2px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 650 11px/1 var(--font-ui); text-decoration: none;
}
.dx .ask-cite:hover, .dx .ask-cite:focus-visible { background: var(--accent); color: var(--text-inverse); }
.dx .ask-srcs { display: flex; flex-direction: column; gap: 10px; }
.dx .ask-src { padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--canvas); scroll-margin: 24px; transition: box-shadow .3s; }
.dx .ask-src.is-flash { box-shadow: 0 0 0 2px var(--accent); }
.dx .ask-src-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; }
.dx .ask-sec { font-weight: 400; }
.dx .ask-n { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 2px; border-radius: 6px; background: var(--accent); color: var(--text-inverse); font: 700 11px/1 var(--font-ui); }
.dx .ask-quote { margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--border-subtle); font: 14px/1.55 var(--serif); color: var(--ink-2); }
.dx .ask-lead { color: var(--ink-3); }
.dx .ask-src-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; }
.dx .ask-src-f:empty { display: none; }
.dx .ask-more { margin-top: 24px; }
.dx .ask-more summary { cursor: pointer; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.dx .ask-tips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dx .ask-ex {
  height: 30px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-pane);
  font: 12.5px var(--font-ui); color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.dx .ask-ex:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--ink-4); }
/* the agent's run: its steps as they come (the last one pulses while it works), and under the answer, folded, how it was found */
.dx .ask-status { display: flex; align-items: center; gap: 7px; margin: -14px 0 22px; font-size: 12.5px; color: var(--ink-3); }
.dx .ask-status[hidden] { display: none; }
.dx .ask-work { margin: 0 0 24px; }
.dx .ask-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dx .ask-step { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.dx .ask-step > .ic { flex: none; align-self: center; color: var(--ink-3); }
.dx .ask-sq { color: var(--ink); overflow-wrap: anywhere; }
.dx .ask-sn { color: var(--ink-3); font-size: 12.5px; }
.dx .ask-step.is-now { color: var(--ink-3); }
.dx .ask-step.is-now > .ic { color: var(--accent); animation: ask-pulse 1.1s ease-in-out infinite; }
@keyframes ask-pulse { 50% { opacity: .35; transform: scale(.9); } }
.dx .ask-how { margin-top: 24px; }
.dx .ask-how summary { cursor: pointer; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
/* the answer as it was written: paragraphs and list items, each statement followed by its sources; one Jev found only partly, or not,
   stated by them underlined (its title says which) */
.dx .ask-text .ask-a { white-space: normal; }
.dx .ask-text .ask-a.ask-raw { white-space: pre-wrap; }
.dx .ask-ul { margin: 8px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.65; color: var(--ink); }
.dx .ask-ul li + li { margin-top: 4px; }
.dx .ask-cites { white-space: nowrap; }
.dx .ask-st.is-partly { text-decoration: underline dotted color-mix(in srgb, var(--amber) 85%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.dx .ask-st.is-unsupported { text-decoration: underline dotted color-mix(in srgb, var(--red) 85%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.dx .ask-st.is-uncited { text-decoration: underline dotted var(--ink-4); text-underline-offset: 4px; }
.dx .ask-st[title] { cursor: help; }
.dx .ask-check { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3); }
.dx .ask-check > .ic { flex: none; }
.dx .ask-check.is-ok > .ic { color: var(--green); }

/* a contract's Dates tab: Add a date, the reader's note on a date, the dates put away */
.dx .dl-add { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.dx .dl-note { font-style: italic; }
.dx .dl-hidden { margin: 28px 0 0; }
.dx .dl-hidden > summary { cursor: pointer; font-size: 13px; color: var(--ink-3); }
.dx .row-end .btn + .btn { margin-left: 6px; }