/* ============================================================================
   worklists.css — Working lists overhaul.

   INSTALL: save as `static/css/worklists.css`, load after `recruiting.css`.
   Every class is `wl2-*`, so today's `.wl-*` rules in app.css keep working and
   the port can go one template at a time. Colour, type and spacing are the
   repo's own `--ub-*` / `--hs-*` tokens declared on `.home-shell`; nothing here
   invents a colour. `.wl2-*` must therefore live inside `.home-shell`.

   The table language is `recruiting.css`'s (`rec-panel`, `rec-table`, `rec-who`,
   `rec-pill`, `rec-select`, `rec-textbtn`, `rec-state`). Only what an editable,
   configurable table needs that Recruiting had no use for is declared here.
   ========================================================================== */

.wl2 {
  /* The one semantic ramp on these screens. Gold is attention (a note that has
     gone stale, an unsaved cell); purple is the shared-default/temporary-view
     family; danger is reserved for destroying a field. */
  --wl2-dirty: color-mix(in srgb, var(--hs-gold) 14%, #fff);
  --wl2-dirty-line: var(--hs-gold);
  --wl2-stale-ink: #7a5c12;
  --wl2-temp: #f2effa;
  --wl2-temp-line: #cfc5e6;
  min-width: 0;
}

/* -- Section bar tabs ------------------------------------------------------ */

/* The recruiting section bar was written for `<a href>`. These tabs are buttons
   (switching a list is in-page state), so the UA's own button chrome — border,
   grey field, radius, 13px system font — came through and boxed every tab.
   Reset to the anchor's rendering; the underline stays the only active signal. */
.wl2 .rec-sectionbar__tab {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: left;
}
.wl2 .rec-sectionbar__tab--on { border-bottom-color: var(--hs-gold); }
.wl2 .rec-sectionbar__tab--on .rec-sectionbar__ink { background: var(--hs-gold); }
.wl2 .rec-sectionbar__tab--on:has(> .rec-sectionbar__ink) { border-bottom-color: transparent; }
.wl2 .rec-sectionbar__action { border-radius: var(--ub-radius-sm); }

/* -- Page head meta line --------------------------------------------------- */

/* -- Page head ------------------------------------------------------------
   One line. The breadcrumb and the active tab both already say "Working lists",
   so the eyebrow is a third copy of the same word and goes. The list's counts
   sit beside its name rather than under it, and Talent Search — a setting
   nobody changes from here — lives in List settings where it is edited.
   ------------------------------------------------------------------------- */

.wl2 .rec-page__head { align-items: center; }
.wl2-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  min-width: 0;
}
.wl2 .wl2-head .rec-page__title { margin: 0; }
.wl2-head .wl2-meta { margin: 0; }

.wl2-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: var(--hs-ink-soft);
}
.wl2-meta__sep { width: 1px; height: 0.85rem; background: var(--hs-line-strong); flex: none; }
.wl2 .rec-page__head { flex-wrap: wrap; }
.wl2 .rec-page__actions { flex-wrap: wrap; }
.wl2-meta strong { color: var(--hs-ink); font-weight: 600; }

/* -- View bar: focus filters, then view controls --------------------------- */

/* The view bar is one row: focus filters, then the three view controls. They
   only stack when the panel genuinely cannot hold them. */
.wl2-viewbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  background: var(--hs-surface);
  border-bottom: 1px solid var(--hs-line);
}
.wl2-viewbar__spacer { flex: 1; min-width: 0.5rem; }
.wl2-viewbar__group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wl2-viewbar__k {
  font-family: var(--ub-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-ink-faint);
  white-space: nowrap;
}

/* A focus filter. The count is part of the control, not a decoration: a filter
   that would show nothing says so before it is pressed. */
.wl2-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.85rem;
  padding: 0 0.55rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hs-ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.wl2-chip:hover { border-color: var(--hs-gold); color: var(--hs-ink); }
.wl2-chip--on {
  background: var(--hs-active);
  border-color: var(--hs-gold-border);
  color: var(--wl2-stale-ink);
}
.wl2-chip__n {
  font-family: var(--ub-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--hs-ink-faint);
}
.wl2-chip--on .wl2-chip__n { color: var(--wl2-stale-ink); }
.wl2-chip--empty { color: var(--hs-ink-faint); }
.wl2-chip:disabled,
.wl2-chip:disabled:hover {
  border-color: var(--hs-line);
  color: var(--hs-ink-faint);
  cursor: default;
}

/* -- Temporary view strip -------------------------------------------------- */

/* Shown only when the view on screen differs from the shared default. Purple,
   not gold: this is not a warning, it is a statement about who can see what. */
.wl2-tempbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.85rem;
  background: var(--wl2-temp);
  border-bottom: 1px solid var(--wl2-temp-line);
  font-size: 0.82rem;
  color: var(--hs-ink-soft);
}
.wl2-tempbar strong { color: var(--hs-ink); font-weight: 600; }
.wl2-tempbar__spacer { flex: 1; }
.wl2-tempbar__list {
  font-family: var(--ub-font-mono);
  font-size: 0.72rem;
  color: var(--hs-ink-faint);
}

/* -- Table ----------------------------------------------------------------- */

/* The table responds to the width of the panel it sits in, not the viewport:
   with a 250px sidebar the two differ by enough to matter, and the sideways
   overflow this prevents was hiding the note column behind the pinned action
   cell. `container-type: inline-size` makes the panel the query container. */
.wl2 .rec-panel { container-type: inline-size; }

.wl2-tablewrap {
  overflow: auto;
  max-height: var(--wl2-scroll, 62vh);
  overscroll-behavior: contain;
}
.wl2-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.wl2-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fbfaf8;
  border-bottom: 1px solid var(--hs-line-strong);
  padding: 0.45rem 0.6rem;
  text-align: left;
  white-space: nowrap;
  font-family: var(--ub-font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-ink-faint);
  vertical-align: bottom;
  /* One line. The table has room to the right, and a heading that wraps to two
     lines pushes the whole header band down for nothing. */
  white-space: nowrap;
  line-height: 1.3;
}
.wl2-table tbody td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid #f2efe9;
  vertical-align: top;
}
.wl2-table tbody tr:hover { background: #fcfbf9; }
.wl2-table tbody tr:last-child td { border-bottom: 0; }

/* The note column is what this table is for, so it takes the slack. Every other
   column is content-width. */
.wl2-c--note { width: 36%; min-width: 13rem; }
.wl2-c--who { min-width: 12rem; }
.wl2-c--fact { min-width: 7rem; }
.wl2-c--date { width: 1%; white-space: nowrap; }

/* The row's own control is the last cell, and the note column's floor runs this
   table past the page well before a phone. Pinned so Remove stays reachable
   without a sideways scroll nothing announces — the same fix today's
   `console__table--worklist` makes, kept because the reason has not changed. */
.wl2-c--act {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -10px 0 10px -10px rgba(24, 18, 43, 0.22);
}
.wl2-table thead th.wl2-c--act { background: #fbfaf8; z-index: 4; }
.wl2-table tbody tr:hover td.wl2-c--act { background: #fcfbf9; }

.wl2-sortbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.wl2-sortbtn:hover { color: var(--hs-ink); }
.wl2-sortbtn--on { color: var(--wl2-stale-ink); }
.wl2-sortbtn svg { width: 0.7rem; height: 0.7rem; flex: none; }
.wl2-th__custom {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* A per-list field, so the heading says so. Dotted underline rather than a
   badge on every heading: it is a fact about the column, not a state. */
.wl2-th__own { border-bottom: 1px dotted var(--hs-gold-border); }

/* -- Row height -----------------------------------------------------------
   One table, three heights. Compact spends the row on identity and the note's
   first line and drops everything a manager can get from a column of its own;
   Expanded is for the meeting where the notes are the agenda. The choice lives
   in the view, so it is temporary until somebody saves it as the shared default
   — the same rule as grouping and column order.
   ------------------------------------------------------------------------- */

.wl2-table--compact tbody td { padding-top: 0.14rem; padding-bottom: 0.14rem; }
.wl2-table--compact .wl2-who { padding-top: 0.08rem; align-items: center; }
.wl2-table--compact .wl2-who__sub { display: none; }
.wl2-table--compact .wl2-who__avatar { width: 1.35rem; height: 1.35rem; font-size: 0.58rem; }
.wl2-table--compact .wl2-note__text { -webkit-line-clamp: 1; }
.wl2-table--compact .wl2-note__foot { min-height: 0; }
.wl2-table--compact .wl2-note__foot:empty { display: none; }
.wl2-table--compact .wl2-edit,
.wl2-table--compact .wl2-fact { min-height: 1.45rem; padding-top: 0.14rem; }
.wl2-table--compact .wl2-input { min-height: 1.45rem; }

.wl2-table--expanded tbody td { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.wl2-table--expanded .wl2-note__text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* -- Compact: one line per contractor ---------------------------------------
   The note preview and its flag share the line — the flag is what the row is
   asking for, so it sits where the eye already is, not on a line of its own.
   Everything that is ABOUT the note rather than in it (the freshness date,
   Mark reviewed) moved into the expansion.
   ------------------------------------------------------------------------- */

.wl2-v2 .wl2-table--compact .wl2-note {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.wl2-v2 .wl2-table--compact .wl2-note > .wl2-edit { flex: 1 1 auto; min-width: 0; }
.wl2-v2 .wl2-table--compact .wl2-note__foot {
  flex: 0 0 auto;
  min-height: 0;
  padding-left: 0;
  gap: 0.3rem;
  flex-wrap: nowrap;
}
.wl2-v2 .wl2-table--compact .wl2-note__foot:empty { display: none; }
.wl2-v2 .wl2-table--compact .wl2-note__text { -webkit-line-clamp: 1; }
/* An empty note gets ONE treatment: the cell itself reads as the absence and
   as the control to fill it. No placeholder plus a badge underneath. */
.wl2-v2 .wl2-table--compact .wl2-edit--empty {
  border: 1px dashed var(--hs-line-strong);
  font-family: var(--ub-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wl2-v2 .wl2-table--compact .wl2-edit--empty:hover { border-style: solid; border-color: var(--hs-gold); }

/* ~52px at 100% zoom. The height is bought with padding around a 1.45rem
   control, not by growing the type or letting a second line in. */
.wl2-v2 .wl2-table--compact tbody td { padding-top: 0.62rem; padding-bottom: 0.62rem; }

/* An editable cell renders its value inside a `.wl2-edit` control that carries
   0.4rem of its own left padding, so the heading above it takes the same offset
   and the column reads as one edge. */
.wl2-table thead th.wl2-th--edit { padding-left: 1rem; }

/* -- Group band ------------------------------------------------------------ */

/* Not sticky: the header above it wraps to a second line at some widths, so a
   pinned offset would be wrong at exactly the widths it mattered. Bands are
   short and the column header stays pinned regardless. */
.wl2-band > th {
  padding: 0.5rem 0.6rem 0.4rem;
  text-align: left;
  background: var(--hs-hover);
  border-top: 1px solid var(--hs-line-strong);
  border-bottom: 1px solid var(--hs-line);
  font-family: var(--ub-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hs-ink);
  white-space: normal;
}
.wl2-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.wl2-band__chev { width: 0.7rem; height: 0.7rem; flex: none; color: var(--hs-ink-faint); }
.wl2-band__chev--closed { transform: rotate(-90deg); }
.wl2-band__n {
  font-family: var(--ub-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--hs-ink-soft);
}
.wl2-band__flags {
  font-family: var(--ub-font-mono);
  font-size: 0.66rem;
  color: var(--wl2-stale-ink);
}

/* -- Identity and read-only facts ----------------------------------------- */

.wl2-who { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; padding-top: 0.22rem; }
.wl2-who__avatar {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--hs-hover); color: var(--hs-ink-soft);
  font-size: 0.64rem; font-weight: 700;
}
.wl2-who__id { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wl2-who__name { font-weight: 600; color: var(--hs-ink); text-decoration: none; }
.wl2-who__name:hover { text-decoration: underline; text-decoration-color: var(--hs-gold); }
.wl2-who__sub { font-size: 0.74rem; color: var(--hs-ink-faint); }

.wl2-fact { display: block; padding-top: 0.3rem; color: var(--hs-ink-soft); }
.wl2-fact--none { color: var(--hs-ink-faint); }
.wl2-fact--mono { font-family: var(--ub-font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* -- Editable cell -------------------------------------------------------- */

/* Closed state: a target the whole cell wide, so a manager aiming at a date
   does not have to hit a 60px input. It reads as text until it is hovered. */
.wl2-edit {
  display: block;
  width: 100%;
  min-height: 1.75rem;
  padding: 0.28rem 0.4rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--hs-ink);
  text-align: left;
  cursor: text;
}
.wl2-edit:hover { border-color: var(--hs-line-strong); background: #fff; }
.wl2-edit--empty { color: var(--hs-ink-faint); }
.wl2-edit--mono { font-family: var(--ub-font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl2-edit--ro { cursor: default; }
.wl2-edit--ro:hover { border-color: transparent; background: none; }

/* Open state. Same box, same metrics, so nothing moves when it is entered. */
.wl2-input {
  display: block;
  width: 100%;
  min-height: 1.75rem;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--hs-gold);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  color: var(--hs-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-gold) 18%, transparent);
}
.wl2-input--mono { font-family: var(--ub-font-mono); font-size: 0.8rem; }
.wl2-input--note { resize: vertical; line-height: 1.45; }

/* Unsaved. The tick is on the cell so a changed value is findable by eye down a
   long table, and it survives sorting, grouping and hiding columns because it
   is drawn from the draft rather than from the row's position. */
.wl2-cell--dirty {
  background: var(--wl2-dirty);
  box-shadow: inset 2px 0 0 var(--wl2-dirty-line);
}

/* -- Note cell ------------------------------------------------------------ */

.wl2-note { display: flex; flex-direction: column; gap: 0.18rem; }
.wl2-note__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  text-wrap: pretty;
}
.wl2-note__text--open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.wl2-note__foot {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding-left: 0.4rem;
  min-height: 1.1rem;
}
.wl2-note__when {
  font-family: var(--ub-font-mono);
  font-size: 0.66rem;
  color: var(--hs-ink-faint);
  white-space: nowrap;
}
.wl2-note__when--stale { color: var(--wl2-stale-ink); }
.wl2-note__more {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--hs-ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--hs-gold-border);
}
.wl2-note__more:hover { color: var(--hs-ink); }

/* Row-level markers. Two states, two shapes: "no note at all" is an absence and
   reads as dashed; "this note may no longer be true" is attention and reads off
   the gold. Neither is red — a stale note is not an error. */
.wl2-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.02rem 0.32rem;
  border-radius: 4px;
  font-family: var(--ub-font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wl2-flag--missing {
  border: 1px dashed var(--hs-line-strong);
  color: var(--hs-ink-faint);
}
.wl2-flag--review {
  border: 1px solid var(--hs-gold-border);
  background: var(--hs-active);
  color: var(--wl2-stale-ink);
}
.wl2-flag--absence {
  border: 1px solid var(--wl2-temp-line);
  background: var(--wl2-temp);
  color: #453168;
}
.wl2-flag--notice {
  border: 1px solid var(--hs-line-strong);
  background: #fbfaf8;
  color: var(--hs-ink-soft);
}

/* -- Save bar ------------------------------------------------------------- */

/* Sticky to the panel, not the viewport: it belongs to the table it saves, and
   a long list scrolls under it. */
.wl2-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  background: var(--hs-ink);
  color: #fff;
  border-top: 1px solid var(--hs-ink);
}
.wl2-savebar__count { font-weight: 700; font-size: 0.86rem; }
.wl2-savebar__hint { font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); }
.wl2-savebar__spacer { flex: 1; }
.wl2-savebar .rec-textbtn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.wl2-savebar .rec-textbtn:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.wl2-savebar .button--primary { background: #e0d394; border-color: #e0d394; color: #18122b; }
.wl2-savebar .button--primary:hover { background: #efe4b4; border-color: #efe4b4; }

/* Saved. Replaces the save bar for a moment rather than floating over the page,
   so the row it is about is still the row under the cursor. */
.wl2-savedbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--ub-ok) 9%, #fff);
  border-top: 1px solid color-mix(in srgb, var(--ub-ok) 32%, transparent);
  font-size: 0.83rem;
  color: #256e43;
  font-weight: 600;
}
.wl2-savedbar svg { width: 1rem; height: 1rem; flex: none; }

/* -- Conflict ------------------------------------------------------------- */

.wl2-conflict {
  padding: 0.85rem 0.95rem;
  background: var(--hs-active);
  border-bottom: 1px solid var(--hs-gold-border);
}
.wl2-conflict__title { margin: 0 0 0.3rem; font-size: 0.9rem; font-weight: 700; color: var(--hs-ink); }
.wl2-conflict__body { margin: 0; font-size: 0.83rem; color: var(--hs-ink-soft); max-width: 46rem; }
.wl2-conflict__list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--hs-ink-soft);
}
.wl2-conflict__acts { display: flex; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }

/* -- Overlay sheet: column chooser, field editor, settings ---------------- */

.wl2-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(26, 19, 48, 0.32);
}
.wl2-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(30rem, 100vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--hs-line-strong);
  box-shadow: -18px 0 48px -28px rgba(26, 19, 48, 0.45);
}
.wl2-sheet__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  border-bottom: 1px solid var(--hs-line);
}
.wl2-sheet__kind {
  font-family: var(--ub-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hs-gold);
}
.wl2-sheet__title {
  margin: 0;
  font-family: var(--ub-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.wl2-sheet__close {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 1.8rem; height: 1.8rem;
  border: 1px solid var(--hs-line);
  border-radius: 6px;
  background: #fff;
  color: var(--hs-ink-soft);
  cursor: pointer;
  flex: none;
}
.wl2-sheet__close:hover { border-color: var(--hs-gold); color: var(--hs-ink); }
.wl2-sheet__close svg { width: 0.9rem; height: 0.9rem; }
.wl2-sheet__body { flex: 1; overflow-y: auto; padding: 0.9rem 1rem 1.4rem; }
.wl2-sheet__foot {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--hs-line);
  background: #fbfaf8;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.wl2-sheet__lede { margin: 0 0 0.85rem; font-size: 0.83rem; color: var(--hs-ink-soft); }
.wl2-sheet__k {
  margin: 1.15rem 0 0.45rem;
  font-family: var(--ub-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-ink-faint);
}
.wl2-sheet__k:first-child { margin-top: 0; }

/* -- Column chooser row --------------------------------------------------- */

.wl2-cols { display: flex; flex-direction: column; gap: 2px; }
.wl2-colrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
}
.wl2-colrow:hover { background: #fbfaf8; border-color: var(--hs-line); }
.wl2-colrow--drag { opacity: 0.45; }
.wl2-colrow--over { border-color: var(--hs-gold); background: var(--hs-active); }
.wl2-colrow--fixed { opacity: 1; }
.wl2-colrow__grab {
  display: inline-grid;
  place-items: center;
  width: 1.3rem; height: 1.5rem;
  border: 0; background: none;
  color: var(--hs-line-strong);
  cursor: grab;
  flex: none;
}
.wl2-colrow__grab:hover { color: var(--hs-ink-faint); }
.wl2-colrow__grab svg { width: 0.85rem; height: 0.85rem; }
.wl2-colrow__grab--off { cursor: default; opacity: 0.35; }
.wl2-colrow__id { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.wl2-colrow__name { font-size: 0.85rem; font-weight: 600; }
.wl2-colrow__src {
  font-family: var(--ub-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hs-ink-faint);
}
.wl2-colrow__nudge { display: flex; flex-direction: column; gap: 1px; flex: none; }
.wl2-nudge {
  display: inline-grid;
  place-items: center;
  width: 1.35rem; height: 0.85rem;
  border: 1px solid var(--hs-line);
  border-radius: 4px;
  background: #fff;
  color: var(--hs-ink-soft);
  cursor: pointer;
  padding: 0;
}
.wl2-nudge:hover { border-color: var(--hs-gold); color: var(--hs-ink); }
.wl2-nudge:disabled, .wl2-nudge:disabled:hover { color: #d5d1c8; border-color: var(--hs-line); cursor: default; }
.wl2-nudge svg { width: 0.62rem; height: 0.62rem; }

/* Show/hide. A switch, not a checkbox: hiding a column is presentation and this
   has to read differently from the delete control two rows away. */
.wl2-switch {
  position: relative;
  width: 2.1rem; height: 1.15rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 999px;
  background: #f1eee8;
  cursor: pointer;
  flex: none;
  padding: 0;
}
.wl2-switch::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 0.95rem; height: 0.95rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 18, 43, 0.25);
  transition: transform 160ms ease;
}
.wl2-switch--on { background: var(--hs-gold); border-color: var(--hs-gold); }
.wl2-switch--on::after { transform: translateX(0.93rem); }
@media (prefers-reduced-motion: reduce) { .wl2-switch::after { transition: none; } }

/* -- Forms inside a sheet ------------------------------------------------- */

.wl2-field { margin-bottom: 0.95rem; }
.wl2-field__label {
  display: block;
  margin-bottom: 0.22rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hs-ink);
}
.wl2-field__help { margin: 0 0 0.35rem; font-size: 0.78rem; color: var(--hs-ink-soft); }
.wl2-field__err { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--ub-danger); font-weight: 600; }
.wl2-text {
  width: 100%;
  height: 2.2rem;
  padding: 0 0.55rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: var(--hs-ink);
}
.wl2-text:focus-visible { border-color: var(--hs-gold); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-gold) 18%, transparent); }
.wl2-counter { font-family: var(--ub-font-mono); font-size: 0.66rem; color: var(--hs-ink-faint); }

.wl2-radios { display: flex; flex-direction: column; gap: 0.3rem; }
.wl2-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--hs-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.84rem;
}
.wl2-radio:hover { border-color: var(--hs-line-strong); background: #fbfaf8; }
.wl2-radio--on { border-color: var(--hs-gold); background: var(--hs-active); }
.wl2-radio input { margin-top: 0.2rem; flex: none; }
.wl2-radio__id { display: flex; flex-direction: column; line-height: 1.35; }
.wl2-radio__name { font-weight: 600; }
.wl2-radio__help { font-size: 0.78rem; color: var(--hs-ink-soft); }
.wl2-radio--locked { cursor: default; opacity: 0.72; }

/* -- Destructive confirmation -------------------------------------------- */

.wl2-danger {
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--ub-danger) 32%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ub-danger) 5%, #fff);
}
.wl2-danger__title { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 700; color: var(--hs-ink); }
.wl2-danger__body { margin: 0; font-size: 0.83rem; color: var(--hs-ink-soft); }
.wl2-danger__count {
  display: block;
  margin: 0.55rem 0 0;
  font-family: var(--ub-font-mono);
  font-size: 0.78rem;
  color: var(--ub-danger);
  font-weight: 500;
}
.wl2-danger__acts { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.button--danger {
  background: var(--ub-danger);
  border-color: var(--ub-danger);
  color: #fff;
}
.button--danger:hover { background: #a52f26; border-color: #a52f26; }

/* -- Contractor picker --------------------------------------------------- */

.wl2-picker { display: flex; flex-direction: column; gap: 0.4rem; }
.wl2-picker__results {
  border: 1px solid var(--hs-line);
  border-radius: 8px;
  max-height: 17rem;
  overflow-y: auto;
}
.wl2-pick {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-bottom: 1px solid #f2efe9;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wl2-pick:last-child { border-bottom: 0; }
.wl2-pick:hover { background: var(--hs-hover); }
.wl2-pick__id { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.wl2-pick__name { font-size: 0.85rem; font-weight: 600; }
.wl2-pick__sub { font-size: 0.74rem; color: var(--hs-ink-faint); }
.wl2-pick__on {
  font-family: var(--ub-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hs-ink-faint);
  flex: none;
}
.wl2-pick:disabled { cursor: default; background: #fbfaf8; }
.wl2-pick:disabled .wl2-pick__name { color: var(--hs-ink-faint); }

/* -- Index screen -------------------------------------------------------- */

.wl2-idx__name { font-size: 0.95rem; font-weight: 700; color: var(--hs-ink); text-decoration: none; }
.wl2-idx__name:hover { text-decoration: underline; text-decoration-color: var(--hs-gold); }
.wl2-idx__sub { display: block; margin-top: 0.1rem; font-size: 0.78rem; color: var(--hs-ink-faint); }
.wl2-idx__health { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.wl2-idx__ok { font-size: 0.78rem; color: #256e43; font-weight: 600; }

/* The index table is the one `.rec-table` on these screens — every detail
   table is `.wl2-table` — so this scope reaches it alone. Taller rows, same
   type (CONTRACT §4). */
.wl2 .rec-table thead th { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.wl2 .rec-table tbody td { padding-top: 0.65rem; padding-bottom: 0.65rem; }

/* -- Prototype controls: outside the product, and labelled as such ------- */

.wl2-proto {
  position: fixed;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 70;
  width: 17.5rem;
  border: 1px solid #3b3559;
  border-radius: 10px;
  background: #18122b;
  color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.6);
  font-size: 0.8rem;
}
.wl2-proto__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.wl2-proto__k {
  font-family: var(--ub-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e0d394;
}
.wl2-proto__toggle {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
}
.wl2-proto__toggle:hover { background: rgba(255, 255, 255, 0.18); }
.wl2-proto__body { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.55rem; }
.wl2-proto__row { display: flex; flex-direction: column; gap: 0.25rem; }
.wl2-proto__label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); }
.wl2-proto__seg { display: flex; gap: 2px; }
.wl2-proto__segbtn {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 5px;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.24rem 0.3rem;
  cursor: pointer;
}
.wl2-proto__segbtn--on { background: #e0d394; border-color: #e0d394; color: #18122b; }
.wl2-proto__btn {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
  text-align: left;
}
.wl2-proto__btn:hover { background: rgba(255, 255, 255, 0.18); }
.wl2-proto__note { margin: 0; font-size: 0.68rem; line-height: 1.4; color: rgba(255, 255, 255, 0.52); }

/* -- Read-only strip ----------------------------------------------------- */

.wl2-ro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: #fbfaf8;
  border-bottom: 1px solid var(--hs-line-strong);
  font-size: 0.82rem;
  color: var(--hs-ink-soft);
}
.wl2-ro svg { width: 1rem; height: 1rem; flex: none; color: var(--hs-ink-faint); }
.wl2-ro strong { color: var(--hs-ink); }

/* ==========================================================================
   v2 — truncation instead of omission.

   Scoped to `.wl2-v2` so the first version keeps its own row treatment. The
   rule this implements: nothing is hidden to make a row fit. Every value stays
   on screen, on ONE line, clipped with an ellipsis when the column is narrower
   than the text, and recoverable in full — by tooltip on hover or keyboard
   focus, and by expanding the row on touch or with the keyboard. Truncation is
   presentation only: the complete string is what gets edited, sorted, searched,
   saved and read by Talent Search.
   ========================================================================== */

.wl2-v2 .wl2-trunc {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Only a value long enough to clip is focusable, so the table does not gain a
   tab stop per cell. Whether it is ACTUALLY clipped is measured at hover or
   focus time, and the tooltip is withheld when it is not. */
.wl2-v2 .wl2-trunc[tabindex="0"] { cursor: help; }
.wl2-v2 .wl2-trunc[tabindex="0"]:hover { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--hs-line-strong); }

.wl2-tip {
  position: fixed;
  z-index: 90;
  max-width: 22rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: var(--hs-ink);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.35;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.wl2-tip__k {
  display: block;
  font-family: var(--ub-font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e0d394;
}

/* Identity keeps its weight at every height. In compact the title moves beside
   the name rather than disappearing: the name never shrinks, the title gives up
   its width first. */
.wl2-v2 .wl2-who__name { font-size: 0.9rem; }
.wl2-v2 .wl2-table--compact .wl2-who__id {
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
}
.wl2-v2 .wl2-who__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl2-v2 .wl2-table--compact .wl2-who__name { flex: 0 0 auto; }
.wl2-v2 .wl2-table--compact .wl2-who__sub { flex: 1 1 auto; min-width: 0; }
.wl2-v2 .wl2-table--compact .wl2-who__avatar { width: 1.5rem; height: 1.5rem; font-size: 0.6rem; }
.wl2-v2 .wl2-c--who { min-width: 0; width: 16rem; }

/* The name never truncates — it is how a manager finds the row. In compact the
   title is not repeated beside it: it has its own column, and the row expansion
   always carries it. Everything else gives up width first. */
.wl2-v2 .wl2-table--compact .wl2-who__sub { display: none; }

/* Fixed layout is what makes truncation predictable: a column keeps the width
   the design gave it instead of growing to whatever the longest team name
   happens to be, and the note column takes everything left over. */
.wl2-v2 .wl2-table { table-layout: fixed; }
.wl2-v2 .wl2-c--fact { width: 8.5rem; min-width: 0; }
.wl2-v2 .wl2-c--date { width: 6.5rem; min-width: 0; }
.wl2-v2 .wl2-c--act { width: 4.6rem; }
.wl2-v2 .wl2-c--note { width: auto; min-width: 0; }
.wl2-v2 .wl2-table tbody td { overflow: hidden; }
.wl2-v2 .wl2-rowx > td { overflow: visible; }

/* Row expansion. One control per row, and the only route to the full note —
   notes are never put in a tooltip. */
.wl2-rowtoggle {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  margin-top: 0.05rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--hs-ink-faint);
  cursor: pointer;
  padding: 0;
}
.wl2-rowtoggle:hover { border-color: var(--hs-line-strong); background: #fff; color: var(--hs-ink); }
.wl2-rowtoggle svg { width: 0.72rem; height: 0.72rem; }
.wl2-rowtoggle__chev--closed { transform: rotate(-90deg); }

.wl2-rowx > td {
  background: #fbfaf8;
  border-bottom: 1px solid var(--hs-line-strong);
  padding: 0.75rem 0.9rem 0.85rem 2.6rem;
}
.wl2-rowx__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.75rem;
}
.wl2-rowx__k {
  display: block;
  font-family: var(--ub-font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-ink-faint);
}
.wl2-rowx__v { font-size: 0.84rem; color: var(--hs-ink); text-wrap: pretty; }
.wl2-rowx__v--none { color: var(--hs-ink-faint); }
.wl2-rowx__note { max-width: 46rem; }
.wl2-rowx__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

/* Band summary sits at the right edge, the way the group's own tally reads best
   against a wide table. */
.wl2-band__row { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; }
.wl2-band__spacer { flex: 1; }

/* v2's columns have fixed widths, so its table needs more room before the note
   column gets squeezed to nothing. Below this the row becomes a block. Unlike
   the shared rule, truncation and its tooltip STAY ON here: a clipped value has
   to be recoverable at every width, not only on a wide screen. */
@container (max-width: 1040px) {
  .wl2-v2 .wl2-tablewrap { max-height: none; overflow: visible; }
  .wl2-v2 .wl2-table { table-layout: auto; }
  .wl2-v2 .wl2-table thead { display: none; }
  .wl2-v2 .wl2-table, .wl2-v2 .wl2-table tbody { display: block; width: auto; }
  /* A flex row, so the record's own control sits at the end of the meta line
     instead of taking a line of its own: 26px a row, over twenty rows. */
  .wl2-v2 .wl2-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    width: auto;
    border-bottom: 1px solid var(--hs-line);
    padding: 0.28rem 0.2rem 0.34rem;
  }
  .wl2-v2 .wl2-table tbody .wl2-who { padding-top: 0; }
  .wl2-v2 .wl2-table tbody .wl2-note { gap: 0.1rem; }
  .wl2-v2 .wl2-table tbody .wl2-note__foot { min-height: 0; }
  .wl2-v2 .wl2-table tbody td {
    display: inline-flex; align-items: baseline; gap: 0.3rem; width: auto;
    border-bottom: 0; padding: 0.1rem 0.5rem 0.1rem 0; overflow: hidden;
    flex: 0 1 auto; order: 1; min-width: 0;
  }
  .wl2-v2 .wl2-table tbody td::before {
    content: attr(data-label);
    font-family: var(--ub-font-mono); font-size: 0.56rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--hs-ink-faint); white-space: nowrap; flex: none;
  }
  .wl2-v2 .wl2-table tbody td .wl2-fact,
  .wl2-v2 .wl2-table tbody td .wl2-edit,
  .wl2-v2 .wl2-table tbody td .wl2-input { padding-top: 0; padding-bottom: 0; min-height: 0; width: auto; }
  /* The clip has to come from somewhere once the column is gone, so each inline
     value takes a ceiling of its own: long team and DP names still ellipse, and
     still answer the tooltip. */
  .wl2-v2 .wl2-table tbody td .wl2-trunc { max-width: 9.5rem; }
  .wl2-v2 .wl2-table tbody td.wl2-c--who,
  .wl2-v2 .wl2-table tbody td.wl2-c--note { display: block; flex: 1 1 100%; padding: 0 0 0.12rem; }
  .wl2-v2 .wl2-table tbody td.wl2-c--who { order: 0; }
  .wl2-v2 .wl2-table tbody td.wl2-c--note { order: 3; }
  .wl2-v2 .wl2-table tbody td.wl2-c--who .wl2-trunc,
  .wl2-v2 .wl2-table tbody td.wl2-c--note .wl2-trunc { max-width: 100%; }
  .wl2-v2 .wl2-table tbody td.wl2-c--who::before,
  .wl2-v2 .wl2-table tbody td.wl2-c--note::before,
  .wl2-v2 .wl2-table tbody td.wl2-c--act::before { content: none; }
  .wl2-v2 .wl2-table tbody td.wl2-c--note .wl2-edit,
  .wl2-v2 .wl2-table tbody td.wl2-c--note .wl2-input { width: 100%; }
  .wl2-v2 .wl2-table tbody td.wl2-c--act {
    order: 2; margin-left: auto; padding-right: 0;
    position: static; box-shadow: none; text-align: right;
  }
  .wl2-v2 .wl2-table tbody td.wl2-c--empty { display: none; }
  .wl2-v2 .wl2-c--note, .wl2-v2 .wl2-c--who, .wl2-v2 .wl2-c--date, .wl2-v2 .wl2-c--fact { width: auto; }
  .wl2-v2 .wl2-rowx { display: block; }
  .wl2-v2 .wl2-rowx > td { display: block; width: auto; overflow: visible; padding: 0.7rem 0.6rem 0.8rem; }
  .wl2-v2 .wl2-band { display: block; }
  .wl2-v2 .wl2-table tbody tr.wl2-band > th { flex: 1 1 100%; }
  .wl2-v2 .wl2-band > th { display: block; }
  /* One line in compact here too: the chevron beside the name is how the note
     gets read whole, and it is one tap away. */
  .wl2-v2 .wl2-table--compact .wl2-note__text { -webkit-line-clamp: 1; }
}

/* -- Focus ---------------------------------------------------------------- */

.wl2 :focus-visible,
.wl2-sheet :focus-visible,
.wl2-proto :focus-visible {
  outline: 2px solid var(--ub-primary);
  outline-offset: 1px;
  border-radius: 4px;
}
.wl2-proto :focus-visible { outline-color: #e0d394; }

/* ==========================================================================
   Narrow screens. The table becomes one labelled block per contractor rather
   than a sideways scroll nothing announces: every cell keeps its heading as its
   own label, and the view controls stack instead of folding away. The save bar
   stays sticky, which is the whole point of it on a phone.
   ========================================================================== */

@media (max-width: 1100px) {
  .home-shell.wl2-shell { grid-template-columns: 1fr; }
  .home-shell.wl2-shell .hs-side { display: none; }
  .home-shell.wl2-shell .hs-side--open {
    display: flex;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 80;
    width: 250px;
    box-shadow: 18px 0 48px -28px rgba(26, 19, 48, 0.45);
  }
  .rec-page { padding: 1.1rem 0.9rem 0; }
}

/* Gated on the PANEL's width, not the viewport's. The table's own floor is
   about 900px; below that it would either scroll sideways or hide the note
   column under the pinned action cell, so the labelled-block layout takes over
   instead — on a phone and on a narrow desktop pane alike. */
@container (max-width: 960px) {
  .wl2-tablewrap { max-height: none; overflow: visible; }
  .wl2-c--act { position: static; box-shadow: none; }
  .wl2-table thead { display: none; }
  .wl2-table, .wl2-table tbody, .wl2-table tr, .wl2-table td { display: block; width: auto; }
  .wl2-table tbody tr {
    border-bottom: 1px solid var(--hs-line);
    padding: 0.45rem 0.2rem 0.5rem;
  }
  /* The supporting facts flow as inline label/value pairs instead of taking a
     stacked row each: a contractor that needed seven lines to say five short
     things now reads as a heading, one wrapped meta line, and the note. */
  .wl2-table tbody td {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    border-bottom: 0;
    padding: 0.12rem 0.45rem 0.12rem 0;
    max-width: 100%;
  }
  .wl2-table tbody td::before {
    content: attr(data-label);
    font-family: var(--ub-font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hs-ink-faint);
    white-space: nowrap;
    flex: none;
  }
  .wl2-table tbody td .wl2-fact,
  .wl2-table tbody td .wl2-edit,
  .wl2-table tbody td .wl2-input { padding-top: 0; padding-bottom: 0; min-height: 0; width: auto; }
  .wl2-table tbody td .wl2-edit { min-width: 3rem; }
  /* Identity is the block's heading: full width, no label, and it opens the
     row. The note is the block's body, likewise full width. */
  .wl2-table tbody td.wl2-c--who,
  .wl2-table tbody td.wl2-c--note { display: block; padding: 0.1rem 0 0.25rem; }
  .wl2-table tbody td.wl2-c--who::before,
  .wl2-table tbody td.wl2-c--note::before,
  .wl2-table tbody td.wl2-c--act::before { content: none; }
  .wl2-table tbody td.wl2-c--note .wl2-edit { width: 100%; }
  .wl2-table tbody td.wl2-c--note .wl2-input { width: 100%; }
  .wl2-table tbody td.wl2-c--act { display: block; padding: 0.3rem 0 0; text-align: left; }
  .wl2-table tbody td.wl2-c--empty { display: none; }
  .wl2-c--note, .wl2-c--who, .wl2-c--date, .wl2-c--fact { min-width: 0; width: auto; }
  .wl2-band > th { display: block; }
  .wl2-viewbar { gap: 0.35rem; }
  .wl2-viewbar__spacer { display: none; }
}

/* The prototype panel is fixed to the viewport, so it is the one thing here
   that a container query cannot reach. */
@media (max-width: 560px) {
  .wl2-proto { right: 0.5rem; left: 0.5rem; bottom: 0.5rem; width: auto; }
}