/* Crome house style for the web (Style Guide v1.1, section 10). Navy and black; Gill Sans for finding, Charter for reading. */
/* Stage 3 (2.77.0): every rule from here to the closing brace before Phase AN is the legacy layer; Phase AN follows outside it. */
@layer legacy {
:root {
  --navy: #002147; --ink: #000; --hair: #d9dde3; --paper: #fff; --quiet: #555;
  --green: #61c654; --green2: #aae5a3; --yellow: #f5bf4f; --orange: #f19a37; --red: #cc1d2c; --none: #d9dde3;
  --head: "Gill Sans", "Gill Sans MT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Crome Serif", Charter, "Charis SIL", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { font-size: 15.5px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--navy); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, nav, button, .button, .chip, th, label, .meta, .tabs, .who, .hd, .quiet { font-family: var(--head); }
h1 { font-size: 26px; font-weight: 400; color: var(--navy); margin: 0; display: flex; align-items: center; min-height: 36px; line-height: 1.2; } h1.firm { font-size: 20px; }
h1 .dot { vertical-align: 0; flex: 0 0 auto; }
h2 { font-size: 15px; font-weight: 400; color: var(--navy); margin: 34px 0 10px; } h2 .n { color: var(--quiet); }
/* header */
.top { display: flex; align-items: center; padding: 22px 48px; border-bottom: 1px solid var(--hair); }
.mark img { height: 26px; display: block; } .mark:hover { text-decoration: none; }
.who { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 14px; }
.who .me { color: var(--ink); } .who a.me:hover { text-decoration: none; color: var(--navy); }
main { flex: 1; padding: 36px 48px 60px; }
.narrow { max-width: 480px; margin: 2rem auto; } .narrow-l { max-width: 480px; }
.foot { text-align: center; font-family: var(--head); font-size: 11px; color: var(--ink); padding: 22px; border-top: 1px solid var(--hair); }
/* layout */
.bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.btns { display: flex; gap: 10px; } .tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } .top, main { padding-left: 16px; padding-right: 16px; } }
.meta { font-size: 14px; margin-top: 4px; } .meta b { font-weight: 400; color: var(--navy); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 12px; vertical-align: -1px; background: var(--none); }
.dot.green { background: var(--green); } .dot.green2 { background: var(--green2); } .dot.yellow { background: var(--yellow); } .dot.orange { background: var(--orange); } .dot.red { background: var(--red); }
/* tabs and lists */
.tabs { display: flex; gap: 22px; font-size: 15px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
.tabs a, .tabs span { padding: 0 0 8px; color: var(--quiet); } .tabs a:hover { text-decoration: none; color: var(--navy); }
.tabs .on { color: var(--navy); border-bottom: 2px solid var(--navy); margin-bottom: -1px; }
.worklist { list-style: none; margin: 0; padding: 0; }
.worklist li a { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
.worklist li a:not(.chip):hover { text-decoration: none; background: #fafbfc; }
.worklist li[data-find] { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.worklist li[data-find] a.name { display: block; padding: 0; border: 0; color: var(--ink); }
.worklist li[data-find] a.chip { display: inline-block; padding: 3px 10px; border: 0; color: #fff; }
.worklist li[data-find] a.chip.green, .worklist li[data-find] a.chip.green2, .worklist li[data-find] a.chip.yellow, .worklist li[data-find] a.chip.orange { color: #000; } .worklist li[data-find] a.chip.none { color: var(--quiet); } .worklist li[data-find] a.name:hover { text-decoration: none; color: var(--navy); }
.worklist li[data-find] a.chip:hover { text-decoration: none; filter: brightness(.95); }
.worklist .aka { display: block; font-family: var(--head); font-size: 12px; color: var(--quiet); }
.worklist li.line { border-bottom: 1px solid var(--navy); }   /* the line: yours above, everyone else below */
/* chips */
.chip { font-family: var(--head); font-size: 11.5px; padding: 3px 10px; border-radius: 2px; min-width: 104px; text-align: center; letter-spacing: .02em; display: inline-block; color: #fff; }
.chip.green { background: var(--green); color: #000; } .chip.green2 { background: var(--green2); color: #000; } .chip.yellow { background: var(--yellow); color: #000; }
.chip.orange { background: var(--orange); color: #000; } .chip.red { background: var(--red); } .chip.none { background: var(--none); color: var(--quiet); }
/* forms and buttons */
.stack { display: flex; flex-direction: column; gap: 14px; } .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .row.tight { gap: 6px; align-items: center; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--navy); }
label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
fieldset.rels { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; } fieldset.rels legend { font-family: var(--head); font-size: 13px; color: var(--navy); padding: 0; margin-bottom: 6px; }
input, select, textarea { font: inherit; font-family: var(--body); padding: 8px 10px; border: 1px solid var(--hair); border-radius: var(--r1); background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); }
select { font-family: var(--head); font-size: 14px; color: var(--navy); }
button, .button { font-family: var(--head); font-size: 14px; padding: 8px 16px; border-radius: var(--r1); border: 1px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer; display: inline-block; line-height: 1.3; }
button.ghost, .button.ghost { background: #fff; color: var(--navy); } button.small { padding: 5px 12px; font-size: 13px; }
button:disabled { opacity: .45; cursor: default; } button.dim { opacity: .45; } button.dim:hover { opacity: .7; }
button.link { background: none; border: 0; padding: 0; color: var(--navy); text-decoration: underline; font-size: inherit; }
.button.file { cursor: pointer; } .inline { display: inline; } .count { opacity: .85; margin-left: 6px; }
.flash { padding: 10px 14px; border-left: 3px solid var(--navy); margin: 0 0 20px; font-size: 14px; background: #f7f8fa; } .flash.err { border-color: var(--red); }
.note { border-left: 3px solid var(--red); padding: 8px 14px; background: #f7f8fa; margin: 0 0 12px; }
.quiet { color: var(--quiet); } .small { font-size: 13px; } .summary { max-width: none; margin: 10px 0 0; }
.hint { font-size: 13.5px; padding: 8px 12px; background: #f7f8fa; border-left: 3px solid var(--navy); margin: 4px 0; }
/* report table */
table.rep { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.rep th { text-align: left; font-family: var(--head); font-weight: 400; font-size: 12.5px; color: var(--navy); padding: 6px 16px 8px 0; border-bottom: 1px solid var(--navy); vertical-align: bottom; }
table.rep th.mkh { text-align: right; white-space: nowrap; padding-right: 0; }
table.rep td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.rep td.el { width: 250px; } table.rep td.el .t { font-family: var(--head); font-size: 12px; color: var(--quiet); }
table.rep td.cl { width: 110px; font-family: var(--head); font-size: 13.5px; } table.rep td.rk { width: 150px; }
table.rep td.mk { width: 240px; text-align: right; vertical-align: middle; padding-right: 0; white-space: nowrap; }
table.rep td.mk .acc { color: var(--quiet); font-family: var(--head); font-size: 12.5px; line-height: 1.5; white-space: normal; }
table.rep td.mk .acc b { font-weight: 400; color: var(--navy); display: block; } table.rep td.mk .acc form { margin-left: 6px; }
table.rep tr.done td { color: var(--quiet); } table.rep tr.done td.el { color: var(--ink); }
td.hd { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
/* folds */
.folds { margin-top: 40px; }
details.fold { border-top: 1px solid var(--hair); } details.fold summary { font-family: var(--head); font-size: 14px; color: var(--navy); padding: 12px 0; cursor: pointer; display: flex; justify-content: space-between; list-style: none; }
details.fold summary::-webkit-details-marker { display: none; } details.fold summary .n { color: var(--quiet); }
details.fold[open] summary { border-bottom: 1px solid var(--hair); }
.files, .history { list-style: none; padding: 8px 0 16px; margin: 0; font-size: 14px; } .files li, .history li { padding: 5px 0; }

/* find: sits over the Clients column, same height as the buttons, one hairline */
.bar.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bar.grid .btns { justify-self: end; }
.bar label.find { display: flex; flex-direction: row; align-items: center; gap: 12px; height: 36px; padding: 0; margin: 0; border: 0; color: var(--quiet); font-size: 15px; }
.bar label.find:focus-within { color: var(--navy); }
.bar label.find svg { flex: 0 0 auto; }
.bar label.find input { flex: 1; min-width: 0; height: 34px; font-family: var(--head); font-size: 15px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--navy); outline: none; box-shadow: none; }
.bar label.find input::placeholder { color: var(--quiet); } .bar label.find input::-webkit-search-cancel-button, .bar label.find input::-webkit-search-decoration { display: none; -webkit-appearance: none; }
@media (max-width: 900px) { .bar.grid { grid-template-columns: 1fr; gap: 16px; } .bar.grid .btns { justify-self: start; } }
/* forms laid out as a page */
.form-page { max-width: 720px; } .form-page .stack { gap: 18px; } .form-page .row > label { flex: 1; }

/* rounds */
.versions { font-family: var(--head); font-size: 13px; color: var(--quiet); margin-top: 8px; display: flex; gap: 18px; flex-wrap: wrap; }
.tools { align-items: flex-start; } .ups { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .ups form { display: flex; } .ups .button { flex: 1; text-align: center; }
.versions .v .dot { width: 9px; height: 9px; margin-right: 6px; }
.agreed { font-family: var(--head); font-size: 12px; color: var(--navy); border: 1px solid var(--green); border-radius: 2px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }

/* security page and other reading pages */
.prose { max-width: 760px; } .prose h2 { margin-top: 28px; } .prose p { margin: 0 0 10px; }
.pending { font-family: var(--head); font-size: 12px; color: var(--red); border: 1px solid var(--red); border-radius: 2px; padding: 0 6px; }
.foot a { color: var(--navy); margin-left: 10px; }

/* phone: the record reads top to bottom, one term after another; the approval controls stay usable (E3) */
@media (max-width: 700px) {
  .top { flex-wrap: wrap; gap: 10px 16px; padding: 16px; } .who { margin-left: auto; gap: 12px; font-size: 13px; }
  .mark img { height: 22px; }
  main { padding: 20px 16px 40px; }
  .head, .bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .tools { justify-content: flex-start; } .ups { width: 100%; } .ups .button { text-align: left; }
  h1 { font-size: 22px; }
  table.rep, table.rep tbody, table.rep tr, table.rep td { display: block; width: auto; }
  table.rep tr.th th:not(.mkh) { display: none; }
  table.rep tr.th { display: block; border-bottom: 1px solid var(--navy); padding: 0 0 10px; }
  table.rep th.mkh { display: block; text-align: left; padding: 0; border: 0; }
  table.rep tr { padding: 14px 0; border-bottom: 1px solid var(--hair); }
  table.rep td { padding: 0; border: 0; }
  table.rep td.el { width: auto; display: inline; font-size: 16px; } table.rep td.el .t { display: inline; margin-left: 6px; }
  table.rep td.cl { display: inline; width: auto; color: var(--quiet); margin-left: 8px; }
  table.rep td.rk { width: auto; margin: 8px 0; }
  table.rep td.mk { width: auto; text-align: left; margin-top: 10px; white-space: normal; }
  table.rep td.mk .acc { text-align: left; } table.rep td.mk .acc b { display: inline; margin-right: 6px; }
  /* settings and party tables keep their columns but scroll */
  .two { gap: 32px; }
  .versions { gap: 10px 16px; }
  details.fold summary { flex-wrap: wrap; gap: 4px 12px; }
}

/* party page: identity above the tabs, then Contracts · Compliance */
.ident { font-family: var(--head); font-size: 14px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.tabs.page { margin: 26px 0 18px; }
.tabs.page a .dot { width: 10px; height: 10px; margin-right: 8px; }
.cblock { margin-bottom: 30px; } .cblock h2 { margin-top: 0; }
table.rep td.mk form.row { flex-wrap: nowrap; }
.crow { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .crow > form { flex: 0 0 auto; }
.matches { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; } .matches b { font-weight: 400; color: var(--navy); }
table.rep.answers td { padding: 8px 16px 8px 0; font-size: 14px; } table.rep.answers td.sec { padding-top: 16px; color: var(--navy); }
/* the public questionnaire */
.qform h2 { margin-top: 32px; } .qa { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; font-size: 14px; color: var(--ink); }
.qt { font-family: var(--body); font-size: 15px; color: var(--ink); } .qt .ref { font-family: var(--head); font-size: 12px; color: var(--quiet); margin-right: 10px; }
.opts { display: flex; gap: 18px; flex-wrap: wrap; } .qa input[type=text], .qa input:not([type]), .qa textarea { max-width: 560px; }

h3 { font-family: var(--head); font-size: 14px; font-weight: 400; color: var(--navy); margin: 22px 0 6px; } h3 .n { color: var(--quiet); }
details.fold.slim { border: 0; flex: 0 0 auto; } details.fold.slim summary { padding: 6px 0; font-size: 13.5px; } details.fold.slim[open] summary { border: 0; }

/* details tab: fields edit in place */
table.rep.details td.el { width: 220px; } table.rep.details td.mk { width: 240px; }
table.rep.details input:not([type=checkbox]) { width: 100%; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 4px 0; background: transparent; font-family: var(--body); font-size: 15px; }
table.rep.details input:not([type=checkbox]):hover { border-bottom-color: var(--hair); } table.rep.details input:not([type=checkbox]):focus { border-bottom-color: var(--navy); }
table.rep.details .row.tight { gap: 16px; } table.rep.details .rels { display: flex; gap: 18px; flex-wrap: wrap; }
table.rep.details td { vertical-align: middle; }

/* party tabs: one column plan, so Risk sits in the same place on every tab */
table.rep.party { table-layout: fixed; width: 100%; }
table.rep.party col.c-name { width: 40%; } table.rep.party col.c-risk { width: 13%; } table.rep.party col.c-a { width: 15%; } table.rep.party col.c-b { width: 12%; } table.rep.party col.c-c { width: 8%; } table.rep.party col.c-d { width: 12%; }
table.rep.party td, table.rep.party th { overflow-wrap: anywhere; } table.rep.party td.el { width: auto; } table.rep.party td.rk { width: auto; } table.rep.party td.mk { width: auto; }
table.rep.party input:not([type=checkbox]) { width: 100%; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 4px 0; background: transparent; font-family: var(--body); font-size: 15px; }
table.rep.party input:not([type=checkbox]):hover { border-bottom-color: var(--hair); } table.rep.party input:not([type=checkbox]):focus { border-bottom-color: var(--navy); }

/* the party page: Home's frame, then the tab's content below */
.tabbody { margin-top: 0; }
.worklist li[data-find] a.name.on .nm { border-bottom: 2px solid var(--navy); padding-bottom: 2px; }
.worklist li[data-find] a.chip { position: relative; } .worklist li[data-find] a.chip.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--navy); }

/* the Risk column starts exactly under the matching chip in the party's row above:
   the row's column is half the width less half the gap; the chips' widths and gap are set in AF.1 and AF.3 below */
/* one column plan on every tab: name (to the first chip) · 218px (both chips) · the facts */
table.rep.party col.c-name { width: calc(50vw - 298px); } table.rep.party col.c-risk { width: 218px; }
table.rep.party col.c-a { width: auto; } table.rep.party col.c-b { width: 12%; } table.rep.party col.c-c { width: 8%; } table.rep.party col.c-d { width: 12%; }
table.rep.party.contracts td.rk { text-align: right; padding-right: 0; }
/* one row, one line: the same depth as the Contracts tab */
table.rep.party td { padding: 13px 16px 13px 0; vertical-align: middle; line-height: 1.5; }
table.rep.party td.el { width: auto; }
table.rep.party input:not([type=checkbox]), table.rep.party textarea { padding: 0; line-height: 1.5; height: auto; resize: none; overflow: hidden; }
table.rep.party textarea { width: 100%; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font-family: var(--body); font-size: 15px; display: block; }
table.rep.party textarea:hover { border-bottom-color: var(--hair); } table.rep.party textarea:focus { border-bottom-color: var(--navy); outline: none; }
table.rep.party td .row.tight { gap: 16px; align-items: center; }
table.rep.party button.small, table.rep.party select { padding: 4px 12px; }

table.rep.party td.rk, table.rep.party th:nth-child(2) { padding-left: 0; }
table.rep.party.contracts td.rk + td { padding-left: 16px; }
table.rep.party.compliance td.dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* every row the same depth on every tab; nothing wraps */
table.rep.party tr { height: 50px; } table.rep.party td { padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.rep.party td.open, table.rep.party td.rels-cell { white-space: normal; }
table.rep.party td.el { font-size: 15.5px; }
/* the facts after the chip, and every editable value, in one style: the Contracts tab's */
table.rep.party td.hd, table.rep.party td.hd a { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
table.rep.party input:not([type=checkbox]), table.rep.party textarea, table.rep.party select { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
table.rep.party input:not([type=checkbox]):focus, table.rep.party textarea:focus { color: var(--ink); }
table.rep.party label.check { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
table.rep.party td.mk { text-align: right; }

/* party page: the name where Find sits on Home; the row beneath is the header of whatever follows */
h1.pname { font-size: 20px; height: 36px; margin: 0; } h1.pname .rel { font-family: var(--head); font-size: 14px; color: var(--quiet); margin-left: 14px; font-weight: 400; }
.worklist.heads { margin-top: 0; } .worklist.heads li[data-find] { padding: 12px 0; border-bottom: 0; } .two.headsrow { border-bottom: 1px solid var(--navy); }
.worklist.heads a.name { font-family: var(--head); font-size: 13px; color: var(--navy); letter-spacing: .02em; }
.worklist.heads a.name.on .nm { border-bottom: 2px solid var(--navy); padding-bottom: 2px; }
.tabbody { margin-top: 0; position: relative; } .savednote { position: absolute; right: 0; top: -30px; }
table.rep.party tr:first-child td { border-top: 0; }

/* a chip that acts: the same shape as a state chip, in the firm's navy, clickable */
button.chip.act { background: var(--none); color: var(--navy); border: 0; font-size: 11.5px; padding: 3px 10px; min-width: 104px; line-height: inherit; cursor: pointer; }
button.chip.act:hover { filter: brightness(.95); }
table.rep.party td.rk form.inline { display: inline; }
/* row-end actions on the Compliance tab: plain navy links in the facts' face, never wrapping */
table.rep.party td.mk button.link.act, table.rep.party td.mk a.link.act { font-family: var(--head); font-size: 13.5px; text-decoration: none; color: var(--navy); }
table.rep.party td.mk button.link.act:hover, table.rep.party td.mk a.link.act:hover { text-decoration: underline; }
table.rep.party td.mk .row.tight { gap: 6px; flex-wrap: nowrap; }
/* the rest of the Compliance tab sits on the same grid as its first three rows */
.cblock > :first-child { border-top: 0; }
.cblock details.fold summary { padding: 13px 0; }
h3.pts { margin: 0; padding: 13px 0; font-size: 14px; border-bottom: 1px solid var(--hair); }
table.rep.party.points td.el .ref { font-family: var(--head); font-size: 12px; color: var(--quiet); margin-right: 10px; }
table.rep.party tr.done td.el { color: var(--quiet); }
/* a form row opens under the line it belongs to; its fields keep their borders */
table.rep.party tr.formrow td { padding-top: 0; padding-bottom: 0; }
table.rep.party tr.formrow input:not([type=radio]):not([type=checkbox]) { width: auto; border: 1px solid var(--hair); border-radius: var(--r1); padding: 4px 8px; font-family: var(--head); font-size: 13.5px; color: var(--ink); background: #fff; }
table.rep.party tr.formrow input:focus { border-color: var(--navy); outline: none; }
table.rep.party td.mk .quiet { font-family: var(--head); font-size: 13.5px; }

/* phone: the party tables stack, one card per row, in reading order: name · chip · facts · date · action */
@media (max-width: 700px) {
  table.rep.party colgroup, table.rep.party col { display: none; }
  table.rep.party tr { height: auto; padding: 12px 0; }
  table.rep.party td { display: block; height: auto; white-space: normal; overflow: visible; text-overflow: clip; padding: 0; }
  table.rep.party td.el { display: block; margin-bottom: 6px; } table.rep.party td.rk { margin: 0 0 6px; text-align: left; }
  table.rep.party td.mk { text-align: left; margin-top: 6px; } table.rep.party td.mk .row.tight { justify-content: flex-start !important; }
  table.rep.party td:empty { display: none; } table.rep.party.compliance td.dt { white-space: normal; overflow: visible; }
  table.rep.party tr.formrow { padding: 0 0 12px; } table.rep.party tr.formrow form.row { flex-wrap: wrap; }
  table.rep.party tr.formrow input:not([type=radio]):not([type=checkbox]) { width: 100% !important; }
  table.rep.party.contracts td.rk { text-align: left; }
  .worklist.heads li[data-find] { grid-template-columns: 1fr auto auto; }
  .two.headsrow section.col:empty { display: none; }
}

/* Home rows are the same 50px as the rows on the party tabs, with or without an "also known as" line */
.worklist li[data-find] { height: 50px; padding: 0; box-sizing: border-box; }
.worklist li[data-find] a.name .nm, .worklist li[data-find] a.name { line-height: 1.3; }
.worklist .aka { line-height: 1.2; margin-top: 2px; }
.worklist.heads li[data-find] { height: 50px; padding: 0; }
@media (max-width: 700px) { .worklist li[data-find] { height: auto; padding: 12px 0; } }

/* a record opened in place under its row on the Compliance tab */
table.rep.party tr.sub { height: 40px; } table.rep.party tr.sub td { border-bottom: 1px solid #f0f2f5; }
table.rep.party tr.sub td.el { font-family: var(--head); font-size: 13px; color: var(--quiet); padding-left: 24px; white-space: nowrap; }
table.rep.party tr.sub.last td { border-bottom: 1px solid var(--hair); }
table.rep.party tr.sub td.hd.ink { color: var(--ink); }
table.rep.party tr.sub td.wrap { white-space: normal; overflow: visible; } table.rep.party tr.sub:has(td.wrap) { height: auto; } table.rep.party tr.sub td.wrap { padding-top: 10px; padding-bottom: 10px; }
table.rep.party td.el a.opener.open { border-bottom: 2px solid var(--navy); padding-bottom: 2px; }
button.chip.act.red { background: var(--red); color: #fff; } button.chip.act.orange { background: var(--orange); color: #000; } button.chip.act.yellow { background: var(--yellow); color: #000; }
button.chip.act.red:hover, button.chip.act.orange:hover, button.chip.act.yellow:hover { filter: brightness(1.08); }
table.rep.party.record tr.tall { height: auto; } table.rep.party.record tr.tall td { padding-top: 13px; padding-bottom: 13px; vertical-align: top; }
table.rep.party.record td.wrap { white-space: normal; overflow: visible; color: var(--ink); }
table.rep.party.record td.q { white-space: normal; overflow: visible; font-size: 14.5px; line-height: 1.35; padding-right: 24px; }
table.rep.party.record td.q .ref { font-family: var(--head); font-size: 12px; color: var(--quiet); margin-right: 10px; }
table.rep.party.record tr.sec { height: 44px; } table.rep.party.record td.sech { font-family: var(--head); font-size: 13px; color: var(--navy); letter-spacing: .02em; padding-top: 18px; }

/* the contract page in the party page's frame */
.worklist.heads .chip.quietchip { color: var(--quiet); }
.posture { font-family: var(--head); font-size: 13.5px; color: var(--ink); line-height: 1.5; margin: 14px 0 6px; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.posture.open { display: block; }
table.rep.party.review tr.calm { display: none; } table.rep.party.review.all tr.term.calm { display: table-row; }
table.rep.party.review tr.term { cursor: pointer; } table.rep.party.review tr.term:hover td { background: #fafbfc; }
table.rep.party.review td.el .cl { font-family: var(--head); font-size: 12px; color: var(--quiet); margin-left: 8px; }
table.rep.party.review tr.xrow { height: auto; } table.rep.party.review tr.xrow td { padding: 6px 0 14px; white-space: normal; overflow: visible; vertical-align: top; }
table.rep.party.review td.wrap { color: var(--ink); } .xp { max-width: 70ch; } .xq { font-size: 14px; color: var(--quiet); margin-top: 8px; max-width: 70ch; }
table.rep.party.review tr.done td.el { color: var(--quiet); }
.showall { margin: 10px 0 0; } .tabbody .folds { margin-top: 24px; } .showall button.link.act { font-family: var(--head); font-size: 13px; text-decoration: none; } .showall button.link.act:hover { text-decoration: underline; }
.btns .count { opacity: .75; margin-left: 4px; }
/* the header row's right half carries the contract's other actions as quiet links; no menu */
.headsrow section.col.acts .tabs { border-bottom-color: transparent; }
.headsrow section.col.acts li[data-find] { display: flex; justify-content: flex-end; align-items: center; gap: 0; border-bottom: 1px solid var(--navy); white-space: nowrap; }
.headsrow section.col.acts li[data-find] form.inline { display: inline; }
.headsrow section.col.acts .link.act, .headsrow section.col.acts label.link.act { font-family: var(--head); font-size: 13.5px; line-height: 1.3; color: var(--navy); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; margin: 0; display: inline-block; vertical-align: middle; }
.headsrow section.col.acts .link.act:hover { text-decoration: underline; } .headsrow section.col.acts button.link.act:disabled { color: var(--quiet); cursor: default; text-decoration: none; }
.headsrow section.col.acts .sep { color: var(--quiet); margin: 0 10px; font-family: var(--head); }
/* the status chip is a select dressed as the chip */
form.chipsel { display: inline; } select.chip { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font-family: var(--head); font-size: 11.5px; padding: 3px 10px; min-width: 104px; text-align: center; border-radius: 2px; line-height: inherit; height: auto; }
select.chip.green, select.chip.green2, select.chip.yellow, select.chip.orange { color: #000; } select.chip.red { color: #fff; } select.chip:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
details.more { position: relative; } details.more summary { list-style: none; cursor: pointer; } details.more summary::-webkit-details-marker { display: none; }
details.more .menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--hair); border-radius: 3px; padding: 10px 14px; min-width: 240px;
  display: flex; flex-direction: column; gap: 10px; z-index: 5; box-shadow: 0 4px 16px rgba(0,0,0,.06); font-family: var(--head); font-size: 13.5px; }
details.more .menu .link, details.more .menu label.link { text-decoration: none; color: var(--navy); cursor: pointer; font-family: var(--head); font-size: 13.5px; }
details.more .menu .link:hover { text-decoration: underline; } details.more .menu button.link:disabled { color: var(--quiet); text-decoration: none; }
details.more .menu select { padding: 4px 8px; }
.files .dot { width: 9px; height: 9px; margin-right: 6px; }
label.button.file { cursor: pointer; }

/* the questionnaire page: questions wrap to two lines where they must; answers read as ink */
table.rep.party.answers tr.term { height: auto; } table.rep.party.answers tr.term td { padding-top: 12px; padding-bottom: 12px; }
table.rep.party.answers td.q { white-space: normal; overflow: visible; font-size: 14.5px; line-height: 1.35; padding-right: 24px; }
table.rep.party.answers td.q .ref { font-family: var(--head); font-size: 12px; color: var(--quiet); margin-right: 10px; }
table.rep.party.answers td.hd.ink { color: var(--ink); }
table.rep.party.answers tr.sec { display: none; height: 44px; } table.rep.party.answers.all tr.sec { display: table-row; }
table.rep.party.answers td.sech { font-family: var(--head); font-size: 13px; color: var(--navy); letter-spacing: .02em; padding-top: 18px; }
.worklist.heads .chip.ph { visibility: hidden; }   /* keeps a single chip in the first chip slot, where the party page's first chip sits */

/* the first row on a party tab sits exactly where Home's second row sits: the navy rule lives inside the
   50px header row (as Home's hairline does) and the table follows with no gap */
.two.headsrow { border-bottom: 0; }
.worklist.heads li[data-find] { border-bottom: 1px solid var(--navy); }
.tabbody > table.rep.party, .tabbody > form + table.rep.party { margin-top: 0; }
.tabbody .savednote:empty { display: none; }
table.rep.party tr.sub form.subform { gap: 10px; } table.rep.party tr.sub:has(form.subform) { height: 48px; }
table.rep.party tr.sub form.subform input { border: 1px solid var(--hair); border-radius: var(--r1); padding: 4px 8px; font-family: var(--head); font-size: 13.5px; color: var(--ink); background: #fff; width: auto; }
table.rep.party tr.sub form.subform input:focus { border-color: var(--navy); outline: none; }
table.rep.party td.rk .chip { position: relative; top: -1px; }

/* a coloured chip is the way into its record: the same chip, clickable */
table.rep.party td.rk button.chip, table.rep.party td.rk a.chip { border: 0; cursor: pointer; line-height: inherit; text-decoration: none; }
table.rep.party td.rk button.chip:hover, table.rep.party td.rk a.chip:hover { filter: brightness(.95); text-decoration: none; }

/* owners (X.3): the names in the right half's facts line on the contract page; a tick list drops below them */
.tabs.owners { position: relative; justify-content: flex-end; }
.tabs.owners .own { font-family: var(--head); font-size: 13.5px; color: var(--quiet); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.tabs.owners .own:hover { color: var(--navy); }
.ownlist { display: none; position: absolute; right: 0; top: 100%; z-index: 5; background: #fff; border: 1px solid var(--hair); box-shadow: 0 6px 18px rgba(20,30,50,.08); padding: 10px 14px; margin-top: 6px; min-width: 16rem; }
.ownlist.open { display: block; }
.ownlist label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.ownlist label.check .r { color: var(--quiet); font-size: 12.5px; padding: 0; }
table.rep.party.contracts tr.line td { border-bottom: 1px solid var(--navy); }   /* the line: your contracts above, the rest below */
/* the questionnaire page (Phase Z): the party frame for a counterparty; scoped to .qpage */
.qpage .worklist.heads span.name { font-family: var(--head); font-size: 13px; color: var(--navy); }
.qpage .worklist.heads span.name.on .nm { border-bottom: 2px solid var(--navy); padding-bottom: 2px; }
.qpage .posture .saved { color: var(--navy); margin-left: 6px; }
.qpage table.qtable tr.term.calm, .qpage table.qtable tr.term.calm td { height: auto; }
.qpage table.qtable td.el.q { white-space: normal; vertical-align: top; padding-top: 14px; padding-bottom: 12px; }
.qpage table.qtable td.ctl { white-space: normal; overflow: visible; padding: 8px 0; vertical-align: top; }
.qpage table.qtable td.ctl input:not([type=checkbox]):not([type=radio]):not([type=file]), .qpage table.qtable td.ctl textarea {
  width: 100%; max-width: 32rem; border: 1px solid var(--hair); border-radius: var(--r1); padding: 6px 10px; font-family: var(--head); font-size: 14px; color: var(--ink); background: #fff; }
.qpage table.qtable td.ctl input:focus, .qpage table.qtable td.ctl textarea:focus { border-color: var(--navy); outline: none; }
.qpage table.qtable td.ctl input.detail { margin-top: 6px; }
.qpage .opts { display: inline-flex; gap: 18px; flex-wrap: wrap; padding: 6px 0; }
.qpage .opts label.check, .qpage td.ctl label.check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); white-space: nowrap; margin: 0; }
.qpage .attach { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qpage .evx { margin-top: 6px; flex-wrap: wrap; } .qpage .evx input:not([type=date]) { max-width: 22rem !important; }
.qpage .evx label.exp { display: inline-flex; align-items: center; gap: 8px; } .qpage .evx input[type=date] { width: auto !important; }
.qpage .who3 { flex-wrap: wrap; } .qpage .who3 input { max-width: 14rem !important; }
.qpage tr.miss td.el .ref { color: var(--red); } .qpage tr.miss td.el { color: var(--red); }
.qpage .folds details.fold > table { margin: 4px 0 12px; }
.qpage table.qtable.by { margin-top: 18px; }
.qpage .privacy { margin-top: 32px; line-height: 1.55; }
@media (max-width: 700px) {
  .qpage .bar.grid .btns { display: flex; flex-wrap: wrap; gap: 8px; }
  .qpage table.qtable td.el.q { padding: 12px 0 4px; }
  .qpage table.qtable td.ctl { padding: 0 0 12px; }
  .qpage table.qtable td.rk { display: none; }
  .qpage .who3 input, .qpage .evx input:not([type=date]) { max-width: none !important; width: 100% !important; }
}
.qpage .posture { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; white-space: normal; text-overflow: clip; max-height: none; }   /* a stranger reads it whole */
.qpage .posture .saved.err { color: var(--red); }

/* Z.1: every chip the same width, whatever its word, so chips line up down a column and sit centred in it.
   "Requires approval" is the longest word; the side padding is trimmed so it fits inside the same width (96px since AF.3). */
.chip, button.chip.act, select.chip, .worklist li[data-find] a.chip { width: 104px; min-width: 104px; padding-left: 3px; padding-right: 3px; white-space: nowrap; text-align: center; text-align-last: center; }

/* Z.1: the people named in a questionnaire, one per row, on the counterparty's page and on the returned view */
.qpage .plist { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
.qpage .prow { display: flex; gap: 8px; width: 100%; align-items: center; }
.qpage .prow input { min-width: 0; } .qpage .prow input.n { flex: 2; } .qpage .prow input.o { flex: 1; }
.qpage .prow .rm { font-family: var(--head); font-size: 12px; color: var(--quiet); background: none; border: 0; cursor: pointer; padding: 0 4px; white-space: nowrap; }
.qpage .prow .rm:hover { color: var(--ink); }
.qpage .plist .add { font-size: 13px; }
@media (max-width: 700px) { .qpage .plist { gap: 18px; } .qpage .prow { flex-wrap: wrap; } .qpage .prow input.n { flex: 1 1 100%; } .qpage .prow input.o { flex: 1 1 40%; } }
table.rep.party.answers tr.person td.el { padding-left: 34px; }
table.rep.party.answers tr.pq td.dt { color: var(--ink); }
.bar .btns .stat { align-self: center; }
.bar .btns .approveform .apnote { width: 30rem; height: 36px; font-family: var(--head); font-size: 14px; padding: 0 12px; border: 1px solid var(--navy); border-radius: var(--r1); }

/* Z.2: a record's rows that carry a question or a person: the whole question, wrapping, in ink */
table.rep.party tr.sub td.el.pq { white-space: normal; overflow: visible; color: var(--ink); font-size: 13.5px; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; }
table.rep.party tr.sub td.el.pq .ref { color: var(--quiet); font-size: 12px; margin-right: 8px; }
table.rep.party tr.sub:has(td.pq) { height: auto; }
table.rep.party tr.sub.done td.el.pq { color: var(--quiet); }
/* the record's last row: its words in the row's own type, right-aligned to end where the rows' Accept ends */
table.rep.party tr.sub .dec { display: flex; justify-content: flex-end; align-items: center; gap: 0; }
table.rep.party tr.sub .dec [hidden] { display: none !important; }
table.rep.party tr.sub .dec .links { display: inline-flex; align-items: center; }
table.rep.party tr.sub .dec form.inline { display: inline-flex; align-items: center; margin: 0; }
table.rep.party tr.sub .dec .sep { color: var(--quiet); margin: 0 8px; font-family: var(--head); font-size: 13.5px; }
table.rep.party tr.sub .dec button.link { font-family: var(--head); font-size: 13.5px; text-decoration: none; padding: 0; }
table.rep.party tr.sub .dec button.link.qlink { color: var(--quiet); }
table.rep.party tr.sub .dec button.link.act { color: var(--navy); }
table.rep.party tr.sub .dec button.link:hover { text-decoration: underline; }
table.rep.party tr.sub .dec input.note1 { flex: 1; margin-right: 16px; }
table.rep.party tr.sub .waiting { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
table.rep.party tr.sub input.note1 { border: 1px solid var(--navy); border-radius: var(--r1); background: #fff; height: 28px; padding: 0 8px; font-family: var(--head); font-size: 13px; color: var(--ink); width: 100%; }
table.rep.party tr.sub td.mk form.inline button.link.act, table.rep.party tr.sub td.mk button.link.act { font-family: var(--head); font-size: 13.5px; text-decoration: none; color: var(--navy); }

/* Z.2: the questionnaire's foot. "Completed by" reads like the section rows above it; its boxes fill the answer
   column; the declaration sits at the right end with Save for later and Send. */
.qpage table.qtable.by td.el.sum { font-family: var(--head); font-size: 14px; color: var(--navy); }
.qpage .who3 { display: flex; gap: 10px; width: 100%; } .qpage .who3 input { flex: 1; max-width: none !important; min-width: 0; }
.qpage .sendrow { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.qpage .sendrow label.check { margin-right: 14px !important; }
@media (max-width: 700px) {
  .qpage .who3 { flex-direction: column; }
  .qpage .sendrow { flex-wrap: wrap; justify-content: flex-start; } .qpage .sendrow label.check { white-space: normal !important; flex: 1 1 100%; margin: 0 0 6px !important; }
}


/* Z.6: the company's own row under Sanctions; adverse media read as a summary and plain findings */
table.rep.party tr.sub td.el.pq .aside { display: block; margin: 2px 0 0; color: var(--facts); font-size: 12px; line-height: 18px; }   /* ALiv.2: its own line */
table.rep.party tr.sub td.el.pq.quietq { color: var(--quiet); }
table.rep.party tr.sub td.dt.wrapt { white-space: normal; overflow: visible; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; }
table.rep.party tr.sub td.src { text-align: right; padding-right: 16px; font-family: var(--head); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.rep.party tr.sub td.src a { color: var(--quiet); text-decoration: none; } table.rep.party tr.sub td.src a:hover { color: var(--navy); text-decoration: underline; }
table.rep.party tr.sub .dec a.link { font-family: var(--head); font-size: 13.5px; text-decoration: none; }
table.rep.party tr.sub .dec a.link.qlink { color: var(--quiet); } table.rep.party tr.sub .dec a.link:hover { text-decoration: underline; }
/* crome.css 2.27.0: Z.6 */

/* ---------- Phase AC: dropping a contract (mockups O24, M2 to M4) ---------- */
.dropzone { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px dashed #928d84; border-radius: 3px; background: #fff;
  font-family: var(--head); font-size: 14px; color: var(--navy); cursor: pointer; line-height: 1; }
.dropzone:hover { border-color: var(--navy); }
.dropzone .narrow { display: none; }
@media (max-width: 700px) { .dropzone .wide { display: none; } .dropzone .narrow { display: inline; } .dropzone { border-style: solid; } }
/* crome.css 2.32.1: AC.1 */

/* ---------- Phase AF.1: the light tidy ----------
   Two rules, everything else unchanged (layout, columns, chip widths, type, colours):
   1. heights step in 8s: header 80, bar 40, tab row 32, rows 48, buttons 40 (small 32), footer 64;
   2. on every line the words share one baseline, and chips and buttons sit exactly in the middle of their row:
      a row is 48 with its line, chips are 23, so there are 12 whole pixels above a chip and 12 below. */

/* the frame */
.top { height: 80px; padding-top: 0; padding-bottom: 0; }
.foot { min-height: 64px; padding: 8px 22px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
main { padding-top: 40px; }

/* the name and Sign out on one line; Sign out is a quiet link */
.who { align-items: baseline; }
.who form.inline { display: inline; }
.who button.ghost { display: inline; height: auto; padding: 0; border: 0; background: none; color: var(--quiet); font-size: 14px; line-height: inherit; }
.who button.ghost:hover { color: var(--navy); text-decoration: underline; }

/* the bar: 40 tall, 24 above the tabs; Find says what it finds */
.bar { margin-bottom: 24px; }
h1 { min-height: 40px; } h1.pname { height: 40px; }
.bar label.find { height: 40px; } .bar label.find input { height: 38px; }
.bar .btns .approveform .apnote { height: 40px; }

/* buttons: 40 tall, small ones 32, the label centred by the box */
button:not(.link, .chip, .own, .rm, .x), .button, label.button.file { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding-top: 0; padding-bottom: 0; line-height: 1.2; }
button.small, .button.small, label.button.file.small { height: 32px; }
.dropzone { height: 40px; }

/* tab rows: 32 tall, every word on one baseline; the first row starts on the tab line */
.tabs { height: 32px; align-items: baseline; margin-bottom: 0; }
.tabs > a, .tabs > span, .tabs > .own { line-height: 22px; padding-bottom: 8px; }

/* rows: 48 with their line, everywhere */
.worklist li[data-find], .worklist.heads li[data-find] { height: 48px; }
table.rep.party { border-collapse: separate; border-spacing: 0; }   /* each row keeps its own line, so rows start on whole pixels */
table.rep.party tr { height: 48px; }
details.fold summary { padding-top: 13px; padding-bottom: 13px; }

/* chips: 23 tall, so they sit 12 above and 12 below in a 48 row; widths unchanged */
.chip, .worklist li[data-find] a.chip, button.chip.act, select.chip { height: 23px; line-height: 23px; padding-top: 0; padding-bottom: 0; }
table.rep.party td .chip, table.rep.party td button:not(.link), table.rep.party td select { vertical-align: top; }   /* taller than the words' line: placed by the box */
table.rep.party td.rk .chip { top: 0; }

/* the heads row (Details or Review, the chips, the actions): words on one baseline, one solid navy line across */
.worklist.heads li[data-find] a.name, .worklist.heads li[data-find] a.name .nm { line-height: 24px; }
.headsrow section.col.acts li[data-find] form.inline { display: contents; }
.headsrow section.col.acts .link.act, .headsrow section.col.acts label.link.act, .headsrow section.col.acts .sep { line-height: 24px; }
.two.headsrow { background: linear-gradient(var(--navy), var(--navy)) left bottom / 100% 1px no-repeat; }

/* table rows on the party tabs and the contract: the words share one baseline, 12 down; chips and buttons in the middle */
@media (min-width: 701px) {
  table.rep.party:is(.compliance, .contracts, .details, .review) tr:not(.sub, .xrow, .formrow) > td { vertical-align: baseline; padding-top: 12px; line-height: 23px; }
  table.rep.party:is(.compliance, .contracts, .details, .review) tr:not(.sub, .xrow, .formrow) > td.rk,
  table.rep.party:is(.compliance, .contracts, .details, .review) tr:not(.sub, .xrow, .formrow) > td:has(select, button:not(.link), .button) { vertical-align: middle; padding-top: 0; }
  table.rep.party:is(.compliance, .contracts, .details, .review) tr:not(.sub, .xrow, .formrow) > td:has(> textarea) { vertical-align: top; }   /* a text box has no baseline of its own: its line starts where the label's does */
  table.rep.party textarea { line-height: 23px; }
  table.rep.party:is(.compliance, .contracts, .details, .review) tr:not(.sub, .xrow, .formrow) > td .row.tight { align-items: baseline; }   /* a box and the words beside it */
}

/* the status chip on a contract is a select: it sits in the middle of its row like any chip */
form.chipsel { display: flex; }
/* a record opened in place, and questions that wrap: whole-pixel lines, so every row below stays on whole pixels */
table.rep.party tr.sub td, table.rep.party tr.sub td.el.pq, table.rep.party tr.sub td.dt.wrapt, table.rep.party tr.sub td.wrap { line-height: 19px; }
table.rep.party.record td.q, table.rep.party.answers td.q { line-height: 20px; }
/* plain tables (settings, all parties): the words in a row on one baseline */
table.rep:not(.party) td:not(.mk) { vertical-align: baseline; }

/* one square tick box everywhere, the same as the drop sheet's; it sits in the middle of the words' line */
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin: 0; padding: 0; border: 1px solid var(--tick-edge); border-radius: 3px; background: #fff; flex: 0 0 auto; cursor: pointer; vertical-align: -1px; }
input[type=checkbox]:checked { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--navy); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .45; cursor: default; }
label.check { align-items: baseline; } label.check input[type=checkbox] { align-self: center; }

/* the contract's summary and "Show all", so the rows and folds below land on the 8s */
.posture { line-height: 20px; margin: 16px 0 8px; }
.showall { margin: 8px 0 0; line-height: 24px; height: 24px; }

/* phone */
@media (max-width: 900px) { .two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .top { height: auto; padding-top: 16px; padding-bottom: 16px; }
  .worklist li[data-find] { height: auto; }
  .worklist.heads li[data-find] { height: 48px; }
  .worklist.heads .chip.ph { display: none; }
  .tabs { height: auto; }
  .tabs.owners { justify-content: flex-start; } .tabs.owners .rel { display: none; }
  .two.headsrow { row-gap: 16px; background: none; }
  .headsrow section.col.acts li[data-find] { height: auto; padding: 8px 0; white-space: normal; flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; align-items: baseline; }
  .headsrow section.col.acts .sep { display: none; }   /* the actions wrap on a phone, so space parts them rather than dots that can end a line */
  table.rep.party tr { height: auto; }
}
/* crome.css 2.33.0: AF.1 */

/* ---------- Phase AF.3: the page itself on the drawing board's squares ----------
   The board's squares are 24px (three of the page's 8px steps) and fixed to the page, so when the board comes up
   nothing on the page moves: the coloured chips already fill whole squares (drop.js draws the squares around them).
   1. the content is a whole number of pairs of squares wide (a multiple of 48) and centred, so the squares meet its
      two edges and its middle; the side margins are 48 to 71 rather than always 48 (48 at 1440 and 1728 wide);
   2. a chip is four squares (96) wide with one square (24) between neighbours, so a pair is 216 (218 before);
   3. the gutter between the two halves is two squares (48, 64 before);
   4. rows already start on the squares (48 high) with chips 12 down, so chip tops sit on the lines. */
@supports (width: round(down, 100%, 1px)) {
  @media (min-width: 901px) {
    .top, main { --side: calc((100% - round(down, 100% - 96px, 48px)) / 2); padding-left: round(down, var(--side), 1px); padding-right: round(up, var(--side), 1px); }
  }
}
@media (min-width: 901px) {
  .two, .bar.grid { column-gap: 48px; }
  .two.headsrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* the halves stay equal: on a narrow window a contract's
     links run on into the gutter rather than squeezing the chips out of their squares */
}
.chip, button.chip.act, select.chip, .worklist li[data-find] a.chip { width: 96px; min-width: 96px; padding-left: 0; padding-right: 0; letter-spacing: .01em; }
.worklist li[data-find] { column-gap: 24px; }
/* a long name ends in … rather than wrapping, so a row never grows and its chips stay in the middle of it */
.worklist:not(.heads) li[data-find] { grid-template-columns: minmax(0, 1fr) auto auto; }
.worklist:not(.heads) li[data-find] a.name, .worklist:not(.heads) li[data-find] .aka { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the party tabs: the name column runs to the first chip, the next holds both chips */
table.rep.party col.c-name { width: calc(50% - 240px); } table.rep.party col.c-risk { width: 216px; }
/* a summary is two lines of 24, so the rows below it start on the squares (the questionnaire's own page keeps its 20s) */
.posture { line-height: 24px; min-height: 48px; }
.qpage .posture { line-height: 20px; min-height: 0; }
/* the line under a page's name, and a message at the top of a page, move what follows by whole squares */
.bar .meta { line-height: 20px; }
.flash { line-height: 24px; padding-top: 12px; padding-bottom: 12px; margin-bottom: 24px; }

/* crome.css 2.35.0: AF.3 */

/* ---------- Phase AG.1: a chip names its module, and shows its state when you point at it ----------
   Each chip holds two words: the module's name, shown, and its state, hidden. Pointing at one chip swaps that chip
   alone; so does reaching it with the keyboard. Only where the device can hover, so a tap on a phone opens the tab at
   once rather than first showing the word. The link's label reads both to a screen reader. */
.chip .st { display: none; }
@media (hover: hover) { .chip:hover .nm { display: none; } .chip:hover .st { display: inline; } }
.chip:focus-visible .nm { display: none; } .chip:focus-visible .st { display: inline; }
/* crome.css 2.36.0: AG.1 */

/* ---------- Phase AG.3: Companies House in Details ----------
   A UK party's name row carries the register's word and Look up: the name, then "Active · Companies House, 4 Oct
   2026" at the row's end, then the button. Any word but Active (and its like) is red: in liquidation, dissolved.
   When the name alone does not settle which company it is, Look up opens a short list under the name, one company
   to a row: its number, name, word, town and years, and Use this company. The state-on-hover of AG.1 stays on Home only. */
table.rep.party .chrow { display: flex; align-items: center; gap: 24px; }
table.rep.party .chrow input { flex: 1 1 auto; min-width: 0; }
table.rep.party .chnote { flex: 0 0 auto; font-family: var(--head); font-size: 13.5px; color: var(--quiet); white-space: nowrap; }
table.rep.party .chnote b, table.rep.party tr.sub.choice td.hd b { font-weight: 400; color: var(--red); }
table.rep.party tr.sub.choice td.hd { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
table.rep.party tr.sub.choice td.hd .n { color: var(--ink); margin-right: 10px; }
table.rep.party tr.sub.choice td.mk form.inline { display: inline; margin: 0; }
table.rep.party tr.sub.choice td.mk .link { font-family: var(--head); font-size: 13.5px; text-decoration: none; color: var(--navy); background: none; border: 0; padding: 0; cursor: pointer; }
table.rep.party tr.sub.choice td.mk .link:hover { text-decoration: underline; }
table.rep.party tr.sub.choice td.mk .link.q { color: var(--quiet); }
@media (max-width: 900px) { table.rep.party .chrow { flex-wrap: wrap; gap: 4px 24px; } table.rep.party .chnote { white-space: normal; } }
/* crome.css 2.37.0: AG.3 */

/* ---------- Phase Z.8: documents the questionnaire cannot be sent without ----------
   A document whose absence would be Redline (the PI certificate) says Required beside its name; Send refuses until it
   is attached with its expiry date, and the row turns red like any other unanswered question. */
.qpage table.qtable td.el.q .req { display: block; margin-top: 4px; font-family: var(--head); font-size: 12px; color: var(--quiet); letter-spacing: .01em; }
.qpage table.qtable tr.miss td.el.q .req { color: var(--red); }
/* crome.css 2.38.0: Z.8 */

/* ---------- Phase AG.4: the party's name in its own row, the find bar back at the top ----------
   The party page's top bar is Home's again: the find bar, searching this party's contracts and projects, and the two
   buttons. The party's name moves down into its own row, where Details was, with no dot: the chips beside it already
   carry the colours. A long name ends in … rather than pushing the chips along. A contract's status chip opens the
   contract, as its name does. */
body[data-party] .worklist.heads li[data-find] { grid-template-columns: minmax(0, 1fr) auto auto; }
body[data-party] .worklist.heads li[data-find] a.name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.rep.party td.rk a.chip { line-height: 23px; }   /* a link chip keeps the chip's own line, so its word sits in the middle on a phone too */
.tabbody .nofind { margin: 0; padding: 12px 0; line-height: 24px; }
/* on a phone a contract is a card: the line under your last one is the card's own line, once, and the project
   starts at the edge like the rest of the card */
@media (max-width: 700px) {
  table.rep.party.contracts tr.line td { border-bottom: 0; }
  table.rep.party.contracts tr.line { border-bottom-color: var(--navy); }
  table.rep.party.contracts td.rk + td { padding-left: 0; }
}
/* crome.css 2.39.0: AG.4 */

/* ---------- Phase Z.9: a required document must be in date ----------
   A date before today beside a required document (the PI certificate) says so at once, in red under the date, and
   Send refuses it, asking for the current one. The expired flag stays, for a certificate that runs out after the
   questionnaire is back. */
.qpage .evx .expnote { flex-basis: 100%; font-family: var(--head); font-size: 12px; color: var(--red); letter-spacing: .01em; }
/* crome.css 2.40.0: Z.9 */

/* ---------- Phase Z.10: the questionnaire on one grid ----------
   Every box in the answer column is 40 tall, starts at the column's left edge and reaches its right edge, as the
   "Completed by" boxes and Send already did (Z.2). A yes/no question keeps its details box on the same line. A
   document's Attach, its details and its expiry share one line, the date always at the right edge, with "Expires"
   beside it rather than above; the file's name sits under the line. A person's Remove sits just left of their row, so
   their boxes reach the same edge as every other box. Options are 40 tall too, so a line of radios centres on a line
   of boxes, and the question's first line centres on both. */
.qpage { --qbox: 40px; --qgap: 8px; }
.qpage table.qtable td.ctl input:not([type=checkbox]):not([type=radio]):not([type=file]) { height: var(--qbox); max-width: none; padding: 0 12px; box-sizing: border-box; }
/* a row: 8 above and below a line of boxes (56 in all); the question's first 20px line centred on the boxes' 40 */
.qpage table.qtable.answers tr.term td.ctl { padding-top: 8px; padding-bottom: 8px; }
.qpage table.qtable.answers tr.term td.el.q { padding-top: 18px; padding-bottom: 18px; }
/* options: each 40 tall; a group that wraps keeps 40 between its lines */
.qpage .opts { padding: 0; column-gap: 24px; row-gap: 0; align-items: center; }
.qpage .opts label.check { height: var(--qbox); }
.qpage .opts label.check input[type=radio] { position: relative; top: -1px; }   /* the circle on the words' lowercase, not below it */
/* yes/no and its details, one line */
.qpage .yn { display: flex; align-items: center; gap: 24px; width: 100%; }
.qpage .yn .opts { flex: 0 0 auto; }
.qpage table.qtable td.ctl .yn input.detail { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
/* a document: Attach · details · Expires and its date, one line; the file's name under it */
.qpage .attach { display: block; }
.qpage .evx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qgap); width: 100%; margin: 0; }
.qpage .evx label.button.file { flex: 0 0 auto; margin: 0; padding: 0 18px; }
.qpage table.qtable td.ctl .evx input.evd { flex: 1 1 12rem; width: auto !important; max-width: none !important; min-width: 0; }
.qpage .evx label.exp { display: inline-flex; flex-direction: row; align-items: center; gap: var(--qgap); margin: 0 0 0 auto; padding-left: var(--qgap);
  font-family: var(--head); font-size: 13px; color: var(--quiet); white-space: nowrap; }
.qpage table.qtable td.ctl .evx label.exp input[type=date] { width: 10.5rem !important; flex: 0 0 auto; }
.qpage .evx .expnote { margin-top: -2px; }
.qpage .attach .fname { display: block; margin-top: 6px; line-height: 18px; }
/* people: Remove just left of the row, so the boxes reach the column's right edge */
.qpage .prow { position: relative; gap: var(--qgap); }
.qpage .prow .rm { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 12px; padding: 0; line-height: 20px; }
.qpage .plist .add { line-height: 20px; }
.qpage .plist .prow:only-of-type .rm { display: none; }   /* one row: nothing to remove; clearing it does the same */
/* the foot: the same gap between boxes as everywhere else */
.qpage .who3 { gap: var(--qgap); }
/* the foot: the declaration starts at the answer column's left edge, Save for later and Send end at its right */
.qpage .sendrow { justify-content: space-between; flex-wrap: wrap; gap: 12px 10px; }
.qpage .sendrow label.check { flex: 1 1 20rem; margin-right: 0 !important; white-space: normal !important; align-items: flex-start; line-height: 20px; }
.qpage .sendrow label.check input[type=checkbox] { align-self: flex-start; margin-top: 4px; }   /* on the first line when the words wrap */
.qpage .sendrow .sendbtns { display: flex; gap: 10px; margin-left: auto; }   /* the two buttons stay together, at the right edge */
@media (max-width: 700px) {
  .qpage .yn { flex-wrap: wrap; gap: 0; } .qpage .yn .opts { flex: 1 1 100%; } .qpage table.qtable td.ctl .yn input.detail { flex: 1 1 100%; }
  .qpage table.qtable td.ctl .evx input.evd { flex: 1 1 100%; }
  .qpage .evx label.exp { flex: 1 1 100%; margin-left: 0; padding-left: 0; }
  .qpage table.qtable td.ctl .evx label.exp input[type=date] { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .qpage .prow input.o { flex: 1 1 calc(50% - 4px); }
  .qpage .prow .rm { position: static; transform: none; margin: -2px 0 0 auto; flex: 0 0 auto; }
  .qpage .who3 input { flex: 0 0 auto; }
  .qpage .sendrow { justify-content: flex-start; }
  .qpage .sendrow .sendbtns { flex: 1 1 100%; margin-left: 0; } .qpage .sendrow .sendbtns button { flex: 1 1 auto; }   /* the two share the line, to the boxes' right edge */
  .qpage table.qtable.answers tr.term td.el.q { padding-top: 16px; padding-bottom: 8px; }
  .qpage table.qtable.answers tr.term td.ctl { padding-top: 0; padding-bottom: 16px; }
}
/* crome.css 2.41.0: Z.10 */

/* ---------- Phase AGii: Settings in Home's frame ----------
   Settings is Home's page: the find bar and the two buttons on top, one line of tabs (Practice, People, Playbooks,
   Questions, Support, My clients), then one column of rows. A row's chips sit on Home's chip squares, the left half's
   right edge less two squares (measured, as the party page measures its chips), and its facts start one square after
   them. Role is a chip you can change; state is a chip you read. One action at a row's end, in the facts' face. */
body[data-settings] [hidden] { display: none !important; }      /* a closed row or tab stays closed when a phone stacks the rows */
body[data-settings] .settabs a { cursor: pointer; white-space: nowrap; }
@media (max-width: 1100px) { body[data-settings] .settabs { column-gap: 18px; } }   /* six tabs in a narrow left half stay on one line */
body[data-settings] table.rep.party col.c-d { width: 160px; }   /* room for the longest action, Use the practice's instead */
body[data-settings] .nofind { margin: 0; padding: 12px 0; line-height: 24px; border-bottom: 1px solid var(--hair); }
body[data-settings] table.rep.party td.rk { overflow: visible; }  /* two chips and the square between fill the column to its edge */
body[data-settings] table.rep.party td.rk .chips2 { display: inline-flex; gap: 24px; align-items: center; vertical-align: top; }
body[data-settings] table.rep.party td.rk form.chipsel { display: inline-flex; margin: 0; }
body[data-settings] table.rep.party td.rk select.chip { height: 23px; line-height: 23px; padding: 0; font-family: var(--head); font-size: 11.5px; letter-spacing: .01em;
  color: var(--ink); text-align: center; text-align-last: center; border: 0; border-radius: 2px; vertical-align: top; }
body[data-settings] table.rep.party td.rk + td { padding-left: 24px; }
body[data-settings] table.rep.party td.el .seat { color: var(--quiet); }
body[data-settings] table.rep.party tr.quietrow td.el { color: var(--quiet); }
body[data-settings] table.rep.party td.el a { color: var(--ink); } body[data-settings] table.rep.party td.el a:hover { color: var(--navy); text-decoration: none; }
body[data-settings] table.rep.party tr.add td.el a { font-family: var(--head); font-size: 13.5px; color: var(--navy); }
body[data-settings] table.rep.party td.mk label.link.act { font-family: var(--head); font-size: 13.5px; color: var(--navy); cursor: pointer; }
body[data-settings] table.rep.party td.mk label.link.act:hover { text-decoration: underline; }
body[data-settings] table.rep.party td.mk .link.act.q { color: var(--quiet); }
body[data-settings] table.rep.party td.mk .link.act + .link.act { margin-left: 16px; }
body[data-settings] table.rep.party tr.formrow select:not(.chip) { padding: 4px 8px; }
body[data-settings] table.rep.party tr.formrow td.el input { width: 100%; }
body[data-settings] .notes { font-family: var(--head); font-size: 12.5px; color: var(--quiet); line-height: 20px; margin: 12px 0 0; max-width: 72ch; }
body[data-settings] details.fold .notes { margin: 12px 0 16px; }
body[data-settings] .tabbody > details.fold { margin-top: 24px; }
body[data-settings] .qtext { margin-top: 16px; } body[data-settings] .qtext textarea { width: 100%; font-family: Menlo, monospace; font-size: 12px; line-height: 18px; }
body[data-settings] .qtext .notes { margin: 0; } body[data-settings] .notes code { font-size: 11.5px; }
body[data-settings] .qset > table.rep.party { margin-top: 0; }
/* the words in every row on one baseline, 12 down; chips and buttons in the middle (AF.1's rule, for these tables) */
@media (min-width: 901px) {
  body[data-settings] table.rep.party:not(.details) tr:not(.formrow) > td { vertical-align: baseline; padding-top: 12px; line-height: 23px; }
  body[data-settings] table.rep.party:not(.details) tr:not(.formrow) > td.rk,
  body[data-settings] table.rep.party:not(.details) tr:not(.formrow) > td:has(select, button:not(.link), .button) { vertical-align: middle; padding-top: 0; }
}
/* up to 900 wide (a tablet held upright, then a phone) the two halves stack, so a row becomes a card, as on a phone:
   the name, the chips, the facts, the action, one under another; nothing is squeezed out of sight */
@media (max-width: 900px) {
  body[data-settings] .setheads { row-gap: 16px; }
  body[data-settings] table.rep.party, body[data-settings] table.rep.party tbody, body[data-settings] table.rep.party tr { display: block; width: auto; }
  body[data-settings] table.rep.party colgroup { display: none; }
  body[data-settings] table.rep.party tr { height: auto; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  body[data-settings] table.rep.party tr:not(.sub) > td { display: block; width: auto; height: auto; padding: 0; border: 0; white-space: normal; overflow: visible;
    text-overflow: clip; vertical-align: top; line-height: 1.5; }
  body[data-settings] table.rep.party tr:not(.sub) > td.el { margin-bottom: 6px; }
  body[data-settings] table.rep.party tr:not(.sub) > td.rk { margin: 0 0 6px; text-align: left; }
  body[data-settings] table.rep.party tr:not(.sub) > td.mk { text-align: left; margin-top: 6px; }
  body[data-settings] table.rep.party tr:not(.sub) > td:empty { display: none; }
  body[data-settings] table.rep.party tr.formrow { padding: 12px 0; }
  body[data-settings] table.rep.party tr.formrow input:not([type=radio]):not([type=checkbox]) { width: 100% !important; }
  body[data-settings] table.rep.party tr.formrow .row.tight { flex-wrap: wrap; }
  body[data-settings] table.rep.party td.rk .chips2 { gap: 12px; }
  body[data-settings] table.rep.party td.mk .link.act + .link.act { margin-left: 20px; }
}
/* phone: the tabs wrap onto a second line */
@media (max-width: 700px) {
  body[data-settings] .settabs { flex-wrap: wrap; row-gap: 4px; column-gap: 20px; }
}
/* crome.css 2.42.0: AGii */

/* ---------- Phase AAii: the Questions tab ----------
   Each set's sections are folds; a question is one row: its reference and words, its flags as chips with the answer
   that raises each (a chip four squares wide on Home's first chip square, the answer beside it), then its kind of
   answer. The question's words open it in place: its wording, its kind of answer and a chip you can change for each
   answer it can have. The foot counts the changes; Save makes the next version, and questionnaires already sent keep
   theirs. */
body[data-settings] .qfolds details.fold:first-child { border-top: 0; }
body[data-settings] details.qsec > table.rep.party { margin: 0; }
body[data-settings] table.rep.party.qs tr.qrow { height: auto; }
body[data-settings] table.rep.party.qs tr.qrow > td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; line-height: 23px; }
body[data-settings] table.rep.party.qs tr.qrow > td.rk { vertical-align: top; padding-top: 12px; }
body[data-settings] table.rep.party.qs td.el.q { white-space: normal; overflow: visible; padding-right: 24px; }
body[data-settings] table.rep.party.qs button.qopen { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer;
  font-family: var(--body); font-size: 14.5px; line-height: 23px; color: var(--ink); }
body[data-settings] table.rep.party.qs button.qopen:hover .txt { color: var(--navy); }
body[data-settings] table.rep.party.qs button.qopen .ref { font-family: var(--head); font-size: 12px; color: var(--quiet); margin-right: 10px; }
body[data-settings] table.rep.party.qs tr.editing button.qopen .txt { border-bottom: 2px solid var(--navy); padding-bottom: 1px; }
body[data-settings] table.rep.party.qs tr.blank button.qopen .txt { color: var(--quiet); }
body[data-settings] table.rep.party.qs .flags { display: flex; flex-direction: column; gap: 8px; }
body[data-settings] table.rep.party.qs .flags .fl { display: flex; align-items: center; gap: 24px; height: 23px; }
body[data-settings] table.rep.party.qs .flags .chip { flex: 0 0 auto; }
body[data-settings] table.rep.party.qs .when, body[data-settings] table.rep.party.qs .noflag { font-family: var(--head); font-size: 13px; color: var(--quiet); white-space: nowrap; }
body[data-settings] table.rep.party.qs td.kind { font-family: var(--head); font-size: 13.5px; color: var(--ink); white-space: normal; overflow: visible; }
body[data-settings] table.rep.party.qs td.kind .sub { display: block; color: var(--quiet); font-size: 12.5px; line-height: 18px; }
body[data-settings] table.rep.party.qs tr.removed button.qopen, body[data-settings] table.rep.party.qs tr.removed td.kind { color: var(--quiet); text-decoration: line-through; }
body[data-settings] table.rep.party.qs tr.removed .chip { opacity: .4; }
/* a question opened in place: its rows sit under it, labels in the name column, as a party's record does */
body[data-settings] table.rep.party.qs tr.qe { height: 48px; }
body[data-settings] table.rep.party.qs tr.qe > td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; line-height: 23px; }
body[data-settings] table.rep.party.qs tr.qe td.hd, body[data-settings] table.rep.party.qs tr.qe .hint { font-family: var(--head); font-size: 13px; color: var(--quiet); white-space: normal; }
body[data-settings] table.rep.party.qs tr.qe textarea.qe-text { color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--hair); min-height: 23px; }
body[data-settings] table.rep.party.qs tr.qe textarea.qe-text:focus { border-bottom-color: var(--navy); }
body[data-settings] table.rep.party.qs tr.qe input.qe-options { color: var(--ink); border-bottom: 1px solid var(--hair); }
body[data-settings] table.rep.party td.rk select.chip.red { color: #fff; }   /* a flag chip you can change reads as the chip it is */
body[data-settings] table.rep.party.qs tr.qe select.qe-kind { padding: 4px 8px; border: 1px solid var(--hair); border-radius: var(--r1); color: var(--ink); }
body[data-settings] table.rep.party.qs tr.qe.last td { border-bottom: 1px solid var(--hair); }
/* the foot: what is unsaved, and the two buttons */
body[data-settings] .qfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--navy); margin-top: 24px; }
body[data-settings] .qfoot .say { font-family: var(--head); font-size: 13.5px; color: var(--quiet); line-height: 20px; }
body[data-settings] .qfoot .say b { font-weight: 400; color: var(--ink); }
body[data-settings] .qfoot .btns { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
body[data-settings] .qfoot button.link.act { font-family: var(--head); font-size: 13.5px; text-decoration: none; }
body[data-settings] .qerr { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--red); background: #f7f8fa; font-family: var(--head); font-size: 13.5px; color: var(--ink); }
@media (max-width: 900px) {
  body[data-settings] table.rep.party.qs tr.qrow > td { padding: 0; }
  body[data-settings] table.rep.party.qs tr.qrow > td.rk { margin: 6px 0; }
  body[data-settings] table.rep.party.qs tr.qe { height: auto; padding: 6px 0; border-bottom: 0; }
  body[data-settings] table.rep.party.qs tr.qe > td { display: block; padding: 2px 0; border: 0; }
  body[data-settings] table.rep.party.qs tr.qe > td.el { padding-left: 0; }
  body[data-settings] table.rep.party.qs tr.qe > td:empty { display: none; }
  body[data-settings] table.rep.party.qs tr.qe.last > td { border-bottom: 0; } body[data-settings] table.rep.party.qs tr.qe.last { border-bottom: 1px solid var(--hair); }
  body[data-settings] table.rep.party.qs .flags .fl { gap: 12px; }
  body[data-settings] .qfoot { flex-wrap: wrap; }
}
/* crome.css 2.43.0: AAii */

/* ---------- Phase AHii: the contract's stage pages ----------
   The contract wears the party page's head: the find bar and the stage's actions, then (since AHiii, below) the
   party's row with the contract's own row kept under it, and More at the right edge. In the body a chip sits under the
   status chip (the right half less two squares) and the words start where the right half does. A choice is a chip:
   the chosen one filled navy, the others drawn in outline. A line to check is a chip you click. */
body[data-contract] [hidden] { display: none !important; }
body[data-contract] .gone { display: none !important; }
body[data-contract] .worklist.heads li[data-find] { grid-template-columns: minmax(0, 1fr) auto auto; }
body[data-contract] .worklist.heads li[data-find] a.name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* More: one word at the row's end; a short menu under it */
body[data-contract] .morewrap { position: relative; flex: 0 0 auto; }
body[data-contract] button.morebtn { display: inline; height: auto; padding: 0; border: 0; background: none; color: var(--navy); font-family: var(--head); font-size: 14px; line-height: 24px; cursor: pointer; }
body[data-contract] button.morebtn:hover, body[data-contract] button.morebtn[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 4px; }
body[data-contract] .menu { position: absolute; right: 0; top: 34px; z-index: 6; min-width: 300px; padding: 6px 0; background: #fff; border: 1px solid var(--hair);
  box-shadow: 0 10px 28px rgba(0, 33, 71, .12); text-align: left; white-space: nowrap; }
body[data-contract] .menu form { display: block; margin: 0; }
body[data-contract] .menu .mi, body[data-contract] .menu button.mi, body[data-contract] .menu label.mi { display: block; width: 100%; height: auto; margin: 0; padding: 9px 18px; border: 0; border-radius: 0;
  background: none; color: var(--navy); font-family: var(--head); font-size: 13.5px; line-height: 20px; text-align: left; text-decoration: none; cursor: pointer; }
body[data-contract] .menu .mi:hover { background: #f6f7f9; text-decoration: none; }
body[data-contract] .menu .mi .quiet { margin-left: 8px; font-size: 12.5px; color: var(--quiet); }
body[data-contract] .menu .mi.danger { color: var(--red); }
body[data-contract] .menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--hair); }
body[data-contract] .menu .panel { padding: 0 18px 8px 30px; }
body[data-contract] .menu .panel .mi { padding: 6px 0; }
body[data-contract] .menu .panel .mi:hover { background: none; text-decoration: underline; }
body[data-contract] .menu .panel label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px 0; font-family: var(--head); font-size: 13.5px; color: var(--ink); }
body[data-contract] .menu .panel label.check .r { color: var(--quiet); font-size: 12.5px; }
body[data-contract] .menu .delform { display: flex; gap: 8px; align-items: center; padding-top: 4px; }
body[data-contract] .menu .delform input { width: 15rem; height: 32px; padding: 0 8px; font-family: var(--head); font-size: 13px; }
/* the dashed target is a label round its file box, so a click picks a file and a file dropped on it goes straight in */
body[data-contract] label.dropzone { flex-direction: row; gap: 0; font-size: 14px; margin: 0; }
body[data-contract] label.dropzone.over { border-color: var(--navy); border-style: solid; }
/* the body: chips under the status chip, words where the right half starts, the choice at the row's end */
body[data-contract] table.rep.party col.c-name { width: calc(50% - 120px); }
body[data-contract] table.rep.party col.c-risk { width: 144px; }
body[data-contract] table.rep.party col.c-d { width: 14%; }
body[data-contract] table.rep.party.stage td.rk { overflow: visible; padding-left: 0; padding-right: 0; }
body[data-contract] table.rep.party.stage td.rk + td { padding-left: 0; }
body[data-contract] table.rep.party.stage td.mk { overflow: visible; padding-right: 0; }
body[data-contract] table.rep.party.stage td.mk .dec { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
body[data-contract] table.rep.party.stage td .cl { margin-left: 8px; font-family: var(--head); font-size: 12px; color: var(--quiet); }
body[data-contract] table.rep.party.stage td.hd, body[data-contract] table.rep.party.stage td.hd a { color: var(--ink); }
body[data-contract] table.rep.party.stage tr.calm td.hd, body[data-contract] table.rep.party.stage tr.calm td.el { color: var(--quiet); }
body[data-contract] table.rep.party.stage tr.opens { cursor: pointer; }
body[data-contract] table.rep.party.stage tr.opens:hover > td { background: #fafbfc; }
body[data-contract] table.rep.party.stage tr.opened td.el .lbl { border-bottom: 2px solid var(--navy); padding-bottom: 2px; }
body[data-contract] table.rep.party.stage tr.opened td.hd { white-space: normal; overflow: visible; padding-bottom: 12px; }   /* opened, the words read in full */
body[data-contract] table.rep.party.stage tr.sec td.sech { font-family: var(--head); font-size: 13px; color: var(--navy); letter-spacing: .02em; }
@media (min-width: 701px) {
  body[data-contract] table.rep.party.stage tr:not(.sub) > td { vertical-align: baseline; padding-top: 12px; line-height: 23px; }
  body[data-contract] table.rep.party.stage tr:not(.sub) > td.rk { vertical-align: middle; padding-top: 0; }
}
/* a term opened in place: its rows under it, labels in the name column, the words at the chip's edge */
body[data-contract] table.rep.party.stage tr.sub td.el { padding-left: 24px; }
body[data-contract] table.rep.party.stage tr.sub td.q { white-space: normal; overflow: visible; padding-top: 11px; padding-bottom: 11px; padding-right: 0;
  font-family: var(--body); font-size: 14px; line-height: 21px; color: var(--ink); vertical-align: top; }
body[data-contract] table.rep.party.stage tr.sub td.el { vertical-align: top; padding-top: 12px; }
body[data-contract] table.rep.party.stage tr.sub td.q.pb { font-family: var(--head); font-size: 13.5px; }
body[data-contract] table.rep.party.stage tr.sub:has(td.q) { height: auto; }
body[data-contract] table.rep.party.stage tr.sub td.q del { color: var(--red); text-decoration-thickness: 1px; }
body[data-contract] table.rep.party.stage tr.sub td.q ins { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
body[data-contract] table.rep.party.stage tr.sub td.q .same { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
body[data-contract] table.rep.party.stage tr.sub td.q .pl { display: block; }
body[data-contract] table.rep.party.stage tr.sub td.q .pl + .pl { margin-top: 6px; }
body[data-contract] table.rep.party.stage tr.sub td.q .pw { color: var(--quiet); margin-right: 4px; }
body[data-contract] table.rep.party.stage tr.sub td.q .cond { color: var(--quiet); }
body[data-contract] table.rep.party.stage tr.sub.choose { height: 56px; }
body[data-contract] table.rep.party.stage tr.sub.choose td { overflow: visible; vertical-align: middle; padding-top: 0; }
body[data-contract] .choices { display: inline-flex; gap: 12px; align-items: center; }
body[data-contract] .choices form.inline { display: inline-flex; margin: 0; }
body[data-contract] .choices .waiting { font-family: var(--head); font-size: 13.5px; color: var(--quiet); }
/* a choice is a chip */
body[data-contract] button.chip.pick { height: 23px; line-height: 23px; padding: 0; border: 0; border-radius: 2px; font-size: 11.5px;
  background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); cursor: pointer; }
body[data-contract] button.chip.pick:hover { background: #f1f3f6; }
body[data-contract] button.chip.pick.chosen, body[data-contract] button.chip.pick.chosen:hover { background: var(--navy); color: #fff; box-shadow: none; cursor: default; }
body[data-contract] button.chip.pick:disabled { opacity: 1; cursor: default; }
body[data-contract] button.chip.pick:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* a line to check: To check at rest; Check, in navy, when pointed at; Checked, in green, once clicked, then it fades */
body[data-contract] button.chip.tocheck { height: 23px; line-height: 23px; padding: 0; border: 0; border-radius: 2px; font-size: 11.5px;
  background: var(--none); color: var(--quiet); cursor: pointer; transition: opacity .5s ease-out; }
body[data-contract] button.chip.tocheck .w1 { display: none; }
@media (hover: hover) {
  body[data-contract] button.chip.tocheck:not(.checked):not(:disabled):hover { background: var(--navy); color: #fff; }
  body[data-contract] button.chip.tocheck:not(.checked):not(:disabled):hover .w0 { display: none; }
  body[data-contract] button.chip.tocheck:not(.checked):not(:disabled):hover .w1 { display: inline; }
}
body[data-contract] button.chip.tocheck:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body[data-contract] button.chip.tocheck.checked { background: var(--green); color: #000; opacity: 1; cursor: default; }
body[data-contract] button.chip.tocheck.fade { opacity: 0; }
body[data-contract] button.chip.tocheck:disabled:not(.checked) { opacity: 1; cursor: default; }
@media (prefers-reduced-motion: reduce) { body[data-contract] button.chip.tocheck { transition: none; } }
/* the folds follow the rows with no gap; a page with no rows has a quiet line instead */
body[data-contract] .tabbody .folds { margin-top: 0; }
body[data-contract] .tabbody .folds details.fold:first-child { border-top: 0; }
body[data-contract] .tabbody table.rep.party.stage + .nofind + .folds details.fold:first-child { border-top: 0; }
body[data-contract] details.fold > table.rep.party.stage { margin: 0 0 12px; }
body[data-contract] details.fold > table.rep.party.stage tr:last-child td { border-bottom: 0; }
body[data-contract] .foldtext { margin: 0; padding: 12px 0; font-family: var(--head); font-size: 13.5px; line-height: 24px; color: var(--ink); }
body[data-contract] .bodynote { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hair); font-family: var(--head); font-size: 14px; line-height: 24px; color: var(--ink); }
body[data-contract] .nofind { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hair); font-family: var(--head); font-size: 14px; line-height: 24px; color: var(--quiet); }
body[data-contract] .tabbody > .hint { margin: 12px 0; }
body[data-contract] .tabbody > .flash { margin: 12px 0; }
@media (max-width: 900px) {
  body[data-contract] table.rep.party col.c-name { width: 40%; } body[data-contract] table.rep.party col.c-risk { width: 120px; }
}
/* phone: a term is a card; its rows and chips follow it, and the menu stays on the screen */
@media (max-width: 700px) {
  body[data-contract] table.rep.party.stage tr.sub { height: auto; padding: 6px 0; border-bottom: 0; }
  body[data-contract] table.rep.party.stage tr.sub > td { display: block; height: auto; padding: 2px 0; border: 0; }
  body[data-contract] table.rep.party.stage tr.sub td.el { padding-left: 0; }
  body[data-contract] table.rep.party.stage tr.sub > td:empty { display: none; }
  body[data-contract] table.rep.party.stage tr.sub.choose { height: auto; padding: 8px 0 14px; border-bottom: 1px solid var(--hair); }
  body[data-contract] .choices { flex-wrap: wrap; }
  body[data-contract] table.rep.party.stage tr.sec { height: auto; padding: 24px 0 8px; border-bottom: 1px solid var(--hair); }
  body[data-contract] table.rep.party.stage tr.sec td.sech { padding: 0; border-bottom: 0; }
  body[data-contract] .menu { max-width: calc(100vw - 32px); white-space: normal; }
  body[data-contract] .menu .delform { flex-wrap: wrap; } body[data-contract] .menu .delform input { width: 100%; }
}
body[data-contract] table.rep.party.stage tr.calm td.hd a { color: var(--navy); }
@media (min-width: 701px) {
  /* an opened term keeps its chip on its first line while its words wrap */
  body[data-contract] table.rep.party.stage tr.opened > td.rk { vertical-align: top; padding-top: 12px; }
}
/* crome.css 2.44.0: AHii */

/* ---------- Phase AHiii: the open item's row kept under the party's ----------
   Every page under a party wears the party page's head, and the row you clicked stays (settled 5.10.2026). The party's
   relationship line and its row come first, the chip of the tab you came from stepping back to an outline that leads
   back there; a hairline; then the item's own row, the same row its tab lists, its chip under that tab's chip and
   underlined; one navy rule under it. A contract's row: the title in the list's serif with its project and our side
   beside it, the facts giving way before the title does; the status chip under Contracts; who has it and for how long,
   the owners where the "with" has not named them, and More at the end. The same row on the party's Contracts tab. On
   a phone the row is one card of three lines, and the owners wait in More. */
.two.headsrow.above { background: linear-gradient(var(--hair), var(--hair)) left bottom / 100% 1px no-repeat; }
.two.headsrow.above .worklist.heads li[data-find] { border-bottom-color: var(--hair); grid-template-columns: minmax(0, 1fr) auto auto; }
.two.headsrow.above .worklist.heads li[data-find] a.name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* a long name ends in …, on every page under a party */
.worklist li[data-find] a.chip.back { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px #928d84; }
.worklist li[data-find] a.chip.back:hover { box-shadow: inset 0 0 0 1px var(--navy); filter: none; }
.headsrow.item .worklist.heads li[data-find] { grid-template-columns: minmax(0, 1fr) auto auto; }
.headsrow.item .worklist.heads li[data-find].one { grid-template-columns: minmax(0, 1fr) auto; }   /* one chip, under Contracts: the title runs on across Compliance's squares */
.headsrow.item .worklist.heads li[data-find] span.chip.on { position: relative; }
.headsrow.item .worklist.heads li[data-find] span.chip.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--navy); }
.headsrow.item section.col.acts li[data-find] { justify-content: space-between; gap: 24px; overflow: visible; }
.iname { display: flex; align-items: baseline; gap: 16px; min-width: 0; overflow: hidden; line-height: 24px; }
.iname .ititle { flex: 0 0 auto; max-width: 100%; font-family: var(--body); font-size: 15.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iname a.ititle:hover { color: var(--navy); text-decoration: none; }
.iname .ifacts { flex: 0 1 auto; min-width: 0; font-family: var(--head); font-size: 13.5px; color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iright { display: flex; align-items: baseline; gap: 24px; min-width: 0; overflow: hidden; }
.iright .holder { flex: 0 0 auto; max-width: 100%; font-family: var(--head); font-size: 14px; color: var(--ink); line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iright .holder .quiet { color: var(--quiet); }
.iright .iown { flex: 0 1 auto; min-width: 0; font-family: var(--head); font-size: 13.5px; color: var(--quiet); line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the Contracts tab: the title runs to the Contracts chip, the words start where the right half does */
body[data-party] table.rep.party.contracts td.el { padding-right: 24px; }
body[data-party] table.rep.party.contracts td.rk + td { padding-left: 48px; }
/* the adverse media report: its rows narrow as you search; on a narrow window the empty chip column gives way */
body[data-adverse] .gone { display: none !important; }
@media (max-width: 900px) { body[data-adverse] table.rep.party col.c-name { width: 40%; } body[data-adverse] table.rep.party col.c-risk { width: 24px; } }
/* a narrow window: the head's halves stack, so the item's row is two lines, the title and its chip, then who has it
   and More; an empty half takes no room. A contract on the Contracts tab becomes the same card. */
@media (max-width: 900px) {
  .two.headsrow section.col:empty { display: none; }
  .two.headsrow.item { row-gap: 0; }
  .headsrow.item section.col:first-child .worklist.heads li[data-find] { border-bottom: 0; }
  body[data-party] table.rep.party.contracts, body[data-party] table.rep.party.contracts tbody { display: block; width: auto; }
  body[data-party] table.rep.party.contracts colgroup { display: none; }
  body[data-party] table.rep.party.contracts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; height: auto; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  body[data-party] table.rep.party.contracts tr:not(.sub) > td { display: block; height: auto; padding: 0; border: 0; line-height: 24px; vertical-align: top; }
  body[data-party] table.rep.party.contracts tr:not(.sub) > td.el { grid-column: 1; grid-row: 1; margin: 0; }
  body[data-party] table.rep.party.contracts tr:not(.sub) > td.rk { grid-column: 2; grid-row: 1; margin: 0; text-align: right; }
  body[data-party] table.rep.party.contracts tr:not(.sub) > td.rk + td { grid-column: 1 / -1; margin-top: 2px; }
  body[data-party] table.rep.party.contracts tr.line { border-bottom-color: var(--navy); }
}
/* a phone: the row is one card of three lines, the title and its chip, what it is, who has it and More; a long title
   wraps rather than ending in …; the owners wait in More */
@media (max-width: 700px) {
  .headsrow.item section.col:first-child .worklist.heads li[data-find] { height: auto; padding: 12px 0 4px; align-items: start; }
  .headsrow.item .iname { display: contents; }   /* the facts take the card's whole width, under the chips */
  .headsrow.item .iname .ititle { grid-column: 1; grid-row: 1; }
  .headsrow.item .iname .ifacts { grid-column: 1 / -1; grid-row: 2; }
  .headsrow.item .worklist.heads .chip.ph { display: inline-block; }   /* a compliance item's chip stays under Compliance */
  .iname { display: block; } .iname .ititle, .iname .ifacts { display: block; max-width: none; }
  .iname .ititle { white-space: normal; overflow: visible; }
  .headsrow.item section.col.acts li[data-find] { height: auto; padding: 2px 0 12px; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; }
  .iright { flex-wrap: wrap; gap: 0 12px; } .iright .holder { white-space: normal; } .iright .iown { display: none; }
}
/* crome.css 2.45.0: AHiii */

/* ---------- Phase AHv: changes they did not track, and Withdraw ----------
   A returned version opens with one line saying what comparing it with the copy we sent found. Each change they made
   without tracking it leads the rows: Untracked in red before the words, the change itself under Their change, and
   the markup putting it back under Markup. In More, Withdraw asks who walked away (three chips, one chosen) and why,
   in a line; the record stays. */
body[data-contract] .flagw { color: var(--red); margin-right: 10px; }
body[data-contract] .menu .panel .wdq { font-family: var(--head); font-size: 13px; color: var(--quiet); padding: 4px 0 8px; }
body[data-contract] .menu .panel .choices { display: flex; gap: 12px; padding-bottom: 10px; }
body[data-contract] label.chip.pick { position: relative; display: inline-block; height: 23px; line-height: 23px; padding: 0; border: 0; border-radius: 2px;
  font-size: 11.5px; background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); cursor: pointer; }
body[data-contract] label.chip.pick:hover { background: #f1f3f6; }
body[data-contract] label.chip.pick:has(input:checked), body[data-contract] label.chip.pick:has(input:checked):hover { background: var(--navy); color: #fff; box-shadow: none; }
body[data-contract] label.chip.pick input { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
body[data-contract] label.chip.pick:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
/* crome.css 2.47.0: AHv */

/* ---------- Phase ALi: the sidebar frame (settled 9.10.2026) ----------
   The page sits in a light grey frame with the sidebar on its left: the name, Search, New, Parties with a quiet count,
   and your name at the foot. Grey says where you are (the sidebar's chosen item, a contract's own row); white says
   where you act (search fields, a row you point at, a term you opened, as a card with rounded corners). Every word
   starts on one left edge; what you point at or open reaches 24px beyond it. Chips sit at the right edge, under their
   headings: Contracts, then Compliance. People outside the practice see no sidebar. */
:root { --frame: #f8f8f6; --rail: #f4f3f0; --line: #e3e1db; --pill: #e9e7e1; --here: #eeede8; --sheet: #fff; --edge: #d6d4ce; --side-w: 264px; }
body.framed { --hair: var(--line); background: var(--frame); padding-left: var(--side-w); }

/* the sidebar */
nav.side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); z-index: 30; display: flex; flex-direction: column; padding: 12px;
  background: var(--rail); border-right: 1px solid var(--line); font-family: var(--head); }
nav.side svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
nav.side .logo { display: flex; align-items: center; height: 39.25px; padding: 0 4px 0 12px; }   /* ALiv.2: New on the page's first line, 75 down */
nav.side .logo .mark { display: block; } nav.side .logo .mark:hover { text-decoration: none; }
nav.side .logo .mark img { display: block; height: 16px; width: auto; }
nav.side button.fold { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: #6e6b64; cursor: pointer; }
nav.side button.fold:hover { background: var(--here); color: var(--navy); }
nav.side button.fold svg { width: 17px; height: 17px; flex-basis: 17px; }
nav.side .search { display: flex; align-items: center; gap: 10px; height: 40px; margin: 12px 0; padding: 0 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; color: #6e6b64; }
nav.side .search:focus-within { border-color: #b9b6ae; }
nav.side .search input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--head); font-size: 15px; color: var(--navy); outline: none; -webkit-appearance: none; appearance: none; }
nav.side .search input::placeholder { color: #6e6b64; }
nav.side .search input::-webkit-search-cancel-button { display: none; }
nav.side a.item { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 8px; color: #3b3a37; font-size: 15.5px; }
nav.side a.item + a.item { margin-top: 2px; }
nav.side a.item:hover { background: var(--here); text-decoration: none; }
nav.side a.item.on { background: var(--pill); color: var(--navy); }
nav.side a.item .n { margin-left: auto; font-size: 13px; color: var(--quiet); }
nav.side .me { position: relative; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
nav.side button.mebtn { display: flex; align-items: center; gap: 12px; width: 100%; height: 52px; padding: 0 8px 0 12px; border: 0; border-radius: 8px; background: none; color: #2f2e2b; text-align: left; cursor: pointer; font-family: var(--head); }
nav.side button.mebtn:hover, nav.side button.mebtn[aria-expanded="true"] { background: var(--here); }
nav.side .mebtn .who2 { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
nav.side .mebtn .n2 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav.side .mebtn .r2 { font-size: 12.5px; color: #6e6b64; }
nav.side .mebtn svg { margin-left: auto; color: #6e6b64; }
nav.side .memenu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; padding: 6px; background: var(--sheet);
  border: 1px solid var(--line); border-radius: var(--r2); box-shadow: 0 10px 28px rgba(0, 33, 71, .10); }
nav.side .memenu[hidden] { display: none; }
nav.side .memenu form { margin: 0; }
nav.side .memenu a, nav.side .memenu button { display: block; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--navy);
  font-family: var(--head); font-size: 14px; line-height: 36px; text-align: left; cursor: pointer; }
nav.side .memenu a:hover, nav.side .memenu button:hover { background: var(--here); text-decoration: none; }
/* folded: the icons only, remembered in this browser */
@media (min-width: 901px) {
  html.folded { --side-w: 64px; }
  html.folded nav.side { padding: 12px 8px; }
  html.folded nav.side .logo { justify-content: center; padding: 0; }
  html.folded nav.side .logo .mark { display: none; }
  html.folded nav.side button.fold { margin: 0; }
  html.folded nav.side button.fold svg { transform: scaleX(-1); }
  html.folded nav.side .search { justify-content: center; padding: 0; border-color: transparent; background: none; cursor: pointer; }
  html.folded nav.side .search:hover { background: var(--here); }
  html.folded nav.side .search input { display: none; }
  html.folded nav.side a.item { justify-content: center; padding: 0; }
  html.folded nav.side a.item .w { display: none; }
  html.folded nav.side a.item .n { position: absolute; top: 4px; right: 6px; margin: 0; font-size: 10.5px; line-height: 1; }
  html.folded nav.side button.mebtn { justify-content: center; padding: 0; }
  html.folded nav.side .mebtn .who2 { display: none; }
  html.folded nav.side .mebtn svg { margin: 0; }
  html.folded nav.side .memenu { right: auto; width: 200px; }
}
/* a narrow window: the sidebar waits behind a button and slides over the page */
.mbar, .scrim { display: none; }
@media (max-width: 900px) {
  body.framed { padding-left: 0; }
  .mbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; background: var(--rail); border-bottom: 1px solid var(--line); }
  .mbar button.mopen { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: none; color: #3b3a37; cursor: pointer; }
  .mbar button.mopen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .mbar .mark img { display: block; height: 16px; width: auto; }
  nav.side { width: 280px; transform: translateX(-100%); transition: transform .2s ease-out; }
  nav.side button.fold { display: none; }
  html.sideopen nav.side { transform: none; box-shadow: 0 10px 40px rgba(0, 33, 71, .16); }
  html.sideopen .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 33, 71, .18); }
}
@media (prefers-reduced-motion: reduce) { nav.side { transition: none; } }
/* the board comes up over the sidebar too */

/* white is where you act: the find field and the quiet buttons */
body.framed .bar label.find { gap: 12px; height: 40px; padding: 0 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; }
body.framed .bar label.find:focus-within { border-color: #b9b6ae; }
body.framed .bar label.find svg { color: #6e6b64; }
body.framed .button.ghost, body.framed button.ghost { background: var(--sheet); }

/* New: the star beside a greeting, the card that takes a contract, a new party beneath */
.newpage { min-height: calc(100vh - 100px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 56px; }
.newpage h1.hello { display: flex; align-items: center; gap: 16px; min-height: 0; margin: 0 0 36px; font-family: var(--body); font-size: 30px; line-height: 40px; font-weight: 400; color: var(--ink); }
.newpage .hello .star { display: block; width: 34px; height: auto; }
.newpage button.newcard { display: block; width: 624px; max-width: 100%; height: auto; padding: 36px 48px 34px; background: var(--sheet); color: var(--ink); border: 1px solid var(--edge); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .05); font-family: var(--head); text-align: center; line-height: 1.5; cursor: pointer; }
.newpage button.newcard:hover { border-color: #c4c1b9; }
.newpage button.newcard:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.newpage .newcard .t { display: block; font-size: 19px; }
.newpage .newcard .lk { color: var(--navy); border-bottom: 1px solid var(--navy); }
.newpage .newcard .s { display: block; margin-top: 12px; font-size: 14px; color: #6e6b64; }
.newpage .or { margin: 22px 0 0; font-family: var(--head); font-size: 14px; color: #6e6b64; }
.newpage .or a { border-bottom: 1px solid var(--navy); } .newpage .or a:hover { text-decoration: none; }
@media (max-width: 700px) { .newpage { min-height: calc(100vh - 140px); } .newpage h1.hello { font-size: 26px; } .newpage button.newcard { padding: 28px 20px; } }

/* a tab line with headings: the tabs on the left, Contracts and Compliance over the chips at the right edge */
.tabs.heads2 { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; column-gap: 24px; align-items: end; height: 32px; gap: 0 24px; }
.tabs.heads2 > span.tl { display: flex; gap: 22px; align-items: baseline; min-width: 0; overflow: hidden; padding: 0; }
.tabs.heads2 .tl > a, .tabs.heads2 .tl > span { padding: 0 0 8px; line-height: 22px; color: var(--quiet); white-space: nowrap; }
.tabs.heads2 .tl > .on { color: var(--navy); }
.tabs.heads2 .tl > a:hover { color: var(--navy); text-decoration: none; }
.tabs.heads2 > span.h { padding: 0 0 8px; line-height: 22px; font-size: 13.5px; color: var(--navy); text-align: center; white-space: nowrap; }
.phead .tabs.heads2 > span.h { color: #6e6b64; } .phead .tabs.heads2 > span.h.cur { color: var(--navy); }

/* Parties: every party on one line, its other names beside it, its two chips under their headings */
body.framed .plist .worklist li[data-find] { position: relative; grid-template-columns: minmax(0, 1fr) 96px 96px; column-gap: 24px; height: 48px; margin: 0 -24px; padding: 0 24px; border-bottom: 0; border-radius: var(--r2); }
body.framed .plist .worklist li[data-find]::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; border-bottom: 1px solid var(--hair); }
body.framed .plist .worklist li.line::after { border-bottom-color: var(--navy); }
body.framed .plist .worklist li[data-find]:hover { background: var(--sheet); }
.plist .worklist li[data-find] a.name { display: flex; gap: 0; align-items: baseline; min-width: 0; line-height: 24px; white-space: nowrap; overflow: hidden; }
.plist .worklist a.name .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plist .worklist a.name .aka { display: inline; flex: 0 1 auto; min-width: 0; margin: 0 0 0 12px; font-size: 14px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; }
.plist .worklist a.name .rw { flex: 0 0 auto; margin-left: 8px; font-family: var(--head); font-size: 14px; color: var(--quiet); }
.plist .worklist a.name .aka + .rw::before { content: "\00b7"; margin-right: 8px; }
.plist .worklist a.name .nm + .rw { margin-left: 12px; }
.plist .none1, .plist .nofind { margin: 0; padding: 12px 0; line-height: 24px; font-family: var(--head); font-size: 14px; }
.plist .arch { margin: 16px 0 0; font-family: var(--head); font-size: 13.5px; } .plist .arch a { color: var(--quiet); } .plist .arch a:hover { color: var(--navy); }
@media (max-width: 700px) {
  body.framed .plist .worklist li[data-find] { height: auto; min-height: 48px; padding: 10px 16px; margin: 0 -16px; grid-template-columns: minmax(0, 1fr) 96px 96px; column-gap: 12px; row-gap: 6px; }
  body.framed .plist .worklist li[data-find]::after { left: 16px; right: 16px; }
  .plist .worklist li[data-find] a.name { grid-column: 1 / -1; flex-wrap: wrap; white-space: normal; }
  .plist .worklist li[data-find] a.chip:nth-of-type(2) { grid-column: 2; } .plist .worklist li[data-find] a.chip:nth-of-type(3) { grid-column: 3; }
  .plist .worklist a.name .nm { flex-basis: 100%; white-space: normal; }
  .plist .worklist a.name .aka, .plist .worklist a.name .nm + .rw { margin-left: 0; }
  .tabs.heads2 { grid-template-columns: minmax(0, 1fr); height: auto; }
  .tabs.heads2 > span.h { display: none; }
  .tabs.heads2 > span.tl { overflow-x: auto; }
}

/* a party's head: the relationship and the headings, then the party's own row with its chips at the right edge */
body.framed .phead .worklist.heads li[data-find] { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; column-gap: 24px; align-items: center; height: 48px; padding: 0; border-bottom: 1px solid var(--navy); }
body.framed .phead.above .worklist.heads li[data-find] { border-bottom-color: var(--hair); }
body.framed .phead .worklist.heads li[data-find] a.name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.framed .phead .worklist.heads a.chip { color: #fff; } 
body.framed .phead .worklist.heads a.chip:is(.green, .green2, .yellow, .orange) { color: #000; } body.framed .phead .worklist.heads a.chip.none { color: var(--quiet); }

/* an item's own row under the party's (a contract, the adverse media report): one line in grey, its chip under its heading */
.irow { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto 96px 96px; column-gap: 24px; align-items: center; min-height: 56px;
  margin: 0 -24px; padding: 0 24px; background: var(--here); border-radius: 12px; }
.irow .iname { min-width: 0; }
.irow .iright { min-width: 0; margin-left: 24px; }
.irow .iact { justify-self: end; display: flex; align-items: center; }
.irow .nochip { display: block; width: 96px; height: 23px; }
@media (max-width: 700px) {
  .irow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; margin: 0 -16px; padding: 12px 16px; }
  .irow .iname { grid-column: 1; grid-row: 1; display: block; } .irow .iname .ititle, .irow .iname .ifacts { display: block; white-space: normal; }
  .irow .chip { grid-column: 2; grid-row: 1; } .irow .nochip { display: none; }
  .irow .iright { grid-column: 1; grid-row: 2; margin: 0; } .irow .iact { grid-column: 2; grid-row: 2; display: flex; }
}

/* tables: words on the page's left edge, a row's chip at the right edge; a row you point at turns white and reaches
   24px beyond the edges, so its hairlines are drawn 24px in from each end */
@media (min-width: 701px) {
  body.framed table.rep.party { width: calc(100% + 48px); max-width: none; margin-left: -24px !important; margin-right: -24px !important; }   /* in a fold too */
  body.framed table.rep.party > tbody > tr > td, body.framed table.rep.party > tr > td { border-bottom: 0 !important; background-image: linear-gradient(var(--hair), var(--hair)); background-repeat: no-repeat; background-size: 100% 1px; background-position: left bottom; }
  body.framed table.rep.party tr > td:first-child { padding-left: 24px; background-size: calc(100% - 24px) 1px; background-position: right bottom; }
  body.framed table.rep.party tr > td:last-child { padding-right: 24px; background-size: calc(100% - 24px) 1px; background-position: left bottom; }
  body.framed table.rep.party tr > td:only-child { background-size: calc(100% - 48px) 1px; background-position: center bottom; }
  body.framed table.rep.party tr.line > td { background-image: linear-gradient(var(--navy), var(--navy)); }
  body.framed table.rep.party tr:is(.opens, .term):hover > td { background-color: var(--sheet); }
  body.framed table.rep.party tr:is(.opens, .term):hover > td:first-child { border-top-left-radius: var(--r2); border-bottom-left-radius: var(--r2); }
  body.framed table.rep.party tr:is(.opens, .term):hover > td:last-child { border-top-right-radius: var(--r2); border-bottom-right-radius: var(--r2); }
  body.framed table.rep.party.review tr.term:hover td { background-color: var(--sheet); }
  /* the column plan: the name, the words, the facts, the action, then the chip at the edge */
  body.framed table.rep.party col.c-name { width: 32%; }
  body.framed table.rep.party col.c-a { width: auto; } body.framed table.rep.party col.c-b { width: 12%; } body.framed table.rep.party col.c-c { width: 8%; } body.framed table.rep.party col.c-d { width: 12%; }
  body.framed table.rep.party col.c-risk { width: 144px; }
  body.framed table.rep.party td.rk, body.framed table.rep.party.stage td.rk { padding-left: 24px; padding-right: 24px; text-align: right; overflow: visible; }
  body.framed table.rep.party td.rk form.inline, body.framed table.rep.party td.rk form.chipsel { display: inline-flex; vertical-align: top; }
  /* a party's Contracts tab: the status chip under the party row's Contracts chip, nothing under Compliance */
  body.framed table.rep.party.contracts col.c-name { width: 40%; } body.framed table.rep.party.contracts col.c-a { width: auto; }
  body.framed table.rep.party.contracts col.c-k { width: 120px; } body.framed table.rep.party.contracts col.c-x { width: 144px; }
  body.framed table.rep.party.contracts td.rk { padding-left: 0; padding-right: 0; }
  body.framed table.rep.party.contracts td.cx { padding: 0; }
  body.framed[data-party] table.rep.party.contracts td.el { padding-right: 24px; }
  /* Settings: two chips side by side at the edge where a row has two; the longest action keeps its room */
  body.framed[data-settings] table.rep.party col.c-risk { width: 264px; }
  body.framed[data-settings] table.rep.party col.c-name { width: 24%; } body.framed[data-settings] table.rep.party col.c-b { width: 14%; }
  body.framed[data-settings] table.rep.party col.c-d { width: 168px; }
  body.framed[data-settings] table.rep.party.qs td.rk .flags { align-items: flex-end; }
  body.framed[data-settings] table.rep.party.qs td.rk .flags .fl { flex-direction: row-reverse; gap: 16px; }
  /* the practice page (Crome's own admins) and the adverse media report follow the same plan */
}

/* a term you opened is a white card with rounded corners, a little room above and below it */
@media (min-width: 701px) {
  body.framed table.rep.party.stage tr.term.opened > td, body.framed table.rep.party.stage tr.sub:not([hidden]) > td { background-color: var(--sheet); background-image: linear-gradient(#efeee9, #efeee9); }
  body.framed table.rep.party.stage tr.term.opened > td { border-top: 1px solid var(--edge); }
  body.framed table.rep.party.stage tr.term.opened > td:first-child, body.framed table.rep.party.stage tr.sub:not([hidden]) > td:first-child { border-left: 1px solid var(--edge); }
  body.framed table.rep.party.stage tr.term.opened > td:last-child, body.framed table.rep.party.stage tr.sub:not([hidden]) > td:last-child { border-right: 1px solid var(--edge); }
  body.framed table.rep.party.stage tr.term.opened > td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 0; }
  body.framed table.rep.party.stage tr.term.opened > td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 0; }
  body.framed table.rep.party.stage tr.cardend > td { border-bottom: 1px solid var(--edge) !important; background-image: none; }
  body.framed table.rep.party.stage tr.sub.choose > td:last-child { text-align: right; }
  body.framed table.rep.party.stage tr.cardend > td:first-child { border-bottom-left-radius: 12px; }
  body.framed table.rep.party.stage tr.cardend > td:last-child { border-bottom-right-radius: 12px; }
  body.framed table.rep.party.stage tr.term.opened.cardend > td:first-child { border-radius: 12px 0 0 12px; }
  body.framed table.rep.party.stage tr.term.opened.cardend > td:last-child { border-radius: 0 12px 12px 0; }
  body.framed table.rep.party.stage tr.term.opened > td { vertical-align: middle; padding-top: 18px; padding-bottom: 18px; }
  body.framed table.rep.party.stage tr.term.opened > td.rk { padding-top: 0; padding-bottom: 0; }
  body.framed table.rep.party.stage tr.gap, body.framed table.rep.party.stage tr.gap > td { height: 12px; padding: 0; border: 0; background: none; line-height: 0; font-size: 0; }
}

/* signed in, the Security page closes with the copyright line the footer used to carry */
.prose .copy { margin-top: 40px; font-family: var(--head); font-size: 11px; color: var(--quiet); }
/* the New party page: adding several at once sits under the form */
details.fold.several { margin-top: 40px; max-width: 720px; }
/* Settings: its tabs and, on Questions, the two sets of questions share one line across the page */
@media (min-width: 901px) {
  body.framed .two.setheads { display: flex; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--hair); }
  body.framed .two.setheads > section.col:first-child { flex: 1 1 auto; min-width: 0; }
  body.framed .two.setheads .tabs { border-bottom: 0; }
}

/* crome.css 2.48.0: ALi */

/* ---------- Phase ALii: one column, a card of bands, a sheet (settled 10.10.2026) ----------
   Every page sits in one centred column, 820 wide, its title at the top with room above it. Parties is a white sheet
   under folder tabs, the chosen tab joined to it. A party's page, a contract and a compliance item are one card: a grey
   band for each level you are inside, the party darker and the item lighter, above the white sheet you work on. Bands
   and sheets share four columns: names on the left edge; their details from the second column, where a party's type
   sits on Parties and on its page alike; then two chip columns, 96 wide and 24 apart, under Contracts and Compliance.
   Those headings above the party's chips are its tabs: the open one is a plain rectangle the colour of what it opens,
   with a navy line along its top. A row's chip sits under the open tab's chip; other words take the other column. In a
   band or a row, names share one line and their details the next. Titles in Charter 30, names in Charter 16.5,
   everything else in Gill Sans: details in #2b2b2b, facts in grey. */
:root { --band1: #ecebe6; --band2: #f5f4f0; --cardline: #e3e1db; --faint: #6e6b64; --facts: #6e6b64; --words: #2b2b2b; --hover: #f7f6f3; }

/* the column, and a page's title */
body.framed main { width: 820px; max-width: calc(100% - 96px); margin: 0 auto; padding: 56px 0 80px; }
body.framed[data-new] main { padding: 0; }
.ptop { padding-left: 32px; margin: 0 0 18px; }
h1.ptitle, body.framed .bar h1 { display: block; min-height: 0; margin: 0; font-family: var(--body); font-size: 30px; line-height: 40px; font-weight: 400; color: var(--ink); }
body.framed .bar:not(.grid) { margin: 0 0 28px; }
body.framed .bar:not(.grid) .meta { margin-top: 6px; font-size: 14px; color: var(--facts); }

/* folder tabs over a sheet (Parties, Settings): the chosen one is white and joins the sheet */
.ftabs { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 2px; padding-left: 16px; position: relative; z-index: 2; font-family: var(--head); }
.ptop .ptadd { display: none; }
.ftabs > a, .ftabs > span { font-size: 14.5px; line-height: 20px; color: #6f6c66; padding: 9px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; white-space: nowrap; }
.ftabs > a:hover { color: var(--navy); text-decoration: none; }
.ftabs > .on { background: var(--sheet); color: var(--ink); border-color: var(--cardline); margin-bottom: -1px; padding-bottom: 10px; }
.ftabs > .addlink { margin-left: auto; margin-right: 32px; padding: 9px 0 10px; border: 0; position: relative; top: 1px; }   /* on the tabs' baseline, ending where the chips end */
.ftabs > .ftabs2 { display: flex; gap: 2px; padding: 0; border: 0; }

/* the white sheet you work on, and the card it closes */
.sheet { position: relative; z-index: 1; background: var(--sheet); border: 1px solid var(--cardline); border-radius: 14px; padding: 0 32px 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.card { background: var(--sheet); border: 1px solid var(--cardline); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.card > .sheet { border: 0; border-radius: 0 0 13px 13px; box-shadow: none; padding: 0 32px 8px; }

/* the bands: the party's, then the item's. Two lines on a grid of four columns; the tabs are the last two */
.band { padding: 22px 32px; background: var(--band1); }
.card > .band:first-child { border-radius: 13px 13px 0 0; }
.band.small { padding-top: 18px; padding-bottom: 18px; }
.band.item { background: var(--band2); }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 210px 96px 96px; column-gap: 24px; row-gap: 6px; }
.bgrid > * { position: relative; z-index: 1; min-width: 0; }
.bgrid > .ba { grid-row: 1; align-self: last baseline; }
.bgrid > .bb { grid-row: 2; align-self: baseline; }
.bgrid > .c1 { grid-column: 1; } .bgrid > .c2 { grid-column: 2; } .bgrid > .c3 { grid-column: 3; } .bgrid > .c4 { grid-column: 4; } .bgrid > .c12 { grid-column: 1 / 3; }
.bgrid > .btab { grid-row: 1 / 3; z-index: 0; margin: -22px -12px; }
.band.small .bgrid > .btab { margin: -18px -12px; }
.bgrid > .btab:hover { text-decoration: none; }
.bgrid > .btab.on { box-shadow: inset 0 2px 0 var(--navy); }
.bgrid > .btab.on.to-white { background: var(--sheet); }
.bgrid > .btab.on.to-item { background: var(--band2); }
.bgrid > .bh { font-family: var(--head); font-size: 12px; line-height: 16px; color: var(--facts); text-align: center; pointer-events: none; }
.bgrid > .bh.on { color: var(--navy); }
.bgrid > .chip { justify-self: center; }
.bgrid > a.chip:hover { text-decoration: none; }
.bgrid > a.chip:is(.green, .green2, .yellow, .orange) { color: #000; } .bgrid > a.chip.none { color: var(--quiet); }
.bt30 { font-family: var(--body); font-size: 30px; line-height: 36px; font-weight: 400; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt17 { font-family: var(--body); font-size: 17px; line-height: 23px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.bname { color: var(--ink); } a.bname:hover { color: var(--navy); text-decoration: none; }
a.bname.on { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--navy); }   /* Details: the name is its tab */
.bf { font-family: var(--head); font-size: 13.5px; line-height: 20px; color: var(--facts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a sheet's first line: its search on the left, the page's actions at the right */
.sr { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; border-bottom: 1px solid var(--line); }
.sr label.sfind { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 10px; margin: 0; font-family: var(--head); font-size: 15px; color: var(--faint); cursor: text; }
.sr label.sfind svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sr label.sfind:focus-within { color: var(--navy); }
.sr label.sfind input { flex: 1; min-width: 0; height: 36px; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--head); font-size: 15px; color: var(--ink); outline: none; box-shadow: none; }
.sr label.sfind input::placeholder { color: var(--faint); opacity: 1; }
.sacts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sacts form.inline { display: inline-flex; margin: 0; }
.sacts > span { display: inline-flex; align-items: center; gap: 10px; }
body.framed .sacts form.inline > button:not(.addlink), body.framed .sacts a.button, body.framed .sacts button.ghost, body.framed .sacts button.morebtn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; font-family: var(--head); font-size: 14px; line-height: 1; white-space: nowrap; }
body.framed .sacts button.ghost, body.framed .sacts a.button.ghost, body.framed .sacts button.morebtn { border: 1px solid #c9c5bc; background: var(--sheet); color: var(--navy); }
body.framed .sacts button.ghost:hover, body.framed .sacts a.button.ghost:hover, body.framed .sacts button.morebtn:hover, body.framed .sacts button.morebtn[aria-expanded="true"] { border-color: #b9b6ae; text-decoration: none; }
/* a stage's document is taken the way a new contract is on a party's page: a + and its name, or dropped anywhere */
body.framed .sacts label.dropzone.addlink { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; height: auto; padding: 0; border: 0; border-radius: 0; background: none; margin: 0;
  font-family: var(--head); font-size: 14.5px; line-height: 20px; color: var(--navy); cursor: pointer; white-space: nowrap; }
body.framed .sacts label.dropzone.addlink.over { color: #001226; text-decoration: underline; text-underline-offset: 4px; }
button.addlink, a.addlink { display: inline-flex; align-items: center; gap: 7px; height: auto; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--head); font-size: 14.5px; line-height: 20px; color: var(--navy); cursor: pointer; }
.addlink svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
button.addlink:hover, a.addlink:hover { text-decoration: none; color: #001226; }

/* the quiet line under a sheet: drop a contract anywhere */
.dropline { margin: 18px 0 0; text-align: center; font-family: var(--head); font-size: 13px; color: var(--faint); }
.belowsheet { margin: 14px 0 0 32px; font-family: var(--head); font-size: 13.5px; }
.belowsheet a { color: var(--facts); } .belowsheet a:hover { color: var(--navy); }

/* New: the star hung to the left of words centred on the page, its middle on the bar of the G; a plain box beneath with
   light grey words and a + that opens your files; a new party a quiet link under it */
.newpage { min-height: 100vh; padding: 0 0 56px; }
.newpage h1.hello { display: block; text-align: center; margin: 0 0 28px; }
.newpage .hello .star { display: inline-block; width: 34px; height: 31px; margin: 0 14px 0 -48px; vertical-align: middle; vertical-align: calc(0.45cap - 15.5px); }
.newbox { width: 640px; max-width: 100%; min-height: 116px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 20px 20px 14px 22px;
  background: var(--sheet); border: 1px solid #e1dfd9; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 26px rgba(0, 0, 0, .05); cursor: pointer; text-align: left; }
.newbox:hover { border-color: #c9c5bc; }
.newbox:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.newbox .ph { font-family: var(--head); font-size: 17px; line-height: 24px; color: #a3a09a; letter-spacing: .005em; }
.newbox .nrow { display: flex; align-items: center; justify-content: space-between; }
.newbox button.plus { flex: 0 0 34px; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid #d9d6cf; background: var(--sheet); display: inline-flex; align-items: center; justify-content: center; line-height: 0; cursor: pointer; }
.newbox button.plus:hover { background: #f4f3ef; border-color: #cfccc4; }
.newbox button.plus svg { width: 16px; height: 16px; fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; }
.newpage p.or { margin: 18px 0 0; font-family: var(--head); font-size: 13.5px; color: #8f8c85; }
.newpage p.or a { color: var(--navy); border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Parties: under the search, Contracts and Compliance over their chips; each party on one line, its type (on Everyone,
   or while a search looks across every party) in the second column, where its page puts it */
.plist .sr.heads { display: grid; grid-template-columns: minmax(0, 1fr) 180px 124px 124px; column-gap: 20px; }
.plist .sr.heads .sh { font-family: var(--head); font-size: 12.5px; color: var(--facts); text-align: center; white-space: nowrap; }
.plist ul.prows { list-style: none; margin: 0; padding: 0; }
/* ALiv.2, one definition: a party a line, 48 high, the name from 412, its type from 854, the chips under their heads */
.plist ul.prows > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 180px 124px 124px; column-gap: 20px; align-items: baseline; min-height: 48px; padding: 11px 16px; margin: 0 -16px; border-radius: var(--r2); }
.plist ul.prows > li::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; border-bottom: 1px solid var(--line); }
.plist ul.prows > li.last::after { border-bottom: 0; }
.plist ul.prows > li.line::after { border-bottom-color: var(--navy); }
.plist ul.prows > li:hover { background: var(--hover); }
.plist ul.prows > li[hidden] { display: none; }
.plist ul.prows a.name { min-width: 0; font-family: var(--body); font-size: 15px; line-height: 26px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist ul.prows a.name:hover { color: var(--navy); text-decoration: none; }
.plist ul.prows .ptype { min-width: 0; font-family: var(--head); font-size: 13px; line-height: 20px; color: var(--facts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; visibility: hidden; font-variant-numeric: tabular-nums; }
.plist.withtype ul.prows .ptype { visibility: visible; }
.plist ul.prows a.chip { align-self: center; justify-self: center; width: 124px; min-width: 0; height: 24px; line-height: 23px; padding: 1px 8px 0; border-radius: 3px;
  font-family: var(--head); font-size: 13px; font-weight: 400; letter-spacing: .01em; white-space: nowrap; }   /* ALiv.2, one definition: 124 x 24, the word 13 */
.plist ul.prows a.chip:hover { text-decoration: none; }
/* a chip with nothing to say is its words alone, the box showing under the pointer */
.plist ul.prows a.chip.none { background: transparent; color: var(--facts) !important; }
.plist ul.prows a.chip.none:hover { background: #f2f1ed; filter: none; }
.plist .none1, .plist .nofind { margin: 0; padding: 16px 0; font-family: var(--head); font-size: 14px; color: var(--facts); }

/* the sheet's tables keep to the bands' four columns. Each reaches 16 beyond the sheet's edges, so a row you point at,
   or a term you open, has room; its hairlines start and end on the edges */
@media (min-width: 701px) {
  body.framed .sheet table.rep.party { width: calc(100% + 32px) !important; margin-left: -16px !important; margin-right: -16px !important; }
  body.framed .sheet table.rep.party tr > td:first-child { padding-left: 16px; background-size: calc(100% - 16px) 1px; }
  body.framed .sheet table.rep.party tr > td:last-child { padding-right: 16px; background-size: calc(100% - 16px) 1px; }
  body.framed .sheet table.rep.party tr > td:only-child { background-size: calc(100% - 32px) 1px; }
  body.framed .sheet table.rep.party td.rk { padding-left: 0; padding-right: 0; }
  body.framed .sheet table.rep.party:is(.contracts, .details) > tbody > tr:last-child > td { background-image: none; }   /* a list that ends the sheet rests on its foot */
  body.framed .sheet table.rep.party tr > td:last-child:empty { padding-right: 0; }
  body.framed .sheet table.rep.party tr:is(.opens, .term):hover > td, body.framed .sheet table.rep.party.review tr.term:hover td { background-color: var(--hover); }
  body.framed .sheet table.rep.party:is(.stage, .review, .contracts, .compliance, .details) { table-layout: fixed; }
  body.framed .sheet table.rep.party:is(.stage, .review, .contracts, .compliance, .details) col.c-name { width: auto; }
  body.framed .sheet table.rep.party:is(.stage, .review, .contracts, .compliance, .details) td.el { padding-right: 24px; }
  /* a party's contracts: title and facts · who has it and the owners · the chip under Contracts · nothing under Compliance */
  body.framed .sheet table.rep.party.contracts col.c-a { width: 234px; }
  body.framed .sheet table.rep.party.contracts col.c-k { width: 120px; }
  body.framed .sheet table.rep.party.contracts col.c-x { width: 112px; }
  body.framed .sheet table.rep.party.contracts tr > td { padding-top: 11px; padding-bottom: 11px; vertical-align: baseline; }
  body.framed .sheet table.rep.party.contracts td.hd { padding-left: 0; padding-right: 24px; }
  body.framed .sheet table.rep.party.contracts td.rk { padding: 0 24px 0 0; text-align: center; vertical-align: middle; }
  body.framed .sheet table.rep.party.contracts td.cx { padding: 0 16px 0 0; }
  /* a contract's terms: name · summary · its chip under the contract's own (Contracts) · the position the markup uses */
  body.framed .sheet table.rep.party.stage col.c-a { width: 234px; }
  body.framed .sheet table.rep.party.stage col.c-b, body.framed .sheet table.rep.party.stage col.c-c { width: 0; }
  body.framed .sheet table.rep.party.stage col.c-d { width: 120px; }
  body.framed .sheet table.rep.party.stage col.c-risk { width: 112px; }
  body.framed .sheet table.rep.party.stage tr.term > td { vertical-align: baseline; }
  body.framed .sheet table.rep.party.stage tr.term > td.hd { padding-left: 0; padding-right: 24px; }
  body.framed .sheet table.rep.party.stage tr.term > td.rk { padding: 0 24px 0 0; text-align: center; }
  body.framed .sheet table.rep.party.stage tr.term > td.mk { padding: 0 16px 0 0; text-align: center; }
  body.framed .sheet table.rep.party.stage tr.term > td.mk .dec { color: var(--facts); }
  body.framed .sheet table.rep.party.stage tr.sub > td.el { padding-left: 16px; }
  body.framed .sheet table.rep.party.stage tr.sub > td:last-child { padding-left: 0; padding-right: 16px; }
  body.framed .sheet table.rep.party.stage tr.sub.choose > td:last-child { text-align: right; }
  body.framed .sheet table.rep.party.stage .choices { display: inline-grid; grid-template-columns: repeat(3, 96px); column-gap: 24px; }
  body.framed .sheet table.rep.party.stage .choices > .chip, body.framed .sheet table.rep.party.stage .choices > form > .chip { width: 96px; margin: 0; }
  body.framed .sheet table.rep.party.stage tr.term.opened > td:first-child, body.framed .sheet table.rep.party.stage tr.sub:not([hidden]) > td:first-child { padding-left: 15px; }
  body.framed .sheet table.rep.party.stage tr.term.opened > td:last-child, body.framed .sheet table.rep.party.stage tr.sub:not([hidden]) > td:last-child { padding-right: 15px; }
  body.framed .sheet table.rep.party.stage tr.term.opened > td { vertical-align: baseline; }
  body.framed .sheet table.rep.party.stage tr.term.opened > td.rk { padding-top: 18px; padding-bottom: 18px; }
  /* adverse media: the finding and what it is and when · the words across the second column and the empty Contracts
     one · Source under the report's chip */
  body.framed .sheet table.rep.party.review col.c-a { width: 234px; }
  body.framed .sheet table.rep.party.review col.c-b { width: 120px; }
  body.framed .sheet table.rep.party.review col.c-c { width: 0; }
  body.framed .sheet table.rep.party.review col.c-d { width: 96px; }
  body.framed .sheet table.rep.party.review col.c-risk { width: 16px; }
  body.framed .sheet table.rep.party.review tr.term > td { padding-top: 11px; padding-bottom: 11px; vertical-align: baseline; }
  body.framed .sheet table.rep.party.review tr.term > td.el { font-family: var(--body); font-size: 16.5px; line-height: 24px; }
  body.framed .sheet table.rep.party.review tr.term > td.el .cl { display: block; margin: 2px 0 0; font-family: var(--head); font-size: 13.5px; line-height: 20px; color: var(--facts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.framed .sheet table.rep.party.review tr.term > td.hd { padding-left: 0; padding-right: 24px; color: var(--words); }
  body.framed .sheet table.rep.party.review tr.term > td.mk { padding-left: 0; padding-right: 0; text-align: center; }
  body.framed .sheet table.rep.party.review tr.term > td.rk { padding: 0 16px 0 0; }
  /* a party's compliance: the check and when · what it found, and what you can do, across the second and Contracts
     columns · the chip under Compliance */
  body.framed .sheet table.rep.party.compliance col.c-w { width: 234px; }
  body.framed .sheet table.rep.party.compliance col.c-o { width: 120px; }
  body.framed .sheet table.rep.party.compliance col.c-risk { width: 112px; }
  body.framed .sheet table.rep.party.compliance tr > td { vertical-align: baseline; }
  body.framed .sheet table.rep.party.compliance tr > td.dt, body.framed .sheet table.rep.party.compliance tr > td.wd { padding-left: 0; padding-right: 24px; }
  body.framed .sheet table.rep.party.compliance td.rk { padding: 0 16px 0 0; text-align: right; vertical-align: middle; }
  /* the party's details: the label, then its field across the rest */
  body.framed .sheet table.rep.party.details col.c-a { width: 234px; }
  body.framed .sheet table.rep.party.details col.c-b { width: 120px; }
  body.framed .sheet table.rep.party.details col.c-c, body.framed .sheet table.rep.party.details col.c-d { width: 0; }
  body.framed .sheet table.rep.party.details col.c-risk { width: 112px; }
  body.framed .sheet table.rep.party.details td.el + td { padding-left: 0; }
  body.framed .sheet table.rep.party.details td.mk { padding: 0 16px 0 0; text-align: right; }
  body.framed .sheet table.rep.party.details td, body.framed .sheet table.rep.party.details label.check { white-space: normal; }
}
/* Settings' sheet keeps the same four columns, with no bands: a row's name and what it is under it; its details, with
   what you can do beneath; then its chips, one to a column, the last at the right edge (two where a row has two) */
@media (min-width: 901px) {
  body.framed .setsheet table.rep.party { table-layout: fixed; }
  body.framed .setsheet table.rep.party col.c-name { width: auto; }
  body.framed .setsheet table.rep.party col.c-a { width: 234px; }
  body.framed .setsheet table.rep.party col.c-b, body.framed .setsheet table.rep.party col.c-c { width: 0; }
  body.framed .setsheet table.rep.party col.c-d { width: 120px; }
  body.framed .setsheet table.rep.party col.c-risk { width: 112px; }
  body.framed .setsheet table.rep.party td.el { padding-right: 24px; }
  body.framed .setsheet table.rep.party td.hd { padding-left: 0; padding-right: 24px; white-space: normal; text-wrap: balance; }
  body.framed .setsheet table.rep.party:not(.details) td.mk { padding-left: 0; padding-right: 24px; text-align: center; }
  body.framed .setsheet table.rep.party td.rk { padding-left: 0; padding-right: 16px; text-align: center; }
  body.framed .setsheet table.rep.party td.rk.r1 { padding-right: 24px; }
  body.framed .setsheet table.rep.party td.mk[colspan] { text-align: right; padding-right: 16px; }
  /* a row you fill in: its words, boxes, chip and actions start on one line; boxes stack in their column, as wide as it */
  body.framed .setsheet table.rep.party tr.formrow > td { vertical-align: baseline; padding-top: 12px; padding-bottom: 12px; line-height: 23px; }
  body.framed .setsheet table.rep.party tr.formrow .row.tight { flex-direction: column; align-items: stretch; gap: 8px; }
  body.framed .setsheet table.rep.party tr.formrow .row.tight > :is(input, select), body.framed .setsheet table.rep.party tr.formrow td.el > :is(input, select) { width: 100%; box-sizing: border-box; }
  body.framed .setsheet table.rep.party tr.formrow td.mk .link.act + .link.act { margin-left: 24px; }
  /* Questions: each flag's words ("if missing") in the third column, its chip in the last, one flag to a line; a
     question with none says so under the chips; a removed one offers Keep there */
  body.framed .setsheet table.rep.party.qs td.kind { padding-left: 0; padding-right: 24px; }
  body.framed .setsheet table.rep.party.qs td.kind .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.framed[data-settings] .setsheet table.rep.party.qs td.rk .flags { align-items: stretch; gap: 8px; }
  body.framed[data-settings] .setsheet table.rep.party.qs td.rk .flags .fl { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 24px; height: 23px; }
  body.framed[data-settings] .setsheet table.rep.party.qs td.rk .fl .chip { grid-column: 2; grid-row: 1; }
  body.framed[data-settings] .setsheet table.rep.party.qs td.rk .fl .when { grid-column: 1; grid-row: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; }
  body.framed[data-settings] .setsheet table.rep.party.qs td.rk .noflag, body.framed[data-settings] .setsheet table.rep.party.qs td.rk .keep { display: flex; justify-content: center; width: 96px; margin-left: auto; }
}
/* Questions: Remove (inside a question you open, at the left of Done) and Keep (where a removed one's flags were) are
   quiet, like every action in a row; a removed question is struck through, its reference left plain */
body[data-settings] .setsheet table.rep.party.qs button.link.act.rm { font-family: var(--head); font-size: 13.5px; color: var(--quiet); text-decoration: none; }
body[data-settings] .setsheet table.rep.party.qs button.link.act.rm:hover { text-decoration: underline; }
body[data-settings] .setsheet table.rep.party.qs tr.removed button.qopen { text-decoration: none; }
body[data-settings] .setsheet table.rep.party.qs tr.removed button.qopen .txt { text-decoration: line-through; }
@media (max-width: 900px) { body[data-settings] .setsheet table.rep.party.qs tr.qrow > td.rk { padding-top: 0; margin: 10px 0 2px; } }
.setsheet table.rep.party td .sub { display: block; margin-top: 2px; font-family: var(--head); font-size: 13.5px; line-height: 20px; color: var(--facts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setsheet table.rep.party td .acts2 { display: block; margin-top: 2px; font-family: var(--head); font-size: 13.5px; line-height: 20px; }
.setsheet table.rep.party td .acts2 .sep { color: var(--facts); margin: 0 8px; }
.setsheet table.rep.party td .acts2 form.inline { display: inline-flex; margin: 0; }
.setsheet table.rep.party td .acts2 button.link, .setsheet table.rep.party td .acts2 a.link { font-family: var(--head); font-size: 13.5px; text-decoration: none; padding: 0; }
.setsheet table.rep.party td .acts2 button.link:hover, .setsheet table.rep.party td .acts2 a.link:hover { text-decoration: underline; }
.setsheet table.rep.party td.el .seat { font-family: var(--head); font-size: 13.5px; color: var(--facts); }
/* one type plan in every sheet: names Charter 16.5; their details Gill Sans 13.5 in #2b2b2b; facts in grey */
.sheet table.rep.party.stage tr.term > td.el .lbl { font-size: 16.5px; }
.sheet table.rep.party.stage tr.term > td.hd { color: var(--words); }
.sheet table.rep.party.contracts .iname { display: block; line-height: 24px; }
.sheet table.rep.party.contracts .iname .ititle { display: block; font-size: 16.5px; line-height: 24px; color: var(--ink); }
.sheet table.rep.party.contracts .iname .ifacts { display: block; margin-top: 2px; font-size: 13.5px; line-height: 20px; color: var(--facts); }
.sheet table.rep.party.contracts .iright { display: block; }
.sheet table.rep.party.contracts .iright .holder { display: block; font-size: 13.5px; line-height: 20px; color: var(--words); }
.sheet table.rep.party.contracts .iright .holder .quiet { color: var(--facts); }
.sheet table.rep.party.contracts .iright .iown { display: block; font-size: 13.5px; line-height: 20px; color: var(--facts); }
.sheet table.rep.party.compliance tr:not(.sub):not(.formrow) > td.el { font-family: var(--body); font-size: 16.5px; line-height: 24px; }
.sheet table.rep.party.compliance tr.sub > td.el { font-family: var(--head); font-size: 13.5px; line-height: 20px; color: var(--ink); }
.sheet table.rep.party.compliance tr.sub.last > td.el { color: var(--facts); }
.sheet table.rep.party.compliance td.el .when { display: block; margin-top: 2px; font-family: var(--head); font-size: 13.5px; line-height: 20px; color: var(--facts); }
.sheet table.rep.party.compliance td.dt { color: var(--words); white-space: normal; overflow: visible; text-overflow: clip; }
.sheet table.rep.party.compliance td .acts2 { display: block; margin-top: 2px; }
.sheet .tabbody > .posture[style] { min-height: 0; }
.sheet .tabbody .folds, .sheet .folds { margin-top: 8px; }
.sheet section.cblock { margin: 0; padding: 0; }
.sheet section.cblock > details.fold:last-child { margin-bottom: 0; }
.sheet .tabbody > p.posture:first-child { margin-top: 16px; }

/* a narrow window: the column takes the width less 16 each side; a band's lines stack, its tabs at its foot over the
   sheet; a sheet's rows keep their chip at the right */
@media (max-width: 700px) {
  body.framed main { max-width: calc(100% - 32px); padding: 28px 0 56px; }
  .ptop { padding-left: 16px; }
  h1.ptitle, body.framed .bar h1 { font-size: 26px; line-height: 34px; }
  .ftabs, body[data-settings] .ftabs.settabs { flex-wrap: nowrap; column-gap: 2px; padding-left: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .ftabs::-webkit-scrollbar { display: none; }
  .ftabs > a, .ftabs > span { padding: 8px 12px; font-size: 14px; }
  .ftabs > .on { padding-bottom: 9px; }
  .ftabs > .addlink { margin-right: 12px; padding: 8px 0 9px; }
  .sheet { padding: 0 16px 4px; border-radius: 12px; }
  .card { border-radius: 12px; }
  .card > .sheet { padding: 0 16px 8px; border-radius: 0 0 11px 11px; }
  .card > .band:first-child { border-radius: 11px 11px 0 0; }
  .band { padding: 18px 16px; }
  .band.small { padding-top: 14px; padding-bottom: 14px; }
  .bgrid { grid-template-columns: minmax(0, 1fr) 96px 96px; column-gap: 12px; }
  .bgrid > .ba, .bgrid > .bb { grid-row: auto; }
  .bgrid > .c12, .bgrid > .c1 { grid-column: 1 / -1; }
  .band:not(.small) .bgrid > .bname { grid-row: 1; } .band:not(.small) .bgrid > .c1.bb { grid-row: 2; }
  .bgrid > .c2 { grid-column: 1; grid-row: 4; align-self: baseline; }
  .bgrid > .bh.c3, .bgrid > .bh.c4 { grid-row: 3; }
  .bgrid > .chip.c3, .bgrid > .chip.c4 { grid-row: 4; }
  .bgrid > .c3 { grid-column: 2; } .bgrid > .c4 { grid-column: 3; }
  .bgrid > .bh.c3, .bgrid > .bh.c4 { margin-top: 12px; }
  .bgrid > .btab { grid-row: 3 / 5; margin: 4px -6px -18px; }
  .band.small .bgrid > .c1 { grid-column: 1 / -1; grid-row: 1; }
  .band.small .bgrid > .bh.c3, .band.small .bgrid > .bh.c4 { grid-row: 2; margin-top: 8px; }
  .band.small .bgrid > .chip.c3, .band.small .bgrid > .chip.c4 { grid-row: 3; }
  .band.small .bgrid > .btab { grid-row: 2 / 4; margin: 0 -6px -14px; }
  .band.small .bgrid > .c2 { display: none; }
  .ptop { display: flex; align-items: baseline; justify-content: space-between; padding-right: 16px; }
  .ptop .ptadd { display: inline-flex; }
  .ftabs > .addlink { display: none; }
  .band.item .bgrid > .c12.ba { grid-row: 1; } .band.item .bgrid > .c12.bb { grid-column: 1 / 3; grid-row: 2; white-space: normal; }
  .band.item .bgrid > .chip { grid-column: 3; grid-row: 2; align-self: start; }
  .band.item .bgrid > .chip.c3 { grid-column: 3; }
  .bt30 { font-size: 24px; line-height: 30px; white-space: normal; }
  .sr { height: auto; min-height: 56px; flex-wrap: wrap; padding: 10px 0; }
  .sacts { flex-wrap: wrap; }
  .plist .sr.heads { display: flex; }
  .plist .sr.heads .sh { display: none; }
  .plist ul.prows > li { grid-template-columns: 124px 124px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 12px 8px; margin: 0 -8px; }
  .plist ul.prows > li::after { left: 8px; right: 8px; }
  .plist ul.prows a.name { grid-column: 1 / -1; grid-row: 1; white-space: normal; }
  .plist ul.prows .ptype { grid-column: 1 / -1; grid-row: 2; margin-top: -6px; }
  .plist:not(.withtype) ul.prows .ptype { display: none; }
  .plist ul.prows a.chip { grid-row: 2; }
  .plist.withtype ul.prows a.chip { grid-row: 3; }
  .plist ul.prows a.chip:nth-of-type(2) { grid-column: 1; } .plist ul.prows a.chip:nth-of-type(3) { grid-column: 2; }
  .newbox { min-height: 104px; }
  .newpage .hello .star { margin: 0 10px 0 -44px; }
}
.sacts[hidden] { display: none; }
/* Settings: the two sets of questions at the right of the search while Questions is open */
.sr .qsets a { font-family: var(--head); font-size: 14px; line-height: 20px; color: var(--facts); padding: 6px 12px; border-radius: 8px; }
.sr .qsets a:hover { color: var(--navy); text-decoration: none; }
.sr .qsets a.on { background: var(--band2); color: var(--navy); }
/* a check's record on Compliance: what you can do sits on its own line, under the words it acts on */
.sheet table.rep.party.compliance .acts2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin-top: 4px; font-family: var(--head); font-size: 13.5px; line-height: 20px; }
.sheet table.rep.party.compliance .acts2 .sep { color: var(--facts); margin: 0 8px; }
.sheet table.rep.party.compliance .acts2 form.inline { display: inline-flex; margin: 0; }
.sheet table.rep.party.compliance .acts2 button.link { font-family: var(--head); font-size: 13.5px; text-decoration: none; padding: 0; }
.sheet table.rep.party.compliance .acts2 button.link:hover { text-decoration: underline; }
.sheet table.rep.party.compliance .acts2 select { height: 26px; padding: 0 6px; font-size: 13px; margin-right: 10px; }
.sheet table.rep.party.compliance .acts2.src a { color: var(--facts); } .sheet table.rep.party.compliance .acts2.src a:hover { color: var(--navy); }
.sheet table.rep.party.compliance tr.sub td.el.pq .when { display: block; margin-top: 2px; font-family: var(--head); font-size: 12.5px; line-height: 18px; color: var(--facts); }
.sheet table.rep.party.compliance tr.sub .dec { justify-content: flex-start; flex-wrap: wrap; margin-top: 4px; }
.sheet table.rep.party.compliance tr.sub td.hd.dt > .dec { margin-top: 6px; }
.sheet table.rep.party.compliance tr.sub .dec input.note1 { flex: 1 1 100%; margin: 0 0 6px; }
.sheet table.rep.party.compliance form.subform input[name=note], .sheet table.rep.party.compliance #advform input[name=note], .sheet table.rep.party.compliance #qto input[type=email] { flex: 1 1 12rem; min-width: 0; }
@media (max-width: 900px) { .newpage { min-height: calc(100vh - 56px); } }
/* crome.css 2.49.0: ALii */

/* ---------- Phase ALiii: the Register (settled 10.10.2026) ----------
   Parties is now the Register: every party, with its contracts and compliance, in one sheet. Source Sans 3 (Adobe, under
   the SIL Open Font License, served from /static/fonts) for every small word, with Charter for names; a softer black; one
   column 960 wide on every page. On the Register: no title (the sidebar names it; a phone keeps it), the folder tabs over
   the sheet with New party at the end of their line, the search and the column heads on the sheet's first line, names a
   step smaller, chips a step larger, and every cell a chip: nothing yet is a light grey block. Review and Under review are
   one state, Under review. The page stands still: the sheet runs to the foot of the window and scrolls inside, its first
   line staying put, and a scroll that stops part way settles on a whole party; the sheet only ever shows whole rows, and
   the drop line sits at the foot of the window. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/SourceSans3-Regular.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/SourceSans3-Medium.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/SourceSans3-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/SourceSans3-Bold.woff2") format("woff2"); }
/* ALiv.3: the serif served with Crome, so a name is the same on a Mac, on Windows and in the mock-ups: Crome Serif, the
   Charter-based Charis SIL cut down to Crome's letters (SIL Open Font License, fonts/CromeSerif-OFL.txt). The computer's
   own Charter stays behind it for any letter it lacks */
@font-face { font-family: "Crome Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/CromeSerif-Regular.woff2") format("woff2"); }
:root { --head: "Source Sans 3", "Gill Sans", "Gill Sans MT", "Helvetica Neue", Helvetica, Arial, sans-serif; --ink: #1d1d1b; --words: #1d1d1b; }   /* ALiv.2: words in ink */

/* one column on every page, a little wider */
body.framed main { width: 960px; }
h1.ptitle { letter-spacing: -0.005em; }

/* the sidebar in the new face */
nav.side a.item { height: 38px; gap: 11px; color: var(--ink); font-size: 15px; }
nav.side a.item .n { font-size: 13px; color: var(--facts); }
nav.side .mebtn .r2 { font-size: 13px; color: var(--facts); }

/* the quiet line that says a contract may be dropped anywhere */
.dropline { font-size: 14px; color: var(--faint); }

/* the Register: the folder tabs. The chosen tab is white, round at the top and curving out into the sheet at its foot;
   the first tab stands flush with the sheet's edge, its word on the line the names start on */
body[data-parties] .ftabs { margin-top: 2px; padding-left: 0; gap: 2px; align-items: flex-end; }
body[data-parties] .ftabs > a, body[data-parties] .ftabs > span { font-size: 14px; line-height: 20px; padding: 10px 23px 9px; color: var(--facts); border-radius: 12px 12px 0 0; }
body[data-parties] .ftabs > .on { position: relative; background: var(--sheet); color: var(--ink); font-weight: 500; border-color: var(--cardline); margin-bottom: -1px; padding-bottom: 10px; }
body[data-parties] .ftabs > .on::before, body[data-parties] .ftabs > .on::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; pointer-events: none; }
body[data-parties] .ftabs > .on::before { left: -12px; background: radial-gradient(circle at 0 0, var(--frame) 10.8px, var(--cardline) 11.2px, var(--cardline) 11.8px, var(--sheet) 12.2px); }
body[data-parties] .ftabs > .on::after { right: -12px; background: radial-gradient(circle at 100% 0, var(--frame) 10.8px, var(--cardline) 11.2px, var(--cardline) 11.8px, var(--sheet) 12.2px); }
body[data-parties] .ftabs > .on:first-child::before { display: none; }
body[data-parties] .ftabs:has(> .on:first-child) + .sheet { border-top-left-radius: 0; }
body[data-parties] .ftabs > .addlink { margin-right: 24px; padding: 10px 0 9px; top: 0; font-size: 14px; color: var(--navy); }

/* the sheet: the search and the column heads on its first line, then a party a line */
body[data-parties] .sheet.plist { padding: 0 24px 4px; border-radius: 12px; }
.plist .sr.heads .sh { position: relative; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

@media (min-width: 701px) {
  /* no title on a wide window: the sidebar says Register; the word stays for screen readers */
  body[data-parties] .ptop { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the column heads stand on the search words' line */
  .plist .sr.heads .sh { top: 2px; }
  /* the page stands still; the sheet runs to the foot of the window and scrolls inside, under its first line */
  body.framed[data-parties] { height: 100vh; overflow: hidden; }
  body.framed[data-parties] main { position: relative; height: 100vh; display: flex; flex-direction: column; padding: 48px 0 72px; }   /* ALiv.3.1: 72, the sidebar's foot under its line */
  body.framed[data-parties] main > * { flex: none; }
  body[data-parties] .sheet.plist { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-snap-type: y mandatory; scroll-padding-top: 60px; }   /* ALiv.3: nothing scrolls sideways */
  body[data-parties] .plist .sr.heads { position: sticky; top: 0; z-index: 3; background: var(--sheet); }
  body[data-parties] .plist ul.prows > li { scroll-snap-align: start; }
  body:is([data-parties], [data-party]) .dropline { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
  /* where the system draws its scrollbars in the page (Windows, a mouse on a Mac) a thin one sits in the sheet's margin,
     so nothing moves; where they float over the page (a Mac's trackpad) the system's own comes and goes as you scroll */
  html.classicbars body[data-parties] .sheet.plist { scrollbar-gutter: stable; }   /* the page takes the bar's width from the sheet's margin */
  /* ALiv.3: Chrome and Edge draw the slim bar below (8 wide, no arrows, no track), like a Mac's; Firefox its own thin one */
  @supports not selector(::-webkit-scrollbar) { html.classicbars body[data-parties] .sheet.plist { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .22) transparent; } }
  html.classicbars body[data-parties] .sheet.plist::-webkit-scrollbar-button { display: none; }
  html.classicbars body[data-parties] .sheet.plist::-webkit-scrollbar { width: 8px; height: 0; }
  html.classicbars body[data-parties] .sheet.plist::-webkit-scrollbar-track { background: transparent; }
  html.classicbars body[data-parties] .sheet.plist::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border: 2px solid transparent; border-radius: 4px; background-clip: padding-box; }
}
/* crome.css 2.50.0: ALiii */

/* ---------- Phase ALiv: crisp chips, and a party's pages in the Register's style (settled 10.10.2026) ----------
   The chips made crisp again: corners of 3, the word in the regular weight, soft black on the light colours and white
   on red, nothing yet a warm light grey that sits with the page, and a shade darker under the pointer, on every chip on
   every page. A chip that does something (Screen, Send, Look up) is an outline with navy words, so it never reads as a
   state. On the Register and a party's pages a chip is 124 x 24, its word 13; elsewhere chips keep their size for now.
   A party's pages: its name heads the page and what it is sits under it; then the tabs, Details at the left, Contracts
   and Compliance at the right, each a chip that names what it opens in the party's colour. The open tab is white and
   bezelled, joined to the sheet, with 24 of white either side of its chip (the sheet's own margin); Details stands flush
   with the sheet's left edge and Compliance with its right. One white sheet: the search on its first line, New contract
   at its right; then one thing a row, names in Charter 14.5 as on the Register, a contract's chip under the Contracts
   tab (1022) and a check's under Compliance (1198, the Register's Compliance column). As on the Register the page stands
   still and the sheet scrolls inside, showing whole rows, with the drop line at the foot of the window. */

/* the chips, everywhere */
:root { --none: #e9e7e1; }
.chip { border-radius: 3px; font-weight: 400; }
.chip:is(.green, .green2, .yellow, .orange) { color: var(--ink) !important; }
.chip.none { background: var(--none); color: #6e6b64 !important; }
a.chip, button.chip:not(.pick):not(.tocheck) { transition: filter var(--t) ease-out, background-color var(--t) ease-out, box-shadow var(--t) ease-out; }
a.chip:hover, button.chip:not(.pick):not(.tocheck):not(.act):hover { filter: brightness(.95); text-decoration: none; }
/* a chip that does something: drawn, not filled; filled faintly under the pointer */
button.chip.act { background: var(--sheet); color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc; }
button.chip.act:hover { filter: none; background: var(--hover); box-shadow: inset 0 0 0 1px var(--outline-hover); }
/* a party's pages (ALiv.2, one definition): the chip 124 x 24, the word 13, a hair of room above it so it sits in the middle of
   the box, pressed or read; in a row it stands on top of its line. Look up is drawn as a chip that does something. A chip
   with nothing to say is its words alone, the box showing under the pointer */
body[data-party] .chip, body[data-party] button.chip.act, body[data-party] .sheet table.rep.party.details td.mk button.ghost.small {
  box-sizing: border-box; width: 124px; min-width: 0; height: 24px; line-height: 23px; padding: 1px 8px 0; border: 0; border-radius: 3px;
  font-family: var(--head); font-size: 13px; font-weight: 400; letter-spacing: .01em; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
body[data-party] .psheet table.rep.party td .chip { position: relative; top: 0; border: 0; line-height: 23px; text-decoration: none; vertical-align: top; }
body[data-party] .psheet table.rep.party td.mk button.ghost.small { line-height: 23px; }
body[data-party] .chip.none { background: transparent; color: var(--facts) !important; }
body[data-party] a.chip.none:hover { background: #f2f1ed; filter: none; }
body[data-party] .sheet table.rep.party.details td.mk button.ghost.small { background: var(--sheet); color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc; cursor: pointer; }
body[data-party] .sheet table.rep.party.details td.mk button.ghost.small:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--outline-hover); }

/* a party's head: its name, and what it is under it */
body[data-party] .phead { padding: 0 25px; margin: 0 0 14px; }
body[data-party] .phead h1.pname { display: block; height: auto; min-height: 0; margin: 0; font-family: var(--body); font-size: 26px; line-height: 34px; font-weight: 400; color: var(--ink);
  letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-party] .phead .pfacts { margin: 2px 0 0; font-family: var(--head); font-size: 14px; line-height: 24px; color: var(--facts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-party] .phead .padd { display: none; }

/* the tabs (ALiv.2, one definition): Details at the left, flush with the sheet's edge, in words, the Register's own tab;
   Contracts and Compliance at the right, each a chip in the party's colour over its own column (Contracts 1046-1186, its
   chip at 1054; Compliance 1190-1330, its chip at 1198), each tab 140 wide with its chip in the middle, 8 of white all
   round it when open, above and at the sides alike, and 40 tall, as the Register's tabs are (ALiv.3.2) */
nav.ftabs.ptabs { display: flex; align-items: flex-end; gap: 0; margin-top: 2px; padding: 0; position: relative; z-index: 2; font-family: var(--head); }
nav.ftabs.ptabs > a { position: relative; border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; }
nav.ftabs.ptabs > a:hover { text-decoration: none; }
nav.ftabs.ptabs > a.dt { margin-right: auto; padding: 10px 23px 9px; font-size: 14px; line-height: 20px; color: var(--facts); white-space: nowrap; }
nav.ftabs.ptabs > a.dt:hover { color: var(--navy); }
nav.ftabs.ptabs > a.ct { flex: 0 0 140px; width: 140px; display: flex; align-items: center; justify-content: center; padding: 7px 0 8px; }
nav.ftabs.ptabs > a.ct.k { margin-right: 4px; }
nav.ftabs.ptabs > a.ct.c { margin-right: 17px; }
nav.ftabs.ptabs > a.ct .chip { position: relative; z-index: 1; display: block; width: 124px; min-width: 0; height: 24px; line-height: 23px; padding: 1px 6px 0; border: 0;
  border-radius: 3px; font-family: var(--head); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
nav.ftabs.ptabs > a.ct .chip .w { display: inline-block; }
/* on a sharp screen the chip's word rises the half pixel the Register's heads rise, so they share a line; its box stays
   on whole pixels (ALiv.3.2) */
@media (min-resolution: 2dppx) { nav.ftabs.ptabs > a.ct .chip .w { transform: translateY(-.5px); } }
nav.ftabs.ptabs > a.ct .chip.red { color: #fff; }
nav.ftabs.ptabs > a.ct:hover .chip { filter: brightness(.95); }
nav.ftabs.ptabs > a.ct:hover .chip.none { background: #f2f1ed; filter: none; }
nav.ftabs.ptabs > a.on { background: var(--sheet); border-color: var(--cardline); margin-bottom: -1px; }
nav.ftabs.ptabs > a.dt.on { color: var(--ink); font-weight: 500; padding-bottom: 10px; }
nav.ftabs.ptabs > a.ct.on { padding-bottom: 9px; }
nav.ftabs.ptabs > a.on::before, nav.ftabs.ptabs > a.on::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; pointer-events: none; }
nav.ftabs.ptabs > a.on::before { left: -12px; background: radial-gradient(circle at 0 0, var(--frame) 10.8px, var(--cardline) 11.2px, var(--cardline) 11.8px, var(--sheet) 12.2px); }
nav.ftabs.ptabs > a.on::after { right: -12px; background: radial-gradient(circle at 100% 0, var(--frame) 10.8px, var(--cardline) 11.2px, var(--cardline) 11.8px, var(--sheet) 12.2px); }
nav.ftabs.ptabs > a.dt.on::before { display: none; }
nav.ftabs.ptabs:has(> a.dt.on) + .psheet { border-top-left-radius: 0; }
nav.ftabs.ptabs:has(> a.ct.c.on) + .psheet { border-top-right-radius: 0; }

/* the sheet: its first line the search, with New contract at the right */
body[data-party] .sheet.psheet { position: relative; z-index: 1; background: var(--sheet); border: 1px solid var(--cardline); border-radius: 12px; padding: 0 24px 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
body[data-party] .psheet > .sr { height: 60px; }
body[data-party] .psheet .savednote { right: 140px; top: -38px; }

/* the tables on the Register's lines: the name from 412, the words from 784, the Contracts chip at 1022, Compliance at
   1198; each table reaches 16 beyond the sheet's margins, as on the Register, for the shading of the row you point at */
body.framed[data-party] .psheet table.rep.party { table-layout: fixed; }
body.framed[data-party] .psheet table.rep.party col.c-name { width: auto; }
body.framed[data-party] .psheet table.rep.party :is(col.c-a, col.c-w) { width: 238px; }
body.framed[data-party] .psheet table.rep.party :is(col.c-k, col.c-o) { width: 176px; }
body.framed[data-party] .psheet table.rep.party :is(col.c-x, col.c-risk) { width: 160px; }
body.framed[data-party] .psheet table.rep.party.details :is(col.c-b, col.c-c) { width: 0; }
body.framed[data-party] .psheet table.rep.party.details col.c-d { width: 176px; }
body.framed[data-party] .psheet table.rep.party td.el { padding-left: 16px; padding-right: 20px; }
body.framed[data-party] .psheet table.rep.party td.hd { padding-left: 20px; padding-right: 0; }
body.framed[data-party] .psheet table.rep.party td.rk { padding: 0 0 0 20px; text-align: left; vertical-align: middle; }
body.framed[data-party] .psheet table.rep.party td.cx { padding: 0 16px 0 20px; }
body.framed[data-party] .psheet table.rep.party.compliance td.rk { padding: 0 16px 0 20px; }
body.framed[data-party] .psheet table.rep.party.compliance td.dt { padding-left: 20px; padding-right: 20px; }
body.framed[data-party] .psheet table.rep.party.compliance td.el + td:not([class]) { padding-left: 20px; padding-right: 20px; }
body.framed[data-party] .psheet table.rep.party.details td.el + td { padding-left: 20px; padding-right: 16px; }
body.framed[data-party] .psheet table.rep.party.details td.mk { padding: 0 16px 0 20px; text-align: left; vertical-align: middle; }
/* names in Charter 15, as on the Register; what a row says in 13 */
body[data-party] .psheet table.rep.party.contracts .iname .ititle { font-size: 15px; line-height: 20px; }
body[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow) > td.el { font-size: 15px; line-height: 20px; }
body[data-party] .psheet table.rep.party.compliance td.dt { font-size: 13px; line-height: 20px; }
body[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow) > :is(td.hd, td.dt) { color: var(--facts); }
body[data-party] .psheet table.rep.party.compliance tr.sub td.dt.wrapt { line-height: 19px; }
body[data-party] .psheet table.rep.party.compliance .acts2 { font-size: 13px; line-height: 18px; margin-top: 2px; }
body[data-party] .psheet table.rep.party.compliance .acts2 button.link { font-size: 13px; }
body.framed[data-party] .psheet table.rep.party.compliance tr:not(.sub) > td { padding-top: 12px; padding-bottom: 12px; height: 40px; }
body.framed[data-party] .psheet table.rep.party.compliance tr.sub > td { padding-top: 10px; padding-bottom: 10px; }
body[data-party] .psheet table.rep.party.compliance tr.sub > td.el { font-size: 13px; }
body[data-party] .psheet table.rep.party.details td.el { font-family: var(--body); font-size: 15px; line-height: 26px; color: var(--ink); }
body.framed[data-party] .psheet table.rep.party.details tr > td { padding-top: 11px; padding-bottom: 9px; height: 26px; vertical-align: middle; }
body[data-party] .psheet table.rep.party.details :is(input:not([type=checkbox]), textarea) { height: 26px; line-height: 26px; padding: 0; font-family: var(--head); font-size: 14px;
  color: var(--facts); text-overflow: ellipsis; }
body[data-party] .psheet table.rep.party.details :is(input:not([type=checkbox]), textarea):focus { color: var(--ink); }
body[data-party] .psheet table.rep.party.details :is(td.hd, label.check) { font-family: var(--head); font-size: 14px; line-height: 26px; color: var(--facts); }
/* an empty box's hint in the faint grey, as the search's (the browser's own grey is cooler than Crome's) */
body[data-party] .psheet :is(input, textarea)::placeholder { color: var(--faint); opacity: 1; }
body[data-party] .psheet table.rep.party.details td .row.tight { flex-wrap: nowrap; gap: 24px; }
body[data-party] .psheet table.rep.party.details td .row.tight > input { flex: 0 0 auto; width: 220px !important; max-width: none !important; }
body[data-party] .psheet table.rep.party.details td .row.tight > input[type=email] { width: 260px !important; }
/* Documents on file, a row like the others */
body[data-party] .psheet section.cblock details.fold { border-top: 0; }
body[data-party] .psheet section.cblock details.fold > summary { height: 56px; padding: 0; align-items: center; font-family: var(--body); font-size: 15px; color: var(--ink); }
body[data-party] .psheet section.cblock details.fold > summary .n { font-family: var(--head); font-size: 13px; color: var(--facts); }
/* a choice keeps its own size beside its words (a phone gave the circle a share of the line) */
body[data-party] .psheet label.check input[type=radio] { flex: none; width: auto; }
/* a check's record, opened under its row, sits on a faint ground, so it reads as that row's own */
body.framed[data-party] .psheet table.rep.party.compliance tr.sub > td { background-color: #faf9f6; }

@media (min-width: 701px) {
  /* the page stands still; the sheet runs to the foot of the window and scrolls inside, under its first line */
  body.framed[data-party] { height: 100vh; overflow: hidden; }
  body.framed[data-party] main { position: relative; height: 100vh; display: flex; flex-direction: column; padding: 48px 0 72px; }   /* ALiv.3.1: as the Register's */
  body.framed[data-party] main > * { flex: none; }
  body[data-party] .sheet.psheet { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }   /* ALiv.3: nothing scrolls sideways */
  body[data-party] .psheet > .sr { position: sticky; top: 0; z-index: 3; background: var(--sheet); }
  /* as on the Register, the sheet settles on a whole row as you scroll its details or its contracts; a check's record and
     its forms open in place on Compliance, and scroll freely */
  body[data-party] .sheet.psheet { scroll-snap-type: y mandatory; scroll-padding-top: 60px; }
  body[data-party] .psheet table.rep.party:is(.details, .contracts) > tbody > tr { scroll-snap-align: start; }
  html.classicbars body[data-party] .sheet.psheet { scrollbar-gutter: stable; }
  /* ALiv.3: Chrome and Edge draw the slim bar below (8 wide, no arrows, no track), like a Mac's; Firefox its own thin one */
  @supports not selector(::-webkit-scrollbar) { html.classicbars body[data-party] .sheet.psheet { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .22) transparent; } }
  html.classicbars body[data-party] .sheet.psheet::-webkit-scrollbar-button { display: none; }
  html.classicbars body[data-party] .sheet.psheet::-webkit-scrollbar { width: 8px; height: 0; }
  html.classicbars body[data-party] .sheet.psheet::-webkit-scrollbar-track { background: transparent; }
  html.classicbars body[data-party] .sheet.psheet::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border: 2px solid transparent; border-radius: 4px; background-clip: padding-box; }
  /* rows 48 (ALiv.2, one definition), every word on one baseline and the chip in the middle to the pixel: a row is held at 48,
     its cells 2 short of it, so its words share a line without the row growing by a fraction of a pixel */
  body.framed[data-party] .psheet table.rep.party.contracts > tbody > tr,
  body.framed[data-party] .psheet table.rep.party.compliance > tbody > tr:not(.sub):not(.formrow),
  body.framed[data-party] .psheet table.rep.party.details > tbody > tr { height: 48px; }
  body.framed[data-party] .psheet table.rep.party.contracts tr > td,
  body.framed[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow) > td { padding-top: 11px; padding-bottom: 9px; height: 26px; line-height: 26px;
    vertical-align: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.framed[data-party] .psheet table.rep.party.contracts tr > td.rk,
  body.framed[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow) > td.rk { padding-top: 0; padding-bottom: 0; height: auto; line-height: 24px;
    vertical-align: middle; overflow: visible; }
  body[data-party] .psheet table.rep.party.contracts .iname .ititle,
  body[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow) > td:is(.el, .dt) { line-height: 26px; }
  /* a check's record, opened under its row: its lines stand from the top, so every chip below it sits on a whole pixel */
  body.framed[data-party] .psheet table.rep.party.compliance tr.sub > td { vertical-align: top; }
  body[data-party] .psheet table.rep.party.compliance tr.sub .dec, body[data-party] .psheet table.rep.party.compliance tr.sub .dec :is(button, a, span, form) { line-height: 20px; }
  /* Documents on file, a row like the others, its count from 674 as the words of the rows above */
  body[data-party] .psheet section.cblock details.fold > summary { display: grid; grid-template-columns: 242px minmax(0, 1fr); column-gap: 20px; height: auto; padding: 11px 0;
    line-height: 26px; align-items: baseline; }
  body[data-party] .psheet section.cblock details.fold > summary .n { justify-self: start; margin: 0; }
  /* a contract's row is shaded under the pointer, as a party's row is on the Register */
  body.framed[data-party] .psheet table.rep.party.contracts tr[data-find]:hover > td { background-color: var(--hover); cursor: pointer; }
  body.framed[data-party] .psheet table.rep.party.contracts tr[data-find]:hover > td:first-child { border-top-left-radius: var(--r2); border-bottom-left-radius: var(--r2); }
  body.framed[data-party] .psheet table.rep.party.contracts tr[data-find]:hover > td:last-child { border-top-right-radius: var(--r2); border-bottom-right-radius: var(--r2); }
  /* a record's ground rounds at its corners */
  body.framed[data-party] .psheet table.rep.party.compliance tr:not(.sub) + tr.sub > td:first-child { border-top-left-radius: var(--r2); }
  body.framed[data-party] .psheet table.rep.party.compliance tr:not(.sub) + tr.sub > td:last-child { border-top-right-radius: var(--r2); }
  body.framed[data-party] .psheet table.rep.party.compliance tr.sub.last > td:first-child { border-bottom-left-radius: var(--r2); }
  body.framed[data-party] .psheet table.rep.party.compliance tr.sub.last > td:last-child { border-bottom-right-radius: var(--r2); }
}

/* a phone: New contract beside the name; the tabs on one line, the chips 110 with 16 of white either side; in the sheet
   each thing's words on their own lines and its chip beneath, under its tab */
@media (max-width: 700px) {
  body[data-party] main { padding-top: 24px; }
  body[data-party] .phead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 0 17px; }
  body[data-party] .phead h1.pname { grid-column: 1; grid-row: 1; font-size: 24px; line-height: 30px; white-space: normal; }
  body[data-party] .phead .padd { display: inline-flex; grid-column: 2; grid-row: 1; align-self: center; white-space: nowrap; font-size: 14px; }
  body[data-party] .phead .pfacts { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  body[data-party] .psheet > .sr .sacts { display: none; }
  nav.ftabs.ptabs { overflow: visible; padding: 0; align-items: flex-end; }   /* ALvi: a name on two lines, the chips at its foot */
  nav.ftabs.ptabs > a.dt { padding: 10px 10px 13px; }
  nav.ftabs.ptabs > a.dt.on { padding-bottom: 14px; }
  nav.ftabs.ptabs > a.ct { flex: 0 0 auto; width: auto; padding: 10px 5px 13px; }   /* ALvi: drawn in, so the name keeps its room */
  nav.ftabs.ptabs > a.ct.k, nav.ftabs.ptabs > a.ct.c { margin-right: 0; }
  nav.ftabs.ptabs > a.ct.on { padding-bottom: 14px; }
  nav.ftabs.ptabs > a.ct.c.on::after { display: none; }
  nav.ftabs.ptabs > a.ct .chip { width: auto; padding: 1px 8px 0; font-size: 11px; letter-spacing: .06em; }
  body[data-party] .sheet.psheet { padding: 0 16px 4px; }
  body[data-party] .psheet > .sr { height: 56px; }
  body[data-party] .psheet table.rep.party, body[data-party] .psheet table.rep.party tbody { display: block; width: auto !important; margin: 0 !important; }
  body[data-party] .psheet table.rep.party colgroup { display: none; }
  body[data-party] .psheet table.rep.party tr { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; column-gap: 36px; row-gap: 4px; height: auto; padding: 14px 0;
    border-bottom: 1px solid var(--line); }
  body[data-party] .psheet table.rep.party tr > td { display: block; padding: 0 !important; background-image: none !important; border: 0 !important; grid-column: 1 / -1; min-width: 0;
    height: auto !important; white-space: normal; }
  body[data-party] .psheet table.rep.party tr > td.el { grid-row: 1; }
  body[data-party] .psheet table.rep.party tr > td:is(.hd, .dt) { grid-row: 2; }
  body[data-party] .psheet table.rep.party.contracts tr:not(.sub) > td.el { grid-column: 1 / -1; grid-row: 1; }
  body[data-party] .psheet table.rep.party.contracts tr:not(.sub) > td.rk { grid-column: 2; grid-row: 4; margin-top: 8px; text-align: left; }
  body[data-party] .psheet table.rep.party.contracts tr > td.cx { display: none; }
  body[data-party] .psheet table.rep.party.compliance tr > td.rk { grid-column: 3; grid-row: 3; margin-top: 8px; text-align: left; }
  body[data-party] .psheet table.rep.party.compliance tr > td.rk:empty { display: none; }
  body[data-party] .psheet table.rep.party .chip { width: 110px; padding-left: 4px; padding-right: 4px; }
  body[data-party] .psheet table.rep.party.details tr > td.el { font-size: 13px; line-height: 18px; font-family: var(--head); color: var(--facts); }
  body[data-party] .psheet table.rep.party.details td.mk { grid-column: 3; grid-row: 3; }
  body[data-party] .psheet table.rep.party.details td .row.tight { flex-wrap: wrap; gap: 0 24px; }
  body[data-party] .psheet table.rep.party tr.line { border-bottom-color: var(--navy); }
  body[data-party] .psheet .iname .ititle { white-space: normal; }
  body[data-party] .psheet table.rep.party.compliance tr.sub { height: auto; background: #faf9f6; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom-color: #ecebe6; }
  body[data-party] .psheet table.rep.party.compliance tr.sub > td { background-color: transparent; }
  body[data-party] .dropline { margin: 18px 0 0; }
}
/* crome.css 2.51.0: ALiv */

/* ---------- Phase ALiv.1: Contracts and Compliance where the Register has them (settled 11.10.2026) ----------
   Contracts and Compliance stand over their own columns, as on the Register: the Contracts tab over the column at
   1054, Compliance over the one at 1198, flush with the sheet's right edge. Their names are the Register's column heads,
   small spaced capitals, light until open, each after a square in the party's colour; Details stays at the left in the
   words of the Register's tabs. One line to a row, 56 high, as on the Register: a contract's title from 412, its project
   from 674, who has it and for how long from 854, its chip at 1054 under Contracts; a check from 412, what it found and
   when from 674, its chip at 1198 under Compliance; a party's details from 674. New contract leaves the search line (the
   drop line adds a contract; a phone keeps it beside the name). What a check's row lets you do shows at the end of its
   line under the pointer, or as you tab to it. */

body[data-party] .psheet .savednote { right: 0; }

/* the columns: the name 412, the project or the words 674, who has it 854, Contracts' chip 1054, Compliance's 1198 */
body.framed[data-party] .psheet table.rep.party.contracts col.c-pj { width: 180px; }
body.framed[data-party] .psheet table.rep.party.contracts col.c-a { width: 200px; }
body.framed[data-party] .psheet table.rep.party.contracts col.c-k { width: 144px; }
body.framed[data-party] .psheet table.rep.party.compliance col.c-w { width: 180px; }
body.framed[data-party] .psheet table.rep.party.compliance col.c-o { width: 344px; }
body.framed[data-party] .psheet table.rep.party.details col.c-a { width: 344px; }
body.framed[data-party] .psheet table.rep.party.details col.c-d { width: 180px; }
body.framed[data-party] .psheet table.rep.party td.pj { padding-left: 20px; padding-right: 0; }
body[data-party] .psheet table.rep.party.contracts td.pj { font-family: var(--head); font-size: 13px; color: var(--facts); font-variant-numeric: tabular-nums; }
body[data-party] .psheet table.rep.party.contracts td.hd { font-family: var(--head); font-size: 13px; color: var(--facts); font-variant-numeric: tabular-nums; }
body[data-party] .psheet table.rep.party :is(td.hd, td.dt) .quiet { color: var(--facts); }

@media (min-width: 701px) {
  /* ALiv.3.2: what the party is beside its name, on one line, so its Contracts and Compliance stand where the Register's do */
  body[data-party] .phead { display: flex; align-items: baseline; margin-bottom: 16px; }
  body[data-party] .phead h1.pname { flex: 0 0 auto; max-width: 100%; }
  body[data-party] .phead .pfacts { flex: 0 1 auto; min-width: 0; margin: 0 0 0 18px; }
  /* what a check's row lets you do: at the end of its line, under the pointer or as you tab to it */
  body[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow) > td.dt .acts2 { display: inline-flex; flex-wrap: nowrap; margin: 0; vertical-align: baseline;
    visibility: hidden; }
  body[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow) > td.dt .acts2::before { content: "·"; margin: 0 4px; color: var(--facts); }
  body[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow) > td.dt .acts2 .sep { margin: 0 4px; }
  body[data-party] .psheet table.rep.party.compliance tr:not(.sub):not(.formrow):is(:hover, :focus-within) > td.dt .acts2 { visibility: visible; }
}

/* a narrower window: the project goes to the row's titles, and a check's or a detail's name keeps 200 of room */
@media (min-width: 701px) and (max-width: 1259px) {
  body.framed[data-party] .psheet table.rep.party.contracts col.c-pj { width: 0; }
  body.framed[data-party] .psheet table.rep.party.contracts td.pj { padding: 0; }
  body.framed[data-party] .psheet table.rep.party.contracts col.c-a { width: 180px; }
  body.framed[data-party] .psheet table.rep.party:is(.compliance, .details) col.c-name { width: 216px; }
  body.framed[data-party] .psheet table.rep.party.compliance col.c-w, body.framed[data-party] .psheet table.rep.party.details col.c-a { width: auto; }
  body.framed[data-party] .psheet table.rep.party.compliance col.c-o, body.framed[data-party] .psheet table.rep.party.details col.c-d { width: 0; }
}
/* and narrower still, down to a phone: still one line to a row (AHiii's cards of two lines are a phone's) */
@media (min-width: 701px) and (max-width: 900px) {
  body[data-party] .psheet table.rep.party.contracts { display: table; }
  body[data-party] .psheet table.rep.party.contracts tbody { display: table-row-group; }
  body[data-party] .psheet table.rep.party.contracts colgroup { display: table-column-group; }
  body[data-party] .psheet table.rep.party.contracts tr { display: table-row; padding: 0; border-bottom: 0; }
  body[data-party] .psheet table.rep.party.contracts tr:not(.sub) > td { display: table-cell; }
}

/* a phone: the tabs on one line as they fit; a contract's words on their lines, its project, who has it, its chip */
@media (max-width: 700px) {
  body[data-party] .psheet table.rep.party.contracts tr:not(.sub) > td.pj { grid-row: 2; font-size: 13px; line-height: 20px; }
  body[data-party] .psheet table.rep.party.contracts tr:not(.sub) > td.hd { grid-row: 3; font-size: 13px; line-height: 20px; }
}
/* crome.css 2.51.1: ALiv.1 */

/* ---------- Phase ALiv.2: calm, settled pages (settled 11.10.2026) ----------
   Rows 48 on the Register and a party's pages, the chip in the middle to the pixel. Contracts and Compliance are chips
   again, in the party's colours, the size of the chips under them, in the Register's spaced capitals; the open one sits
   in a white folder that hugs it by 10 all round (Compliance too: its folder no longer runs to the sheet's edge, and the
   sheet's corner beside it is square, so its foot meets a straight edge). Every chip's word sits in the same place in its
   box, pressed or read. A chip means something is happening: nothing yet is its words alone, in the facts grey, the box
   showing under the pointer. The frame stands still: the drop line sits 44 above the window's foot on every page, its
   words on the line of the name at the foot of the sidebar, and the sheet runs to the same foot on every tab, its rows
   whole. The sidebar's New sits on the page's first line. Names on a sheet are Charter 15, a row's facts 13; four tones
   of words (ink, facts, faint, navy), the facts a shade darker so they read for everyone (4.8 to 1 on white). A record's
   note has its own line. Pages cross-fade as you move between them, unless motion is turned down.
   One definition each: the Register's and a party's tabs, rows and chips are each defined once, in the first rule that
   shaped them (the Register's in ALi, a party's in ALiv); the rules from later phases that overrode them are folded in
   and gone, and so are the rules for words no longer on the page (the squares, a name's facts, a check's date). Rules
   other pages share (the chips' colours, the folder tabs' base) stay where they are, and decide nothing here. */

/* pages cross-fade as you move between them */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* a chip reached by the keyboard is ringed in navy, a hair away; a chip clicked is not */
body:is([data-party], [data-parties]) .chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body:is([data-party], [data-parties]) .chip:focus:not(:focus-visible) { outline: none; }

/* the sheet's foot band: the sheet runs to the same foot on every tab, its rows whole; this band of its own white, held to
   its foot, covers what is left under the last whole row (its height is set as the page fits). A phone scrolls as a page */
.sfoot { display: none; }
@media (min-width: 701px) {
  body:is([data-parties], [data-party]) .sheet .sfoot { display: block; position: sticky; bottom: 0; z-index: 2; height: 0; margin: 0 -16px;
    background: var(--sheet); pointer-events: none; }
}
/* crome.css 2.51.2: ALiv.2 */

/* ---------- Phase ALiv.3.1: the Register finished (proposed 12.10.2026, second round) ----------
   One foot for the page. The sheet ends on the sidebar's line over the signed-in person, so the line under the sheet
   and the line over your name are one line across the window, on the Register and a party's pages alike, whatever
   shows under the sheet (the main column keeps the sidebar's 72 under it, and the drop line stands in that band, in the
   rules that first set them). The drop line's words sit in the middle of that band, between the sheet's foot and the
   window's, and the archived link with them, at the left under the names. The open tab is 4 shorter, 2 above and 2
   below its words or chip (a party's open folder: 8 above and below its chip, 10 at the sides); the words and chips stay
   where they were, on the sidebar's New, and the sheet starts 2 higher. The search, its icon and the column heads stand
   in the exact middle of the sheet's first line: the capitals' middle on the line's middle. */
/* they sat half a pixel low; on a sharp screen half a pixel is one dot, so they rise by it there (elsewhere half a
   pixel would only blur them) */
@media (min-resolution: 2dppx) {
  .sr label.sfind, .plist .sr.heads .sh { transform: translateY(-.5px); }
}
@media (min-width: 701px) {
  body[data-parties] .belowsheet { position: absolute; left: 25px; bottom: 0; z-index: 1; height: 72px; margin: 0; padding: 0; display: flex; align-items: center; font-size: 14px; }
}
/* a narrow window: the drop line's words give the archived link room, at the right */
@media (min-width: 701px) and (max-width: 940px) {
  body[data-parties] .belowsheet ~ .dropline { justify-content: flex-end; padding-right: 25px; }
}
/* crome.css 2.51.5: ALiv.3.1 */

/* ---------- Phase ALiv.3.2: a party's tabs where the Register's heads are (settled 12.10.2026) ----------
   What a party is sits beside its name, on one line, so its tabs stand 27 higher and Contracts and Compliance fall on
   the Register's heads to the half pixel: the same columns, the same line, the words' capitals 117 to 126 on a sharp
   screen. The open folder holds its chip with 8 of white all round, above and at the sides alike, 40 tall as the
   Register's tabs are; Details is the Register's own tab. A row's words in the Register's tones: its name in ink, what it
   says in the facts grey (who has a contract, what a check found, a party's details), an empty box's hint in the faint
   grey; the older dark grey (#555) a party's pages kept in places is the facts grey too. The rules above are changed
   where they are defined; only the grey's one line is here. */
body[data-party] { --quiet: var(--facts); }
/* crome.css 2.51.6: ALiv.3.2 */

/* ---------- Phase ALiv.4 (settled 12.10.2026): a contract's page in the Register's style ----------
   The layer under a party. The party's head and tabs stand where they stand on its own pages, the Contracts folder
   open; one white sheet, held still. Its first line is the contract's own row from the Contracts tab, held in the shade
   it takes under the pointer, with the stage's next step at 1198, a chip drawn in outline; then the search, More at its
   right; then a row for each thing, 48 high: a term's name (Charter 15) and clause, what the review found (13) from
   674, its chip at 1054, and the position the markup uses at 1198 in its words alone. A term opens in place on the faint
   ground of a compliance record. Within the playbook, Documents and History are rows too, their counts from 674.
   Settled with Cam's eye (pictures 42 to 61): a row's words in the facts grey, as on a party's pages; an opened term in
   the house style's two voices, what Crome found in Gill Sans and the facts grey, what is read (the contract's wording,
   the playbook's positions) in Charter and ink; a choice's chips with the strongest at 1198, under the next step and the
   row's own word; and the live markup: while Crome marks the draft, The markup row lies open on it, each change shown
   where it lands as it lands, the chip on the contract's row counting them; once made, a row to open again. */

/* the sheet's head: the search, then the contract's row; both stay while the terms scroll, across the sheet's whole width
   so nothing scrolling under them shows at their sides */
body[data-contract] .csheet > .chead { padding-top: 0; background: var(--sheet); }
@media (min-width: 701px) {
  body[data-contract] .csheet > .chead { position: sticky; top: 0; z-index: 3; margin: 0 -24px; padding: 0 24px; }
  body[data-contract] .sheet.psheet.csheet { scroll-snap-type: y proximity; scroll-padding-top: 108px; }
  body[data-contract] .csheet .tabbody > :is(table.rep.party.stage, details.fold.rv > table.rep.party.stage) > tbody > tr:not(.sub) { scroll-snap-align: start; }
  body[data-contract] .csheet .tabbody > details.fold > summary { scroll-snap-align: start; }   /* ALiv.5.5: Markup and Review are rows to rest on too */
}
body[data-contract] .csheet > .chead > .sr { height: 60px; }
body[data-contract] .csheet .sr .sacts { gap: 0; }
body[data-contract] .csheet .sr .sacts .sep { margin: 0 10px; font-family: var(--head); font-size: 14px; color: var(--faint); }
body.framed[data-contract] .csheet .sr .sacts :is(.sact, button.morebtn) { display: inline; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--head); font-size: 14px; line-height: 24px; color: var(--navy); cursor: pointer; white-space: nowrap; }
body.framed[data-contract] .csheet .sr .sacts :is(.sact, button.morebtn):hover,
body.framed[data-contract] .csheet .sr .sacts button.morebtn[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 4px; }
body[data-contract] .csheet .menu { top: 36px; border-color: var(--cardline); border-radius: 8px; overflow: hidden; }

/* the contract's row: the Contracts tab's own row, held in its shade; its next step a chip drawn in outline */
body.framed[data-contract] .psheet table.rep.party.here { margin-top: 0 !important; }
body.framed[data-contract] .psheet table.rep.party.here > tbody > tr > td { background-color: var(--hover); background-image: none; }
body.framed[data-contract] .psheet table.rep.party.here > tbody > tr > td:first-child { border-radius: var(--r2) 0 0 var(--r2); }
body.framed[data-contract] .psheet table.rep.party.here > tbody > tr > td:last-child { border-radius: 0 10px 10px 0; }
body.framed[data-contract] .psheet table.rep.party.here td.cx { padding: 0 16px 0 20px !important; height: auto; line-height: 24px; vertical-align: middle; overflow: visible; }
body[data-contract] .psheet table.rep.party.here .ititle { color: var(--ink); }
body[data-contract] .psheet td.cx form.inline { display: inline-flex; margin: 0; vertical-align: top; }
body[data-party][data-contract] .psheet td.cx :is(button.chip.act, label.chip.act, a.chip.act) { display: inline-block; box-sizing: border-box; width: 124px; height: 24px; margin: 0;
  padding: 1px 6px 0; border: 0; border-radius: 3px; background: var(--sheet); color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc;
  font-family: var(--head); font-size: 13px; font-weight: 400; line-height: 23px; letter-spacing: .01em; text-align: center; white-space: nowrap; cursor: pointer; }
body[data-party][data-contract] .psheet td.cx :is(button.chip.act, label.chip.act, a.chip.act):hover { background: #f4f3ef; box-shadow: inset 0 0 0 1px #b2ada3; text-decoration: none; filter: none; }
body[data-contract] .psheet td.cx label.chip.act.over { box-shadow: inset 0 0 0 1px var(--navy); }

/* the terms: name and clause · what the review found · the term's chip at 1054 · the markup's position at 1198 */
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) { table-layout: fixed; }
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) col.c-name { width: auto; }
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) col.c-w { width: 380px; }
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) col.c-k { width: 144px; }
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) col.c-x { width: 160px; }
body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) { height: 48px; }
body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > td { height: 26px; padding-top: 11px !important; padding-bottom: 9px !important; line-height: 26px;
  vertical-align: baseline !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0 !important; }
body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr > td.el { padding-left: 16px !important; padding-right: 20px; }
body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > td.hd { padding-left: 20px !important; padding-right: 20px !important; }
body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > :is(td.rk, td.mk) { height: auto; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 24px;
  vertical-align: middle !important; text-align: left !important; overflow: visible; }
body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > td.rk { padding-left: 20px !important; padding-right: 0 !important; }
body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > td.mk { padding-left: 20px !important; padding-right: 16px !important; }
body[data-contract] .psheet table.rep.party.stage td.el .lbl { font-family: var(--body); font-size: 15px; color: var(--ink); border: 0 !important; padding: 0 !important; }
body[data-contract] .psheet table.rep.party.stage td.el .cl { margin-left: 8px; font-family: var(--head); font-size: 13px; color: var(--facts); font-variant-numeric: tabular-nums; }
body[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub) > td.hd { font-family: var(--head); font-size: 13px; color: var(--facts); }
body[data-contract] .psheet table.rep.party.stage td.hd .flagw { color: var(--red); margin-right: 8px; }
body[data-contract] .psheet table.rep.party.stage tr.calm > td.el .lbl { color: var(--ink); }
body[data-contract] .psheet table.rep.party.stage tr.calm > td.hd { color: var(--facts); }
body[data-contract] .psheet table.rep.party.stage tr.calm > td.hd a { color: var(--navy); }
/* the markup's position: its words alone, in the facts grey, centred where a chip would be; the box shows under the pointer */
body[data-contract] .psheet table.rep.party.stage td.mk .dec { display: inline-block; box-sizing: border-box; width: 124px; height: 24px; padding: 1px 6px 0; border-radius: 3px;
  font-family: var(--head); font-size: 13px; line-height: 23px; color: var(--facts); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
body[data-contract] .psheet table.rep.party.stage tr.term.opens:hover td.mk .dec { background: #eeede8; color: var(--ink); }
/* the chips: 124 x 24, the word 13, as everywhere on the Register and a party's pages */
body[data-party][data-contract] .psheet table.rep.party.stage td.rk .chip { width: 124px; height: 24px; line-height: 23px; padding: 1px 6px 0; vertical-align: top; }
body[data-party][data-contract] .psheet table.rep.party.stage td.rk .chip.none { background: transparent; color: var(--facts) !important; }
body[data-contract] .psheet table.rep.party.stage td.rk form.inline { display: inline-flex; margin: 0; }
body[data-party][data-contract] .psheet table.rep.party.stage button.chip.tocheck { width: 124px; height: 24px; line-height: 23px; padding: 1px 6px 0; border-radius: 3px; font-size: 13px;
  background: transparent; color: var(--facts); box-shadow: none; }
@media (hover: hover) {
  body[data-party][data-contract] .psheet table.rep.party.stage button.chip.tocheck:not(.checked):not(:disabled):hover { background: var(--sheet); color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc; }
}
body[data-party][data-contract] .psheet table.rep.party.stage button.chip.tocheck.checked { background: var(--green); color: var(--ink); }

/* a row that opens is shaded under the pointer, rounded at its ends, as a contract's row is on the Contracts tab */
@media (min-width: 701px) {
  body.framed[data-contract] .psheet table.rep.party.stage tr.term.opens > td { cursor: pointer; }
  body.framed[data-contract] .psheet table.rep.party.stage tr.term.opens:hover > td { background-color: var(--hover) !important; }
  body.framed[data-contract] .psheet table.rep.party.stage tr.term.opens:hover > td:first-child { border-radius: var(--r2) 0 0 var(--r2); }
  body.framed[data-contract] .psheet table.rep.party.stage tr.term.opens:hover > td:last-child { border-radius: 0 var(--r2) var(--r2) 0; }
}
/* the hairlines: under every row, from the sheet's margin to its margin */
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) > tbody > tr > td { background-image: linear-gradient(var(--hair), var(--hair)); background-repeat: no-repeat; background-position: left bottom;
  background-size: 100% 1px; background-color: transparent; border: 0 !important; }
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) > tbody > tr > td:first-child { background-size: calc(100% - 16px) 1px; background-position: right bottom; }
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) > tbody > tr > td:last-child { background-size: calc(100% - 16px) 1px; background-position: left bottom; }
body.framed[data-contract] .psheet table.rep.party:is(.stage, .flist) > tbody > tr > td:only-child { background-size: calc(100% - 32px) 1px; background-position: center bottom; }

/* a term opened: its row stays as it was; its rows under it on the faint ground of a compliance record, rounded */
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened > td { border: 0 !important; background-color: transparent; }
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened:not(:hover) > td { background-image: none; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub:not([hidden]) > td { background-color: #faf9f6; background-image: linear-gradient(#ecebe6, #ecebe6);
  border: 0 !important; vertical-align: top !important; white-space: normal; overflow: visible; height: auto; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.cardend > td { background-image: none !important; }
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened + tr.sub > td:first-child { border-top-left-radius: 0; }
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened + tr.sub > td:last-child { border-top-right-radius: 0; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.cardend > td:first-child { border-bottom-left-radius: var(--r2); }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.cardend > td:last-child { border-bottom-right-radius: var(--r2); }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub > td.el { padding: 13px 20px 12px 16px !important; font-family: var(--head); font-size: 13px; line-height: 20px; color: var(--facts); }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub > td:not(.el) { padding: 12px 16px 12px 20px !important; }
body[data-contract] .psheet table.rep.party.stage tr.sub td.q { font-family: var(--body); font-size: 14.5px; line-height: 22px; color: var(--ink); }
body[data-contract] .psheet table.rep.party.stage tr.sub td.q.pb, body[data-contract] .psheet table.rep.party.stage tr.sub td.q .same { font-family: var(--head); font-size: 13px; line-height: 20px; }
body[data-contract] .psheet table.rep.party.stage tr.sub td.q .pl + .pl { margin-top: 6px; }
body[data-contract] .psheet table.rep.party.stage tr.sub td.q .pw { color: var(--facts); margin-right: 6px; }
/* the choices, chips on the columns from the right: 1198, 1054, 910; the chosen one filled */
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.choose > td { vertical-align: middle !important; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.choose > td:last-child { text-align: right; padding-top: 12px !important; padding-bottom: 12px !important; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.choose > td.el { padding-top: 14px !important; }
body[data-contract] .psheet table.rep.party.stage .choices { display: inline-flex; gap: 20px; flex-direction: row; justify-content: flex-end; }
body[data-contract] .psheet table.rep.party.stage .choices form.inline { display: inline-flex; margin: 0; }
body[data-party][data-contract] .psheet table.rep.party.stage button.chip.pick { width: 124px; height: 24px; margin: 0; padding: 1px 6px 0; border: 0; border-radius: 3px; background: var(--sheet);
  color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc; font-family: var(--head); font-size: 13px; line-height: 23px; cursor: pointer; }
body[data-party][data-contract] .psheet table.rep.party.stage button.chip.pick:hover { background: #f4f3ef; box-shadow: inset 0 0 0 1px #b2ada3; }
body[data-party][data-contract] .psheet table.rep.party.stage button.chip.pick.chosen,
body[data-party][data-contract] .psheet table.rep.party.stage button.chip.pick.chosen:hover { background: var(--navy); color: #fff; box-shadow: none; cursor: default; }
body[data-contract] .psheet table.rep.party.stage .choices .waiting { font-family: var(--head); font-size: 13px; color: var(--facts); }

/* a section of rows: its name in the Register's small spaced capitals */
body.framed[data-contract] .psheet table.rep.party.stage tr.sec { height: 44px; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sec > td.sech { padding: 18px 16px 6px !important; height: auto; line-height: 20px; vertical-align: bottom !important;
  font-family: var(--head); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* a line that says where things stand (no review yet; what comparing found): a row of its own, in the row's words */
body[data-contract] .csheet .tabbody > p.bodynote { display: flex; align-items: center; min-height: 48px; margin: 0; padding: 11px 0 9px; box-sizing: border-box; border-bottom: 1px solid var(--hair);
  font-family: var(--head); font-size: 13px; line-height: 26px; color: var(--facts); }
body[data-contract] .csheet .tabbody > p.nofind { min-height: 48px; padding: 11px 0 9px; font-size: 13px; line-height: 26px; }
body[data-contract] .csheet .tabbody > .hint { margin: 0; padding: 11px 0 9px; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid var(--hair); font-family: var(--head); font-size: 13px;
  line-height: 26px; color: var(--facts); background: none; border-radius: 0; }

/* the rest: Within the playbook, Documents, History, each a row with its count from 674, opening in place */
body[data-contract] .csheet .folds { margin: 0; }
body[data-contract] .csheet details.fold { border: 0 !important; }
body[data-contract] .csheet details.fold > summary { display: grid; grid-template-columns: 242px minmax(0, 1fr); column-gap: 20px; align-items: baseline; height: 48px; box-sizing: border-box;
  padding: 11px 0 9px !important; margin: 0; border: 0 !important; background: linear-gradient(var(--hair), var(--hair)) left bottom / 100% 1px no-repeat; cursor: pointer; list-style: none; }
body[data-contract] .csheet details.fold > summary::-webkit-details-marker { display: none; }
body[data-contract] .csheet details.fold > summary .fn { font-family: var(--body); font-size: 15px; line-height: 26px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-contract] .csheet details.fold > summary .n { justify-self: start; font-family: var(--head); font-size: 13px; line-height: 26px; color: var(--facts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (min-width: 701px) {
  body[data-contract] .csheet details.fold > summary { margin: 0 -16px; padding-left: 16px !important; padding-right: 16px !important; background-size: calc(100% - 32px) 1px; background-position: center bottom; }
  body[data-contract] .csheet details.fold > summary:hover { background-color: var(--hover); border-radius: var(--r2); }
}
body[data-contract] .csheet details.fold[open] > summary { background-image: none; }
/* opened, its rows sit on the faint ground, rounded, as a record does */
body.framed[data-contract] .psheet details.fold[open] > table.rep.party > tbody > tr > td { background-color: #faf9f6; background-image: linear-gradient(#ecebe6, #ecebe6); }
body.framed[data-contract] .psheet details.fold[open] > table.rep.party > tbody > tr:first-child > td:first-child { border-top-left-radius: var(--r2); }
body.framed[data-contract] .psheet details.fold[open] > table.rep.party > tbody > tr:first-child > td:last-child { border-top-right-radius: var(--r2); }
body.framed[data-contract] .psheet details.fold[open] > table.rep.party > tbody > tr:last-child > td { background-image: none; }
body.framed[data-contract] .psheet details.fold[open] > table.rep.party > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--r2); }
body.framed[data-contract] .psheet details.fold[open] > table.rep.party > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--r2); }
body.framed[data-contract] .psheet details.fold > table.rep.party { margin-top: 0 !important; margin-bottom: 8px !important; }
body.framed[data-contract] .psheet table.rep.party.flist > tbody > tr { height: 40px; }
body.framed[data-contract] .psheet table.rep.party.flist > tbody > tr > td { padding: 10px 20px 9px 20px !important; line-height: 21px; font-family: var(--head); font-size: 13px; color: var(--facts);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; }
body.framed[data-contract] .psheet table.rep.party.flist > tbody > tr > td.el { padding-left: 16px !important; color: var(--facts); font-variant-numeric: tabular-nums; }
body.framed[data-contract] .psheet table.rep.party.flist > tbody > tr > td:last-child { padding-right: 16px !important; }
body[data-contract] .psheet table.rep.party.flist td.el a { color: var(--navy); }
body[data-contract] .psheet table.rep.party.flist .pform { display: flex; gap: 20px; align-items: baseline; }
body[data-contract] .psheet table.rep.party.flist .pform input { width: 120px; height: 21px; padding: 0; font-family: var(--head); font-size: 13px; }
body[data-contract] .psheet table.rep.party.flist .pform input[name=project_name] { width: 240px; }
body[data-contract] .psheet table.rep.party.flist .pform button.link { font-family: var(--head); font-size: 13px; color: var(--navy); padding: 0; border: 0; background: none; cursor: pointer; }
body[data-contract] .csheet details.fold > p.foldtext { margin: 0 0 8px; padding: 12px 20px 12px 262px; border-radius: var(--r2); background: #faf9f6; font-family: var(--head); font-size: 13px; line-height: 20px; color: var(--facts); }
@media (min-width: 701px) { body[data-contract] .csheet details.fold > p.foldtext { margin: 0 -16px 8px; padding-left: 278px; padding-right: 16px; } }

/* the foot: the drop line in its place on every stage, said or not */
body[data-contract] p.dropline.held { visibility: hidden; }
/* a drafting note: its first clause in the serif of a name, the rest after it in the row's words, across both columns */
body[data-contract] .psheet table.rep.party.stage td.el.nt .ntx { margin-left: 12px; font-family: var(--head); font-size: 13px; color: var(--facts); }
body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > td.el.nt { padding-right: 20px !important; }
/* the adverse media report: a finding's kind in the facts grey before what was found, as Untracked is before a change;
   Source where a chip would be, in navy */
body[data-contract] .psheet table.rep.party.stage td.hd .catw { margin-right: 8px; color: var(--facts); }
body[data-contract] .psheet table.rep.party.stage td.mk a.dec.src { color: var(--navy); text-decoration: none; }
body[data-contract] .psheet table.rep.party.stage td.mk a.dec.src:hover { background: #eeede8; }
body[data-contract] .psheet table.rep.party.findings tr.quietrow { display: none; }
body[data-contract] .psheet table.rep.party.findings.all tr.quietrow { display: table-row; }
body[data-contract] .csheet .tabbody > p.bodynote.summary { display: block; padding: 13px 0 12px; line-height: 23px; }
body[data-contract] .csheet .tabbody > p.bodynote button.link { padding: 0; border: 0; background: none; font-family: var(--head); font-size: 13px; color: var(--navy); cursor: pointer; }
body[data-contract] .csheet .tabbody > p.bodynote a { color: var(--navy); }
/* the report's own row, the Compliance tab's row, held: its words from 674, its chip at 1198 */
body.framed[data-contract] .psheet table.rep.party.compliance.here > tbody > tr > td.rk { padding: 0 16px 0 20px !important; }
body.framed[data-contract] .psheet table.rep.party.flist td.wrapt { white-space: normal; }
/* a questionnaire's point, opened under its row: the question's number and its part in the name column; the question,
   then the answer and what to do with it, in the words, so a long question reads across the row rather than down it */
body[data-party] .psheet table.rep.party.compliance tr.sub td.el.pq.qref .ref { display: block; margin: 0; font-size: 13px; line-height: 20px; color: var(--ink); }
body[data-party] .psheet table.rep.party.compliance tr.sub td.el.pq.qref .when { margin-top: 2px; }
body[data-party] .psheet table.rep.party.compliance tr.sub td.qans { white-space: normal; }
body[data-party] .psheet table.rep.party.compliance tr.sub td.qans .qq { display: block; margin-bottom: 4px; color: var(--facts); line-height: 20px; }
body[data-party] .psheet table.rep.party.compliance tr.sub.done td.qans { color: var(--facts); }
/* a term within the playbook, opened: what its grade means, and Raise the grade at 1198 */
body[data-contract] .psheet table.rep.party.stage tr.sub.choose td .gradew { float: left; font-family: var(--head); font-size: 13px; line-height: 24px; color: var(--facts); }
/* inside an opened fold, a term opened keeps the fold's faint ground */
body.framed[data-contract] .psheet details.fold[open] table.rep.party.stage tr.term.opened > td { background-color: #faf9f6; background-image: linear-gradient(#ecebe6, #ecebe6); }
/* an opened term's own row stays square (the older card's rounded corners gone); inside a fold its rows are the fold's */
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened:not(:hover) > td { border-radius: 0; }
body.framed[data-contract] .psheet details.fold[open] table.rep.party.stage tr.sub > td { border-radius: 0; }
body.framed[data-contract] .psheet details.fold[open] table.rep.party.stage tr.sub.cardend > td { background-image: linear-gradient(#ecebe6, #ecebe6); }   /* AN: these five no longer !important, so Stage 3's band can speak */
/* an opened term, in the house style's two voices: what Crome found in Gill Sans and the facts grey; what is read (the
   contract's wording, the playbook's positions) in Charter and ink, each position named in the facts grey */
body[data-contract] .psheet table.rep.party.stage tr.sub td.q.pb, body[data-contract] .psheet table.rep.party.stage tr.sub td.q .same { color: var(--facts); }
body[data-contract] .psheet table.rep.party.stage tr.sub td.q .pl { font-family: var(--body); font-size: 14.5px; line-height: 22px; color: var(--ink); }
body[data-contract] .psheet table.rep.party.stage tr.sub td.q .pl :is(.pw, .cond) { font-family: var(--head); font-size: 13px; color: var(--facts); }
/* the contract's own row, held at the top, is never one to settle on */
body[data-contract] .psheet table.rep.party.here > tbody > tr { scroll-snap-align: none; }
/* while it is made, the next step's place says so, in the facts grey, and counts the changes */
body[data-party][data-contract] .psheet td.cx .chip.act.busy { display: inline-block; box-sizing: border-box; width: 124px; height: 24px; padding: 1px 6px 0; border-radius: 3px;
  background: var(--sheet); color: var(--facts); box-shadow: inset 0 0 0 1px #dcd9d2; font-family: var(--head); font-size: 13px; line-height: 23px; text-align: center; white-space: nowrap; cursor: default; }
/* crome.css 2.52.0: ALiv.4 */

/* ---------- Phase ALiv.5 (settled 13.10.2026): the drop ----------
   The page rests under the drawing board, its squares the page's own, drawn by hand (drop.js); the board fades in evenly,
   no soft edges. In the middle the clear paper: its edges on the board's lines, one line in the board's ink, its corners
   rounded as New's box; it opens out in one eased movement. The star at the left of the words, as on New: it
   comes in from inside its own size and, on the drop, breathes in and back to exactly itself. Five facts wait in grey,
   each turning into what Crome read, with a tick, where it stands; Cancel and the one thing to do at the foot. */
body.dropping > main, body.dropping > nav.side, body.dropping > .mbar, body.dropping > header, body.dropping > footer { filter: blur(8px) saturate(.85); }
body > main, body > nav.side { transition: filter .4s ease; }
.dboard { position: fixed; inset: 0; z-index: 40; background: rgba(248, 248, 246, .86); opacity: 0; transition: opacity .4s ease; }
.dboard.on { opacity: 1; }
.dboard > svg { position: absolute; inset: 0; pointer-events: none; }
.dclear { position: absolute; box-sizing: border-box; background: #fafaf9; border: 1px solid rgba(0, 33, 71, .2); border-radius: 18px; overflow: hidden;
  transition: left .42s cubic-bezier(.22, .61, .36, 1), width .42s cubic-bezier(.22, .61, .36, 1), height .42s cubic-bezier(.22, .61, .36, 1); will-change: left, width, height; contain: layout style; }
/* the board is drawn once and kept on its own layer, so the paper opening over it redraws nothing behind it */
.dboard > svg { will-change: transform; transform: translateZ(0); }
.dclear.scrolls { overflow-y: auto; }
.dsheet { position: relative; padding: 46px 48px; margin: 0; }
.dsheet .hd { display: flex; align-items: center; gap: 12px; height: 28px; }
.dsheet .stw { position: relative; flex: 0 0 24px; width: 24px; height: 22px; }
.dsheet .stw img { position: absolute; inset: 0; width: 24px; height: 22px; transform-origin: 50% 50%; }
.dsheet .ttl { flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--body); font-size: 20px; line-height: 28px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsheet input.ttl:focus { outline: none; }
.dsheet .sub { height: 20px; margin: 4px 0 0 36px; font-family: var(--head); font-size: 13.5px; line-height: 20px; color: #8f8c85; }
.dsheet.pre .sub, .dsheet.opening .sub { white-space: nowrap; }
.dsheet .facts, .dsheet .acts { transition: opacity .3s ease; }
.dsheet.opening .facts, .dsheet.opening .acts { opacity: 0; }
.dclear.leaving > * { opacity: 0; transition: opacity .25s ease; }
.dsheet .facts { margin-top: 28px; }
.dsheet .f { position: relative; display: flex; align-items: center; gap: 12px; min-height: 32px; font-family: var(--head); font-size: 14.5px; line-height: 20px; color: var(--ink); white-space: nowrap; }
.dsheet .f[hidden] { display: none; }
.dsheet .f .k { flex: 0 0 24px; width: 24px; height: 14px; overflow: visible; }
.dsheet .f .k circle { fill: #c9c6be; transition: opacity .15s; }
.dsheet .f .k path { fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s ease .05s; }
.dsheet .f.got .k circle { opacity: 0; }
.dsheet .f.got .k path { stroke-dashoffset: 0; }
.dsheet .f .lb { color: #b3b0a8; }
.dsheet .f:not(.wait) .lb, .dsheet .f.wait .val { display: none; }
.dsheet .f .val { display: inline-flex; align-items: center; min-width: 0; }
.dsheet .pick { min-width: 0; max-width: 340px; height: 28px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font-family: var(--head); font-size: 14.5px; color: var(--ink); text-overflow: ellipsis; cursor: pointer; }
.dsheet select.pick { appearance: none; -webkit-appearance: none; padding-right: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.6 5 6.6 8 3.6' fill='none' stroke='%236e6b64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 10px 10px no-repeat; }
.dsheet input.pick { cursor: text; }
.dsheet .pick:hover { border-bottom-color: var(--line); }
.dsheet .pick:focus { outline: none; border-bottom-color: var(--navy); }
.dsheet input.pick::placeholder { color: var(--faint); opacity: 1; }
.dsheet .f.need .pick { border-bottom-color: var(--line); }
.dsheet .f .h { margin-left: 12px; font-size: 13.5px; color: var(--facts); overflow: hidden; text-overflow: ellipsis; }
.dsheet .f.more { padding-left: 36px; }
.dsheet .f.more .k { display: none; }
.dsheet .ticks { display: inline-flex; gap: 18px; font-size: 13.5px; }
.dsheet .tick { position: relative; display: inline-flex; flex-direction: row; align-items: center; margin: 0; gap: 7px; color: var(--facts); cursor: pointer; }
.dsheet .tick.on { color: var(--ink); }
.dsheet .tick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dsheet .tick i { position: relative; flex: 0 0 auto; width: 13px; height: 13px; border: 1px solid var(--tick-edge); border-radius: 3px; background: #fff; }
.dsheet .tick.on i { background: var(--navy); border-color: var(--navy); }
.dsheet .tick.on i::after { content: ""; position: absolute; left: 3.6px; top: 1px; width: 3px; height: 6.5px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); }
.dsheet .tick input:focus-visible + i { outline: 2px solid var(--navy); outline-offset: 2px; }
.dsheet.existing .f:not([data-k="what"]) .pick { pointer-events: none; }
.dsheet.existing .f:not([data-k="what"]) select.pick { background-image: none; padding-right: 0; }
.dsheet .sugg { position: absolute; left: 36px; top: 30px; z-index: 2; min-width: 300px; padding: 4px 0; background: var(--sheet); border: 1px solid #e1dfd9; border-radius: var(--r2); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 22px rgba(0, 0, 0, .06); }
.dsheet .sugg[hidden] { display: none; }
.dsheet .sugg button { display: flex; justify-content: flex-start; gap: 12px; width: 100%; min-width: 0; height: 32px; margin: 0; align-items: center; padding: 0 12px; border-radius: 0; border: 0; background: none; font-family: var(--head); font-size: 13.5px; color: var(--facts); text-align: left; cursor: pointer; }
.dsheet .sugg button b { flex: 0 0 auto; min-width: 36px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.dsheet .sugg button:hover, .dsheet .sugg button.on { background: var(--here); }
.dsheet .sugg button.new { border-top: 1px solid var(--line); color: var(--navy); }
.dsheet .err { margin: 16px 0 0 36px; padding: 6px 12px; border-left: 3px solid var(--red); background: #f7f6f3; font-family: var(--head); font-size: 13.5px; color: var(--ink); }
.dsheet .err[hidden] { display: none; }
.dsheet .acts { display: flex; justify-content: flex-end; gap: 20px; margin-top: 28px; }
.dsheet .chipc { display: inline-block; width: 124px; height: 24px; margin: 0; padding: 1px 0 0; border: 0; border-radius: 3px; background: transparent; text-align: center; font-family: var(--head); font-size: 13px; line-height: 23px; letter-spacing: .01em; cursor: pointer; transition: background .35s, color .35s, box-shadow .35s; }
.dsheet .chipc.none { color: var(--facts); }
.dsheet .chipc.none:hover { background: #f2f1ed; }
.dsheet .chipc.go { color: #b3b0a8; box-shadow: inset 0 0 0 1px #dedbd4; cursor: default; }
.dsheet.ready .chipc.go { background: var(--navy); color: #fff; box-shadow: none; cursor: pointer; }
/* (2.78.0: the lighter navy that once marked Upload and review under the pointer is gone; it stays navy) */
.dsheet.ready .chipc.go:disabled { opacity: .6; cursor: default; }
/* the star: never past its own size; it comes in from inside it, and on the drop breathes in and back to itself */
@keyframes dstarIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes dstarDrop { 0% { transform: scale(1); } 45% { transform: scale(.84); } 100% { transform: scale(1); } }
.dsheet .stw.in img { animation: dstarIn 1.4s cubic-bezier(.25, .1, .25, 1) both; }
.dsheet .stw.dr img { animation: dstarDrop 1.7s cubic-bezier(.45, 0, .4, 1) both; }
/* a new contract dropped on its party's Contracts tab lands in its row there, lit for a moment */
tr.landed > td { animation: dlanded 1.8s ease-out both; }
@keyframes dlanded { 0%, 30% { background: #eaedf2; } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .dboard, .dclear, .dsheet .f .k path, .dsheet .chipc { transition: none; } .dsheet .stw img, tr.landed > td { animation: none !important; } }
@media (max-width: 760px) { .dsheet { padding: 30px 20px; } .dsheet .pick { max-width: 220px; } .dsheet .ticks { flex-wrap: wrap; row-gap: 4px; } .dsheet .f { white-space: normal; } }
/* New party, a row at the top of the Register (ALiv.5): the legal name across the name and type columns in the names'
   Charter, Cancel under Contracts and Add party under Compliance, each the size of the chips under them; under it the
   relationships and Add several, under Add party. The rows sit in the hover shade, one block with rounded corners. */
.plist ul.prows > li.newp, .plist ul.prows > li.newp2 { background: var(--here); align-items: center; }
.plist ul.prows > li.newp { border-radius: var(--r2) var(--r2) 0 0; }
.plist ul.prows > li.newp2 { min-height: 40px; padding-top: 0; border-radius: 0 0 var(--r2) var(--r2); margin-bottom: 0; }
.plist ul.prows > li.newp::after, .plist ul.prows > li.newp2::after { display: none; }
.plist ul.prows > li.newp:hover, .plist ul.prows > li.newp2:hover { background: var(--here); }
.plist li.newp .nin { grid-column: 1 / 3; align-self: center; width: auto; min-width: 0; height: 28px; margin: 0 40px 0 0; padding: 0 0 1px; border: 0; border-bottom: 1px solid var(--navy); border-radius: 0; background: transparent; font-family: var(--body); font-size: 15px; line-height: 26px; color: var(--ink); }
.plist li.newp textarea.nin { height: auto; min-height: 104px; padding: 2px 0 4px; resize: vertical; line-height: 24px; }
.plist li.newp .nin:focus { outline: none; }
.plist li.newp .nin::placeholder { color: var(--faint); opacity: 1; }
.plist li.newp .nin[hidden] { display: none; }
.plist ul.prows button.chip { align-self: center; justify-self: center; width: 124px; min-width: 0; height: 24px; margin: 0; padding: 1px 8px 0; border: 0; border-radius: 3px; font-family: var(--head); font-size: 13px; font-weight: 400; line-height: 23px; letter-spacing: .01em; white-space: nowrap; cursor: pointer; }
.plist ul.prows button.chip.none { background: transparent; color: var(--facts); }
.plist ul.prows button.chip.none:hover { background: #f2f1ed; }
.plist ul.prows button.chip.out { background: var(--sheet); color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc; }
.plist ul.prows button.chip.out:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--outline-hover); }
.plist li.newp2 .ticks { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--head); font-size: 13px; }
.plist li.newp2 .ticks > span + span { display: none; }
.plist li.newp2 > button.chip { grid-column: 4; }
.plist li.newp2 .tick { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; color: var(--facts); cursor: pointer; }
.plist li.newp2 .tick.on { color: var(--ink); }
.plist li.newp2 .tick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.plist li.newp2 .tick i { position: relative; flex: 0 0 auto; width: 13px; height: 13px; border: 1px solid var(--tick-edge); border-radius: 3px; background: #fff; }
.plist li.newp2 .tick.on i { background: var(--navy); border-color: var(--navy); }
.plist li.newp2 .tick.on i::after { content: ""; position: absolute; left: 3.6px; top: 1px; width: 3px; height: 6.5px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); }
.plist li.newp2 .tick input:focus-visible + i { outline: 2px solid var(--navy); outline-offset: 2px; }
.plist li.newp[hidden], .plist li.newp2[hidden] { display: none; }
@media (max-width: 700px) {
  .plist li.newp .nin { grid-column: 1 / -1; grid-row: 1; margin-right: 0; }
  .plist li.newp > button.chip.none { grid-column: 1; grid-row: 2; } .plist li.newp > button.chip.out { grid-column: 2; grid-row: 2; }
  .plist li.newp2 .ticks { grid-column: 1 / -1; } .plist li.newp2 > button.chip { grid-column: 2; grid-row: 2; }
}
/* crome.css 2.53.0: ALiv.5 */

/* ---------- Phase ALiv.5.4 (settled 15.10.2026): Review and Markup ----------
   The review's terms under a Review row, on the sheet's white as they always were; the markup under a Markup row, its
   Download under the next step. While Crome marks the draft, its pages are drawn four to a row on a quiet ground, white
   paper a little lifted; the terms it was asked to change wait at the left and tick in place. */
body[data-contract] .csheet details.fold.rv[open] > summary { background-image: linear-gradient(var(--hair), var(--hair)); }
body.framed[data-contract] .psheet details.fold.rv[open] > table.rep.party > tbody > tr > td { background-color: transparent; border-radius: 0 !important; }
body.framed[data-contract] .psheet details.fold.rv[open] > table.rep.party > tbody > tr:last-child > td { background-image: linear-gradient(#ecebe6, #ecebe6); }
/* the Markup row in the contract row's columns: Preparing under the contract's chip, Download under the next step */
body[data-contract] .csheet details.fold.mk > summary { grid-template-columns: 242px minmax(0, 1fr) 124px 124px; }
body[data-contract] .csheet details.fold:is(.mk, .rv.reading) > summary .chip.busy { grid-column: 3; align-self: center; display: inline-block; box-sizing: border-box; width: 124px; height: 24px; padding: 1px 6px 0; border-radius: 3px;
  background: var(--sheet); color: var(--facts); box-shadow: inset 0 0 0 1px #dcd9d2; font-family: var(--head); font-size: 13px; line-height: 23px; text-align: center; white-space: nowrap; cursor: default; }
body[data-contract] .csheet details.fold.mk > summary :is(.chip.dl, .chip.mkact) { grid-column: 4; align-self: center; display: inline-block; box-sizing: border-box; width: 124px; height: 24px; margin: 0;   /* as Mark as sent above it */
  padding: 1px 6px 0; border: 0; border-radius: 3px; background: var(--sheet); color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc;
  font-family: var(--head); font-size: 13px; font-weight: 400; line-height: 23px; letter-spacing: .01em; text-align: center; white-space: nowrap; text-decoration: none; cursor: pointer; }
body[data-contract] .csheet details.fold.mk > summary :is(.chip.dl, .chip.mkact):hover { background: #f4f3ef; box-shadow: inset 0 0 0 1px #b2ada3; text-decoration: none; }
body[data-contract] .csheet details.fold.mk[open] > summary { background-image: none; }
body[data-contract] .csheet details.fold.mk[data-empty] > summary { cursor: default; }
body[data-contract] .csheet details.fold.mk[data-empty] > summary:hover { background-color: transparent; }
body[data-contract] .csheet .mkstage { display: grid; grid-template-columns: 242px minmax(0, 1fr); column-gap: 20px; margin: 0 -16px 8px; padding: 22px 16px 16px; border-radius: var(--r2); background: #f6f5f1; }
body[data-contract] .csheet .mkstage .mkl { display: flex; flex-direction: column; margin-top: -4px; }
body[data-contract] .csheet .mkstage .it { display: flex; align-items: center; gap: 12px; height: 32px; white-space: nowrap; min-width: 0; }
body[data-contract] .csheet .mkstage .it .k { width: 16px; height: 14px; flex: 0 0 16px; overflow: visible; }
body[data-contract] .csheet .mkstage .it .k circle { fill: #c4c1b9; transition: opacity .15s; }
body[data-contract] .csheet .mkstage .it .k path { fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s ease .1s; }
body[data-contract] .csheet .mkstage .it.got .k circle { opacity: 0; }
body[data-contract] .csheet .mkstage .it.got .k path { stroke-dashoffset: 0; }
body[data-contract] .csheet .mkstage .it .c { flex: 0 0 30px; font-family: var(--head); font-size: 13px; color: #6e6b64; font-variant-numeric: tabular-nums; transition: color .4s; }
body[data-contract] .csheet .mkstage .it .w { font-family: var(--body); font-size: 15px; color: #aeaba3; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
body[data-contract] .csheet .mkstage .it.got .w { color: var(--ink); }
body[data-contract] .csheet .mkstage .it.got .c { color: var(--facts); }
body[data-contract] .csheet .mkstage .it .k circle.ring { fill: none; stroke: #b5b2aa; stroke-width: 1.2; opacity: 0; transition: opacity .4s; }
body[data-contract] .csheet .mkstage .it.miss .k circle { opacity: 0; }
body[data-contract] .csheet .mkstage .it.miss .k circle.ring { opacity: 1; }   /* ALiv.5.5: not made: an empty ring, the name whole */
body[data-contract] .csheet .mkstage .mkr { min-width: 0; }
body[data-contract] .csheet .mkstage .strip { display: flex; gap: 22px; }
body[data-contract] .csheet .mkstage .pgcol { display: flex; flex-direction: column; align-items: center; gap: 8px; }
body[data-contract] .csheet .mkstage .pgcol.gone { visibility: hidden; }
body[data-contract] .csheet .mkstage .pgw { position: relative; overflow: hidden; border-radius: 3px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 33, 71, .05), 0 1px 2px rgba(0, 33, 71, .05), 0 10px 28px -6px rgba(0, 33, 71, .12); }
body[data-contract] .csheet .mkstage .pgw .lay { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
body[data-contract] .csheet .mkstage .pgw .lay.show { opacity: 1; }
body[data-contract] .csheet .mkstage .pgw svg { display: block; width: 100%; height: 100%; }
body[data-contract] .csheet .mkstage .pgno { font-family: var(--head); font-size: 11.5px; letter-spacing: .04em; color: #6e6b64; font-variant-numeric: tabular-nums; }
/* the contract set at full size off the screen, to draw its lines where they fall */
.mkruler { position: absolute; left: -9999px; top: 0; width: 602px; visibility: hidden; pointer-events: none; }
.mkruler .pgp { display: grid; grid-template-columns: 52px 1fr; margin: 0 0 11px; font-family: var(--body); font-size: 14.5px; line-height: 22px; }
.mkruler .pgp .n { font-family: var(--head); }
.mkruler .pgp.h { margin-top: 22px; font-family: var(--head); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.mkruler .pgp.t { display: block; margin-bottom: 22px; text-align: center; font-family: var(--head); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { body[data-contract] .csheet .mkstage :is(.lay, .it .k path, .it .w) { transition: none; } }
@media (max-width: 700px) {
  body[data-contract] .csheet details.fold.mk > summary { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-contract] .csheet details.fold.mk > summary .n { grid-column: 1; grid-row: 2; }
  body[data-contract] .csheet details.fold.mk > summary :is(.chip.busy, .chip.dl, .chip.mkact) { grid-column: 2; grid-row: 1; }
  body[data-contract] .csheet details.fold.mk > summary .chip.mkact { grid-row: 2; }
  body[data-contract] .csheet .mkstage { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}
/* crome.css 2.53.4: ALiv.5.4 */
/* ALiv.5.5 (16.10.2026, Cam): the markup's steps on its own row, in the order they are done: Download under the contract's
   chip, Mark as sent beside it, where Prepare markup was; the contract's row keeps the version coming in */
@media (min-width: 701px) {
  body[data-contract] .csheet details.fold.mk > summary .chip.dl { grid-column: 3; }
  body[data-contract] .csheet details.fold.mk > summary .chip.mkact { grid-column: 4; }
  body[data-contract] .csheet details.fold.mk > summary .chip.mkact.lead { grid-column: 3; }   /* Prepare markup, then Preparing, then Download: one place */
}
/* crome.css 2.53.5: ALiv.5.5 */

/* ---------- Phase ALiv.5.6 (16.10.2026): no wait without a sign; one list open at a time ----------
   Crome reads before it writes (Opus 5.5 thinks first, and cannot be told not to), so the first change or term comes
   after a quiet spell. The panel is drawn at once (what fills it while Crome reads is ALiv.5.7's). While a version is
   read the Review row says so, Reading in the chip's place. */
body[data-contract] .csheet details.fold.rv.reading > summary { grid-template-columns: 242px minmax(0, 1fr) 124px 124px; cursor: default; }
body[data-contract] .csheet details.fold.rv.reading > summary:hover { background-color: transparent; }
/* crome.css 2.53.6: ALiv.5.6 */

/* ---------- Phase ALiv.5.7 (16.10.2026, Cam): Live ----------
   While Crome reads before the first change, the term the model is weighing, named from the summary of its thinking,
   stands in ink among the grey at the left (ALiv.5.8: and its clause in a faint band on the pages). Preparing and
   Reading in ink where the action was, not greyed as if they could not be pressed. Nothing pulses. */
body[data-contract] .csheet details.fold:is(.mk, .rv.reading) > summary .chip.busy { color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc; }
body[data-contract] .csheet .mkstage .it .k circle:first-child { stroke: transparent; stroke-width: 2.4; transition: fill .35s, stroke .35s, opacity .15s; }
body[data-contract] .csheet details.fold.mk.rd .mkstage .it.on .k circle:first-child { fill: var(--navy); stroke: var(--navy); }   /* a fuller dot, drawn, not grown */
body[data-contract] .csheet details.fold.mk.rd .mkstage .it.on .w { color: var(--ink); }
body[data-contract] .csheet details.fold.mk.rd .mkstage .it.on .c { color: var(--facts); }
@media (prefers-reduced-motion: reduce) {
  body[data-contract] .csheet .mkstage .it .k circle { transition: none; }
}
/* crome.css 2.53.7: ALiv.5.7 */

/* ---------- Phase ALiv.5.8 (17.10.2026, Cam: "same view, it's cleaner") ----------
   One view throughout: the terms at the left and the pages at the right while Crome reads and while it marks. Under each
   page its number, light until the page has been read, then in the text colour. Nothing else moves. */
body[data-contract] .csheet .mkstage .pgno { color: #c2bfb7; transition: color .6s ease; }
body[data-contract] .csheet .mkstage .pgno.read { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { body[data-contract] .csheet .mkstage .pgno { transition: none; } }
/* crome.css 2.53.8: ALiv.5.8 */



/* ---------- Phase ALvi (2.54.0, 18.10.2026): the name once, as the first tab; a party's projects in its Details ---------- */
/* The heading is gone: the party's name is its first tab, in the heading's serif at its size. The tab line starts 14
   higher, so the sheet still starts at 90, on the Register's line, on every page under a party. */
@media (min-width: 701px) { body.framed[data-party] main { padding-top: 34px; } }
nav.ftabs.ptabs > a.dt.nm { min-width: 0; max-width: calc(100% - 340px); padding: 10px 24px 9px; font-family: var(--body); font-size: 26px; line-height: 34px; font-weight: 400; color: var(--ink); white-space: nowrap; }
nav.ftabs.ptabs > a.dt.nm.on { padding-bottom: 10px; font-weight: 400; color: var(--ink); }
nav.ftabs.ptabs > a.dt.nm:hover { color: var(--navy); }
/* ALvi.1: a long name is cut inside its own line, so the tab keeps the curved foot where it meets the sheet, as Contracts
   and Compliance do (cut at the tab, the foot was cut with it) */
nav.ftabs.ptabs > a.dt.nm h1.pname { display: block; height: auto; min-height: 0; margin: 0; font: inherit; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a phone: the chips draw in so the name keeps its room, and a long name takes a second line rather than a cut */
@media (max-width: 700px) {
  nav.ftabs.ptabs > a.dt.nm { flex: 1 1 auto; max-width: none; margin-right: 12px; padding: 9px 12px 10px; font-size: 20px; line-height: 24px; white-space: normal; }
  nav.ftabs.ptabs > a.dt.nm h1.pname { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
}
/* the projects in Details (ALvi.1: above Procurement). ALvi.4, a list you can open: a heading row centred like any other,
   then one row per project, stepped in under it, a chevron at the step that turns when the project opens; the name in
   navy, as everything you press in Crome is; the job number in sans figures, its width set by the longest number on the
   page (--pcw, from the server) so names line up whatever the practice's numbering */
body[data-party] .psheet table.rep.party.details tr.phd td.pv { font-family: var(--head); font-size: 14px; color: var(--facts); }
body[data-party] .psheet table.rep.party.details tr.pj td.el { position: relative; padding-left: 38px; color: var(--navy); }
body[data-party] .psheet table.rep.party.details tr.pj td.el::before { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%236e6b64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: transform var(--t); }   /* the job numbers' grey: a control's 3:1 and more */
body[data-party] .psheet table.rep.party.details tr.pj:is(:hover, :focus-visible) td.el::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%23002147' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-party] .psheet table.rep.party.details tr.pj.open td.el::before { transform: rotate(90deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%23002147' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { body[data-party] .psheet table.rep.party.details tr.pj td.el::before { transition: none; } }
body[data-party] .psheet table.rep.party.details tr.pj { cursor: pointer; }
body[data-party] .psheet table.rep.party.details tr.pj:focus { outline: none; }
body[data-party] .psheet table.rep.party.details tr.pj:focus-visible > td { box-shadow: inset 0 2px 0 var(--navy), inset 0 -2px 0 var(--navy); }   /* one ring round the row, not one per cell */
body[data-party] .psheet table.rep.party.details tr.pj:focus-visible > td:first-child { box-shadow: inset 2px 2px 0 var(--navy), inset 0 -2px 0 var(--navy); }
body[data-party] .psheet table.rep.party.details tr.pj:focus-visible > td:last-child { box-shadow: inset -2px 2px 0 var(--navy), inset 0 -2px 0 var(--navy); }
body[data-party] .psheet table.rep.party.details tr.pj td.el .pcode { display: inline-block; width: var(--pcw, 54px); font-family: var(--head); font-size: 13.5px; color: var(--facts); font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-party] .psheet table.rep.party.details tr.pj td.pv { font-family: var(--head); font-size: 14px; color: var(--facts); }
/* ALvi.6: no figure in the Contracts column (Cam: clumsy). A project's rows grow and fold by hand (the page's script), a
   wrapper in each cell giving them a height to move through */
body[data-party] .psheet table.rep.party.details tr.pjs > td > .pjw { display: block; }
body[data-party] .psheet table.rep.party.details tr.pjs.moving > td > .pjw { overflow: hidden; }
body[data-party] .psheet table.rep.party.details tr.pjs.moving, body[data-party] .psheet table.rep.party.details tr.pjs.moving > td { height: 0 !important; }   /* a row's 48 is a floor; while it grows or folds, the script sets its height */
/* a project with nothing filled in says so, quietly, so the gaps get filled */
body[data-party] .psheet table.rep.party.details tr.pj td.pv .pf:empty::before { content: "No sector or place yet"; color: #b3afa6; }
/* opened: the summary steps aside for the facts themselves (the figure stays), and its rows hang from the name, their
   rules starting there too */
body[data-party] .psheet table.rep.party.details tr.pj.open td.pv .pf { visibility: hidden; }
body[data-party] .psheet table.rep.party.details :is(tr.pjs, tr.pj.open) > td.el { background-size: calc(100% - 38px - var(--pcw, 54px)) 1px !important; background-position: right bottom !important; }
body.framed[data-party] .psheet table.rep.party.details tr.pj:hover > td { background-color: var(--hover); }
body.framed[data-party] .psheet table.rep.party.details tr.pj.open > td { background-color: #faf9f6; }
body[data-party] .psheet table.rep.party.details tr.pj.open td.el { color: var(--navy); }
/* a project opened: its facts on the faint ground of an opened record, edited in place like the party's own */
body.framed[data-party] .psheet table.rep.party.details tr.pjs > td { background-color: #faf9f6; }
body[data-party] .psheet table.rep.party.details tr.pjs td.el { padding-left: calc(38px + var(--pcw, 54px)); font-family: var(--head); font-size: 13px; color: var(--facts); }
body[data-party] .psheet table.rep.party.details tr.pjs td.v { font-family: var(--head); font-size: 15px; color: var(--ink); }
body[data-party] .psheet table.rep.party.details tr.pjs td.v select { appearance: none; -webkit-appearance: none; margin: 0; border: 0; border-radius: 0; padding: 0 18px 0 0; height: auto; line-height: 1.5; font-family: var(--head); font-size: 14px; color: rgb(110, 107, 100); cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.6 5 6.6 8 3.6' fill='none' stroke='%236e6b64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 10px 10px no-repeat; }   /* in line with the fields above and below, the same grey */
body[data-party] .psheet table.rep.party.details tr.pjs td.v select:focus { color: var(--ink); outline: none; box-shadow: 0 1px 0 var(--navy); }
body[data-party] .psheet table.rep.party.details tr.pjs td.v input { max-width: 16rem; }
body[data-party] .psheet table.rep.party.details tr.pjs td.v .quiet { margin-left: 12px; font-size: 14px; }
body[data-party] .psheet table.rep.party.details tr.pjs td.v .pjw > .quiet:first-child, body[data-party] .psheet table.rep.party.details tr.pjs td.v a + .quiet { margin-left: 0; }
/* each field says it saved, or what it needs, beside itself: the sheet's own note is out of sight once a project is open */
body[data-party] .psheet table.rep.party.details tr.pjs .pmsg { margin-left: 12px; font-family: var(--head); font-size: 13px; color: rgb(110, 107, 100); white-space: nowrap; }
body[data-party] .psheet table.rep.party.details tr.pjs .pmsg.bad { color: var(--red); }
/* ALvi.2: sectors ticked, as many as apply, in three columns; Saved at the row's right, so the boxes never move */
body[data-party] .psheet table.rep.party.details tr.pjs td.v.secs { position: relative; }
body[data-party] .psheet table.rep.party.details tr.pjs.psec td.el { vertical-align: top; }   /* level with the first line of boxes */
body[data-party] .psheet table.rep.party.details tr.pjs .psecs { display: grid; grid-template-columns: repeat(3, max-content); align-items: start; gap: 6px 36px; padding: 2px 0; }
body[data-party] .psheet table.rep.party.details tr.pjs .psecs label.check { align-items: flex-start; font-family: var(--head); font-size: 14px; line-height: 20px; color: rgb(110, 107, 100); white-space: nowrap; cursor: pointer; }
body[data-party] .psheet table.rep.party.details tr.pjs .psecs label.check input[type=checkbox] { align-self: flex-start; margin-top: 4px; }   /* level with the first line of its words */
body[data-party] .psheet table.rep.party.details tr.pjs td.v.secs > .pmsg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); margin: 0; }   /* on the line the counts end on */
body[data-party] .psheet table.rep.party.details tr.pj td.pv .pf { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
@media (max-width: 700px) { body[data-party] .psheet table.rep.party.details tr.pjs .psecs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
  body[data-party] .psheet table.rep.party.details tr.pjs .psecs label.check { white-space: normal; } }
body[data-party] .psheet table.rep.party.details tr.pjs td.v a { color: var(--navy); }
body[data-party] .psheet .pjroom { pointer-events: none; }
/* ALvi.3: the search line keeps the sheet's white across its side margins too, so a row's ground (an opened project, a
   row under the pointer) never shows beside it as the rows pass beneath */
@media (min-width: 701px) { body[data-party] .psheet > .sr { box-shadow: -24px 0 0 var(--sheet), 24px 0 0 var(--sheet); } }
/* ALvi.4: the search at the answers' size; and, on a wide sheet, 3 lower, where every row under it sets its words (it was
   centred to the quarter pixel, and read as floating beside them) */
body[data-party] .psheet :is(.psheet > .sr, .chead > .sr) .sfind input { font-size: 14px; }   /* a contract's page too (its line sits in .chead): one head, one search line */
@media (min-width: 701px) { body[data-party] .psheet :is(.psheet > .sr, .chead > .sr) { padding-top: 6px; } }
body[data-party] .psheet table.rep.party.details tr.pjs[hidden] { display: none; }   /* a phone lays rows out as grids, which would show them */
@media (max-width: 700px) { body[data-party] .psheet table.rep.party.details tr.pjs td.v .pnote { display: block; margin: 4px 0 0; }
  /* ALvi.4, a phone: the chevron in a step of its own beside the number; no chip column, so the figure keeps to the right */
  body[data-party] .psheet table.rep.party.details tr.pj td.el { padding-left: 22px !important; }
  body[data-party] .psheet table.rep.party.details tr.pj td.el::before { left: 2px; top: 5px; margin-top: 0; }
  body[data-party] .psheet table.rep.party.details tr.pjs td.el, body[data-party] .psheet table.rep.party.details tr.pjs td.v { padding-left: 22px !important; }
  body[data-party] .psheet table.rep.party.details tr.pj.open td.pv .pf { display: none; }
  body[data-party] .psheet table.rep.party.details tr.pj td.pv .pf { max-width: calc(100% - 40px); } }
@media (prefers-reduced-motion: reduce) { body[data-party] .sheet.psheet { scroll-behavior: auto; } }
body[data-party] .pphone { display: none; }
@media (max-width: 700px) { body[data-party] .pphone { display: flex; justify-content: flex-end; padding: 0 17px; margin: 0 0 8px; } }
/* crome.css 2.54.6: ALvi.6 */

/* ---------- Phase ALvii (2.55.0): the record of a signed contract. Five questions, each a list its head folds, in the
   page's own grammar: a line's answer, where it came from in grey beside it, and Confirm at the right while it waits.
   The source and Confirm sit on the answer's baseline (the columns they borrow centre chips). */
@media (min-width: 701px) { body.framed[data-contract] .psheet details.rec table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > :is(td.rk, td.mk) {
  vertical-align: baseline !important; padding-top: 11px !important; padding-bottom: 9px !important; line-height: 26px; } }
body[data-contract] details.rec td.rk .src { font-family: var(--head); font-size: 13px; color: var(--faint); white-space: nowrap; }
body[data-contract] details.rec td.mk form.recf { display: inline; margin: 0; }
body[data-contract] details.rec td.mk button.link.cf { font-family: var(--head); font-size: 14px; color: var(--navy); text-decoration: none; cursor: pointer; }
body[data-contract] details.rec td.mk button.link.cf:hover { text-decoration: underline; }
/* a line read from the clauses opens to its choices, under the answer and from its left, each chip as wide as its words */
body[data-party][data-contract] .psheet details.rec table.rep.party.stage td.recpick .choices { gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
body[data-party][data-contract] .psheet details.rec table.rep.party.stage td.recpick button.chip.pick { width: auto; min-width: 72px; padding: 1px 12px 0; }
/* crome.css 2.55.0: ALvii */

/* ---------- Phase ALviii (2.56.0): Insights, from mock-ups 400 and 401. It wears the Register's frame (data-parties):
   the folder tabs, no title on a wide window, the sheet running to the window's foot and scrolling inside. Five figures
   across the sheet's first line; then a list in the Register's own rows, or the terms as bars. */
nav.side a.item.ins svg { stroke-width: 1.6; }
/* (ALxi, 2.59.0: Insights now wears the Register's own rows; its figures, lists and bars gave way, see the ALxi block) */
/* crome.css 2.56.1: ALviii.1 */

/* ---------- Phase ALix (2.57.0): the same headings on every contract at every stage. Above the line (ALix.2) Markup,
   Review, Terms, with Signature on top once ready to sign or withdrawn; below it, after a gap, Versions and
   History. The contract's name downloads its latest document, underlined under the pointer, its words in a small card. */
body.framed[data-contract] .psheet .tabbody > .folds { margin-top: 30px; }
body[data-contract] .csheet table.here a.ititle.dl { color: var(--ink); text-decoration: none; cursor: pointer; }
body[data-contract] .csheet table.here a.ititle.dl:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #b2ada3; text-decoration-thickness: 1px; }
.dltip { position: fixed; z-index: 60; padding: 7px 12px; background: var(--sheet); border: 1px solid var(--cardline); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  font-family: var(--head); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--navy); white-space: nowrap; pointer-events: none; }
.dltip svg { width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* crome.css 2.57.0: ALix */

/* ALix.1 (2.57.1): Confirm all sits on the Terms row where Markup's Download sits; a line that takes words is typed in
   the Project row's own form, a line under the pointer, Save beside it */
body[data-contract] .psheet details.rec table.rep.party.stage td.rectext .pform { display: flex; gap: 20px; align-items: baseline; }
body[data-contract] .psheet details.rec table.rep.party.stage td.rectext .pform input[name=text] { width: 420px; max-width: 100%; height: 21px; padding: 0; font-family: var(--head); font-size: 13px; }
body[data-contract] .psheet details.rec table.rep.party.stage td.rectext .pform button.link { font-family: var(--head); font-size: 13px; color: var(--navy); padding: 0; border: 0; background: none; cursor: pointer; }
body[data-contract] .csheet details.fold.mk > summary button.chip.dl { font-family: var(--head); cursor: pointer; }
/* crome.css 2.57.1: ALix.1 */

/* ---------- Phase ALx (2.58.0; ALx.1, 2.58.1: the phone left for later, Cam 19.10). Rows that open in place show the
   party page's chevron; History is in UK time (stages.uk). */
/* a row that opens in place, as a project does on the party page (ALvi.4): stepped in under its heading, the chevron at
   the step, turning as the row opens; the rows that do not open keep the same step, so the names line up */
@media (min-width: 701px) {
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sec) > td.el { position: relative; padding-left: 38px !important; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr.term.opens > td.el::before { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%236e6b64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: transform var(--t); }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr.term.opens:hover > td.el::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%23002147' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr.term.opens.opened > td.el::before { transform: rotate(90deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%23002147' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
@media (prefers-reduced-motion: reduce) { body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr.term.opens > td.el::before { transition: none; } }
/* crome.css 2.58.1: ALx.1 */

/* ---------- Phase ALxi (2.59.0): Insights in the Register's own parts (Cam: "It must feel like it comes from the same place
   as the Register"). Where the Register has its search, the answer in a sentence; section heads in the column heads' own
   small capitals; a row that opens shows the party page's chevron (ALvi.4), its contracts on the faint ground of an
   opened record. What held comes first, in green; what is worth a look follows, in the review's yellow, never red. */
body[data-insights] .plist .sr.heads .lead { grid-column: 1 / 3; align-self: center; min-width: 0; font-family: var(--body); font-size: 15px; line-height: 26px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-insights] .plist ul.prows > li.sec { display: block; min-height: 0; padding: 22px 16px 8px; }
body[data-insights] .plist ul.prows > li.sec:first-child { padding-top: 14px; }
body[data-insights] .plist ul.prows > li.sec:hover { background: none; }
body[data-insights] .plist ul.prows > li.sec .sl { font-family: var(--head); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
body[data-insights] .plist ul.prows > li.st > a.name { position: relative; padding-left: 22px; cursor: default; }
body[data-insights] .plist ul.prows > li.st > a.name:hover { color: var(--ink); }
body[data-insights] .plist ul.prows > li.op, body[data-insights] .plist ul.prows > li.op > a.name { cursor: pointer; }
body[data-insights] .plist ul.prows > li.op:hover > a.name { color: var(--navy); }
body[data-insights] .plist ul.prows > li.op > a.name::before { content: ""; position: absolute; left: 2px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%236e6b64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: transform var(--t); }
body[data-insights] .plist ul.prows > li.op:hover > a.name::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%23002147' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-insights] .plist ul.prows > li.op.open > a.name::before { transform: rotate(90deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%23002147' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-insights] .plist ul.prows > li.op:focus { outline: none; }
body[data-insights] .plist ul.prows > li.op:focus-visible { box-shadow: inset 0 0 0 2px var(--navy); }
body[data-insights] .plist ul.prows > li.op.open, body[data-insights] .plist ul.prows > li.sub { background: #faf9f6; border-radius: 0; }
body[data-insights] .plist ul.prows > li.op.open { border-radius: var(--r2) var(--r2) 0 0; }
body[data-insights] .plist ul.prows > li.sub > a.name { padding-left: 44px; color: var(--ink); cursor: default; }
body[data-insights] .plist ul.prows > li.sub > a.name[href] { cursor: pointer; }                     /* in ink, as the Register's own names */
body[data-insights] .plist ul.prows > li.sub > a.name[href]:hover { color: var(--navy); }
body[data-insights] .plist ul.prows > li.sub > .ptype.wide { grid-column: 2 / 4; }                   /* with no first chip, the words run on into its place */
body[data-insights] .plist ul.prows > li.prop > a.name { color: var(--facts); }
body[data-insights] .plist ul.prows a.chip:not([href]) { pointer-events: none; }   /* a chip that goes nowhere shows no box under the pointer */
@media (prefers-reduced-motion: reduce) { body[data-insights] .plist ul.prows > li.op > a.name::before { transition: none; } }
/* crome.css 2.59.0: ALxi */

/* ---------- Phase ALxiv (2.62.0): the contract page, Cam's notes of 19.10.2026 17:47. One rhythm down the page: no gap
   above Versions, every heading the same distance from the next (the ALix gap is undone here). Signed, Terms leads
   and Markup goes (stages.sections). */
body.framed[data-contract] .psheet .tabbody > .folds { margin-top: 0; }
/* crome.css 2.62.0: ALxiv */

/* ---------- Phase ALxvi (2.64.0): the band at the top of Portfolio and Protection (Cam, 19.10.2026 20:41: "no graphs or
   visual data"). Figures in Gill Sans, the one large figure first; charts in Crome's navy, its green for what protects,
   its yellow for what is worth a look. It is the first of the list's rows, so it scrolls with them. */
body[data-insights] .plist ul.prows > li.vizrow { display: block; padding: 0; margin: 0; min-height: 0; background: none; border-radius: 0; }
body[data-insights] .plist ul.prows > li.vizrow:hover { background: none; }
body[data-insights] .plist ul.prows > li.vizrow::after { display: none; }
body[data-parties][data-insights] .plist ul.prows > li.vizrow { scroll-snap-align: start; }
body[data-insights] .viz { padding: 22px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-family: var(--head); }
body[data-insights] .viz .kpis { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; }
body[data-insights] .viz .kpis.n3 { grid-template-columns: 1.25fr 1fr 1fr; }
body[data-insights] .viz .kpis.n2 { grid-template-columns: 1fr 1fr; }
body[data-insights] .viz .kpi { padding: 2px 22px 14px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body[data-insights] .viz .kpi:first-child { border-left: 0; padding-left: 0; }
body[data-insights] .viz .kl { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-insights] .viz .kv { font-size: 30px; line-height: 1.15; color: var(--navy); }
body[data-insights] .viz .kpi.hero .kv { font-size: 44px; }
body[data-insights] .viz .ks { font-size: 13px; color: #6b6860; }
body[data-insights] .viz .vmeter { height: 8px; border-radius: 4px; background: #e6f4e3; margin-top: 8px; position: relative; overflow: hidden; }
body[data-insights] .viz .vmeter span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: 4px; }
body[data-insights] .viz .charts { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; margin-top: 18px; }
body[data-insights] .viz .charts.n1 { grid-template-columns: 1fr; }
body[data-insights] .viz figure { margin: 0; min-width: 0; }
body[data-insights] .viz figcaption { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
body[data-insights] .viz svg.vchart { display: block; width: 100%; max-width: 500px; height: auto; overflow: visible; }
body[data-insights] .viz svg.vchart.q { max-width: 400px; }
body[data-insights] .viz svg.vchart.caps { max-width: 900px; }
body[data-insights] .viz svg text { font-family: var(--head); }
body[data-insights] .viz svg text.vname { font-family: var(--body); }
body[data-insights] .viz .legend { display: flex; gap: 8px 16px; margin-top: 10px; font-size: 13px; color: #3c3a35; flex-wrap: wrap; }
body[data-insights] .viz .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; }
body[data-insights] .viz .legend b { font-weight: 400; color: #6b6860; margin-left: 6px; }
body[data-insights] .viz .vnote { font-size: 13px; color: #6b6860; margin-top: 8px; }
body[data-insights] .viz .vnote i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--yellow); margin-right: 7px; }
@media (max-width: 900px) {
  body[data-insights] .viz .kpis, body[data-insights] .viz .kpis.n3 { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  body[data-insights] .viz .kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  body[data-insights] .viz .charts { grid-template-columns: 1fr; }
}
/* crome.css 2.64.0: ALxvi */

/* ---------- Phase ALxviii (2.66.0): the base matrix's project fields (Crome_record_matrix_v5). Practical completion, planned and
   actual, side by side in the project's own row pattern; the value's currency beside its figure. */
body[data-party] table.rep.party.details label.pdate { display: inline-flex; flex-direction: row; gap: 8px; align-items: center; font-family: var(--head); font-size: 13px; color: var(--quiet); }
body[data-party] table.rep.party.details label.pdate input[type=date] { font-family: var(--head); font-size: 14px; color: var(--navy); }
body[data-party] table.rep.party.details select[data-psave="value_currency"] { width: auto; min-width: 5.5rem; }
body[data-party] table.rep.party.details input[data-psave="construction_value"] { max-width: 12rem; }
body[data-party] table.rep.party.details label.pdate { white-space: nowrap; }
body[data-party] .psheet table.rep.party.details tr.pjs .psecs label.check[hidden] { display: none; }   /* the main use is not an other use */
/* crome.css 2.66.0: ALxviii */

/* ---------- Phase ALxx (2.68.0): the Insights band redrawn (Cam, 19.10.2026: "cleaner, simpler, think Apple"; the Portfolio
   mock-up "actually very good"). Figures on one baseline, the first large; soft tiles, each a plain sentence then one quiet
   picture; capsule bars, rings, dots; no grid, no axis lines, no capitals. Names start vz- so nothing else is caught. */
body[data-insights] .viz.vz { border-bottom: 0; padding: 6px 0 30px; margin: 0; font-family: var(--head); color: #1d1d1f; }
body[data-insights] .viz.vz .vz-figs { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; column-gap: 28px; padding: 22px 4px 34px; }
body[data-insights] .viz.vz .vz-figs .lbl { font-size: 14px; color: #6e6e73; }
body[data-insights] .viz.vz .vz-figs .num { align-self: baseline; font-size: 32px; color: var(--navy); line-height: 1.1; margin: 8px 0 6px; letter-spacing: -.01em; }
body[data-insights] .viz.vz .vz-figs .num.hero { font-size: 64px; font-weight: 300; letter-spacing: -.025em; margin-top: 4px; }
body[data-insights] .viz.vz .vz-figs .sub { font-size: 13.5px; color: #86868b; }
body[data-insights] .viz.vz .vz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body[data-insights] .viz.vz .vz-tile { background: #f5f5f2; border-radius: 20px; padding: 24px 26px 26px; min-width: 0; }
body[data-insights] .viz.vz .vz-tile.wide { grid-column: 1 / -1; }
body[data-insights] .viz.vz .vz-t { font-size: 13.5px; color: #6e6e73; }
body[data-insights] .viz.vz .vz-h { font-size: 21px; font-weight: 500; color: #1d1d1f; margin: 6px 0 22px; line-height: 1.25; letter-spacing: -.005em; }
body[data-insights] .viz.vz .vz-h b { font-weight: 500; color: var(--navy); }
body[data-insights] .viz.vz .vz-sub { font-size: 13.5px; color: #6e6e73; margin: 14px 0 8px; }
body[data-insights] .viz.vz .vz-sub:first-of-type { margin-top: 0; }
body[data-insights] .viz.vz .vz-foot, body[data-insights] .viz.vz .vz-note { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #6e6e73; margin-top: 20px; }
body[data-insights] .viz.vz .vz-capsule { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; background: #e6e5e1; }
body[data-insights] .viz.vz .vz-capsule span { display: block; height: 100%; }
body[data-insights] .viz.vz ul.vz-list { list-style: none; margin: 16px 0 0; padding: 0; }
body[data-insights] .viz.vz ul.vz-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; padding: 5px 0; color: #1d1d1f; }
body[data-insights] .viz.vz ul.vz-list li .v { margin-left: auto; color: #6e6e73; font-variant-numeric: tabular-nums; }
body[data-insights] .viz.vz ul.vz-list li.zero, body[data-insights] .viz.vz ul.vz-list li.zero .v { color: #a1a1a6; }
body[data-insights] .viz.vz i.vz-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
body[data-insights] .viz.vz ul.vz-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
body[data-insights] .viz.vz ul.vz-bars li .r { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 7px; }
body[data-insights] .viz.vz ul.vz-bars li .r .v { color: #6e6e73; font-variant-numeric: tabular-nums; }
body[data-insights] .viz.vz .vz-track { height: 8px; border-radius: 4px; background: #e6e5e1; overflow: hidden; }
body[data-insights] .viz.vz .vz-track span { display: block; height: 100%; border-radius: 4px; background: var(--navy); }
body[data-insights] .viz.vz .vz-cols { display: flex; align-items: flex-end; justify-content: space-between; height: 200px; padding: 0 6px; gap: 6px; }
body[data-insights] .viz.vz .vz-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; min-width: 0; }
body[data-insights] .viz.vz .vz-col .cv { font-size: 13px; color: #6e6e73; margin-bottom: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-insights] .viz.vz .vz-colbar { width: 30px; border-radius: 6px; background: var(--navy); }
body[data-insights] .viz.vz .vz-col.now .vz-colbar { background: #c3cbd3; }
body[data-insights] .viz.vz .vz-col .cl { font-size: 12.5px; color: #6e6e73; margin-top: 10px; text-align: center; line-height: 1.35; height: 36px; white-space: nowrap; }
body[data-insights] .viz.vz .vz-col .cl em { font-style: normal; color: #a1a1a6; display: block; }
body[data-insights] .viz.vz .vz-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 8px; }
body[data-insights] .viz.vz .vz-big3 .n { font-size: 52px; font-weight: 300; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
body[data-insights] .viz.vz .vz-big3 .c { font-size: 14px; color: #6e6e73; margin-top: 10px; }
body[data-insights] .viz.vz .vz-aside { font-size: 13.5px; color: #86868b; margin: 18px 4px 0; }
body[data-insights] .viz.vz .vz-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 4px 34px; }
body[data-insights] .viz.vz .vz-ring { display: flex; align-items: center; gap: 14px; min-width: 0; }
body[data-insights] .viz.vz .vz-ring svg { flex: none; } body[data-insights] .viz.vz .vz-ring svg text { font-family: var(--head); }
body[data-insights] .viz.vz .vz-ring > div { flex: 1; min-width: 0; }
body[data-insights] .viz.vz .vz-ring .rl { font-size: 15px; color: #1d1d1f; line-height: 1.3; }
body[data-insights] .viz.vz .vz-ring .rs { font-size: 13px; color: #86868b; margin-top: 2px; }
body[data-insights] .viz.vz .vz-caps { --lab: 210px; --end: 170px; position: relative; display: grid; grid-template-columns: var(--lab) 1fr; row-gap: 14px; align-items: center; padding-top: 30px; }
body[data-insights] .viz.vz .vz-caps .p { font-size: 15px; color: #1d1d1f; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-insights] .viz.vz .vz-caps .p small { display: block; font-size: 12.5px; color: #86868b; }
body[data-insights] .viz.vz .vz-caps .lane { position: relative; height: 12px; margin-right: var(--end); }
body[data-insights] .viz.vz .vz-caps .lane span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
body[data-insights] .viz.vz .vz-caps .lane span.fade { border-radius: 6px 0 0 6px; }
body[data-insights] .viz.vz .vz-caps .w { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 12px; font-size: 14px; color: #1d1d1f; white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-insights] .viz.vz .vz-caps .w.beyond { color: #8a6412; }
body[data-insights] .viz.vz .vz-caps .line, body[data-insights] .viz.vz .vz-caps .linel { left: calc(var(--lab) + (100% - var(--lab) - var(--end)) * var(--at)); }
body[data-insights] .viz.vz .vz-caps .line { position: absolute; top: 22px; bottom: -6px; width: 0; border-left: 1.5px dashed var(--navy); }
body[data-insights] .viz.vz .vz-caps .linel { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; color: var(--navy); white-space: nowrap; }
@media (max-width: 900px) {
  body[data-insights] .viz.vz .vz-figs { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  body[data-insights] .viz.vz .vz-figs .num.hero { font-size: 44px; }
  body[data-insights] .viz.vz .vz-tiles { grid-template-columns: 1fr; }
  body[data-insights] .viz.vz .vz-rings { grid-template-columns: 1fr 1fr; }
  body[data-insights] .viz.vz .vz-caps { --lab: 120px; --end: 110px; }
}
/* crome.css 2.68.0: ALxx */

/* ---------- Phase ALxxi (2.69.0): Overview, the Insights page renamed and redrawn (Cam's mock-ups 16 to 23) ----------
   Portfolio in three areas (commercial, legal contracts, legal compliance), never named. Each area's anchor, four
   figures in the band's grey, stays at the top while its sections pass beneath; the next area's anchor rises from below
   and pushes it off (sticky inside each area). Each section is the window's height less the anchor's, and the page
   moves a section at a time; the folder tab of the section on screen goes dark, with a navy line under its name that
   slides as you go. Crome's navy and its tints for amounts, the chip colours for states. Every class is ov- prefixed:
   the app styles .bar, .nm and friends of its own. */
:root { --ov-ah: 93px; --ov-most: 620px; }   /* a section is never taller than this: on a tall screen the sheet stops, never thins out */
.ov-c-green { background: var(--green); } .ov-c-green2 { background: var(--green2); } .ov-c-yellow { background: var(--yellow); }
.ov-c-orange { background: var(--orange); } .ov-c-red { background: var(--red); } .ov-c-none { background: var(--none); }
body[data-overview] nav.ftabs > a { transition: color var(--t); }
body[data-overview] nav.ftabs > a.ov-here { color: var(--ink); }
.ov-mark { position: absolute; height: 2px; border-radius: 1px; background: var(--navy); pointer-events: none;
  transition: left .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1); }
.ov-sheet { padding: 0 34px; position: relative; }
.ov-anchor { position: sticky; top: 0; z-index: 3; height: var(--ov-ah); margin: 0 -34px; padding: 0 34px; background: var(--band2); border-bottom: 1px solid var(--cardline); }
.ov-figs { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; padding: 13px 0 12px; }
.ov-figs > div { padding: 0 20px; border-left: 1px solid var(--cardline); min-width: 0; }
.ov-figs > div:first-child { padding-left: 0; border-left: 0; }
.ov-eb { font: 600 11px/14px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin: 0; white-space: nowrap; }
.ov-figs .ov-n { font: 600 26px/1 var(--head); color: var(--navy); letter-spacing: -.3px; margin: 6px 0 5px; white-space: nowrap; }
.ov-figs .ov-n small { font: 400 13.5px var(--head); color: var(--faint); letter-spacing: 0; margin-left: 5px; }
.ov-figs .ov-n small.ov-about { margin: 0 5px 0 0; }
.ov-figs .ov-s { font: 400 12.5px/16px var(--head); color: var(--facts); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-sec { box-sizing: border-box; padding: 24px 0 26px; display: flex; flex-direction: column; }
.ov-h { display: flex; align-items: center; gap: 14px; min-height: 26px; flex: none; }
.ov-h .ov-eb { font-size: 11.5px; line-height: 16px; }
.ov-go { margin-left: 30px; font: 500 14px/20px var(--head); color: var(--navy); white-space: nowrap; }
.ov-h > .ov-eb + .ov-go, .ov-h > .ov-go:first-child { margin-left: auto; }
.ov-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 24px; }
.ov-empty { margin: auto 0; text-align: center; font: 400 15px/22px var(--head); color: var(--faint); }
.ov-legend { display: flex; gap: 16px; margin-left: auto; font: 400 13.5px/20px var(--head); color: var(--facts); }
.ov-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ov-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ov-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 13px; background: #fdf3dd;
  font: 600 13px/26px var(--head); color: #7a5512; white-space: nowrap; }
.ov-flag i { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.ov-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 13px; background: #e9f6e6;
  font: 600 13.5px/26px var(--head); color: #2b6a2a; white-space: nowrap; }
.ov-note { font: 400 12.5px/16px var(--head); color: var(--faint); margin: 10px 0 0; text-align: right; }

/* one bar for the whole */
.ov-stack { display: flex; gap: 4px; height: 50px; flex: none; }
.ov-stack > span { position: relative; border-radius: 6px; display: flex; align-items: center; padding: 0 16px; font: 600 14.5px/1 var(--head); color: #fff;
  white-space: nowrap; overflow: hidden; min-width: 0; }
.ov-stack > span:first-child { border-radius: 12px 6px 6px 12px; }
.ov-stack > span:last-child { border-radius: 6px 12px 12px 6px; }
.ov-stack > span:only-child { border-radius: 12px; }
.ov-stack > span.sm { padding: 0 6px; justify-content: center; }
.ov-stack > span.ov-many { padding: 0; gap: 2px; align-items: stretch; background: #415a76; }
.ov-stack > span.ov-many i { display: block; background: var(--navy); }
.ov-stack > span.ov-many b { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-weight: 600; color: #fff; background: var(--navy); padding: 6px 8px; border-radius: 5px; }

/* clients: the ten largest, ranked */
.ov-rank { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 22px; }
.ov-rkh, .ov-rkr { display: grid; grid-template-columns: 24px minmax(160px, 240px) 1fr 62px 44px 54px; column-gap: 16px; align-items: center; }
.ov-rkh { font: 600 11px/14px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 0 0 8px; flex: none; }
.ov-rkh .r, .ov-rkr .r { text-align: right; justify-self: end; }
.ov-rkb { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ov-rkr { flex: 1 1 0; min-height: 24px; max-height: 52px; border-top: 1px solid #f0eee9; }
.ov-rkr:last-child { border-bottom: 1px solid #f0eee9; }
.ov-rkr em { font: 600 11.5px/22px var(--head); font-style: normal; color: var(--facts); background: #f1efea; border-radius: 50%; width: 22px; height: 22px; text-align: center; }
.ov-rkr .ov-cn { font: 400 16px/20px var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 9px; min-width: 0; }
.ov-rkr .ov-cn:hover { text-decoration: none; color: var(--navy); }
.ov-rkr .ov-cnt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* the name gives way, never the word beside it */
.ov-new { font: 600 11px/18px var(--head); color: #2b6a2a; background: #e3f5e0; border-radius: 9px; padding: 0 7px; flex: none; }
.ov-rkr .ov-bar b { display: block; height: 12px; border-radius: 3px 6px 6px 3px; background: var(--navy); min-width: 3px; }
.ov-rkr .ov-val { font: 600 14.5px/20px var(--head); color: var(--ink); white-space: nowrap; }
.ov-rkr .ov-shr { font: 400 14px/20px var(--head); color: var(--facts); }
.ov-yr { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.ov-yr i { display: block; width: 10px; min-height: 3px; border-radius: 2px 2px 0 0; background: #c3cbd3; }
.ov-yr i:last-child { background: #7a8b9f; }
.ov-yr i.z { height: 2px !important; min-height: 2px; background: #e8e6e0 !important; border-radius: 1px; }

/* sectors: a tile each, in the bar's own depths, each with its years */
.ov-tiles { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(0, 1fr); row-gap: 24px; margin-top: 28px; }
.ov-tile { padding: 0 20px; border-left: 1px solid #ecebe6; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ov-tile:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.ov-who { font: 400 16.5px/22px var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 9px; margin: 0; }
.ov-who i { flex: none; width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ov-who a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .ov-who a:hover { text-decoration: none; color: var(--navy); }
.ov-tfee { font: 600 26px/1 var(--head); color: var(--navy); letter-spacing: -.3px; margin: 9px 0 5px; }
.ov-tile .ov-s, .ov-s { font: 400 13.5px/18px var(--head); color: var(--facts); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-yc { margin-top: 14px; width: 148px; max-width: 100%; flex: 1; min-height: 34px; max-height: 120px; display: flex; flex-direction: column; }
/* four tiles or fewer: one row, each with a taller chart of its own years */
.ov-tiles.one { grid-auto-rows: auto; }
.ov-tiles.one .ov-yc { flex: none; height: clamp(120px, calc(var(--ov-h, 644px) - 440px), 250px); max-height: none; width: min(100%, 240px); margin-top: 22px; }
.ov-ycb { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--cardline); }
.ov-ycb i { flex: 1; display: block; border-radius: 4px 4px 1px 1px; background: #c3cbd3; min-height: 3px; }
.ov-ycb i:last-child { background: #7a8b9f; }
.ov-ycl { display: flex; gap: 8px; margin-top: 5px; flex: none; }
.ov-ycl span { flex: 1; text-align: center; font: 400 11px/14px var(--head); color: var(--faint); }

/* places: the UK by region and abroad by country, as bars */
.ov-two { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; flex: 1; min-height: 0; }
.ov-two > div { padding: 0 0 0 28px; border-left: 1px solid #ecebe6; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ov-two > div:first-child { padding: 0 28px 0 0; border-left: 0; }
.ov-sub { font: 600 11px/14px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; display: flex; justify-content: space-between; flex: none; }
.ov-sub span + span { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.ov-hbs { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ov-hb { display: grid; grid-template-columns: minmax(110px, 190px) 1fr 56px; column-gap: 14px; align-items: center; flex: 1 1 0; min-height: 30px; max-height: 54px; border-top: 1px solid #f0eee9; }
.ov-hb:last-child { border-bottom: 1px solid #f0eee9; }
.ov-hb .ov-cn { font: 400 15.5px/20px var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-hb b { display: block; height: 12px; border-radius: 3px 6px 6px 3px; min-width: 3px; }
.ov-hb .ov-val { font: 600 14px/20px var(--head); color: var(--ink); text-align: right; white-space: nowrap; }
.ov-hb.ov-o .ov-cn { font: 400 14px/20px var(--head); color: var(--facts); }
.ov-hb.ov-o .ov-val { font-weight: 400; color: var(--facts); }

/* fees: the years by quarter */
.ov-qs { flex: 1; min-height: 0; display: flex; }
.ov-year { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 11px; border-left: 1px solid #ecebe6; }
.ov-year:first-child { border-left: 0; padding-left: 0; }
.ov-year:last-child { padding-right: 0; }
.ov-cols { flex: 1; min-height: 0; display: flex; gap: 6%; padding-top: 50px; border-bottom: 1px solid #dcdad3; }
.ov-col { flex: 1; min-width: 0; position: relative; }
.ov-col > div { position: absolute; left: 0; right: 0; bottom: 0; }
.ov-col b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 76px); height: 100%; border-radius: 6px 6px 2px 2px; background: #7a8b9f; }
.ov-col b.best { background: var(--navy); }
.ov-col b.sofar { background: repeating-linear-gradient(135deg, #c3cbd3 0 5px, #e0e4e9 5px 10px); }
.ov-col b.zero { height: 3px !important; background: #d9d6cf; border-radius: 2px; }
.ov-col .ov-lab { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding-bottom: 6px; }
.ov-col .ov-v { font: 600 12.5px/16px var(--head); color: var(--ink); white-space: nowrap; }
.ov-col .ov-badge { font: 600 11.5px/20px var(--head); color: #fff; background: var(--navy); border-radius: 10px; padding: 0 9px; margin-bottom: 6px; white-space: nowrap; }
.ov-ql { display: flex; gap: 6%; flex: none; padding-top: 8px; }
.ov-ql span { flex: 1; text-align: center; font: 400 13px/16px var(--head); color: var(--facts); }
.ov-ql span.f { color: #c9c6be; }
.ov-yl { flex: none; margin-top: 10px; border-top: 1px solid #dcdad3; padding-top: 8px; text-align: center; font: 400 13px/18px var(--head); color: var(--facts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-yl b { font: 600 14px/18px var(--head); color: var(--ink); margin-right: 8px; }

/* contracts: where each one stands */
.ov-groups { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 30px; flex: none; }
.ov-grp { display: flex; flex-direction: column; gap: 10px; }
.ov-gl { font: 400 13.5px/18px var(--head); color: var(--facts); white-space: nowrap; }
.ov-gl b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.ov-gs { display: grid; grid-auto-flow: column; grid-auto-columns: 24px; grid-template-rows: repeat(2, 24px); gap: 6px; }
.ov-gs.r1 { grid-template-rows: 24px; } .ov-gs.r3 { grid-template-rows: repeat(3, 24px); }
.ov-gs i { width: 24px; height: 24px; border-radius: 6px; display: block; }
.ov-t { width: 100%; border-collapse: collapse; }
.ov-t th { font: 600 11.5px/16px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); text-align: left; padding: 0 0 8px; }
.ov-t th.r, .ov-t td.r { text-align: right; }
.ov-t td { height: 52px; border-top: 1px solid #f0eee9; vertical-align: middle; font: 400 14px/20px var(--head); color: var(--facts); }
.ov-t tr:last-child td { border-bottom: 1px solid #f0eee9; }
.ov-t td.ov-tname { font: 400 17px/22px var(--body); }
.ov-t td.ov-tname a { color: var(--ink); }
.ov-t td.ov-days { color: var(--ink); }
.ov-t .chip { min-width: 112px; font-size: 12.5px; padding: 2px 10px; border-radius: 3px; }

/* terms: one column per contract, one row per term */
.ov-grid { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, max-content) minmax(max-content, 1fr); column-gap: 26px; row-gap: 5px; align-items: center; align-content: start; }
.ov-grid .ov-topic { font: 400 15px/20px var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-cells, .ov-colhead { display: grid; grid-template-columns: var(--ov-cols); column-gap: 5px; }   /* 2.69.1: the squares narrow to fit, so the counts beside them always show */
.ov-cells i { width: 100%; aspect-ratio: 1; max-height: 22px; border-radius: min(5px, 22%); display: block; }
.ov-rc { font: 400 13.5px/18px var(--head); color: var(--facts); text-align: right; white-space: nowrap; }
.ov-rc b { color: var(--ink); font-weight: 600; }
.ov-colhead { font: 600 11.5px/16px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.ov-colhead span { white-space: nowrap; }
.ov-more { margin: 12px 0 0; font: 400 13.5px/18px var(--head); color: var(--facts); }

/* indemnity */
.ov-rows { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ov-rows li { display: grid; grid-template-columns: minmax(160px, 220px) 1fr minmax(200px, 270px); align-items: center; column-gap: 24px; flex: 1 1 0; min-height: 34px; max-height: 60px; border-top: 1px solid #f0eee9; }
.ov-rows li:last-child { border-bottom: 1px solid #f0eee9; }
.ov-rows .ov-nm { font: 400 17px/22px var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-rows .ov-ct { font: 400 14px/20px var(--head); color: var(--facts); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-rows .ov-ct b { color: var(--ink); font-weight: 600; }
.ov-split { display: flex; gap: 3px; height: 14px; }
.ov-split span { border-radius: 3px; min-width: 0; }
.ov-split span:first-child { border-radius: 7px 3px 3px 7px; }
.ov-split span:last-child { border-radius: 3px 7px 7px 3px; }
.ov-split span:only-child { border-radius: 7px; }
.ov-sq { display: flex; gap: 5px; }
.ov-sq i { width: 16px; height: 16px; border-radius: 4px; display: block; background: #e4e2dc; }
.ov-sq i.on { background: var(--navy); }

/* compliance: squared paper, three titles */
.ov-paper { display: grid; grid-template-columns: 1fr repeat(3, 132px); grid-auto-rows: minmax(30px, 1fr); border-top: 1px solid #e6e4de; max-height: 100%; align-content: start; }
.ov-paper > *, .ov-prow > * { border-bottom: 1px solid #ebe9e3; display: flex; align-items: center; min-height: 0; }
.ov-paper > .ov-prow { display: contents; }   /* 2.69.1: a row the page can leave out when the section is short */
.ov-paper .ov-pc { justify-content: center; border-left: 1px solid #ebe9e3;
  background-image: linear-gradient(#f4f3ef 1px, transparent 1px), linear-gradient(90deg, #f4f3ef 1px, transparent 1px); background-size: 11px 11px; background-position: -1px -1px; }
.ov-paper .ov-ph { font: 600 11.5px/16px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); background: none; }
.ov-paper .ov-pn { font: 400 15.5px/20px var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; display: block; line-height: 37px; }
.ov-paper .ov-pn:hover { text-decoration: none; color: var(--navy); }
.ov-paper i { width: 23px; height: 23px; border-radius: 5px; display: block; box-shadow: 0 0 0 3px #fff; }

/* the tabs beyond Portfolio: each section in full, at its own height, above the lists */
.ov-detail .ov-sec { padding: 26px 0 30px; }
.ov-detail .ov-rkr, .ov-detail .ov-hb { flex: none; height: 40px; }
.ov-detail .ov-tiles { grid-auto-rows: auto; }
.ov-detail .ov-yc { flex: none; height: 64px; }
.ov-detail .ov-qs { flex: none; height: 360px; }
.ov-detail .ov-rows li { flex: none; height: 50px; }
.ov-detail .ov-paper { grid-auto-rows: 37px; }
body[data-overview] .ins2 ul.prows > li.vizrow { display: block; height: auto; padding: 0; border: 0; }
/* a second list on a tab (Terms: the playbook, then what protects) opens with its own answer and column heads */
body[data-overview] .plist ul.prows > li.ov-vh { min-height: 0; margin-top: 18px; padding: 24px 16px 10px; align-items: end; border-top: 1px solid var(--line); border-radius: 0; }
body[data-overview] .plist ul.prows > li.ov-vh:hover { background: none; }
body[data-overview] .plist ul.prows > li.ov-vh .lead { grid-column: 1 / 3; font-family: var(--body); font-size: 15px; line-height: 22px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-overview] .plist ul.prows > li.ov-vh .sh { font-family: var(--head); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: center; }

@media (min-width: 701px) {
  /* Portfolio: the sheet runs to the foot of the window; a section is its height less the anchor's, and it snaps */
  body[data-ovport] .sheet.ov-sheet { flex: 1 1 0; min-height: 0; max-height: calc(var(--ov-ah) + var(--ov-most) + 2px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scroll-snap-type: y mandatory; scroll-padding-top: var(--ov-ah); scrollbar-width: none; border-radius: 12px; }
  body[data-ovport] .sheet.ov-sheet::-webkit-scrollbar { display: none; }
  body[data-ovport] .ov-sec { height: calc(var(--ov-h, 644px) - var(--ov-ah)); scroll-snap-align: start; }
  body[data-ovport] .ov-body { overflow: hidden; }       /* 2.69.1: a section never runs into the next */
}
@media (max-width: 700px) {
  /* a phone: one long page, no snapping; the figures two by two */
  .ov-anchor { position: static; height: auto; }
  .ov-figs { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .ov-figs > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ov-tiles { grid-template-columns: 1fr 1fr; }
  .ov-tile:nth-child(4n + 1) { padding-left: 20px; border-left: 1px solid #ecebe6; }
  .ov-tile:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .ov-two { grid-template-columns: 1fr; row-gap: 24px; }
  .ov-two > div, .ov-two > div:first-child { padding: 0; border-left: 0; }
  .ov-qs { height: 300px; flex: none; overflow-x: auto; }
  .ov-rkh, .ov-rkr { grid-template-columns: 22px minmax(0, 1fr) 0 56px 40px 0; column-gap: 10px; }
  .ov-rkr .ov-bar, .ov-yr, .ov-rkh span:nth-child(3), .ov-rkh span:nth-child(6) { display: none; }
  .ov-rkr, .ov-hb { flex: none; height: 40px; }
  .ov-h { flex-wrap: wrap; row-gap: 8px; }
  .ov-legend { flex-wrap: wrap; margin-left: 0; row-gap: 4px; }
  .ov-body { overflow-x: auto; }                         /* the terms grid scrolls sideways inside its section, never the page */
  .ov-rows li { grid-template-columns: 1fr 1fr; flex: none; height: auto; padding: 8px 0; }
  .ov-rows .ov-ct { grid-column: 1 / -1; text-align: left; }
  .ov-paper { grid-template-columns: 1fr repeat(3, 56px); }
  .ov-paper .ov-ph { font-size: 10px; letter-spacing: 0; }
}
/* ---------- Phase ALxxii (2.70.0): the Overview refined (Cam's reviews of mock-ups 24 to 26 on the large demo, 20.10.2026) ----------
   The anchor a panel set into the top of the sheet (Cam chose D: "in harmony with the rest of the page"). Clients and
   Places open with a slim line for the whole, named above where each part begins, then a ranked list. Where every
   contract stands, Terms, Indemnity and Compliance are grids with no words beside them ("the data should speak for
   itself"), each square as large as its section allows; every square names what it stands for when pointed at and
   opens it. Indemnity: a square for each signed appointment, filled down then across, so each row reads as a bar. */

/* the anchor: the same room all round, its figures on the content's own edge (12px in, then 22px: the sheet's 34px) */
:root { --ov-ah: 104px; }
.ov-anchor { background: var(--sheet); border-bottom: 0; padding: 12px 12px 0; box-sizing: border-box; }
.ov-figs { box-sizing: border-box; height: 100%; align-content: center; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
  background: var(--band2); border-radius: var(--r2); padding: 0 22px; }
.ov-figs > div { border-left-color: #e4e1da; }
.ov-figs .ov-n { overflow: hidden; text-overflow: ellipsis; }

/* a slim line for the whole, its labels above where each part begins (the script moves one along if two would meet) */
.ov-slim { flex: none; }
.ov-slab { position: relative; height: 20px; margin-bottom: 8px; }
.ov-slab span { position: absolute; top: 0; white-space: nowrap; font: 400 13.5px/20px var(--head); color: var(--facts); }
.ov-slab span b { font-weight: 600; color: var(--ink); margin-right: 5px; }
.ov-sbar { display: flex; gap: 4px; height: 10px; }
.ov-sbar i { display: block; min-width: 0; border-radius: 3px; }
.ov-sbar i:first-child { border-radius: 5px 3px 3px 5px; } .ov-sbar i:last-child { border-radius: 3px 5px 5px 3px; } .ov-sbar i:only-child { border-radius: 5px; }

/* the ranked lists: each name in its part's colour; Clients with Projects and Latest, Places with Projects */
.ov-rkh, .ov-rkr { grid-template-columns: 24px minmax(170px, 250px) 1fr 62px 44px 62px 66px; }
.ov-rkh.pl, .ov-rkr.pl { grid-template-columns: 24px minmax(170px, 250px) 1fr 62px 44px 62px; }
.ov-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ov-k-clients .ov-rank, .ov-k-places .ov-rank { padding-top: 26px; }
.ov-k-places .ov-rkr .ov-cn:hover { color: var(--ink); }

/* the grids: a row a kind or a check, a square for every contract or party, under a colour key */
.ov-waffle { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); column-gap: 26px; row-gap: calc(10px + var(--sq, 10px));
  align-items: start; flex: none; }
.ov-wrow { display: contents; }   /* a row of the grid on a screen; on a phone, its own block, the squares beneath */
.ov-wl { font: 400 16px/20px var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-wl b { font: 600 13px/20px var(--head); color: var(--facts); margin-left: 8px; }
.ov-wc { display: flex; flex-wrap: wrap; gap: max(2px, calc(var(--sq, 10px) * .24)); padding-top: 4px; min-width: 0; }
.ov-wc > a, .ov-cells > a { display: block; flex: none; width: var(--sq, 10px); height: var(--sq, 10px); border-radius: calc(var(--sq, 10px) * .25);
  transition: box-shadow var(--t); }
.ov-wc > a:hover, .ov-cells > a:hover { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--navy); position: relative; z-index: 2; }   /* ringed, never grown */
.ov-c-navy { background: var(--navy); } .ov-c-pale { background: #e4e2dc; }
.ov-k-position .ov-waffle { margin-bottom: 30px; }
.ov-paper.ov-after { margin-top: 30px; }
.ov-k-compliance .ov-paper { grid-auto-rows: 34px; }
.ov-k-compliance .ov-paper .ov-pn { line-height: 33px; }

/* the one label that says what a square stands for, or what a row of Indemnity means */
.ov-qt { position: fixed; z-index: 50; pointer-events: none; max-width: 340px; padding: 7px 11px 8px; border-radius: 8px; background: var(--navy); color: #fff;
  font: 400 13px/18px var(--head); box-shadow: 0 6px 18px rgba(0, 33, 71, .22); opacity: 0; transform: translateY(3px); transition: opacity var(--t), transform var(--t); }
.ov-qt.on { opacity: 1; transform: none; }
.ov-qt.rich { max-width: 380px; padding: 10px 13px 11px; font-size: 13.5px; line-height: 19px; }
.ov-qt b { display: block; font-weight: 600; margin-bottom: 2px; }
.ov-qt em { display: block; font-style: normal; color: #c3cbd3; margin-top: 6px; }

/* Indemnity (Cam: "still hard to understand"): each band filled down then across, so the red reads as a length, the share
   of signed appointments that expose you on the point; the law's added duties apart, beneath */
.ov-waffle.ov-ind { row-gap: 8px; }
.ov-wc.col { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 3), var(--sq, 10px)); grid-auto-columns: var(--sq, 10px);
  justify-content: start; align-content: start; }
.ov-sub3 { margin: 20px 0 6px; font: 600 11.5px/16px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); flex: none; }
.ov-wsep > p { grid-column: 1 / -1; margin: 4px 0 -4px; }
.ov-wl.ov-tipped { cursor: help; outline: none; text-decoration: underline dotted #b9b6ae; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ov-wl.ov-tipped b { display: inline-block; }
.ov-wl.ov-tipped:focus-visible { text-decoration-color: var(--navy); }
.ov-tip { display: none; }   /* the words the label shows, kept in the row */

/* Terms: spaced as Contracts' squares are, each name a square's height; a grid for each kind of contract */
.ov-grid { grid-template-columns: fit-content(230px) minmax(0, 1fr); row-gap: max(2px, calc(var(--sq, 16px) * .24)); column-gap: 26px; }
.ov-cells, .ov-colhead { column-gap: max(2px, calc(var(--sq, 16px) * .24)); }
.ov-grid .ov-topic { font-size: 15px; line-height: max(16px, var(--sq, 16px)); }
.ov-grid .ov-colhead { margin-bottom: 4px; }
.ov-tk[hidden] { display: none; }
.ov-kinds { display: inline-flex; gap: 20px; margin-left: 26px; }   /* the switch, in the folder tabs' manner */
.ov-kinds button { font: 400 14px/20px var(--head); color: var(--facts); background: none; border: 0; border-radius: 0; padding: 3px 0; cursor: pointer;
  white-space: nowrap; position: relative; }
.ov-kinds button.on { color: var(--ink); }
.ov-kinds button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 1px; background: var(--navy); }
.ov-kinds button b { font-weight: 400; color: var(--faint); margin-left: 4px; }
.ov-kinds button:disabled { color: #b6b2aa; cursor: help; }

/* a heading line too long for the window: its key on a line of its own, the way into the tab still on the right */
.ov-h.wrap { flex-wrap: wrap; row-gap: 6px; }
.ov-h.wrap .ov-legend { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; row-gap: 4px; }
.ov-h.wrap .ov-go { margin-left: auto; }

/* a narrow window (a small laptop, a tablet across; Cam: "1100 is not so good"): the figures a size down in four even
   columns, the words under each free to take two lines; a sector's name too; the lists a little closer */
@media (min-width: 701px) and (max-width: 1279px) {
  :root { --ov-ah: 116px; }
  .ov-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ov-figs > div { padding: 0 14px; }
  .ov-figs .ov-n { font-size: 22px; }
  .ov-figs .ov-n small { font-size: 12.5px; }
  .ov-figs .ov-s { font-size: 12px; line-height: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ov-tile .ov-who { flex: none; font-size: 15px; line-height: 19px; white-space: normal; align-items: flex-start; }   /* the chart gives way, never the name */
  .ov-tile .ov-who i { margin-top: 4px; }
  .ov-rkr { min-height: 22px; }
  .ov-k-clients .ov-rank, .ov-k-places .ov-rank { padding-top: 18px; }
  .ov-grid .ov-topic { font-size: 13.5px; line-height: max(14px, var(--sq, 16px)); }
}
@media (min-width: 701px) and (max-width: 1099px) and (min-height: 820px) {   /* narrower still, and tall (a tablet upright): the figures two by two */
  :root { --ov-ah: 164px; }
  .ov-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .ov-figs > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
/* a phone: the figures two by two; the lists rank, name, fees and share; each grid's squares beneath its name */
@media (max-width: 700px) {
  .ov-anchor { padding: 12px 12px 0; }
  .ov-figs { height: auto; grid-template-columns: 1fr 1fr; padding: 14px 18px; row-gap: 14px; }
  .ov-rkh, .ov-rkh.pl, .ov-rkr, .ov-rkr.pl { grid-template-columns: 22px minmax(0, 1fr) 64px 44px; column-gap: 10px; }
  .ov-rkr .ov-bar, .ov-rkh > :nth-child(3), .ov-rkh > :nth-child(n + 6), .ov-rkr > :nth-child(n + 6) { display: none; }
  .ov-slab { height: auto; display: flex; flex-wrap: wrap; gap: 2px 16px; }
  .ov-slab span { position: static; }
  .ov-waffle { display: block; }
  .ov-wrow { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; margin-bottom: 18px; }
  .ov-wrow .ov-wc { grid-row: 2; }
  .ov-grid { grid-template-columns: fit-content(140px) minmax(0, 1fr); column-gap: 14px; }
  .ov-kinds { margin-left: 0; }
}

/* crome.css 2.70.0: ALxxii */

/* ---------- Phase AM (2.72.0, settled 21.10.2026): the party's relationships, Other's own words; a contract's rows ---------- */
/* AM (2.72.0): the party's five relationships on one line, Other's own words beside it; a narrow window wraps them */
table.rep.details .rels.rels5 { display: flex; flex-wrap: wrap; align-items: center; column-gap: 30px; row-gap: 12px; }
table.rep.details .rels.rels5 label.check { white-space: nowrap; flex: none; overflow-wrap: normal; }
table.rep.details .rels.rels5 .relo { display: inline-flex; align-items: center; gap: 14px; flex: 1 1 150px; min-width: 0; }
table.rep.details .rels.rels5 input.relother { width: auto; flex: 1 1 auto; min-width: 80px; max-width: 240px; }
/* AM: Other's words on a line of their own to write on, always shown; darker under the pointer, navy when typing */
table.rep.details .rels.rels5 input.relother { border-bottom: 1px solid var(--edge); padding: 2px 0; }
table.rep.details .rels.rels5 input.relother:hover { border-bottom-color: var(--faint); }
table.rep.details .rels.rels5 input.relother:focus { border-bottom-color: var(--navy); }
@media (max-width: 700px) { table.rep.details .rels.rels5 { column-gap: 24px; } }
/* AM (Cam, 21.10.2026): a contract's row opens it from anywhere on the row, and its own row on its page folds it back;
   a term's row is its name whole, the review under it once opened */
body[data-party] table.rep.party.contracts:not(.here) > tbody > tr[data-find] { cursor: pointer; }
body[data-contract] table.rep.party.contracts.here > tbody > tr { cursor: pointer; }
body[data-contract] .psheet table.rep.party.stage tr.term.brief > td.el .flagw { margin-left: 10px; font-family: var(--head); font-size: 13px; color: var(--red); }
/* crome.css 2.72.0: AM */

/* ---------- Phase AMi (2.73.0, settled 21.10.2026): Cam's notes from his test ---------- */
/* the drop's project: its number, then its name, each as wide as it says */
.dsheet .f[data-k="project"] input.pnum { margin-right: 14px; }
/* a party's Details: who else is on the job in the words of its label, level with it; the construction value's box as wide
   as £100,000,000,000, its note just after it (Cam: "make room for 100billion, just in case") */
body[data-party] .psheet table.rep.party.details tr.pjs.last td.v .pjw { font-family: var(--head); font-size: 13px; line-height: 26px; color: var(--facts); }
body[data-party] .psheet table.rep.party.details tr.pjs.last td.v .pjw a { font-size: 13px; line-height: 26px; }
body[data-party] .psheet table.rep.party.details td .row.tight > input[data-psave="construction_value"] { width: 136px !important; }
/* crome.css 2.73.0: AMi */

/* ---------- Phase AMi.1 (2.73.1, 21.10.2026) ---------- */
/* Cam: "the old drop was prettier": the drop is the card it was (AMi's rules for New's box as the paper are gone), and
   New's box says the drop's words. A contract's project is saved in place, its word beside Save */
body[data-contract] .psheet table.rep.party.flist .pform .saved { font-family: var(--head); font-size: 13px; color: var(--facts); }
/* crome.css 2.73.1: AMi.1 */

/* ---------- Phase AMii (2.74.0, 22.10.2026, Cam): six stages; the Review reads, the Markup writes ----------
   Sent (stored with_third_party) is light green, with no clock. The markup's live view never says reading: its page
   numbers stay as they are (no darkening as read). Undo sits beside Download for a few seconds after Mark as sent. */
body[data-contract] .csheet .mkstage .pgno, body[data-contract] .csheet .mkstage .pgno.read { color: #6e6b64; transition: none; }
body[data-contract] .csheet details.fold > summary .chip.undo { transition: opacity .5s ease; }
body[data-contract] .csheet details.fold > summary .chip.undo.gone { opacity: 0; }
/* crome.css 2.74.0: AMii */

/* ---------- Phase AMii.1 (2.74.1, 22.10.2026, Cam): each row's second button keeps one job, in one place ----------
   Sent: Request approval stays beside the chip; Add new version sits beside Download, where Mark as sent was (after
   Undo has gone). The file box is a chip on the row, its form standing aside so the chip takes the column. */
body[data-contract] .csheet details.fold > summary form.chipform { display: contents; }
body[data-contract] .csheet details.fold.mk > summary .chip.mkact.later { display: none; }   /* stronger than the chips' own display */
/* crome.css 2.74.1: AMii.1 */

/* ---------- Phase AMiii (2.75.0, 22.10.2026, Cam, after mock-ups 1 to 4 and an audit): the stages as the sections ----------
   Each stage a label, its rows under it as rows are: the stage in hand on top and open, those passed folded to their
   label. One chevron, on the left, for everything that opens: labels, rows, terms; each level one step in. (AMiv: the
   label is a heading, its rows stepped in under it; its type, spacing and the steps are in AMiv's block.) */
body[data-contract] .csheet .mlab { position: relative; display: flex; align-items: baseline; width: 100%; height: auto; box-sizing: border-box; margin: 0; padding: 24px 0 6px 22px;
  border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
body[data-contract] .csheet .mlab .lb::before, body[data-contract] .csheet .mgrp details.fold:not([data-empty]) > summary .fn::before {
  content: ""; position: absolute; left: 3px; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.6 1.8 6.8 5 3.6 8.2' fill='none' stroke='%236e6b64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: transform var(--t); }
body[data-contract] .csheet .mlab .lb { position: relative; }
body[data-contract] .csheet .mlab .lb::before { left: -19px; top: 50%; margin-top: -5px; }   /* level with the label's words */
body[data-contract] .csheet .mlab[aria-expanded="true"] .lb::before, body[data-contract] .csheet .mgrp details.fold[open] > summary .fn::before { transform: rotate(90deg); }
body[data-contract] .csheet .mlab .lb { flex: 0 0 240px; font-family: var(--body); font-size: 18px; line-height: 24px; color: var(--ink); }
body[data-contract] .csheet .mlab .ln { flex: 1; min-width: 0; font-family: var(--head); font-size: 13px; line-height: 18px; color: var(--facts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-contract] .csheet .mlab:hover .lb { color: var(--navy); }
body[data-contract] .csheet .mlab:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body[data-contract] .csheet .mgrp[hidden] { display: none; }
body[data-contract] .csheet .mgrp details.fold > summary .fn { position: relative; padding-left: 22px; }
body[data-contract] .csheet .mgrp details.fold:not([data-empty]) > summary .fn::before { top: 50%; margin-top: -5px; }
body[data-contract] .csheet .mgrp details.fold > .kidbody { padding-left: 22px; }
body[data-contract] .csheet .mgrp details.fold > summary:focus-visible, body[data-contract] .csheet .chip.act:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body[data-contract] .csheet #cbar .later { display: none; }
body[data-contract] .csheet #cbar .chip.undo { transition: opacity .5s ease; }
body[data-contract] .csheet #cbar .chip.undo.gone { opacity: 0; }
@media (min-width: 701px) {
  body[data-contract] .csheet .tabbody .mgrp > details.fold > summary, body[data-contract] .csheet .tabbody .mlab { scroll-snap-align: start; }
}
@media (max-width: 700px) { body[data-contract] .csheet .mlab .lb { flex: 0 0 auto; margin-right: 12px; } }
/* crome.css 2.75.0: AMiii */

/* ---------- Phase AMiv (2.76.0, 22.10.2026, Cam, after an audit: what belongs to what) ----------
   A stage's title is a heading, in the serif of a name and larger than its rows, with no line under it and room above
   it. What it holds steps in under it, and what they hold one step more: Review, then Markup and the Review sheet, then
   the terms; each step 22, each row's line starting where its parent's words start. An opened panel or term starts
   where its own row starts. The name column is fixed at each step and the words take what is left, so the chips stay in
   line with the contract's at any width and nothing runs off the sheet. Small capitals stay only for a list's own
   divider (Pre-approved). Quiet words at 4.5:1 or more on every ground. A check to make reads Check, in the outline
   every step on the page wears; a term opens from the keyboard. */
body[data-contract] { --facts: #6e6b64; }                       /* the notes' grey a touch deeper: 4.5:1 on the shaded rows too */
body[data-contract] .csheet .tabbody > .stg:first-of-type .mlab { padding-top: 14px; }
@media (min-width: 701px) {
  body[data-contract] .csheet .mgrp { padding-left: 22px; }
  body[data-contract] .csheet .mgrp > details.fold > summary { grid-template-columns: 220px minmax(0, 1fr); }
  body[data-contract] .csheet .mgrp > details.fold:is(.mk, .rv.reading) > summary { grid-template-columns: 220px minmax(0, 1fr) 124px 124px; }
  body[data-contract] .csheet .mgrp .mkstage { grid-template-columns: 220px minmax(0, 1fr); }
  body.framed[data-contract] .psheet .mgrp table.rep.party:is(.stage, .flist) col.c-w { width: auto; }
  body.framed[data-contract] .psheet .mgrp > table.rep.party:is(.stage, .flist) col.c-name { width: 236px; }
  body.framed[data-contract] .psheet .mgrp .kidbody > table.rep.party:is(.stage, .flist) col.c-name { width: 214px; }
  body.framed[data-contract] .psheet table.rep.party.stage tr.sec > td.sech { padding-left: 38px !important; }
  body.framed[data-contract] .psheet .mgrp .kidbody table.rep.party.flist > tbody > tr > td.el { padding-left: 38px !important; }   /* a version, an entry: one step in, as a term is */
}
body.framed[data-contract] .psheet table.rep.party.stage tr.sec > td.sech, body[data-contract] details.rec td.rk .src { color: var(--facts); }
body[data-party][data-contract] .psheet table.rep.party.stage button.chip.tocheck:not(:disabled):not(.checked) { background: var(--sheet); color: var(--navy); box-shadow: inset 0 0 0 1px #c9c5bc; cursor: pointer; }
body[data-party][data-contract] .psheet table.rep.party.stage button.chip.tocheck:not(:disabled):not(.checked):hover { background: #f4f3ef; color: var(--navy); box-shadow: inset 0 0 0 1px #b2ada3; }
body[data-contract] button.chip.tocheck:not(:disabled) .w0 { display: none; }
body[data-contract] button.chip.tocheck:not(:disabled) .w1 { display: inline; }
body[data-contract] table.rep.party.stage tr.term.opens .tgl { cursor: pointer; }
body[data-contract] table.rep.party.stage tr.term.opens .tgl:focus { outline: none; }
body[data-contract] table.rep.party.stage tr.term.opens .tgl:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
/* AMiv, round two (22.10.2026, Cam: one more pass). A stage's title is a heading to a screen reader too; the term a made
   markup could not change stands in ink with "By hand in Word" under it, and the finished list's clause numbers are in the
   notes' grey; a review that did not complete offers to run again in its own message; the search's own words read at
   4.5:1. */
body[data-contract] .csheet h2.mh { margin: 0; padding: 0; font: inherit; color: inherit; }
body[data-contract] .csheet .mkstage .it.miss { height: auto; min-height: 32px; align-items: flex-start; padding: 6px 0; box-sizing: border-box; }
body[data-contract] .csheet .mkstage .it.miss .k { margin-top: 4px; }
body[data-contract] .csheet .mkstage .it.miss .w { color: var(--ink); white-space: normal; }
body[data-contract] .csheet .mkstage .it .hw { display: block; margin-top: 1px; font-family: var(--head); font-size: 13px; line-height: 18px; color: var(--facts); }
body[data-contract] .csheet .mkstage .it:is(.got, .miss) .c { color: var(--facts); }
body[data-contract] .flash.err form.retry { display: inline; margin: 0 0 0 6px; }
body[data-contract] .flash.err form.retry button.link { font: inherit; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body[data-contract] .sr label.sfind, body[data-contract] .sr label.sfind input::placeholder { color: var(--facts); }
body[data-contract] .sr label.sfind:focus-within { color: var(--navy); }   /* the glass still turns navy as you type */
/* crome.css 2.76.0: AMiv */
}   /* end of the legacy layer */
/* ---------- Phase AN (2.77.0, 23.10.2026, Cam): the final version (Stage 2's foundations; Stage 3's contract page) ----------
   Balanced, with what Cam chose from the others: capitals name the parts as well as label the data (Sharper), the
   Overview's figures and ranks (Sharper) on Balanced's grey band, the drop dialog's title at 18 (Gentler); the contract
   page one level fewer, its stage titles in capitals; the contract's own words a step smaller, 14; every next step at the
   right end of the highest row it belongs to.
   One system on every layer: the ground (page and sidebar), the sheet with its folder tabs, the band (an area inside a
   sheet that marks this one, or open), the float (a menu, the drop dialog, the New box) and the controls. One corner per
   size (4 controls, 8 bands, panels and menus, 12 sheets and dialogs), one line, one shade, one grey, one shadow for a
   sheet and one for a float, one type scale, one speed.
   Everything above this block is the legacy layer (@layer legacy, wrapped once and otherwise as it was, but for five
   declarations no longer !important); these rules sit outside it, so where they speak they decide, whatever the weight
   of the rule they replace. A legacy !important still holds: [hidden], .gone and the rest keep their word. */
:root {
  --r1: 4px; --r2: 8px; --r3: 12px;                           /* controls · bands, panels and menus · sheets and dialogs */
  --grey: #6e6b64;                                            /* the one grey: 4.5:1 or more on every ground Crome draws */
  --band: #f7f6f3;                                            /* this one, or open */
  --outline: #c9c5bc; --outline-hover: #a19d94;               /* a control's one line */
  --sheet-line: #e3e1db; --sheet-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  --float-line: #e3e1db; --float-shadow: 0 2px 6px rgba(0, 33, 71, .04), 0 12px 32px rgba(0, 33, 71, .10);
  --t: 180ms; --ease: cubic-bezier(.22, .61, .36, 1); --rise: 4px;
}
/* the app's own tokens take the system's values, so every rule that uses them draws with the same grey and shade */
body { --facts: var(--grey); --faint: var(--grey); --quiet: var(--grey); --band2: var(--band); --here: var(--band); --hair: var(--line); }
::placeholder { color: var(--grey); opacity: 1; }

/* ================================================================ the ground: the sidebar */
nav.side { background: var(--rail); border-right-color: var(--line); }
nav.side .me { border-top-color: var(--line); }
nav.side a.item { font-size: 13px; height: 44px; margin-top: 0; background: none; isolation: isolate; color: var(--ink); }
nav.side a.item .w { font-size: 13px; color: var(--ink); }
nav.side a.item::before { content: ""; position: absolute; inset: 3px 0; border-radius: var(--r2); z-index: -1; transition: background-color var(--t) var(--ease); }
nav.side a.item:hover::before { background: var(--hover); }
nav.side a.item.on::before { background: var(--pill); }
nav.side a.item .n { font-size: 13px; color: var(--grey); }
nav.side a.item.on .n { color: var(--ink); }
nav.side .n2 { font-size: 13px; color: var(--ink); }
nav.side .r2 { font-size: 13px; color: var(--grey); }

/* ================================================================ the sheet and its folder tabs: one white, one line, one corner */
.sheet { border: 1px solid var(--sheet-line); border-radius: var(--r3); box-shadow: var(--sheet-shadow); }
.ftabs:has(> .on:first-child) + .sheet { border-top-left-radius: 0; }
nav.ftabs.ptabs:has(> a.ct.c.on) + .psheet { border-top-right-radius: 0; }
/* a sheet is as long as what it holds: no expanse of empty white below the last row; past the window it scrolls, as before */
@media (min-width: 701px) {
  body[data-party] .sheet.psheet, body[data-parties] .sheet.plist { flex: 0 1 auto; }
}
/* folder tabs: 13, the chosen one Medium and white; its top corners and its feet take the sheet's corner */
.ftabs:not(.ptabs) { gap: 2px; padding-left: 0; align-items: flex-end; }
.ftabs:not(.ptabs) > :is(a, span):not(.addlink):not(.ftabs2) { position: relative; font-size: 13px; line-height: 20px; padding: 10px 24px 9px;
  color: var(--grey); font-weight: 400; border: 1px solid transparent; border-bottom: 0; border-radius: var(--r3) var(--r3) 0 0;
  transition: color var(--t) var(--ease); }
.ftabs:not(.ptabs) > :is(a, span):not(.addlink):hover { color: var(--navy); }
.ftabs:not(.ptabs) > :is(a, span).on:not(.addlink) { background: #fff; color: var(--ink); font-weight: 500;
  border-color: var(--sheet-line); margin-bottom: -1px; padding-bottom: 10px; }
.ftabs > .addlink { font-size: 13px; font-weight: 500; color: var(--navy); }
nav.ftabs.ptabs > a { border-radius: var(--r3) var(--r3) 0 0; }
nav.ftabs.ptabs > a.on { border-color: var(--sheet-line); }
/* the feet: the chosen tab curves out into the sheet with the radius of its top */
:is(.ftabs:not(.ptabs) > :is(a, span).on:not(.addlink), nav.ftabs.ptabs > a.on)::before,
:is(.ftabs:not(.ptabs) > :is(a, span).on:not(.addlink), nav.ftabs.ptabs > a.on)::after {
  content: ""; position: absolute; bottom: 0; width: var(--r3); height: var(--r3); pointer-events: none; }
:is(.ftabs:not(.ptabs) > :is(a, span).on:not(.addlink), nav.ftabs.ptabs > a.on)::before { left: calc(-1 * var(--r3)); right: auto;
  background: radial-gradient(circle at 0 0, var(--frame) calc(var(--r3) - 1.2px), var(--sheet-line) calc(var(--r3) - .8px), var(--sheet-line) calc(var(--r3) - .2px), #fff calc(var(--r3) + .2px)); }
:is(.ftabs:not(.ptabs) > :is(a, span).on:not(.addlink), nav.ftabs.ptabs > a.on)::after { right: calc(-1 * var(--r3)); left: auto;
  background: radial-gradient(circle at 100% 0, var(--frame) calc(var(--r3) - 1.2px), var(--sheet-line) calc(var(--r3) - .8px), var(--sheet-line) calc(var(--r3) - .2px), #fff calc(var(--r3) + .2px)); }
.ftabs:not(.ptabs) > .on:first-child::before, nav.ftabs.ptabs > a.dt.on::before { display: none; }
/* 2.78.0: the Compliance tab keeps its right-hand foot, as 2.76.0 drew it; on a phone, where it meets the sheet's edge, the legacy layer still hides it */
/* a party's tabs carry its status chip: the chip as every chip, in normal writing */
nav.ftabs.ptabs > a.ct .chip { font-size: 13px; font-weight: 400; letter-spacing: .01em; text-transform: none; border-radius: var(--r1); }
nav.ftabs.ptabs > a.ct .chip.none { background: transparent; color: var(--grey); }
nav.ftabs.ptabs > a.ct:hover .chip.none { background: var(--hover); }

/* ================================================================ the band: one fill, no line, one corner (8) */
/* this contract's row */
table.here td { background-color: var(--band); box-shadow: none; }
table.here td:first-child { border-radius: var(--r2) 0 0 var(--r2); }
table.here td:last-child { border-radius: 0 var(--r2) var(--r2) 0; }
/* the Overview's figures, the markup's panel, a fold's note */
:is(.ov-figs, .csheet .mkstage, .csheet details.fold > p.foldtext) { background: var(--band); border-radius: var(--r2); box-shadow: none; }
.ov-figs > div { border-left-color: var(--line); }
/* an open term: the band over its rows, the lines between them the sheet's line, its four corners rounded */
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened > td,
body.framed[data-contract] .psheet table.rep.party.stage tr.sub:not([hidden]) > td { background-color: var(--band); background-image: linear-gradient(var(--line), var(--line)); }
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened > td { box-shadow: none; }
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened > td:first-child { border-top-left-radius: var(--r2); }
body.framed[data-contract] .psheet table.rep.party.stage tr.term.opened > td:last-child { border-top-right-radius: var(--r2); }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub:not([hidden]) > td:is(:first-child, :last-child) { box-shadow: none; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.cardend > td { background-image: none; box-shadow: none; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.cardend > td:first-child { border-bottom-left-radius: var(--r2); }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub.cardend > td:last-child { border-bottom-right-radius: var(--r2); }
body.framed[data-contract] .psheet details.fold[open] > table.rep.party > tbody > tr > td { background-color: var(--band); background-image: linear-gradient(var(--line), var(--line)); }
body.framed[data-party] .psheet table.rep.party :is(tr.pj.open, tr.pjs) > td, body.framed[data-party] .psheet table.rep.party.compliance tr.sub > td { background-color: var(--band); }
/* a chip with nothing to say, pointed at: the hover shade */
:is(.chip.none, a.chip.none, button.chip.none):hover { background: var(--hover); }

/* ================================================================ the float: one surface, one line, one shadow; menus 8, the dialog and the New box 12 */
:is(.menu, nav.side .memenu, .ownlist) { background: #fff; border: 1px solid var(--float-line); border-radius: var(--r2); box-shadow: var(--float-shadow); }
body[data-contract] .menu { padding: 6px 0; }
:is(.dclear, .newbox) { background: #fff; border: 1px solid var(--float-line); border-radius: var(--r3); box-shadow: var(--float-shadow); }
.dltip { border-radius: var(--r1); }
/* a menu's items: 13, Navy, each 36 high; the hint beside each in the grey */
.menu :is(.mi, button.mi, label.mi) { font-size: 13px; line-height: 20px; padding: 8px 16px; color: var(--navy); }
.menu .mi.danger { color: var(--red); }
.menu .mi:hover { background: var(--hover); }
.menu .mi .quiet { font-size: 13px; color: var(--grey); }
.menu hr { border-top-color: var(--line); margin: 6px 0; }
.menu .panel { padding: 0 16px 8px 28px; }
:is(.menu .panel input[type=text], .menu .panel input:not([type]), .menu .delform input) {
  height: 28px; border: 1px solid var(--line); border-bottom-color: var(--outline); border-radius: var(--r1); font-family: var(--head); font-size: 13px; }
.menu .panel button:not(.chip):not(.mi) { height: 24px; border-radius: var(--r1); border: 0; box-shadow: inset 0 0 0 1px var(--outline);
  font-size: 13px; color: var(--navy); background: #fff; }
.menu .panel label.check, .menu .panel label.check .r { font-size: 13px; }

/* ================================================================ controls: chips and buttons 24 high, words 13, corner 4 */
:is(a, span, button, label, select).chip { border-radius: var(--r1); font-size: 13px; letter-spacing: .01em; }
:is(a, span).chip.none { background: transparent; color: var(--grey); }
/* buttons in rows: 124 by 24, Navy words and one quiet line; pointed at, the hover shade; the chosen option Navy */
:is(button.chip.act, a.chip.act, button.chip.pick, label.chip.pick, .chip.mkact, .chip.dl, button.chip.tocheck):not(.chosen):not(.checked):not(.red):not(.orange):not(.yellow):not(.green):not(.green2):not(.busy) {
  background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--outline); font-size: 13px; border-radius: var(--r1);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
:is(button.chip.act, a.chip.act, button.chip.pick, label.chip.pick, .chip.mkact, .chip.dl, button.chip.tocheck):not(.chosen):not(.checked):not(.red):not(.orange):not(.yellow):not(.green):not(.green2):not(.busy):not(:disabled):hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--outline-hover); filter: none; }
:is(button.chip.pick.chosen, label.chip.pick:has(input:checked)) { background: var(--navy); color: #fff; box-shadow: none; border-radius: var(--r1); }
.chip.busy { box-shadow: inset 0 0 0 1px var(--outline); }
/* the dialog's two: the way on in Navy, Cancel in words alone */
.dsheet .chipc { border-radius: var(--r1); font-size: 13px; }
.dsheet .chipc.go { background: var(--navy); color: #fff; }
.dsheet .chipc.none { color: var(--grey); }
.dsheet .chipc.none:hover { background: var(--hover); color: var(--ink); }
/* the New box's plus, and the dialog's tick boxes and fields: the controls' line */
button.plus { border-color: var(--outline); }
.dsheet label.tick > i { border-radius: 3px; border-color: var(--tick-edge); }
.dsheet .f.need input.pick.txt { border-bottom-color: var(--outline); }
/* links that stand alone: 13, Medium, Navy; underlined only when pointed at. A link inside a sentence keeps its underline */
:is(a.ov-go, button.morebtn.sact) { font-family: var(--head); font-size: 13px; font-weight: 500; color: var(--navy); }
:is(a.ov-go, button.morebtn.sact):hover { text-decoration: underline; text-underline-offset: 3px; }
.newpage p.or { font-size: 13px; color: var(--grey); }
.newpage p.or a { color: var(--navy); font-weight: 500; text-underline-offset: 3px; }

/* ================================================================ type: one scale. Titles and names in Crome Serif; the interface in Source Sans 13 */
:is(h1.pname, #hello, .newpage h1.hello, .bar h1, h1.ptitle) { font-size: 24px; line-height: 32px; letter-spacing: 0; }
h1.pname { height: auto; }
/* the drop dialog's title, the document's name: 18 */
.dsheet input.ttl { font-size: 18px; line-height: 26px; }
/* names: Crome Serif 15; a contract's own name leads its sheet at 17 */
.ititle, span.fn, span.lbl, .ov-cnt, a.ov-pn, ul.prows a.name, .mkstage .it .w { font-size: 15px; }
table.here .ititle { font-size: 17px; line-height: 24px; }
/* the contract's own words (the playbook's positions, a markup's quote): a step below the names, 14 */
tr.sub :is(.pl, .shown) { font-size: 14px; line-height: 21px; }
tr.sub :is(del, ins) { font-size: 14px; }
tr.sub .pl .pw { font-family: var(--head); font-size: 13px; line-height: 21px; color: var(--grey); }
/* the interface: 13, notes in the one grey */
:is(.sr label.sfind input, input#find) { font-size: 13px; }
p.dropline { font-size: 13px; color: var(--grey); }
:is(span.ln, span.n, span.holder, span.quiet, span.dec, span.cl, td.hd, .ov-s, .ov-shr, .mkstage .hw, .mkstage .it .c) { font-size: 13px; color: var(--grey); }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub > td.el, tr.sub td.q.pb { font-size: 13px; color: var(--grey); }
.dsheet :is(input.pick.txt, select.pick, .val) { font-size: 13px; }
.dsheet :is(span.h, p.sub, label.tick) { font-size: 13px; color: var(--grey); }
.newbox .ph { font-size: 15px; color: var(--grey); letter-spacing: 0; }
.mkstage .pgno { font-size: 12px; }

/* ================================================================ capitals: they name the parts and label the data, in one style */
.plist .sr.heads .sh, .ov-figs p.ov-eb, .ov-sec .ov-h > p.ov-eb, .ov-rkh span, .ov-t th, .ov-colhead, .ov-paper .ov-ph, tr.sec > td.sech,
body[data-overview] .plist ul.prows > li.ov-vh .sh, body[data-contract] .csheet .mlab .lb, body[data-contract] .csheet .lhead .k {
  font-family: var(--head); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--grey); }

/* ================================================================ figures: 22 Semibold, in ink: Crome's blue never colours a practice's own figures */
p.ov-n { font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
p.ov-n small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--grey); }

/* ================================================================ the Overview: the sheet's one inset (24), slim bars with square ends, ranks without circles */
.ov-sheet { padding: 0 24px; }
.ov-anchor { margin: 0 -24px; padding: 12px 8px 0; }
.ov-figs { padding: 0 16px; }
.ov-sbar { height: 8px; }
.ov-sbar i, .ov-bar b { height: 8px; border-radius: 1px; }
.ov-dot { border-radius: 1px; }
.ov-rkr { border-top-color: var(--line); }
.ov-rkr:last-child { border-bottom-color: var(--line); }
.ov-rkr em { font-size: 12px; font-weight: 500; color: var(--grey); background: none; text-align: left; font-variant-numeric: tabular-nums; }
:is(.ov-rkr .ov-val, .ov-hb .ov-val) { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ov-rkr .ov-shr { font-variant-numeric: tabular-nums; }
.ov-slab span { font-size: 13px; color: var(--grey); }
.ov-slab b { font-size: 13px; font-weight: 600; color: var(--ink); }
:is(.ov-hb, .ov-t td) { border-color: var(--line); }
:is(.ov-tile, .ov-two > div, .ov-year) { border-left-color: var(--line); }

/* ================================================================ lines: the one line */
:is(.psheet > .sr, .chead .sr) { border-bottom-color: var(--line); }
.csheet .mkstage .pgw { border-radius: var(--r1); }
.plist ul.prows > li { border-color: var(--line); }

/* ================================================================ focus: a Navy ring, 2 out, on every control; a field written on a line shows a firm Navy line */
:is(a, button, summary, [tabindex], label.chip, input[type=checkbox], input[type=radio]):focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* a field to type in keeps its own sign: its line or its edge turns Navy (a ring round words being typed reads as a box) */
.dsheet :is(input.pick.txt, input.ttl, select.pick):focus-visible { outline: 0; border-bottom: 2px solid var(--navy); }
/* the search keeps its own: the glass turns Navy, the caret shows */

/* ================================================================ motion: one curve, one speed; floats arrive, opened things fade in, nothing bounces */
@keyframes an-float-in { from { opacity: 0; transform: translateY(calc(-1 * var(--rise))); } to { opacity: 1; transform: none; } }
@keyframes an-fade-in { from { opacity: 0; } to { opacity: 1; } }
.menu:not([hidden]) { animation: an-float-in var(--t) var(--ease) both; }
body.framed[data-contract] .psheet table.rep.party.stage tr.sub:not([hidden]) > td { animation: an-fade-in var(--t) var(--ease) both; }
.csheet details.fold[open] > :not(summary) { animation: an-fade-in var(--t) var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  :is(.menu:not([hidden]), tr.sub > td, details.fold[open] > :not(summary)) { animation: none; }
}

/* ================================================================ the contract page: one level fewer (Stage 3) */
/* a stage's row: 48 high; its title in capitals, its note, and its next steps at the row's right end */
body[data-contract] .csheet section.stg { position: relative; }
body[data-contract] .csheet .mlab { align-items: center; height: 48px; margin: 0; padding: 0 300px 0 22px; }
body[data-contract] .csheet .mlab .lb { line-height: 20px; }
body[data-contract] .csheet .mlab:hover .lb { color: var(--navy); }
body[data-contract] .csheet .mlab .ln { font-size: 13px; line-height: 20px; }
body[data-contract] .csheet .stg-acts { position: absolute; right: 0; top: 12px; display: flex; gap: 20px; align-items: center; z-index: 1; }
body[data-contract] .csheet .stg-acts form { display: contents; }
body[data-contract] .csheet .stg-acts :is(.chip, button) { margin: 0; width: 124px; flex: none; }
body[data-contract] .csheet .stg-acts .later { display: none; }          /* Add new version waits for Undo to go, as before */
/* Preparing and Reading: in ink where the next step will be, not greyed as if it could not be pressed; nothing pulses */
body[data-contract] .csheet .stg-acts .chip.busy { display: inline-block; box-sizing: border-box; height: 24px; padding: 1px 6px 0; border-radius: var(--r1); background: var(--sheet);
  color: var(--navy); box-shadow: inset 0 0 0 1px var(--outline); font-family: var(--head); font-size: 13px; line-height: 23px; text-align: center; white-space: nowrap; cursor: default; }
body[data-contract] .csheet .stg-acts .chip.undo { transition: opacity .5s ease; }
body[data-contract] .csheet .stg-acts .chip.undo.gone { opacity: 0; }
/* stages folded to their row sit close; a little room after one that is open */
body[data-contract] .csheet .tabbody > .stg:has(> .mgrp:not([hidden])) + .stg,
body[data-contract] .csheet .tabbody > .stg:last-of-type:has(> .mgrp:not([hidden])) ~ .folds { margin-top: 16px; }
/* what a stage holds sits directly under its row: a fold has no row of its own, and an empty one is not drawn */
body[data-contract] .csheet .mgrp { border-top: 1px solid var(--line); }
body[data-contract] .csheet .mgrp > details.fold > summary { display: none; }
body[data-contract] .csheet .mgrp > details.fold[data-empty] { display: none; }
body[data-contract] .csheet .mgrp details.fold > .kidbody { padding-left: 0; }
body[data-contract] .csheet details#mkfold .mkstage { margin-top: 8px; margin-bottom: 8px; }
/* a list's own small label (Versions, History; once Sent, Markup and Review sheet), its note in the notes column */
body[data-contract] .csheet .lhead { display: flex; align-items: baseline; height: 40px; padding: 18px 0 0 22px; box-sizing: border-box; }
body[data-contract] .csheet .lhead .k { flex: 0 0 196px; }
body[data-contract] .csheet .lhead .n { font: 400 13px/20px var(--head); color: var(--grey); }
/* on a narrower screen a stage's note follows its title, so the next steps leave it room */
@media (max-width: 900px) { body[data-contract] .csheet .mlab .lb { flex: 0 0 auto; margin-right: 16px; } }
/* the phone keeps its own design for later; until then nothing on it is hidden or crowded: a stage's next steps go under its
   row, a list's label sits before its note, and a row grows to show its name, with its status and next step on a line below */
@media (max-width: 700px) {
  body[data-contract] .csheet .mlab { height: auto; min-height: 48px; padding: 0 16px 0 22px; }
  body[data-contract] .csheet .stg-acts { position: static; flex-wrap: wrap; gap: 8px 12px; padding: 0 0 12px 22px; }
  body[data-contract] .csheet .lhead { flex-wrap: wrap; height: auto; min-height: 40px; padding-bottom: 4px; }
  body[data-contract] .csheet .lhead .k { flex: 0 0 auto; margin-right: 12px; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) { height: auto; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 4px 0 14px; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > :is(td.el, td.hd) { overflow: visible; white-space: normal; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > td.rk { grid-column: 1; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > td.mk { grid-column: 2; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > :is(td.rk, td.mk) { margin: 0; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:not(.sub):not(.sec) > td.rk > .chip { vertical-align: top; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:has(> td.mk > form.checkform) > td.rk { display: none; }
  body.framed[data-contract] .psheet table.rep.party.stage > tbody > tr:has(> td.mk > form.checkform) > td.mk { grid-column: 1 / -1; }
}
/* crome.css 2.77.0: AN */

/* ---------- Phase AO (2.78.0): the one blue and one of everything
   Oxford Blue (#002147) is the one brand blue, and Navy is its name in every rule; the Overview's steps are remade from it at
   the same brightness, so every contrast stays as it was. One line (#e3e1db), one grey (#6e6b64), one outline (#c9c5bc), one
   tick box (corner 3, an edge of 3.3:1), one look for a button pointed at. Bands round at 8, fields and buttons at 4, the
   small motions take 180 ms. The Overview's figures are in ink: the brand blue is for Crome's own marks, links and actions,
   never a practice's figures. Nothing moves or resizes but the Compliance tab's foot, back as 2.76.0 drew it. */
:root {
  --oxford-blue: #002147; --navy: var(--oxford-blue);         /* the one brand blue; Navy is its name in every rule */
  --tick-edge: #928d84;                                       /* a tick box's edge: 3.3:1 on white, as AA asks of a control */
}
/* a ticked box in the drop dialog keeps the Navy edge every ticked box has */
.dsheet label.tick.on > i { border-color: var(--navy); }
/* an open term's band rounds at its four corners only: under the pointer the term's own row keeps square lower corners */
@media (min-width: 701px) {
  body.framed[data-contract] .psheet table.rep.party.stage tr.term.opens.opened:hover > td:is(:first-child, :last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}
/* every other outline button, pointed at, the same: Add party and Add several, Look up, Withdraw, Add signed copy (and no
   status chip's darkening on any of them) */
:is(button.chip.out, button.ghost.small, label.chip.act):not(.chosen):not(.checked):not(.red):not(.orange):not(.yellow):not(.green):not(.green2):not(.busy):not(:disabled):hover {
  background: var(--hover); box-shadow: inset 0 0 0 1px var(--outline-hover); filter: none; }
/* crome.css 2.78.0: AO */