/* ============================================================
   Content List view
   Uses only the custom properties already defined in
   css/workbook.css. Every tint here is derived from an existing
   token via color-mix() -- no new colour primitives.
   ============================================================ */

/* Original's soft forest green. Derived from tokens that already exist --
   the palette's vivid green muted toward the adjacent slate -- so it reads
   as forest rather than mint, and stays clearly distinct from Field/Travel,
   which uses --bucket-forest neat. No new colour primitive. */
:root {
  --cl-type-original: color-mix(in srgb, var(--bucket-forest) 58%, var(--align-adjacent) 42%);
}

/* ---------- view container ---------- */

.content-list-view { display: none; }
.content-list-view.active { display: block; }

/* ---------- shared header furniture ---------- */

/* Sits above both Board and List, inside the ideas container. */
.content-bank-row {
  padding: 0 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
}

/* A single compact readout in the page header, between the view tabs and
   the search box. Small enough to ignore, specific enough to glance at. */
.cl-bank {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  white-space: nowrap;
  line-height: 1.5;
}
.cl-bank-key {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}
.cl-bank-value {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cl-bank-unit { font-size: 11px; color: var(--text-tertiary); }
.cl-bank-sep { color: var(--border-light); font-size: 11px; }
.cl-bank-good .cl-bank-value { color: var(--success); }
.cl-bank-warn .cl-bank-value { color: var(--warning); }
.cl-bank-low  .cl-bank-value { color: var(--destructive); }

/* thin stacked type-mix bar */
.cl-mix-bar {
  display: flex;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-surface);
  margin: 0 0 2px;
}
.cl-mix-seg { display: block; height: 100%; }
.cl-mix-seg + .cl-mix-seg { border-left: 1px solid var(--bg-deep); }

/* effort filter bar, shared by board and list */
.cl-effort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.cl-effort-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: 2px;
}
.cl-effort-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cl-effort-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.cl-effort-btn.active {
  color: var(--text-primary);
  border-color: currentColor;
}
.cl-effort-btn.cl-effort-low.active {
  background: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
  border-color: var(--text-tertiary);
}
.cl-effort-btn.cl-effort-medium.active {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-color: var(--warning);
}
.cl-effort-btn.cl-effort-high.active {
  background: color-mix(in srgb, var(--destructive) 16%, transparent);
  border-color: var(--destructive);
}
.cl-effort-clear {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 3px 6px;
}
.cl-effort-clear:hover { text-decoration: underline; }
.cl-effort-count { font-size: 12px; color: var(--text-tertiary); }

/* ---------- toolbar ---------- */

.cl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 2px 0 10px;
  margin-bottom: 6px;
}
.cl-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* type pills: the primary way through the list */
.cl-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.cl-pill:hover { color: var(--text-primary); background: var(--bg-hover); }
.cl-pill-n {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border-radius: 999px;
  padding: 0 6px;
}
.cl-pill.active { color: var(--text-primary); border-color: currentColor; }
.cl-pill.active .cl-pill-n { background: color-mix(in srgb, currentColor 20%, transparent); color: inherit; }
/* the active pill carries its type's colour, so the list is self-labelling */
.cl-pill-cover.active        { color: var(--bucket-evenant); }
.cl-pill-original.active     { color: var(--cl-type-original); }
.cl-pill-story.active        { color: var(--bucket-live-set); }
.cl-pill-bts.active          { color: var(--bucket-personal); }
.cl-pill-field-travel.active { color: var(--bucket-forest); }
.cl-pill-educational.active  { color: var(--bucket-tools); }

.cl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-tertiary);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.cl-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.cl-toggle.active {
  color: var(--text-primary);
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.cl-bulk { display: none; align-items: center; gap: 8px; }
.cl-bulk.visible { display: flex; }
.cl-bulk-count { font-size: 12px; color: var(--text-secondary); }
.cl-bulk-btn {
  background: var(--primary);
  border: none;
  color: var(--bg-deep);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.cl-bulk-btn:hover { background: var(--primary-hover); }
.cl-bulk-clear {
  background: transparent; border: none; color: var(--text-tertiary);
  font-size: 12px; font-family: inherit; cursor: pointer;
}
.cl-bulk-clear:hover { color: var(--text-primary); }

/* ---------- the table ---------- */

/* One definition of the columns, inherited by the header and every row, so
   they cannot drift apart. Two shapes: with a Type column (All) and without
   (a single type is selected, where the column would repeat the pill). */
.cl-table {
  --cl-cols: 44px minmax(220px, 1fr) 176px 104px 140px;
  --cl-row-h: 52px;
  --cl-gutter: 16px;        /* one horizontal rhythm for header, rows and bands */
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
}
.cl-table-typed { --cl-cols: 44px minmax(220px, 1fr) 160px 176px 104px 140px; }

.cl-thead,
.cl-row,
.cl-addrow {
  display: grid;
  grid-template-columns: var(--cl-cols);
  align-items: center;
  column-gap: 0;            /* dividers do the separating, not whitespace */
}

/* No vertical rules: ideas.html separates rows with a single faint
   horizontal line and nothing else, and the column tracks below do the rest
   of the work. Every cell shares one gutter, so the header labels sit
   directly over the values beneath them. */
.cl-cell {
  min-width: 0;
  padding: 0 var(--cl-gutter);
  height: 100%;
  display: flex;
  align-items: center;
}
.cl-c-pick { justify-content: center; padding: 0 0 0 4px; }
/* title + description as one vertically centred block, so a row with a
   description sits on the same centre line as one without */
.cl-c-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding-left: 4px;
}
/* the last column keeps a little more air off the table's rounded edge */
.cl-cell:last-child { padding-right: 18px; }

/* header: ideas.html's own th metrics -- 11px, 600, muted, on a faint rule */
.cl-thead {
  height: 42px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 2;
}
/* the header cell reuses .cl-c-title's tracks, so its column-direction
   justify-content (which centres the two text lines vertically) has to be
   reset -- in row direction it would centre the label horizontally. */
.cl-thead .cl-c-title {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/* rows: a fixed height, so the rhythm holds whether or not a row has a
   description. Irregular row heights are most of what read as "unstructured". */
.cl-row {
  height: var(--cl-row-h);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background .1s ease;
}
.cl-row:last-child { border-bottom: none; }
.cl-row:hover { background: var(--bg-hover); }
.cl-row.selected { background: color-mix(in srgb, var(--primary) 10%, transparent); }

.cl-c-pick input {
  cursor: pointer;
  accent-color: var(--primary);
  opacity: 0;
  transition: opacity .12s ease;
}
.cl-row:hover .cl-c-pick input,
.cl-row.selected .cl-c-pick input,
.cl-c-pick input:focus-visible { opacity: 1; }

.cl-row-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-row-desc {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-tertiary);
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Every value on a row is editable in place: the chip is what you see, a
   transparent native <select> sits over it and gives the dropdown. */
.cl-edit {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  border-radius: 6px;
}
.cl-edit .cl-chip { pointer-events: none; }
.cl-edit-sel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font: inherit;
}
.cl-row:hover .cl-edit { box-shadow: inset 0 0 0 1px var(--border-light); }
.cl-edit:focus-within { box-shadow: inset 0 0 0 1px var(--primary); }

/* an unset value shows nothing until you are in the row */
.cl-edit-empty { opacity: 0; transition: opacity .12s ease; }
.cl-row:hover .cl-edit-empty, .cl-edit-empty:focus-within { opacity: 1; }
.cl-chip-set {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px dashed var(--border-light);
}

/* status as a chip, on the board's colour scale */
.cl-chip-stage { background: var(--bg-surface); }
.cl-chip-stage.cl-stage-idea        { color: var(--text-secondary); }
.cl-chip-stage.cl-stage-in_progress { color: var(--warning);  background: color-mix(in srgb, var(--warning) 14%, transparent); }
.cl-chip-stage.cl-stage-ready       { color: var(--success);  background: color-mix(in srgb, var(--success) 14%, transparent); }
.cl-chip-stage.cl-stage-published   { color: var(--text-tertiary); }

/* ---------- group bands ---------- */

.cl-band {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 var(--cl-gutter);
  background: color-mix(in srgb, var(--cl-band-color) 8%, var(--bg-surface));
  border-bottom: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  cursor: pointer;
  user-select: none;
  --cl-band-color: var(--text-tertiary);
}
.cl-band:first-child { border-top: none; }
.cl-band:hover { background: color-mix(in srgb, var(--cl-band-color) 14%, var(--bg-surface)); }
.cl-band-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cl-band-color);
  flex: none;
}
.cl-band-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.cl-band-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 1px 8px;
}
.cl-band-caret { margin-left: auto; color: var(--text-tertiary); font-size: 11px; }

.cl-band-cover        { --cl-band-color: var(--bucket-evenant); }
.cl-band-original     { --cl-band-color: var(--cl-type-original); }
.cl-band-story        { --cl-band-color: var(--bucket-live-set); }
.cl-band-bts          { --cl-band-color: var(--bucket-personal); }
.cl-band-field-travel { --cl-band-color: var(--bucket-forest); }
.cl-band-educational  { --cl-band-color: var(--bucket-tools); }

/* ---------- inline add ---------- */

.cl-addrow {
  height: 46px;
  border-bottom: 1px solid var(--border-subtle);
}
.cl-addrow:last-child { border-bottom: none; }
.cl-addrow-plus { color: var(--text-tertiary); font-size: 15px; }
.cl-addrow-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  padding: 2px 0;
}
.cl-addrow-input::placeholder { color: var(--text-tertiary); }
.cl-addrow-input:focus { outline: none; }
.cl-addrow:focus-within { background: var(--bg-hover); }
.cl-addrow-input:disabled { opacity: .5; }

.cl-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ---------- tags ---------- */
/* Metrics taken from ideas.html so tags read the same across the app:
   2px 8px, 4px radius, 10px text, filled tint at 15%. */

.cl-tag {
  display: inline-block;
  padding: 5px 11px;
  background: var(--bg-hover);
  border-radius: 5px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--text-soft);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An unset value is a faint placeholder that only comes forward when the
   row is hovered -- the pattern ideas.html uses for empty tags. */
.cl-tag-empty {
  background: transparent;
  border: 1px dashed var(--border-subtle);
  opacity: 0;
  transition: opacity .15s ease;
}
.cl-row:hover .cl-tag-empty { opacity: .5; }
.cl-row:hover .cl-edit:hover .cl-tag-empty { opacity: .8; }

.cl-tag-cover        { background: rgba(59, 130, 246, 0.15);  color: var(--bucket-evenant); }
.cl-tag-original     { background: rgba(65, 166, 119, 0.15);  color: var(--cl-type-original); }
.cl-tag-story        { background: rgba(249, 112, 102, 0.15); color: var(--bucket-live-set); }
.cl-tag-bts          { background: rgba(100, 116, 139, 0.22); color: var(--bucket-personal); }
.cl-tag-field-travel { background: rgba(34, 197, 94, 0.15);   color: var(--bucket-forest); }
.cl-tag-educational  { background: rgba(6, 182, 212, 0.15);   color: var(--bucket-tools); }

/* effort: the priority-badge treatment -- uppercase, 600, filled tint */
.cl-effort-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cl-effort-high   { background: rgba(244, 63, 94, 0.15);   color: var(--danger); }
.cl-effort-medium { background: rgba(245, 158, 11, 0.15);  color: #f59e0b; }
.cl-effort-low    { background: rgba(107, 114, 128, 0.15); color: var(--text-muted); }

/* status uses the same badge shape on the board's colour scale */
.cl-stage-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cl-stage-badge.cl-stage-idea        { background: rgba(255,255,255,0.06); color: var(--text-soft); }
.cl-stage-badge.cl-stage-in_progress { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.cl-stage-badge.cl-stage-ready       { background: rgba(52, 211, 153, 0.15); color: var(--success); }
.cl-stage-badge.cl-stage-published   { background: rgba(255,255,255,0.04); color: var(--text-muted); }

/* every editable chip advertises itself on row hover, and stays lit while
   its dropdown is open so it is obvious what the menu belongs to */
.cl-edit {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  max-width: 100%;
  transition: box-shadow .12s ease;
}
.cl-row:hover .cl-edit:hover { box-shadow: 0 0 0 1px var(--border-light); }
.cl-edit.cl-edit-open { box-shadow: 0 0 0 1px var(--primary); }

/* ---------- cell dropdown ---------- */
/* Drawn by us, not the OS: a native select popup renders in the system
   theme and flashes white against this UI. */
.cl-menu {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 9999;
}
.cl-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.cl-menu-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }
.cl-menu-item.active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text-primary); }
.cl-menu-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-tertiary); }
.cl-menu-label { flex: 1; }
.cl-menu-check { width: 16px; text-align: center; color: var(--primary); font-size: 13px; flex-shrink: 0; }

.cl-dot-none         { background: transparent; box-shadow: inset 0 0 0 1px var(--border-light); }
.cl-dot-cover        { background: var(--bucket-evenant); }
.cl-dot-original     { background: var(--cl-type-original); }
.cl-dot-story        { background: var(--bucket-live-set); }
.cl-dot-bts          { background: var(--bucket-personal); }
.cl-dot-field-travel { background: var(--bucket-forest); }
.cl-dot-educational  { background: var(--bucket-tools); }
.cl-dot-low          { background: var(--text-muted); }
.cl-dot-medium       { background: #f59e0b; }
.cl-dot-high         { background: var(--danger); }
.cl-dot-idea         { background: var(--text-soft); }
.cl-dot-in_progress  { background: #f59e0b; }
.cl-dot-ready        { background: var(--success); }
.cl-dot-published    { background: var(--text-muted); }

/* mix-bar segment fills, matching the type chips */
.cl-type-bg-cover        { background: var(--bucket-evenant); }
.cl-type-bg-original     { background: var(--cl-type-original); }
.cl-type-bg-story        { background: var(--bucket-live-set); }
.cl-type-bg-bts          { background: var(--bucket-personal); }
.cl-type-bg-field-travel { background: var(--bucket-forest); }
.cl-type-bg-educational  { background: var(--bucket-tools); }
.cl-type-bg___untyped__  { background: var(--bg-hover); }

/* ---------- board card chips (type + batch) ---------- */
/* Mirrors .kanban-badge sizing so the new chips sit with the old ones. */
.kanban-badge.cl-chip-type,
.kanban-badge.cl-chip-batch { border-radius: 999px; }

/* Narrow screens drop the middle columns rather than crushing them, and the
   column definition still comes from one place. */
@media (max-width: 900px) {
  .cl-table, .cl-table-typed { --cl-cols: 34px minmax(0, 1fr) 124px; --cl-gutter: 12px; }
  .cl-c-type, .cl-c-batch, .cl-c-effort { display: none; }
}