/* ── A client's "Your work" page (portal/show; Milan, 3 Nov 2026) ─────────────────────────────────────────────────────────────────────
   The bar (search, Status, Who is on it, Sort, Board | List), the count, then the board or the list.
   The lanes' colours and tinted heads are the tracker's (comms/nav.css .board__col--*). Layout here; colour only through tokens.
   matters_controller.js sets data-view on the page ("auto" until one is picked: the list on a phone, the board elsewhere). */
.page.ldu-page.mtr { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.page.ldu-page.mtr > .page-header { margin-bottom: 8px; }
.mtr .page-header__desc, .mtr .page-header p { max-width: 64ch; }

/* the bar: search first, the three dropdowns, then the view switch at the far right */
.mtr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.mtr-bar__search { flex: 1 1 12rem; max-width: 22rem; min-width: 10rem; }
.mtr-bar__selects { display: flex; flex-wrap: wrap; gap: 8px; }

.mtr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mtr-sub__count { color: var(--ink-2); font-size: var(--fs-meta); }

/* which view shows */
.mtr[data-view="board"] .mtr-list, .mtr[data-view="list"] .mtr-board { display: none; }
@media (max-width: 720px) { .mtr[data-view="auto"] .mtr-board { display: none; } }
@media (min-width: 721px) { .mtr[data-view="auto"] .mtr-list { display: none; } }
.mtr.is-nothing :is(.mtr-board, .mtr-list) { display: none; }
.mtr-none[hidden] { display: none; }
.mtr.is-one-status :is(.mtr-col, .mtr-group).is-empty { display: none; }

/* ── the board ── */
.mtr-board { position: relative; flex: 1 1 0; min-height: 24rem; display: flex; flex-direction: column; gap: 12px; }
.mtr-board__track { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 calc(var(--pad-main, 32px) * -1); padding: 0 var(--pad-main, 32px); scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--pad-main, 32px); }
.mtr-board__track::-webkit-scrollbar { display: none; }
.mtr-board__track.is-panning { cursor: grabbing; user-select: none; }
/* columns share the width and stop at 232px: all four fit once the board is about 1000px wide, three with Lia's panel open on a laptop */
.mtr-col { flex: 1 0 232px; max-width: 360px; min-height: 0; gap: 12px; border-radius: var(--ldu-r-xl, var(--r-3)); scroll-snap-align: start; }
/* a quiet head (Milan, round 2: the tinted band took too much focus): no fill, one hairline under it, the lane's colour only in its icon */
.mtr .mtr-col > .mtr-col__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; margin: 0; padding: 0 0 8px; background: transparent; border-bottom: 1px solid var(--line); }
.mtr-col__head .board__title { margin: 0; font-size: var(--fs-ui); font-weight: 600; }
.mtr-col__icon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--lane);
  background: color-mix(in srgb, var(--lane) 16%, var(--bg-2)); }
.mtr-col__hint { grid-column: 1 / -1; margin: 0; padding-left: 32px; color: var(--ink-2); font-size: var(--fs-ui); font-weight: 400; line-height: 1.4; } /* a sentence: the ui size, 12px is for labels (QA, 4 Nov) */
.mtr-col__cards { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 8px; margin: 0 -6px; padding: 2px 6px; list-style: none;
  overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
/* the column's scrollbar shows only while the pointer is over the board (Milan, round 2: always on looked ugly) */
.mtr-col__cards::-webkit-scrollbar { width: 0; }
.mtr-board:hover .mtr-col__cards { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.mtr-board:hover .mtr-col__cards::-webkit-scrollbar { width: 6px; }
.mtr-board:hover .mtr-col__cards::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line-2); }
.mtr-col__cards:not(:has(> li:not([hidden]))) { flex: 0 0 0; padding: 0; }
.mtr-col__empty { display: grid; place-items: center; min-height: 64px; margin: 0; border: 1px dashed var(--line-2); border-radius: var(--r-2);
  color: var(--ink-3); font-size: var(--fs-meta); }
.mtr-col__empty[hidden] { display: none; }

/* under the board, only when it runs past the page: [<] the scroll line [>], the line a hairline with a darker thumb the size of what is in view */
.mtr-nav { flex: none; display: flex; align-items: center; gap: 8px; }
.mtr-nav[hidden] { display: none; }
.mtr-nav__step { width: 28px; height: 28px; min-height: 28px; }
.mtr-nav__step:disabled { opacity: .4; cursor: default; }
.mtr-scroll { position: relative; flex: 1 1 auto; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.mtr-scroll > span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--ink-3); opacity: .45; transition: opacity var(--dur); }
.mtr-board:hover .mtr-scroll > span { opacity: .7; }

/* ── a card: the whole card opens (its title's link covers it); Add to chat is its own button at the foot ── */
.mtr-col__cards { grid-template-columns: minmax(0, 1fr); }   /* a card never grows past its column */
.mtr-card { position: relative; display: grid; gap: 6px; padding: 12px 14px; cursor: pointer; background: var(--bg-2);
  transition: border-color var(--dur) var(--ease-out-quint), background-color var(--dur) var(--ease-out-quint); }
.mtr-card > * { min-width: 0; }
.mtr-card[hidden], .mtr-row[hidden] { display: none; }
.mtr-card__title { padding-right: 28px; font-size: var(--fs-body); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.mtr-card__open { color: inherit; text-decoration: none; transition: color var(--dur); }
.mtr-card__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mtr-card__open:focus-visible { outline: none; }
.mtr-card:has(.mtr-card__open:focus-visible), .mtr-row:has(.mtr-card__open:focus-visible) { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.mtr-card__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.4; }
.mtr-due--soon { color: var(--danger); font-weight: 600; }
.mtr-card .board__tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.mtr-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.mtr-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font-size: var(--fs-meta); }
.mtr-who__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtr-nobody { border: 1px dashed var(--line-2); background: transparent; color: var(--ink-3); }
/* the open cue: an arrow at the card's top right (the row's chevron at its end), shown with the hover, easing toward where a click goes,
   like the cards in Lia's chat */
.mtr-card__go { display: inline-grid; color: var(--ink); opacity: 0; translate: -4px 0; transition: opacity 240ms var(--ease-out-quint), translate 240ms var(--ease-out-quint); }
.mtr-card > .mtr-card__go { position: absolute; top: 15px; right: 14px; }

/* Add to chat (Milan, 3 Nov: the hover button read as if the card could not be opened): a square outline button with the chat icon, always
   there, above the card's open link; its tip names it. Pointing at it leaves the card at rest, so it reads as a target of its own. A tick and
   "Added" for a moment after a click. Gone when Lia's panel is folded away (nothing to add to). */
.mtr-ask { z-index: 1; flex: none; width: 28px; height: 28px; color: var(--ink-2); }
.mtr-ask:hover { color: var(--ink); }
.mtr-ask[data-tip]::after { left: auto; right: 0; transform: none; }   /* the tip ends at the button's right edge, inside the column */
.mtr-ask__done, .mtr-ask.is-added .mtr-ask__chat { display: none; }
.mtr-ask.is-added .mtr-ask__done { display: block; color: var(--ok); }
.shell--panel-closed .mtr-ask { display: none; }

/* hover on the card (not on its button): the fill shades, the border darkens to ink and the arrow shows. Ink, not lilac (never lilac on a light
   surface). No lift, no shadow. */
.mtr-card:is(:hover, :focus-within):not(:has(.mtr-ask:is(:hover, :focus-visible))) { background: var(--ldu-raise); border-color: var(--ink-2); }
:is(.mtr-card, .mtr-row):is(:hover, :focus-within):not(:has(.mtr-ask:is(:hover, :focus-visible))) .mtr-card__go { opacity: 1; translate: 0 0; }

/* ── the list: a group per status, a row per piece of work ── */
.mtr-list { display: grid; gap: 40px; align-content: start; }
.mtr-group { display: grid; gap: 8px; }
.mtr-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--fs-ui); font-weight: 600; }
.mtr-group--to-do { --lane: var(--ink-3); }
.mtr-group--doing { --lane: var(--accent-fill); }
.mtr-group--review { --lane: var(--warn); }
.mtr-group--done { --lane: var(--ok); }
.mtr-group__hint { color: var(--ink-2); font-size: var(--fs-meta); font-weight: 400; }
.mtr-group.is-empty .mtr-group__rows { display: none; }
.mtr-group__rows { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); overflow: hidden; }
/* a row: name, flags, who, when, then Add to chat and the arrow (on hover); every cell starts at its left edge */
.mtr-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 10rem 7rem auto 16px; align-items: center; justify-items: start; gap: 12px;
  min-height: 52px; padding: 8px 16px; cursor: pointer; transition: background-color var(--dur); }
.mtr-row + .mtr-row { border-top: 1px solid var(--line); }
.mtr-row:hover:not(:has(.mtr-ask:hover)) { background: var(--ldu-wash); }
.mtr-row__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; justify-self: stretch; }
.mtr-row__title { overflow-wrap: anywhere; font-weight: 600; }   /* a long name wraps, never cut off */
.mtr-row__stage { flex: none; color: var(--ink-2); font-size: var(--fs-meta); }
.mtr-row__flags { display: flex; gap: 4px; }
.mtr-row__due { color: var(--ink-2); font-size: var(--fs-meta); text-align: left; }

/* A page squeezed by the chat panel (or My Company's Legal tab, which borrows these rows): stack a row by the page's width, not only the
   screen's, so a title is never crushed to a letter a line; Add to chat stays on the right. The phone rules below still win on a phone. */
@media (min-width: 721px) { @container page (max-width: 640px) {
  .mtr-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main ask" "who ask" "meta ask"; gap: 4px 12px; }
  .mtr-row__main { grid-area: main; }
  .mtr-row > .mtr-who { grid-area: who; }
  .mtr-row__due { grid-area: meta; }
  .mtr-row__flags { grid-area: meta; justify-self: end; }
  .mtr-row > .mtr-ask { grid-area: ask; }
  .mtr-row > .mtr-card__go { display: none; }
  .mtr-row__due:empty { display: none; }
} }
/* ── a phone ── */
@media (max-width: 720px) {
  .mtr-bar__search { flex: 1 1 100%; }
  .mtr-bar__selects { flex: 1 1 auto; }
  .mtr-board { min-height: 0; flex: none; }
  .mtr-board__track { flex: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-main, 16px); }
  .mtr-col { flex-basis: calc(100vw - 64px); max-height: 70vh; scroll-snap-align: start; }
  .mtr-nav__step { display: none; }   /* a phone swipes the board; the line stays */
  /* a row: the title on its own line, then who, when and the flags under it */
  .mtr-row { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "main go" "who go" "meta go"; gap: 4px 12px; padding: 12px 12px 12px 14px; cursor: pointer; }
  .mtr-row > .mtr-ask, .mtr-card .mtr-ask { display: none; }   /* no chat beside the work on a phone */
  .mtr-row__main { grid-area: main; flex-wrap: wrap; }
  .mtr-row__title { white-space: normal; }
  .mtr-row > .mtr-who { grid-area: who; }
  .mtr-row__due { grid-area: meta; }
  .mtr-row__flags { grid-area: meta; justify-self: end; }
  .mtr-row > .mtr-card__go { grid-area: go; }
  .mtr-row__due:empty { display: none; }
}
@media (hover: none) { .mtr-card__go { opacity: 1; translate: 0 0; } .mtr-ask { display: none; } }   /* a touch screen: the arrow always shows; no Add to chat (as on the data room) */
@media (prefers-reduced-motion: reduce) { .mtr-card, .mtr-card__go, .mtr-ask, .mtr-row { transition: none; } }

/* Every search field on a client's portal page is white like the dropdowns beside it: the paper grey read as disabled (Milan, 4 Nov). The
   portal is the shell that holds Lia's panel (.cchat-aside); only its page area (.main), so Lia's own search and the rest of the app keep theirs. */
.shell:has(> .cchat-aside) .main .ldu-search__input { background-color: var(--bg-2); }

/* ── What happens next (portal/_next_steps; signup-flow.md What we build 5) ───────────────────────────────────────────────────────────
   The first screen after the Lia welcome: three steps, the first one now (ink mark), and one solid button that opens the chat on Lia. */
/* First visit only, above the board (Milan, 11 Nov): it rises in as the welcome's paper veil gives way, so the portal arrives without a cut. */
.nxt { max-width: 640px; margin-bottom: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); display: flex; flex-direction: column; gap: 24px;
  animation: nxt-in 600ms var(--ease-out-expo, ease-out) 150ms both; }
@keyframes nxt-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .nxt { animation: none; } }
.nxt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nxt__title { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); }
.nxt__close { margin: -8px -8px -8px 0; }
.nxt__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.nxt__step { display: flex; align-items: flex-start; gap: 12px; }
.nxt__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--board); color: var(--ink-2); } /* a step darker than the card, so it never reads white on white */
.nxt__step.is-now .nxt__mark { background: var(--ink); color: var(--bg); }
.nxt__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; line-height: 1.5; color: var(--ink-2); }
.nxt__text strong { font-weight: 600; color: var(--ink); }
.nxt__go { align-self: flex-start; }
@media (max-width: 640px) { .nxt { padding: 16px; } .nxt__go { align-self: stretch; } .nxt__go .btn { width: 100%; justify-content: center; } }

/* ── Needs you (Milan, 6 Nov): what LDU needs from the client, the board's first column and the list's first group ── */
.board__col--needs-you, .mtr-group--needs-you { --lane: var(--danger); }   /* its own hue: the one status colour no other lane uses (Milan, 11 Nov) */
.mtr-card__meta--task { flex-direction: column; }
.mtr-card__kind { display: inline-flex; align-items: center; gap: 4px; }
.mtr-card__kind .icon { color: var(--ink-3); }
.mtr-row.mtr-row--task { grid-template-columns: minmax(0, 1fr) 16px; }

/* ── one piece of work (portal_work) and one task (portal_tasks): a document check's page (ldu/pages-reviews.css .dcheck-*) with these lists ── */
.pwork-icon { animation: none; }
.pwork-icon--ok { color: var(--ok); }
.pwork-block { display: grid; gap: 8px; }
.pwork-block__title { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.pwork-block__text { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.5; }
.pwork-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); overflow: hidden; }
.pwork-block .pwork-list { margin-top: 4px; }
/* a row: icon, title with one line under it, then its status or button; a row with a page opens it anywhere on the row */
.pwork-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px;
  transition: background-color var(--dur); }
.pwork-row + .pwork-row { border-top: 1px solid var(--line); }
.pwork-row.is-link { cursor: pointer; }
.pwork-row.is-link:hover { background: var(--ldu-wash); }
.pwork-row__icon { display: inline-grid; color: var(--ink-2); }
.pwork-row__main { display: grid; gap: 2px; min-width: 0; }
.pwork-row__title, .pwork-row__link { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pwork-row__link { text-decoration: none; }
.pwork-row__link::after { content: ""; position: absolute; inset: 0; }
.pwork-row__link:focus-visible { outline: none; }
.pwork-row:has(.pwork-row__link:focus-visible) { outline: var(--ring-w) solid var(--ring); outline-offset: calc(var(--ring-w) * -1); }
.pwork-row__meta { color: var(--ink-2); font-size: var(--fs-meta); }
.pwork-row__go { position: relative; z-index: 1; }
.pwork-more { margin: 0; font-size: var(--fs-ui); }
/* a task's answer: the form, the correction behind Something is wrong, and what was sent */
.pwork-form { display: grid; gap: 16px; max-width: 40rem; }
.pwork-fix { display: grid; gap: 12px; }
.pwork-fix > summary { justify-self: start; list-style: none; }
.pwork-fix > summary::-webkit-details-marker { display: none; }
.pwork-given { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.pwork-given > .btn { justify-self: start; }
.pwork-given__label { margin: 0; color: var(--ink-2); font-size: var(--fs-meta); font-weight: 500; }
.pwork-given__text { margin: 0; max-width: 64ch; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 720px) { .pwork-row { grid-template-columns: 20px minmax(0, 1fr); } .pwork-row > :last-child { grid-column: 2; justify-self: start; } }