/* ldu/pages-work.css: the dashboard and the engagements pages in the LDU look (slice 3).

   main's own markup, restyled: the page sections carry an extra `ldu-page` class token and the rules below key on it
   together with the page's own class (.dash, .eng, .marks) and, where a rule must not leak into the new Leads, Projects
   and Agreement pages that share names like .eng__form and .spend__h, on the page's data-testid. Nothing is
   removed or renamed; the visual order is the DOM order.

   Source: ui-cleanup/milan's ldu/pages.css and components.css (page frame, stat card, list row, file cell, datatable,
   badge, empty state). Colours are all var() of fraction-ds tokens; hover moves colour, a border step or a wash in
   150ms and never lifts or casts a shadow. Spacing held back in ldu/tokens.css (--s3, --s5, --s6) is written as px here. */

/* ── the page frame ─────────────────────────────────────────────
   One column filling the content well, 32px between groups, a lede that sits 8px under its title. The frame is a size
   container so a grid inside it follows the room it has, not the window (the rail takes 240px of it). */
.page.ldu-page {
  box-sizing: border-box;
  container: page / inline-size;
  display: grid;
  gap: 32px;
  align-content: start;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: var(--pad-main, 32px);
}
.page.ldu-page > * { min-width: 0; }
.page.ldu-page :is(p.muted, .card > p) { max-width: 75ch; }
@media (max-width: 720px) {
  .page.ldu-page { gap: 24px; }
}

.page.ldu-page .card > h2.spend__h { margin: 0 0 16px; font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.page.ldu-page .card > h3.spend__h { margin: 32px 0 12px; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }

/* ── dashboard: the numbers ─────────────────────────────────────
   Each one is components/ldu/_stat (a link card when it opens the full view); only the grid is here: two a row, four from 760px. */
.dash__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container page (min-width: 760px) { .dash__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── dashboard: the setup guidance (direction C, docs/product/dashboard-guidance.md; dashboard/_guide) ──
   The bar under the page header: the round progress, "Step n of m", the task, why it pays off, one button. Its glass (see-through, blurred, lilac
   only at the two sides, a lilac border and a soft inner shadow) is for this bar only. .guide-wrap is display: contents, so the bar is one of the page's
   own rows. */
.guide-wrap { display: contents; }
.guide {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 16px 24px; border-radius: var(--r-3);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--select-bg) 55%, transparent) 0%, color-mix(in srgb, var(--select-bg) 25%, transparent) 12%, transparent 30%,
      transparent 70%, color-mix(in srgb, var(--select-bg) 25%, transparent) 88%, color-mix(in srgb, var(--select-bg) 55%, transparent) 100%),
    color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg) 90%, transparent), inset 0 0 24px color-mix(in srgb, var(--select-bg) 35%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
}
/* dark: --select-bg is a bright grey-lilac there, so the sides take a little accent instead and the middle is the raised surface (the text stays above 4.5:1) */
[data-theme="dark"] .guide {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 12%, transparent 30%,
      transparent 70%, color-mix(in srgb, var(--accent) 8%, transparent) 88%, color-mix(in srgb, var(--accent) 16%, transparent) 100%),
    var(--bg-2);
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
}
.guide__ring { position: relative; width: 56px; height: 56px; min-width: 56px; }
.guide__ring svg { display: block; width: 56px; height: 56px; max-width: none; transform: rotate(-90deg); }
.guide__ring circle { fill: none; stroke-width: 5; }
.guide__ring-track { stroke: color-mix(in srgb, var(--accent) 14%, transparent); }
.guide__ring-fill { stroke: var(--accent); stroke-linecap: round; }
.guide__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.guide__text { display: grid; gap: 2px; min-width: 0; }
.page.ldu-page .guide__step { margin: 0; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); }
.page.ldu-page .guide h2 { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); }
.page.ldu-page .guide__why { margin: 0; max-width: 80ch; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-2); }
.guide__cta { flex: none; }
@media (max-width: 640px) {
  .guide {
    grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; padding: 16px; align-items: start;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--select-bg) 50%, transparent) 0%, transparent 35%, transparent 65%, color-mix(in srgb, var(--select-bg) 50%, transparent) 100%),
      color-mix(in srgb, var(--bg) 72%, transparent);
  }
  .guide__cta { grid-column: 1 / -1; justify-content: center; }
  .page.ldu-page .guide__why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* two lines; the modal holds the task */
}

/* the step modals (modal_tag): a little wider than the default box on a wide screen, so the bio has room; under 720 px modal_tag's own bottom sheet */
@media (min-width: 721px) { .modal-scrim .modal.ldu-modal__box.guide-modal { width: min(560px, calc(100vw - 32px)); } }
.guide-modal .textarea { min-height: 0; resize: vertical; }
.guide-modal :is(.input, .textarea) { background: var(--bg-2); }   /* white like the Industry dropdown: the page's paper grey reads as disabled in a white box (Milan, 21 Oct) */
.guide-modal textarea[rows="7"], .guide-modal textarea[rows="8"] { min-height: 168px; }
.guide__choices { margin: 0; padding: 0; border: 0; }
.guide__choices > legend { padding: 0; margin-bottom: 8px; }
.guide__group { margin: 4px 0 0; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); }
.guide__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.guide__pick { position: relative; font-weight: 400; }   /* an outline button (.btn) holding a hidden radio or checkbox */
.guide__pick-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.guide__pick:has(:focus-visible) { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
@media (max-width: 720px) { .guide__pick { min-height: 44px; } }
.guide-modal :is(.input, .textarea)[aria-invalid="true"]:focus-visible, .guide-modal .is-invalid .ldu-dd__trigger { outline-color: var(--danger); border-color: var(--danger); }
.guide__dd { width: 100%; }
/* the Industry list opens OVER the modal instead of pushing it taller (Milan, 21 Oct): the box and body let it out, and only this modal has one */
.modal-scrim .modal.ldu-modal__box.guide-modal:has(.guide__dd), .guide-modal:has(.guide__dd) .ldu-modal__body { overflow: visible; }
.guide-modal .guide__dd .ldu-dd__panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; margin-top: 0; max-height: 240px; overflow-y: auto; }
@media (max-width: 720px) { .guide-modal .guide__dd .ldu-dd__panel { max-height: 184px; } }   /* stays on a phone's screen; the list scrolls */
.guide__terms { align-items: flex-start; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-2); }
.guide__terms .check { margin-top: 2px; }
.guide__dd .ldu-dd__trigger { width: 100%; justify-content: space-between; }

/* the setup helper: a black round icon button at the bottom right; on hover or focus the checks draw in and its name slides out to the left
   (no motion under reduced motion). It opens the checklist in a small panel above it. On a phone it sits on the Menu pill's line. */
.fabwrap { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: grid; justify-items: end; gap: 12px; }
.fab {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--shadow-menu);
  transition: background-color var(--dur);
}
.fab .icon { width: 20px; height: 20px; }
.fab:hover, .fab[aria-expanded="true"] { background: var(--btn-primary-hover); }
.fab:is(:hover, :focus-visible) .icon { animation: fab-draw 900ms var(--ease-out-quint) both; }
@keyframes fab-draw { from { stroke-dasharray: 40; stroke-dashoffset: 40; } to { stroke-dasharray: 40; stroke-dashoffset: 0; } }
.fab:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
/* now and then a soft lilac halo draws the eye to it (Milan, 21 Oct): 1.5 s after the page opens, then every 24 s, four times in all, then it stays still.
   Each one fades all the way in and all the way out (about 3.4 s), so it never cuts off. None under reduced motion. */
.fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 28px 10px color-mix(in srgb, var(--accent) 30%, transparent);   /* lilac in both themes */
  animation: fab-glow 24s ease-in-out 1.5s 4 both;
}
@keyframes fab-glow {
  0% { opacity: 0; transform: scale(.92); }
  6% { opacity: 1; transform: scale(1.04); }
  14% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}
.fab__tip {
  position: absolute; right: calc(100% + 8px); top: 50%; translate: 8px -50%; opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-size: var(--fs-meta); font-weight: 600;
  transition: opacity 240ms var(--ease-out-quint), translate 240ms var(--ease-out-quint);
}
.fab:is(:hover, :focus-visible):not([aria-expanded="true"]) .fab__tip { opacity: 1; translate: 0 -50%; }
@media (prefers-reduced-motion: reduce) { .fab .icon, .fab::before { animation: none !important; } .fab__tip { transition: none; translate: 0 -50%; } }
.sp { width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: var(--r-3); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-menu); }
.sp[hidden] { display: none; }
.sp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.page.ldu-page .sp h2 { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; color: var(--ink); }
.guide__meter { display: flex; align-items: center; gap: 12px; }
.guide__meter b { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.guide__track { flex: 1 1 auto; height: 8px; border-radius: 999px; overflow: hidden; background: var(--ldu-wash); }
.guide__track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.sp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp__row > :is(a, button), .sp__row.is-done {
  box-sizing: border-box; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--r-2); background: transparent; font: inherit; font-size: var(--fs-ui); text-align: left; color: var(--ink); text-decoration: none;
}
.sp__row > :is(a, button) { cursor: pointer; transition: background-color var(--dur); }
.sp__row > :is(a, button):hover { background: var(--ldu-wash); }
.sp__row > :is(a, button):focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: -2px; }
.sp__row > :is(a, button) .icon { color: var(--ink-3); }
.sp__row.is-done { color: var(--ink-3); }
.sp__state { font-size: var(--fs-meta); }
.sp__mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ldu-wash); font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.sp__mark .icon { width: 14px; height: 14px; }
.sp__row.is-done .sp__mark { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.sp__row.is-now > :is(a, button) { background: var(--ldu-wash); font-weight: 600; }
.sp__row.is-now .sp__mark { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
@media (max-width: 860px) {
  .fabwrap { right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 101; }   /* on the Menu pill's line, above the bar (z 100) */
  .fabwrap:has(.sp:not([hidden])) { left: 16px; }
  .sp { width: auto; max-width: none; justify-self: stretch; }
  .sp__close { min-width: 44px; min-height: 44px; }
}
.page.ldu-page:has(.fabwrap) { padding-bottom: 88px; }   /* the last row stays clear of the helper button */

/* ── engagements: one room, one row ─────────────────────────────
   A lead tile with the room's glyph, the name over who and when, the status badge. The title link is stretched over the
   whole row, so the row is the link and the badge stays where it is. */
.eng__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.page.ldu-page .eng__row {
  position: relative;
  flex-direction: row; align-items: center; gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color var(--dur), border-color var(--dur);
}
.page.ldu-page .eng__row:hover { background: var(--ldu-raise); border-color: var(--ink-4); }
.eng__row::before {
  content: ""; flex: none; align-self: center;
  width: 40px; height: 40px; border-radius: var(--r-2);
  background: var(--ldu-wash); transition: background-color var(--dur);
}
.eng__row::after {   /* the glyph (message-square), a mask so it takes the text colour */
  content: ""; position: absolute; top: 50%; left: 30px; width: 20px; height: 20px; margin-top: -10px;
  background: var(--ink-2); transition: background-color var(--dur);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.eng__row:hover::before { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.eng__row:hover::after { background: var(--accent); }
.eng__link { flex: 1 1 auto; min-width: 0; gap: 2px; text-decoration: none; }
.eng__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the row is the link */
.eng__link:focus-visible { outline: none; }
.eng__link:focus-visible::after { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.eng__link > strong { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.eng__link > small { font-size: var(--fs-ui); line-height: 1.4; color: var(--ink-2); }
.page.ldu-page h2.eng__group {
  margin: 0 0 -20px;   /* 12px to its own list, 32px from the previous group */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: var(--fs-h2); line-height: 1.4; letter-spacing: -0.01em;
}
.eng__group > small { font-family: var(--sans); font-size: var(--fs-ui); font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
@media (max-width: 640px) {
  .page.ldu-page .eng__row { flex-wrap: wrap; padding: 16px; }
  .eng__row::before { align-self: flex-start; }
  .eng__row::after { top: 26px; left: 26px; margin-top: 0; }   /* the tile stays beside the title line when the badge drops under it */
  .eng__link { flex: 1 1 calc(100% - 56px); }   /* the badge drops under the text, in line with it (40px tile + 16px gap) */
  .eng__row > .chip { margin-left: 56px; }
}

/* ── deliverables and a collection: the table ───────────────────
   The frame, head, cells and links are .ldu-table (ldu/components.css); this keeps the columns on one line and steps the
   placeholder columns (version, status) aside under 900px, the author and date under 640px; what is left scrolls in its frame. */
.eng__table > table { min-width: max-content; }
.eng__table td { white-space: nowrap; }
.eng__table td > .icon { display: inline-block; margin-right: 4px; vertical-align: -2px; color: var(--ink-3); }

/* a row that opens something (tr.eng__rowlink): its first link is stretched over the whole row, so the row is one big target and still a real <a> for the keyboard.
   Hover is the wash on the cells, a colour change only; the row's own buttons sit above the stretched link and never light the row. */
.eng__table tr.eng__rowlink { position: relative; cursor: pointer; }
.eng__table tr.eng__rowlink > td { transition: background-color var(--dur); }
.eng__table tr.eng__rowlink:hover:not(:has(.btn:hover)) > td { background: var(--ldu-wash); }
.eng__table tr.eng__rowlink a.eng__rowlink-a, .eng__table tr.eng__rowlink a.eng__rowlink-a:hover { color: var(--ink); text-decoration: none; }   /* the fill is the hover, never a lilac title */
.eng__table tr.eng__rowlink a.eng__rowlink-a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.eng__table tr.eng__rowlink a.eng__rowlink-a:focus-visible { outline: none; }
.eng__table tr.eng__rowlink a.eng__rowlink-a:focus-visible::after { outline: var(--ring-w) solid var(--ring); outline-offset: calc(-1 * var(--ring-w)); }
.eng__table tr.eng__rowlink .btn { position: relative; z-index: 1; }

/* a file or note: tile, name, size under it */
.eng__file { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; min-width: 0; }
.eng__file > br { display: none; }
.eng__file > .icon {
  grid-row: 1 / span 2; box-sizing: content-box;
  width: 18px; height: 18px; padding: 9px; border-radius: var(--r-2);
  background: var(--ldu-wash); color: var(--ink-2);
}
.eng__file > strong, .eng__file > small { max-width: 36ch; overflow: hidden; text-overflow: ellipsis; }
.eng__file > strong { grid-column: 2; font-weight: 500; }
.eng__file > small { grid-column: 2; }

/* the row's actions: a strip of DS ghost icon buttons (.btn--ghost.btn--icon; the label is the title and a .sr-only span) */
.page.ldu-page .eng__table td.eng__actions { display: table-cell; text-align: right; }
.eng__strip { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-end; gap: 2px; }
.eng__strip .eng__form { display: contents; }
.coll__move { position: relative; display: inline-block; text-align: left; white-space: normal; }
.coll__move > summary { list-style: none; }
.coll__move > summary::-webkit-details-marker { display: none; }
.page.ldu-page .coll__move[open] > .coll__form {
  margin-top: 8px; padding: 12px; min-width: 16rem;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg);
}
@media (max-width: 900px) {
  [data-testid="deliverables"] .eng__table :is(th, td):nth-child(5),
  [data-testid="deliverables"] .eng__table :is(th, td):nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  [data-testid="deliverables"] .eng__table :is(th, td):nth-child(3),
  [data-testid="deliverables"] .eng__table :is(th, td):nth-child(4),
  [data-testid="collection-page"] .eng__table :is(th, td):nth-child(2),
  [data-testid="collection-page"] .eng__table :is(th, td):nth-child(3) { display: none; }
}

/* ── collections: a folder per row, then the form that makes one ── */
.coll__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; }
.coll__list > li {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 12px 0; border-top: 1px solid var(--line); min-width: 0;
}
.coll__list > li:first-child { border-top: 0; padding-top: 0; }
.coll__list > li:last-child { padding-bottom: 0; }
.coll__list > li > a { color: var(--ink); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.coll__list > li > a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.coll__list > li > small { font-size: var(--fs-meta); color: var(--ink-2); }
/* the collections of the deliverables page: tile, name over its count, the whole row opens it */
:is([data-testid="collection"], [data-testid="shared-collections"] > li) {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 0;
}
:is([data-testid="collection"], [data-testid="shared-collections"] > li)::before {
  content: ""; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: var(--r-2);
  background: var(--ldu-wash); transition: background-color var(--dur);
}
:is([data-testid="collection"], [data-testid="shared-collections"] > li)::after {   /* the glyph (folder) */
  content: ""; position: absolute; left: 10px; width: 20px; height: 20px;
  background: var(--ink-2); transition: background-color var(--dur);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is([data-testid="collection"], [data-testid="shared-collections"] > li) > a { grid-column: 2; grid-row: 1; align-self: end; }
:is([data-testid="collection"], [data-testid="shared-collections"] > li) > a::after { content: ""; position: absolute; inset: 0; }
:is([data-testid="collection"], [data-testid="shared-collections"] > li) > small { grid-column: 2; grid-row: 2; align-self: start; }
:is([data-testid="collection"], [data-testid="shared-collections"] > li):hover > a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
:is([data-testid="collection"], [data-testid="shared-collections"] > li):hover::before { background: color-mix(in srgb, var(--ink) 10%, transparent); }
:is([data-testid="collection"], [data-testid="shared-collections"] > li):hover::after { background: var(--accent); }
:is([data-testid="collection"], [data-testid="shared-collections"] > li) > a:focus-visible { outline: none; }
:is([data-testid="collection"], [data-testid="shared-collections"] > li) > a:focus-visible::after { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
/* the people a collection is shared with: name, "read only", Remove at the far end */
[data-testid="share-row"] > .eng__form > .btn { margin-left: auto; }
.coll__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coll__form > .input { flex: 1 1 14rem; width: auto; min-width: 0; }
.page.ldu-page .card > .coll__form { margin-top: 16px; }
.page.ldu-page .card > .coll__list + .coll__form { margin-top: 0; }

/* the quiet actions at the foot of a collection: removing it or leaving it never competes with the table */
.page.ldu-page > .eng__form > .btn, .page.ldu-page > .card > .eng__form > .btn { align-self: flex-start; justify-self: start; }
.page.ldu-page > .card > .eng__form > .btn { margin-top: 16px; }
.page.ldu-page .btn[data-testid="collection-remove"] { margin-left: -8px; }
.page.ldu-page > p > a { text-underline-offset: 3px; transition: color var(--dur); }
.page.ldu-page > p > a:hover { color: color-mix(in oklab, var(--accent) 72%, var(--ink)); }

/* ── past engagements: the experts behind your closed rooms ───── */
.page.ldu-page.marks { max-width: none; }
.page.ldu-page .marks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.page.ldu-page .marks__row {
  position: relative;
  flex-direction: row; align-items: center; gap: 16px;
  padding: 16px 20px;
  transition: background-color var(--dur), border-color var(--dur);
}
.page.ldu-page .marks__row:has(a) { cursor: pointer; }
.page.ldu-page .marks__row:has(a):hover { background: var(--ldu-raise); border-color: var(--ink-4); }
.marks__name { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.marks__name > a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.marks__name > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the row is the link */
.marks__name > a:focus-visible { outline: none; }
.marks__name > a:focus-visible::after { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.marks__name > small { font-size: var(--fs-ui); font-weight: 400; color: var(--ink-2); }
.page.ldu-page .marks__row:has(a)::after {
  content: "\2192" / "";
  margin-left: auto; flex: none; color: var(--ink-3); transition: color var(--dur);
}
.page.ldu-page .marks__row:has(a):hover::after { color: var(--accent); }
.page.ldu-page .marks__row:has(a):hover > .marks__name > a { color: var(--accent); }

/* ── dashboard v2: needs you (P1), at a glance (P2 strip), latest (P2 panels) ────────────────
   Hover on a card changes colour and border only, 150ms. */
.dash__sec { display: grid; gap: 12px; }
.page.ldu-page .dash__h { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.dash__actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.page.ldu-page .dash__action {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 16px;   /* a plain card: no accent stripe on the left (Sam) */
  transition: background-color 150ms, border-color 150ms;
}
.page.ldu-page .dash__action:hover { background: var(--ldu-raise); border-color: var(--ink-4); }
.dash__kind { min-width: 56px; font-size: var(--fs-meta); font-weight: 600; color: var(--accent); }
.dash__what { display: grid; gap: 2px; min-width: 0; }
.dash__what > strong { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.dash__what > small { font-size: var(--fs-meta); }
.dash__do { display: flex; gap: 8px; align-items: center; }
.dash__do form { margin: 0; }
.page.ldu-page .dash__quiet { margin: 0; max-width: none; }

.dash__panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container page (min-width: 700px) { .dash__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page.ldu-page .dash__panel { display: grid; gap: 12px; align-content: start; transition: border-color 150ms; }
.page.ldu-page .dash__panel:hover { border-color: var(--ink-4); }
.dash__panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.page.ldu-page .dash__panel h3 { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--ink-2); }
.dash__panel > p { margin: 0; }
.dash__big { font-family: var(--display); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dash__list { list-style: none; margin: 0; padding: 0; display: grid; }
.dash__list > li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.dash__list > li:first-child { border-top: 0; }
.dash__list > li > a { display: grid; flex: 1; min-width: 0; gap: 2px; color: var(--ink); text-decoration: none; }
.dash__list > li > a:hover > span { color: var(--accent); }
.dash__list > li > a > span, .dash__list--plain > li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash__list--plain > li > span:first-child { flex: 1; min-width: 0; }
.dash__amt { font-variant-numeric: tabular-nums; font-weight: 500; }

@media (max-width: 560px) {
  .page.ldu-page .dash__action { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dash__kind { min-width: 0; }
}

/* ── engagements (feedback 3 and 4): one page, three tabs; the board with filters, hover and scrolling lanes ──
   Comms' nav.css owns .board* and .xg*: everything here is scoped to .eng so it overrides without editing that file. */

/* the filter bar is Find a professional's (pages-experts.css .xg__*), here on a .page rather than .main--pad */
.eng .board { gap: 16px; margin-bottom: 0; }
.page.ldu-page.eng .xg__select { flex: none; width: 9.25rem; max-width: 100%; text-overflow: ellipsis; }
.page.ldu-page.eng .xg__select--on { border-color: var(--accent); font-weight: 500; }
.eng .xg__go { order: 0; }
@media (max-width: 720px) {
  .eng .xg__search { flex-basis: 100%; }
  .eng .xg__selects { display: none; }
  .eng .xg__open { display: inline-flex; }
  .eng .xg__open, .eng .xg__go { flex: 1 1 0; justify-content: center; }
}

/* the lanes: a firm tint each, their own vertical scroll, never the page's height */
.eng .board__cols { align-items: start; gap: 16px; }
.eng .board__col { --col-pad: 16px; min-height: 0; max-height: min(70vh, 44rem); gap: 12px; border-radius: var(--ldu-r-xl, var(--r-3)); }
.eng .board__head { font-weight: 600; }
.eng .board__cards { gap: 8px; overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px 2px; }
.eng .board__empty { min-height: 72px; flex: none; }
.eng .board__hint { display: flex; align-items: center; gap: 8px; margin: 0; }

/* a card: the whole card opens the project's tasks; colour and border answer the pointer in 150ms, nothing lifts */
.page.ldu-page.eng .board__card { gap: 4px; padding: 12px 14px; flex-direction: column; align-items: flex-start; text-decoration: none; background: var(--bg-2); border-color: var(--line);
  transition: background-color var(--dur), border-color var(--dur); }
.page.ldu-page.eng a.board__card:hover, .page.ldu-page.eng a.board__card:focus-visible { background: var(--ldu-raise); border-color: var(--accent); box-shadow: none; transform: none; }
.page.ldu-page.eng a.board__card { position: relative; }
a.board__card::after { content: "\2192" / ""; position: absolute; top: 10px; right: 12px; color: var(--accent); opacity: 0; transition: opacity var(--dur); }
a.board__card:hover::after, a.board__card:focus-visible::after { opacity: 1; }
.eng .board__card > strong { padding-right: 20px; }
a.board__card:hover > strong, a.board__card:focus-visible > strong { color: var(--accent); }
a.board__card:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.eng .board__card > strong { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; transition: color var(--dur); }
.eng .board__card > small { font-size: var(--fs-meta); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.eng .board__card > .board__tags { margin-top: 4px; }
.eng .board__tags { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.eng .board__tags:empty { display: none; }

/* tablet: two lanes a row; phone: one column, lanes scroll inside themselves */
@media (max-width: 900px) { .eng .board__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eng .board__col { max-height: 28rem; } }
@media (max-width: 560px) {
  .eng .board__cols { grid-template-columns: minmax(0, 1fr); }
  .eng .board__col { --col-pad: 12px; max-height: 24rem; }
}

/* the chosen filters as chips, with Clear beside them */
.eng .xg__tags { align-items: center; }
.eng .xg__clear { margin-left: 4px; }

/* ── dashboard, round 5 (Milan, 15 Oct) ── */
/* a panel's header link is a small secondary button, as everywhere else; header items centre on it */
.dash__panel > header { align-items: center; }
.page.ldu-page .dash__panel > header .btn { flex: none; text-decoration: none; }
/* panels never grow past their column, so a long row ellipsises instead of running out of the card */
.page.ldu-page .dash__panel { grid-template-columns: minmax(0, 1fr); min-width: 0; }
/* spend rows: the description and amount on one line, the date under it, like the other lists */
.dash__list--plain > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline; }
.dash__list--plain > li > span:first-child { grid-column: 1; grid-row: 1; }
.dash__list--plain > li > small { grid-column: 1; grid-row: 2; font-size: var(--fs-meta); }
.dash__list--plain > li > .dash__amt { grid-column: 2; grid-row: 1; white-space: nowrap; }

/* The expert's board on their dashboard (components/expert_board): the engagements lanes, with a filter and an Everything / Waiting on you switch above. */
.xboard__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.xboard__bar .xg__search { flex: 1 1 16rem; }
.xboard__only { display: flex; gap: 4px; }
.board__col--new { --lane: var(--ink-3); }
.board__col--proposal { --lane: var(--warn); }
.board__col--engaged { --lane: var(--accent); }

/* ── the Activity Tracker (activity/show; Sam, 30 Oct): four lanes at a fixed width in one row that scrolls sideways when it runs past the page.
   Each lane is the board's neutral surface with its stage's tinted head (comms/nav.css .board__col); a dot in the head carries the stage's colour. ── */
.page.ldu-page.activity { display: flex; flex-direction: column; gap: 20px; height: 100%; box-sizing: border-box; }
/* the lanes fill the page, and each scrolls its own cards up and down under the mouse wheel (Sam: one lane at a time, not the page); sideways is the drag */
.activity .board__cols { flex: 1 1 0; min-height: 24rem; display: flex; align-items: stretch; gap: 16px; overflow-x: auto; margin: 0 -32px; padding: 0 32px; scrollbar-width: none; cursor: grab; }
.activity .board__cols::-webkit-scrollbar { display: none; }
.activity .board__cols.is-dragging { cursor: grabbing; user-select: none; }
.activity .board__col { flex: 0 0 272px; min-height: 0; max-height: none; gap: 12px; border-radius: var(--ldu-r-xl, var(--r-3)); }
.activity .board__head { font-weight: 600; }
.activity .board__cards { flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; }   /* start: a grid stretches its rows to fill the lane, which blew three cards up to a third of it each */
.activity .board__empty { min-height: 72px; }
.activity .board__card { cursor: grab; }   /* a card is picked up and dropped on the side panel's chat as context */
/* the progress bar at the foot of the page: how far along the row you are (sticky, for a window too short for the lanes' least height) */
.activity__progress { position: sticky; bottom: 16px; flex: none; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--line) 50%, transparent); overflow: hidden; }
.activity__progress > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink-4); transition: width 80ms linear; }
.activity__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lane); }
.board__col--to-do { --lane: var(--ink-3); }
/* a lane a dragged card is over (drag_scroll_controller.js#laneOver): the accent ring, inside the lane's own edge */
.activity .board__col.is-drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.activity .board__empty[hidden] { display: none; }
/* an empty lane: its card list takes no room, so "Nothing here yet" sits under the head, not at the foot */
.activity .board__cards:not(:has(> li)) { flex: 0 0 0; }

/* ── Clients (clients/index) and a client's data room (clients/show: the Activity Tracker's row, Background first) ── */
.clients__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.clients__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color var(--dur); }
.clients__row:hover, .clients__row:focus-visible { border-color: var(--accent); }
.board__col--background { --lane: var(--ink-3); }
.board__col--issue { --lane: var(--accent); }
/* a data room's matter line (clients/show): its title or the matter switch, then its lane, stage and due date */
.dataroom__matter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: -8px; }
/* a tracker card's title opens its data room; the card stays the thing you drag */
.activity .board__open { color: inherit; text-decoration: none; }
.activity .board__open:hover, .activity .board__open:focus-visible { color: var(--accent); }
/* the note-taker: a meeting link and its button, at the end of the matter line */
.dataroom__notetaker { display: flex; gap: 6px; margin-left: auto; }
.dataroom__notetaker .input { width: 16rem; height: 32px; font-size: var(--fs-ui); }
/* Daniel's edits in a data room: three native disclosures in a row; an open one drops its form below, over the board */
.dataroom__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
/* the edit buttons (Edit matter, New matter, Add document) sit on the right, and their forms open from the right edge, over the board's
   far end rather than its first column (Sam, 30 Oct); a filter group before them (the tracker's Everything | Needs you today) stays left */
.dataroom__actions > .dataroom__panel:first-of-type { margin-left: auto; }
.dataroom__panel { position: relative; }
.dataroom__panel > summary { list-style: none; }
.dataroom__panel > summary::-webkit-details-marker { display: none; }
.dataroom__panel[open] > summary { border-color: var(--accent); }
.dataroom__form { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; display: grid; gap: 10px; width: 20rem; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg); }
.dataroom__form label { display: grid; gap: 4px; font-size: var(--fs-meta); color: var(--ink-2); }
.dataroom__flags { display: grid; gap: 6px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-1); }
.dataroom__flags label { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.dataroom__form .btn { justify-self: start; }
/* a client with no matter yet: New matter is open on arrival, so its form sits below the button in the flow and the empty state
   moves down under it, instead of being covered (Sam, 3 Nov); the button stays on the right */
.dataroom__panel--flow { text-align: right; }
.dataroom__panel--flow > .dataroom__form { position: static; margin-top: 6px; text-align: left; }

/* ── Intake as Dan's pipeline (Sam, 3 Nov): five stages side by side, scrolling sideways on a narrow screen; the later ones are placeholders ── */
.pipeline { grid-template-columns: repeat(5, minmax(15rem, 1fr)); overflow-x: auto; }
.pipeline .board__col { min-height: 0; }
.pipeline__todo { padding: 14px; place-items: start; font-size: var(--fs-meta); line-height: 1.5; }

/* ── Clients: a new client's name and its button above the list ── */
.clients__new { display: flex; gap: 8px; max-width: 32rem; }
.clients__new .input { flex: 1; height: 36px; }

/* ── Deadlines (deadlines/index): matters with a due date, grouped Overdue, This week, This month, Later; each row a card ── */
.deadlines__group { display: grid; gap: 10px; }
.deadlines__head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-ui); font-weight: 600; }
.deadlines__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.deadlines__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; transition: border-color var(--dur); }
.deadlines__row:hover, .deadlines__row:focus-visible { border-color: var(--accent); }
.deadlines__date { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ── Daniel's ops pages that are lists and forms (Playbooks, Intake, Billing): the data room's disclosures, opened in the flow here ── */
.page.ldu-page.ops { gap: 20px; }
.ops .dataroom__form { position: static; width: auto; max-width: 36rem; margin-top: 8px; }
.dataroom__form--wide textarea { resize: vertical; }
.playbook__entries { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.playbook__entry { display: grid; gap: 10px; padding: 16px; }
.playbook__clause { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.playbook__positions { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.playbook__positions dt { color: var(--ink-3); font-size: var(--fs-meta); }
.playbook__positions dd { margin: 0; }
.playbook__positions dd p { margin: 0 0 4px; }
.intake__decide { display: flex; gap: 8px; }
.intake__decide form { margin: 0; }
/* ── a data room document open in WordCraft (portal/edit, doc_editor_controller.js): the editor fills the page under its bar. Here, not in
   comms/spotlight.css, which only the room pages load. ── */
.doc-editor { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; } /* the whole page area, edge to edge (Sam, 30 Oct) */
.doc-editor__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.doc-editor__status { margin: 0; }
.doc-editor .doc-editor__frame { display: block; flex: 1; width: 100%; min-height: 0; border: 0; border-radius: 0; background: var(--bg-2); }
/* Connect your device (device_connects/show): the QR dark on light in either theme, as the room's is, so any camera reads it */
.devqr-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; max-width: 680px; }
@container page (max-width: 560px) { .devqr-card { grid-template-columns: minmax(0, 1fr); } }
.devqr { display: grid; gap: 8px; justify-items: start; max-width: 240px; } /* the note wraps under the code */
.devqr__code { width: 240px; padding: 14px; border-radius: 12px; background: light-dark(var(--bg), var(--ink)); }
.devqr__code svg { display: block; width: 100%; height: auto; }
.devqr__code svg rect { fill: transparent; }
.devqr__code svg path { fill: light-dark(var(--ink), var(--bg)); }
.devqr__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; }

.portal__list { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; list-style: disc; }
.invoice__lines { width: 100%; max-width: 48rem; border-collapse: collapse; }
.invoice__lines th, .invoice__lines td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.invoice__lines thead th { color: var(--ink-3); font-size: var(--fs-meta); font-weight: 500; }
.invoice__lines tfoot th { border-bottom: 0; }
.invoice__amount { text-align: right !important; font-variant-numeric: tabular-nums; }
/* a data room's escalations: each with its answer box in the flow, above the board */
.dataroom__escalations { display: grid; gap: 10px; }
.dataroom__form--inline { position: static; width: auto; max-width: 40rem; padding: 0; border: 0; background: none; }
.dataroom__escalations .dataroom__form--inline { margin-top: 10px; }
#client-task-ask :is(.input, .textarea) { background-color: var(--bg-2); }   /* Ask the client popup: typed fields white like its LDU dropdowns (Milan, 11 Nov) */
/* Reviews (Sam, 3 Nov: "LDU Review Twin.pdf"): the client's drop form (page 4), and the report the client and Daniel read (pages 1 and 2) */
.review { display: grid; gap: 16px; }
.review__new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.review fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.review legend { margin-bottom: 8px; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.review__reviewer { display: grid; gap: 8px; cursor: pointer; border-color: var(--accent); }
.review__reviewer input { position: absolute; opacity: 0; pointer-events: none; }
.review__reviewer:has(input:focus-visible) { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.review__dk { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ldu-wash); color: var(--accent); font-weight: 700; font-size: var(--fs-h3); }
.review__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.review__form { display: grid; gap: 16px; }
.review__form > label { display: grid; gap: 6px; font-size: var(--fs-ui); font-weight: 600; }
.review__error { margin: 0; padding: 10px 12px; border-radius: var(--r-1); background: var(--tone-soft, var(--bg-2)); color: var(--danger); font-weight: 600; }
.review__drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 28px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-2); background: var(--bg-2); text-align: center; cursor: pointer; transition: border-color var(--dur), background-color var(--dur); }
.review__drop:hover, .review__drop:focus-within { border-color: var(--accent); background: var(--ldu-wash); }
.review__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.review__drop:has(input:valid) strong::after { content: " · chosen"; color: var(--accent); }
.review__sides { display: flex; flex-wrap: wrap; gap: 8px; }
.review__sides label { cursor: pointer; }
.review__sides input { position: absolute; opacity: 0; pointer-events: none; }
.review__sides span { display: inline-flex; align-items: center; min-height: var(--btn-h-md, 36px); padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-1); font-size: var(--fs-ui); }
.review__sides input:checked + span { border-color: var(--accent); background: var(--ldu-wash); color: var(--accent); font-weight: 600; }
.review__sides input:focus-visible + span { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.review__checks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-ui); }
.review__checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.review__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.review__meta { display: grid; margin: 0; padding: 0 16px; }
.review__meta > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.review__meta > div:last-child { border-bottom: 0; }
.review__meta dt { color: var(--ink-3); }
.review__meta dd { margin: 0; }
.review__score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; background: var(--bg-2); }
.review__score p { margin: 0; }
.review__big { font-family: var(--display); font-size: 64px; line-height: 1; font-weight: 700; color: var(--ink); }
.review__big small { font-size: var(--fs-h3); font-weight: 400; color: var(--ink-3); }
.review__band { margin-top: 8px !important; font-weight: 600; }
.review__band::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.review__band--ok { color: var(--ok); } .review__band--warn { color: var(--warn); } .review__band--danger { color: var(--danger); }
.review__scale { display: grid; gap: 8px; }
.review__bar { position: relative; display: grid; grid-template-columns: 50fr 20fr 15fr 15fr; gap: 3px; height: 10px; }
.review__bar i { border-radius: 999px; background: var(--danger); opacity: .35; }
.review__bar i:nth-child(2) { background: var(--warn); } .review__bar i:nth-child(3), .review__bar i:nth-child(4) { background: var(--ok); }
.review__bar i:nth-child(4) { opacity: .6; }
.review__bar b { position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 3px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.review__ticks { display: grid; grid-template-columns: 50fr 20fr 15fr 15fr; gap: 3px; font-size: var(--fs-meta); }
.review__areas { display: grid; gap: 10px; }
.review__area { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 4rem; gap: 12px; align-items: center; font-size: var(--fs-ui); }
.review__area > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.review__track { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.review__track > span { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.review__fix { display: grid; gap: 8px; margin: 8px 0 0; padding-left: 1.4em; }
.review__findings table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: var(--fs-ui); }
.review__findings th { padding: 10px 8px; background: var(--ink); color: var(--bg); text-align: left; font-weight: 600; }
.review__findings th:first-child { border-top-left-radius: var(--r-1); } .review__findings th:last-child { border-top-right-radius: var(--r-1); }
.review__findings td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.review__findings td:first-child { white-space: nowrap; }
.review__sev { white-space: nowrap; font-weight: 600; }
.review__sev--critical, .review__sev--high { color: var(--danger); } .review__sev--medium { color: var(--warn); } .review__sev--low { color: var(--ink-3); }
.review__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 16px; }
.review__pair ol { margin: 8px 0 0; padding-left: 1.4em; display: grid; gap: 6px; }
.review__verify { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.review__verify label { display: grid; gap: 6px; font-size: var(--fs-ui); font-weight: 600; }
.review__verify .review__error { grid-column: 1 / -1; }
/* Daniel's verdict per finding (gap 3) takes the whole row above the move, its reason and Release */
.review__verify .review__verdicts, .review__verify .review__verdicts-note { grid-column: 1 / -1; }
.review__verdicts { width: 100%; border-collapse: collapse; }
.review__verdicts th, .review__verdicts td { padding: 6px 8px; text-align: left; vertical-align: top; }
.review__suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 6px 0; }
.review__suggest label { display: grid; gap: 4px; font-size: var(--fs-ui); }
@media (max-width: 720px) {
  .review__new, .review__score, .review__verify { grid-template-columns: minmax(0, 1fr); }
  .review__area { grid-template-columns: minmax(0, 1fr) 4rem; }
  .review__area .review__track { grid-column: 1 / -1; grid-row: 2; }
  .review__findings { overflow-x: auto; }
}
.review__table { padding: 0; overflow-x: auto; }
.review__table table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.review__table th { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-3); text-align: left; font-weight: 500; }
.review__table td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.review__table tr:last-child td { border-bottom: 0; }
/* the client panel's who-to-talk-to dropdown, at its top (Sam, 3 Nov) */
.agentpanel__who { position: relative; }
.agentpanel__who > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; font-weight: 600; }
.agentpanel__who > summary::-webkit-details-marker { display: none; }
.agentpanel__who > summary .icon { transition: transform var(--dur); }
.agentpanel__who[open] > summary .icon { transform: rotate(180deg); }
.agentpanel__whomenu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; }
/* the client panel's intro before the first line: what the agent does, what you get, how to use it (Sam, 3 Nov) */
.agentpanel__intro { display: grid; gap: 12px; padding: 16px; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-2); text-align: left; }
.agentpanel__intro p { margin: 0; }
.agentpanel__intro strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }

/* The client's Playbook Deviation Board (client_deviations/show; the Playbook Board in claude.ai's legal artifacts, Sam 11 Nov): a row per
   contract, a column per position, the twin's mark in each cell. Green dot standard, amber fallback, red outside Daniel's positions. */
.devboard__sum { margin: 0; color: var(--ink-2); }
.devboard__sum strong { color: var(--ink); }
.devboard__scroll { flex: 1 1 0; display: flex; flex-direction: column; min-height: 24rem; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; cursor: grab; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2); }
.devboard__scroll::-webkit-scrollbar { display: none; }
.devboard__scroll.is-dragging { cursor: grabbing; user-select: none; }
.devboard__progress { position: static; }
.devboard__grid { flex: 1 0 auto; min-width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.devboard__grid th, .devboard__grid td { padding: 10px 12px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); text-align: left; vertical-align: top; }
.devboard__grid thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-2); font-weight: 500; color: var(--ink-2); min-width: 9rem; }
.devboard__grid tbody th { font-weight: 600; color: var(--ink); min-width: 12rem; }
.devboard__grid tr > :first-child { border-left: 0; }
.devboard__grid tbody tr:last-child > * { border-bottom: 0; }
.devboard__fill { height: 100%; }
.devboard__fill > * { padding: 0; }
.devboard__cell--deviation, .devboard__cell--red_line, .devboard__cell--missing { background: color-mix(in oklch, var(--danger-soft) 45%, transparent); }
.devboard__cell--fallback, .devboard__cell--needs_daniel { background: color-mix(in oklch, var(--warn-soft) 45%, transparent); }
.devboard__mark summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.devboard__mark summary::-webkit-details-marker { display: none; }
.devboard__detail { display: grid; gap: 8px; margin-top: 8px; max-width: 22rem; }
.devboard__detail blockquote { margin: 0; color: var(--ink); }
.devboard__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.devboard__legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.devchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.devchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.devchip--standard { padding: 2px 0; color: var(--ok); font-size: 0; } /* a dot alone, as on the Playbook Board */
.devchip--standard::before { width: 8px; height: 8px; }
.devboard__legend .devchip--standard { font-size: var(--fs-meta); padding: 2px 8px; }
.devchip--fallback, .devchip--needs_daniel { background: var(--warn-soft); color: var(--warn); }
.devchip--deviation, .devchip--red_line { background: var(--danger-soft); color: var(--danger); }
.devchip--missing { background: var(--danger-soft); color: var(--danger); }
.devchip--missing::before { border-radius: 2px; background: transparent; border: 1.5px solid currentColor; }
.devstate { font-size: var(--fs-meta); color: var(--ink-2); }
.devstate--approved { color: var(--ok); }
.devstate--waiting::before { content: "\25F7  "; }

/* The Matter board's three on LDU's matters (Sam, 12 Nov), in Milan's quiet style (portal/_work_card): a line per thing, a small icon and a
   few words; only what needs attention is red. A matter's tab in the data room: its next step and key dates, a passed one red until ticked done. */
.board__line { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.board__line > .icon { flex: none; margin-top: .2em; }
.eng .board__card > .board__line--alert, .board__line--alert { color: var(--danger); font-weight: 600; }
.dataroom__plan { display: grid; gap: 16px; }
.dataroom__step, .dataroom__dates { display: grid; gap: 8px; }
.dataroom__step { grid-template-columns: minmax(0, 1fr); }
.dataroom__step .button_to { justify-self: start; }
.dataroom__datelist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dataroom__date { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-2, 10px); background: var(--bg-2); }
.dataroom__date time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dataroom__date.is-passed time { color: var(--danger); }
.dataroom__date.is-done { opacity: .55; }
.dataroom__date.is-done strong { text-decoration: line-through; }
.dataroom__date small { display: block; }

/* The client's regulatory horizon scan (horizon_scans/show; Sam, 12 Nov): what to watch, then a card per development in Milan's quiet
   style: an icon and a few words a line, the official quote set off, Daniel's call and Make it a matter at the foot. */
.horizon { display: flex; flex-direction: column; gap: 20px; }
.horizon__ask { display: grid; gap: 8px; max-width: 48rem; }
.horizon__ask label { font-weight: 600; }
.horizon__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.horizon__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.horizon__item { display: grid; gap: 6px; padding: 14px 16px; }
.horizon__head { display: flex; align-items: center; gap: 8px; margin: 0; }
.horizon__item > small { font-size: var(--fs-meta); color: var(--ink-2); }
.horizon__text { margin: 0; }
.horizon__quote { margin: 4px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); color: var(--ink); }
.horizon__quote small { display: block; margin-top: 4px; color: var(--ink-2); }
.horizon__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* The Deviation board with its playbook (client_deviations/show; Sam, 12 Nov): a section per kind of document, each header opening the
   position it measures against; Check against the playbook above. */
.devboard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.devboard__apply { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.devboard__apply select { max-width: 28rem; }
.devboard__kind { display: flex; flex-direction: column; flex: 1 0 auto; gap: 10px; min-height: 26rem; }
.devboard__books { font-weight: 400; }
.devboard__pos summary { cursor: pointer; list-style: none; }
.devboard__pos summary::-webkit-details-marker { display: none; }
.devboard__pos summary::after { content: " \25BE"; color: var(--ink-3); }
.devboard__pos dl { margin: 8px 0 0; font-weight: 400; color: var(--ink); }
.devboard__pos dt { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 6px; }
.devboard__pos dd { margin: 2px 0 0; }

/* Sections of their own (Sam, 12 Nov: "stop nesting sections in each other"): the board's client picker, and the way back from one
   client's scan or survey to its section's list. */
.devboard__client { display: flex; align-items: center; gap: 8px; }
.devboard__client select { max-width: 22rem; }

/* Digital twin › Ask Legal (ask_legal/show; Sam, 12 Nov): the twin's harness as numbered steps, Try a question, and Daniel's guidance. */
.asklegal section { display: grid; gap: 10px; }
.asklegal__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.asklegal__steps > li { display: grid; gap: 4px; padding: 12px 16px; counter-increment: step; }
.asklegal__steps > li > strong { display: flex; align-items: center; gap: 6px; }
.asklegal__steps > li > strong::before { content: counter(step) "."; color: var(--ink-3); font-weight: 500; }
.asklegal__result { display: grid; gap: 8px; padding: 12px 16px; }
.asklegal__told { margin: 0; white-space: pre-wrap; font-size: var(--fs-meta); color: var(--ink); background: var(--bg-2); padding: 10px 12px; border-radius: 10px; }
.asklegal__finding { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }

/* Digital twin › Client chats (#192): each client's twin chat, turn by turn, with what the harness did. Own names, so the twin's Sessions
   styles can change freely. */
.twinchats { display: grid; gap: 8px; }
.twinchat { padding: 0; }
.twinchat summary { display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.twinchat summary::-webkit-details-marker { display: none; }
.twinchat[open] summary { border-bottom: 1px solid var(--line); }
.twinchat__who { display: grid; gap: 2px; min-width: 0; }
.twinchat__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twinchat__how { display: flex; align-items: center; gap: 6px; }
.twinchat__empty { margin: 0; padding: 12px 16px; }
.twinchat__log { list-style: none; margin: 0; padding: 12px 16px 16px; display: grid; gap: 6px; }
.twinchat__line { display: grid; grid-template-columns: 48px 80px minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-radius: 8px; }
.twinchat__line--flag { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.twinchat__by { font-weight: 600; }
.twinchat__harness { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
@media (max-width: 860px) {
  .twinchat summary { grid-template-columns: minmax(0, 1fr) auto; }
  .twinchat__line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}