/* Sidebar (js/sidebar.js). Prefixes: cws- = the sidebar, cwk- = knowledge pages in the middle.
   Uses the tokens and shared components of css/base.css (.cw-sq relation squares, .cw-count
   counters, .cw-btn, .cw-input, .cw-link, .cw-disclosure-*, .cw-back, .cw-crumbs) so the
   sidebar looks like the rest of the app. Sharp edges, 1px borders, no shadows except popovers. */

/* ------------------------------------------------------------------ shell */

.cws {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  font-family: var(--cw-font);
  font-size: var(--cw-fs);
  line-height: var(--cw-lh);
  color: var(--cw-text);
  background: var(--cw-surface);
}

.cws *,
.cws *::before,
.cws *::after,
.cwk *,
.cwk *::before,
.cwk *::after {
  box-sizing: border-box;
}

.cws button,
.cws input,
.cwk button {
  font: inherit;
  color: inherit;
  border-radius: var(--cw-radius);
}

.cws button,
.cwk button {
  cursor: pointer;
}

.cws button:disabled,
.cwk button:disabled {
  cursor: default;
}

.cws button:focus-visible,
.cws a:focus-visible,
.cwk button:focus-visible,
.cwk a:focus-visible {
  outline: 2px solid var(--cw-accent);
  outline-offset: -2px;
}

/* Rows are links (so a middle-click opens a new tab) but never look underlined. */
.cws a.cws-row,
.cws a.cws-row:hover,
.cwk a.cws-row,
.cwk a.cws-row:hover,
.cwk a.cwk-item,
.cwk a.cwk-item:hover {
  text-decoration: none;
}

/* Disclosure caret (drawn by .cw-disclosure-caret): turns when its button is open. */
.cws-caret {
  margin: 0 2px;
}

.cws [aria-expanded="true"] > .cws-caret,
.cwk [aria-expanded="true"] > .cws-caret {
  transform: rotate(90deg);
}

/* ------------------------------------------------------------------ 1. header */

.cws-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--cw-pad-2);
  min-height: 34px;
  padding: var(--cw-pad) var(--cw-pad-3);
  border-bottom: 1px solid var(--cw-border);
}

/* The name keeps its room; a long "You: ..." chip is cut first (it shrinks ten times faster). */
.cws-brand {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-brand:hover {
  color: var(--cw-accent);
}

.cws-who-chip {
  flex: 0 10 auto;
  min-width: 48px;
  margin-left: auto;
  min-height: var(--cw-ctl-h-sm);
  padding: 0 var(--cw-pad-2);
  border: 1px solid var(--cw-border);
  background: var(--cw-surface-2);
  font-size: var(--cw-fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-who-chip:hover {
  border-color: var(--cw-border-strong);
  background: var(--cw-hover);
}

.cws-who-chip.is-unknown {
  border-color: var(--cw-accent);
  background: var(--cw-surface);
  color: var(--cw-accent);
  font-weight: 600;
}

/* "Hide": collapses the list to its rail (the diagram's Hide sits at its top right too). */
.cws-hide {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 28px;
  padding: 0 var(--cw-pad-2);
  border: 1px solid transparent;
  background: none;
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
}

.cws-hide:hover {
  border-color: var(--cw-border);
  background: var(--cw-hover);
  color: var(--cw-text);
}

body.cw-mobile .cws-hide {
  display: none;
}

/* ------------------------------------------------------------------ 2. search */

.cws-searchbar {
  flex: 0 0 auto;
  position: relative;
  padding: var(--cw-pad-2) var(--cw-pad-3);
  border-bottom: 1px solid var(--cw-border);
}

.cws-search {
  display: block;
  width: 100%;
  height: 28px;
  padding: 0 28px 0 var(--cw-pad-3);
  border: 1px solid var(--cw-border-strong);
  border-radius: var(--cw-radius);
  background: var(--cw-surface);
  color: var(--cw-text);
  -webkit-appearance: none;
  appearance: none;
}

.cws-search::placeholder {
  color: var(--cw-muted);
}

.cws-search:focus {
  outline: 1px solid var(--cw-accent);
  outline-offset: 0;
  border-color: var(--cw-accent);
}

.cws-search::-webkit-search-cancel-button,
.cws-search::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.cws-clear {
  position: absolute;
  top: 50%;
  right: calc(var(--cw-pad-3) + 1px);
  width: 26px;
  height: 26px;
  margin-top: -13px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cw-muted);
  font-size: 16px;
  line-height: 1;
}

.cws-clear:hover {
  color: var(--cw-text);
}

/* ------------------------------------------------------------------ 3. scrolling body and sections */

/* One section open at a time: the three headers always show, and only the open section's list
   scrolls (so "People, roles and tools" and "Context" never drift off the bottom). */
.cws-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cws-sections {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cws-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cws-sec {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid var(--cw-border);
}

.cws-sec:not(.is-closed) {
  flex: 1 1 auto;
}

.cws-sec-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cws-sec-head {
  flex: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: stretch;
  background: var(--cw-surface);
  border-bottom: 1px solid var(--cw-border);
}

.cws-sec.is-closed .cws-sec-head {
  border-bottom-color: transparent;
}

.cws-sec-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--cw-pad);
  min-height: 32px;
  padding: var(--cw-pad) var(--cw-pad-3);
  border: 0;
  background: none;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.cws-sec-toggle:hover,
.cws-sec-action:hover {
  background: var(--cw-hover);
}

.cws-sec-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-sec-count {
  flex: 0 0 auto;
  color: var(--cw-muted);
  font-weight: 400;
}

.cws-sec-action {
  flex: 0 0 auto;
  padding: 0 var(--cw-pad-3);
  border: 0;
  border-left: 1px solid var(--cw-border);
  background: none;
  color: var(--cw-accent);
  font-weight: 600;
  white-space: nowrap;
}

.cws-sec-body {
  padding-bottom: 12px;
}

/* ------------------------------------------------------------------ rows (sidebar lists, search, knowledge pages) */

.cws-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cw-pad-2);
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 2px var(--cw-pad-3) 2px 12px;
  border: 0;
  background: none;
  color: var(--cw-text);
  text-align: left;
  cursor: pointer;
}

.cws-row:hover,
.cws-row.is-hover {
  background: var(--cw-hover);
}

.cws-row.is-open {
  background: var(--cw-accent-weak);
}

.cws-row.is-open .cws-title {
  font-weight: 600;
}

/* Selected (a step or the workflow itself, on the page or the diagram): left accent bar. */
.cws-row.is-selected::before,
.cws-group.has-selected::before,
.cwk-item.is-selected::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--cw-accent);
}

.cws-rel {
  flex: 0 0 auto;
}

/* Yours stand out in colour: blue number, and the name in bold where you are in charge. */
.cws-row .cws-rel.cw-sq { width: 12px; height: 12px; }
.cws-wf.is-owner .cws-code,
.cws-wf.is-involved .cws-code { color: var(--cw-accent); font-weight: 600; }
.cws-wf.is-owner .cws-title { font-weight: 600; }

.cws-code {
  flex: 0 0 auto;
  width: 2.5em;
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cws-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two-line rows (search results): title, then a muted line. */
.cws-two {
  align-items: flex-start;
  padding-top: 3px;
  padding-bottom: 3px;
}

.cws-two > .cws-code,
.cws-two > .cw-count,
.cws-two > .cws-tag,
.cws-two > .cws-new-tag {
  margin-top: 1px;
}

.cws-two > .cws-rel {
  margin-top: 4px;
}

.cws-two-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cws-two-main .cws-title {
  flex: 0 0 auto;
}

.cws-sub {
  min-width: 0;
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-tag {
  flex: 0 0 auto;
  padding: 0 4px;
  border: 1px solid var(--cw-border);
  background: var(--cw-surface-2);
  color: var(--cw-muted);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}

.cws-new-tag {
  flex: 0 0 auto;
  padding: 0 4px;
  border: 1px solid var(--cw-border);
  color: var(--cw-muted);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}

.cws-outline-tag {
  color: #7a4a00;
  border-color: #e8c48a;
  background: #fff4dc;
}

.cws-you {
  flex: 0 0 auto;
  padding: 0 4px;
  background: var(--cw-accent-weak);
  color: var(--cw-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.cws-kcount {
  flex: 0 0 auto;
  min-width: 1.6em;
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

mark.cws-mark {
  background: var(--cw-q);
  color: inherit;
  padding: 0;
}

/* ------------------------------------------------------------------ groups (Yours, areas) */

.cws-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cw-pad);
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 2px var(--cw-pad-3);
  border: 0;
  background: none;
  text-align: left;
}

/* A header with a link next to it (the yellow "questions for you" counter). */
.cws-group-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cws-group-row > .cws-group {
  flex: 1 1 auto;
}

.cws .cws-qlink {
  flex: 0 0 auto;
  min-width: 22px;
  height: 20px;
  margin-right: var(--cw-pad-3);
  cursor: pointer;
}

.cws .cws-qlink:hover {
  outline: 1px solid #8a6d00;
}

/* A closed area that holds some of your workflows: a mini square and how many. */
.cws-area-yours {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--cw-accent);
  font-size: var(--cw-fs-sm);
  font-weight: 600;
}

.cws-area-yours .cw-sq {
  width: 8px;
  height: 8px;
}

.cws-area-unsure {
  font-style: italic;
}

.cws-group:hover,
.cws-group.has-hover {
  background: var(--cw-hover);
}

.cws-group-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-group-count {
  flex: 0 0 auto;
  min-width: 1.6em;
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cws-yours .cws-group-name {
  font-weight: 600;
}

/* A closed area holding the open workflow says so. */
.cws-group.has-open {
  background: var(--cw-accent-weak);
}

.cws-group.has-open .cws-group-name {
  font-weight: 600;
}

.cws-group-body .cws-row {
  padding-left: 22px;
}

.cws-group-body .cws-more {
  margin-left: 22px;
}

.cws-label {
  padding: var(--cw-pad-3) var(--cw-pad-3) 2px;
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
  font-weight: 600;
}

/* ------------------------------------------------------------------ legend, prompts, small bits */

.cws-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--cw-pad-3);
  padding: var(--cw-pad) var(--cw-pad-3);
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
}

.cws-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-pad);
  white-space: nowrap;
}

.cws-legend-caveat {
  gap: 3px;
  font-style: italic;
}

.cws-help {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--cw-border-strong);
  background: var(--cw-surface);
  color: var(--cw-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help !important;
}

.cws-help:hover,
.cws-help:focus {
  border-color: var(--cw-accent);
  color: var(--cw-accent);
}

.cws-prompt {
  display: block;
  width: 100%;
  padding: var(--cw-pad) var(--cw-pad-3);
  border: 0;
  background: none;
  color: var(--cw-accent);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cws-prompt:hover {
  background: var(--cw-hover);
}

.cws-empty {
  padding: var(--cw-pad) var(--cw-pad-3);
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
}

.cws-more {
  display: inline-block;
  margin: 2px var(--cw-pad-3) var(--cw-pad) 12px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--cw-accent);
  font-size: var(--cw-fs-sm);
  text-align: left;
}

.cws-more:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ People | Roles | Tools | Areas | Who does what */

.cws-switch {
  display: flex;
  flex-wrap: wrap;
  margin: var(--cw-pad-2) var(--cw-pad-3) var(--cw-pad);
  border: 1px solid var(--cw-border-strong);
}

.cws-switch-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 3px 2px;
  border: 0;
  border-left: 1px solid var(--cw-border-strong);
  background: var(--cw-surface);
  font-size: var(--cw-fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-switch-btn:first-child {
  border-left: 0;
}

.cws-switch-btn:hover {
  background: var(--cw-hover);
}

.cws .cws-switch-btn[aria-selected="true"] {
  background: var(--cw-accent);
  color: #fff;
  font-weight: 600;
}

/* "Who does what": the last tab, on a line of its own under the four (its name is too long to share it). */
.cws-switch-btn[data-kind="chart"] {
  flex: 1 0 100%;
  border-left: 0;
  border-top: 1px solid var(--cw-border-strong);
}

.cws-chart {
  padding: 0 var(--cw-pad-3) var(--cw-pad-2);
}

.cws-chart-text {
  margin: 0 0 var(--cw-pad-2);
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
}

.cws a.cws-chart-open {
  display: block;
  padding: 4px var(--cw-pad-3);
  border: 1px solid var(--cw-accent);
  background: var(--cw-surface);
  color: var(--cw-accent);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.cws a.cws-chart-open:hover {
  background: var(--cw-accent-weak);
}

/* The chart is open: the way to it is lit up (as the open row is elsewhere in the list). */
.cws a.cws-chart-open.is-open {
  background: var(--cw-accent);
  color: #fff;
}

.cws-caveat {
  display: flex;
  align-items: center;
  gap: var(--cw-pad);
  padding: 0 var(--cw-pad-3) var(--cw-pad);
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
}

.cws-caveat-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-k .cws-tag {
  min-width: 3.4em;
  text-align: center;
}

/* ------------------------------------------------------------------ "+ New" workflow (name -> area -> Create) */

.cws-new {
  margin: var(--cw-pad-2) var(--cw-pad-3);
  padding: var(--cw-pad-3);
  border: 1px solid var(--cw-accent);
  background: var(--cw-surface);
}

.cws-new-label {
  display: block;
  margin-bottom: var(--cw-pad);
  font-weight: 600;
}

.cws-input {
  display: block;
  width: 100%;
}

.cws-new-name {
  display: flex;
  align-items: baseline;
  gap: var(--cw-pad-2);
  margin-bottom: var(--cw-pad-2);
  min-width: 0;
}

.cws-new-name-text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-areas {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cws-area-btn {
  min-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-area-btn.is-on {
  font-weight: 600;
}

.cws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cw-pad-2);
  margin-top: var(--cw-pad-2);
}

.cws-error {
  margin-top: var(--cw-pad);
  color: var(--cw-danger);
  font-size: var(--cw-fs-sm);
}

.cws-error:empty {
  display: none;
}

/* ------------------------------------------------------------------ search results */

.cws-results {
  padding-bottom: var(--cw-pad-3);
}

.cws-res-summary {
  padding: var(--cw-pad-2) var(--cw-pad-3);
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
}

.cws-res-title {
  padding: var(--cw-pad-2) var(--cw-pad-3) 2px;
  border-top: 1px solid var(--cw-border);
  font-weight: 700;
}

.cws-res-count {
  color: var(--cw-muted);
  font-weight: 400;
}

/* ------------------------------------------------------------------ 4. footer */

.cws-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--cw-border);
  background: var(--cw-surface);
}

.cws-more-toggle {
  display: flex;
  align-items: center;
  gap: var(--cw-pad);
  width: 100%;
  min-height: 28px;
  padding: var(--cw-pad) var(--cw-pad-3);
  border: 0;
  background: none;
  color: var(--cw-muted);
  text-align: left;
}

.cws-more-toggle:hover {
  background: var(--cw-hover);
  color: var(--cw-text);
}

.cws-more-body {
  padding: var(--cw-pad) 0 0;
}

.cws-foot-item {
  display: block;
  width: 100%;
  min-height: 28px;
  padding: 2px var(--cw-pad-3) 2px 22px;
  border: 0;
  background: none;
  text-align: left;
}

.cws-foot-item:hover {
  background: var(--cw-hover);
  color: var(--cw-accent);
}

/* ------------------------------------------------------------------ identity popover (fallback when CW.app.askWho is missing) */

.cws-who {
  width: 270px;
  max-width: calc(100vw - 32px);
  padding: var(--cw-pad-3);
  font-family: var(--cw-font);
  font-size: var(--cw-fs);
  line-height: var(--cw-lh);
  color: var(--cw-text);
}

.cws-who.is-sheet {
  width: auto;
  max-width: none;
}

.cws-who *,
.cws-pop * {
  box-sizing: border-box;
}

.cws-who button,
.cws-who input {
  font: inherit;
  color: inherit;
  border-radius: var(--cw-radius);
}

.cws-who-title {
  font-weight: 700;
}

.cws-who-hint {
  margin-bottom: var(--cw-pad-2);
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
}

.cws-who-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.cws-who-name {
  min-height: 26px;
  padding: 2px var(--cw-pad-2);
  border: 1px solid var(--cw-border);
  background: var(--cw-surface);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.cws-who-name:hover {
  border-color: var(--cw-border-strong);
  background: var(--cw-hover);
}

.cws-who-name.is-on {
  border-color: var(--cw-accent);
  background: var(--cw-accent-weak);
  font-weight: 600;
}

.cws-who-other {
  display: flex;
  align-items: flex-end;
  gap: var(--cw-pad);
  margin-top: var(--cw-pad-3);
}

.cws-who-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--cw-fs-sm);
  color: var(--cw-muted);
}

.cws-who-label .cws-input {
  font-size: var(--cw-fs);
  color: var(--cw-text);
}

.cws-who-clear {
  margin-top: var(--cw-pad-3);
  font-size: var(--cw-fs-sm);
  cursor: pointer;
}

.cws-pop {
  position: fixed;
  z-index: 1000;
  border: 1px solid var(--cw-border-strong);
  background: var(--cw-surface);
  box-shadow: var(--cw-shadow-pop);
}

/* ------------------------------------------------------------------ knowledge pages (middle) */

.cwk {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 48px;
  font-family: var(--cw-font);
  font-size: var(--cw-fs-page);
  line-height: 1.45;
  color: var(--cw-text);
}

.cwk-top {
  display: flex;
  align-items: center;
  gap: var(--cw-pad-3);
  min-height: 28px;
  color: var(--cw-muted);
  font-size: var(--cw-fs);
}

.cwk-back-arrow {
  font-size: 14px;
  line-height: 1;
}

.cwk-crumb {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cw-accent);
}

.cwk-crumb:hover {
  text-decoration: underline;
}

.cwk-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cw-pad) var(--cw-pad-3);
  margin: var(--cw-pad-3) 0 2px;
}

.cwk-h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cwk-kind {
  color: var(--cw-muted);
  font-size: var(--cw-fs);
}

.cwk-you {
  padding: 0 var(--cw-pad-2);
  background: var(--cw-accent-weak);
  color: var(--cw-accent);
  font-size: var(--cw-fs-sm);
  font-weight: 600;
}

.cwk-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cw-accent);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cwk-title .cwk-link {
  font-size: var(--cw-fs);
}

.cwk-caveat {
  display: flex;
  align-items: center;
  gap: var(--cw-pad);
  margin-bottom: var(--cw-pad-3);
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
}

/* Block heads use the shared .cw-disclosure-btn look ("In charge of (10)"). */
.cwk-block-head {
  min-height: 34px;
}

.cwk-list {
  padding-bottom: var(--cw-pad-3);
}

.cwk .cws-row {
  min-height: 30px;
  padding-left: 12px;
}

.cwk .cws-code {
  font-size: var(--cw-fs);
}

.cwk .cws-more {
  margin-left: 12px;
  font-size: var(--cw-fs);
}

.cwk-none {
  margin: 0;
  padding: var(--cw-pad-2) var(--cw-pad);
  border-top: 1px solid var(--cw-border);
  color: var(--cw-muted);
  font-size: var(--cw-fs);
}

.cwk-none-title {
  color: var(--cw-text);
  font-weight: 600;
}

.cwk-people {
  padding: var(--cw-pad-2) var(--cw-pad);
  border-top: 1px solid var(--cw-border);
  font-size: var(--cw-fs);
}

.cwk-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--cw-pad-3);
  padding: var(--cw-pad-2) var(--cw-pad-2) var(--cw-pad-2) 12px;
  color: inherit;
  cursor: pointer;
}

.cwk-item:hover,
.cwk-item.is-hover {
  background: var(--cw-hover);
}

.cwk-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cwk-item-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.cwk-item-sub {
  min-width: 0;
  color: var(--cw-muted);
  font-size: var(--cw-fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cwk-item.is-done .cwk-item-text {
  color: var(--cw-muted);
}

.cwk-qmark,
.cwk-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 0 3px;
  font-size: var(--cw-fs-sm);
  font-weight: 700;
  line-height: 1;
}

.cwk-qmark {
  background: var(--cw-q);
  border: 1px solid #d9b800;
  color: #5c4700;
}

.cwk-qmark.is-done {
  background: var(--cw-p);
  border-color: #86d19b;
  color: var(--cw-ok);
}

.cwk-num {
  border: 1px solid var(--cw-border-strong);
  background: var(--cw-surface);
  color: var(--cw-muted);
  font-variant-numeric: tabular-nums;
}

.cwk-kchip {
  flex: 0 0 auto;
  max-width: 11em;
  margin-top: 2px;
  padding: 0 var(--cw-pad);
  border-left: 3px solid var(--cw-muted);
  background: var(--cw-surface-2);
  font-size: var(--cw-fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ phones and tablets: bigger targets
   (body.cw-mobile also raises --cw-fs to 15px and --cw-fs-page to 16px in css/base.css). */

@media (max-width: 1023px) {
  .cws-head {
    min-height: var(--cw-tap);
  }

  .cws-who-chip {
    min-height: var(--cw-tap);
    font-size: var(--cw-fs);
  }

  .cws .cws-qlink {
    min-width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .cws-search {
    height: var(--cw-tap);
    font-size: 16px; /* no zoom-in on iPhone */
  }

  .cws-clear {
    right: var(--cw-pad-3);
    width: var(--cw-tap);
    height: var(--cw-tap);
    margin-top: calc(var(--cw-tap) / -2);
  }

  .cws-sec-toggle,
  .cws-more-toggle {
    min-height: var(--cw-tap);
  }

  .cws-row,
  .cws-group,
  .cws-foot-item,
  .cws-area-btn,
  .cws-prompt {
    min-height: var(--cw-tap);
  }

  .cws-two {
    min-height: 48px;
  }

  .cws-switch-btn {
    min-height: 34px;
    font-size: var(--cw-fs);
  }

  .cws a.cws-chart-open {
    padding: 10px var(--cw-pad-3);
  }

  .cws-more {
    min-height: var(--cw-tap);
    font-size: var(--cw-fs);
  }

  .cws-help {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .cws-help::before {
    content: '';
    position: absolute;
    inset: -7px;
  }

  .cws-who-name {
    min-height: var(--cw-tap);
  }

  .cwk .cws-row,
  .cwk-item,
  .cwk-block-head {
    min-height: var(--cw-tap);
  }
}