/* dashboard/board.css — TODO 3.0 #board tab. Linear-style issue list on the
   "Rams-light" design tokens (--ds-*). Dense, glanceable rows; controls reveal
   on hover; status/priority as click-to-open icon menus. */

#tab-board { display: block; }
.li-wrap {
  font-family: var(--ds-font-ui);
  max-width: 1080px; margin: 0 auto;
  color: var(--ds-ink);
}

/* ---- toolbar ---- */
.li-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px 12px; margin-bottom: 4px;
}
.li-newbtn {
  font: 600 13px/1 var(--ds-font-ui); color: var(--ds-accent-ink);
  background: var(--ds-accent); border: 0; border-radius: var(--ds-r-sm);
  padding: 7px 13px; cursor: pointer;
}
.li-newbtn:hover { background: var(--ds-accent-hover); }
.li-ghostbtn {
  font: 500 13px/1 var(--ds-font-ui); color: var(--ds-ink-3);
  background: transparent; border: 1px solid var(--ds-border); border-radius: var(--ds-r-sm);
  padding: 7px 12px; cursor: pointer;
}
.li-ghostbtn:hover { background: var(--ds-surface-sunken); }
.li-searchwrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--ds-surface-raised); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-sm); padding: 0 9px; height: 30px; color: var(--ds-ink-4);
}
.li-searchwrap:focus-within { border-color: var(--ds-accent); color: var(--ds-ink-3); }
.li-searchwrap input {
  border: 0; outline: 0; background: transparent; font: 400 13px var(--ds-font-ui);
  color: var(--ds-ink); width: 200px;
}
.li-spacer { flex: 1 1 auto; }
.li-count { font-size: 12px; color: var(--ds-ink-3); white-space: nowrap; }
.li-select {
  font: 500 12.5px var(--ds-font-ui); color: var(--ds-ink-2);
  background: var(--ds-surface-raised); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-sm); padding: 6px 8px; cursor: pointer;
}
.li-toggle { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ds-ink-3); cursor: pointer; }
.li-iconbtn {
  font-size: 15px; line-height: 1; color: var(--ds-ink-3);
  background: var(--ds-surface-raised); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-sm); height: 30px; width: 32px; cursor: pointer;
}
.li-iconbtn:hover { background: var(--ds-surface-sunken); color: var(--ds-ink); }

/* ---- composer (hidden by default; .is-open reveals — class toggle, not [hidden]) ---- */
.li-composer { display: none; }
.li-composer.is-open {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--ds-surface-raised); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md);
}
.li-composer input {
  flex: 1 1 auto; font: 400 14px var(--ds-font-ui); color: var(--ds-ink);
  border: 0; outline: 0; background: transparent;
}
.li-composer input::placeholder { color: var(--ds-ink-4); }

/* ---- groups ---- */
.li-group { margin-bottom: 10px; }
/* The whole header row carries the topic colour (set inline); white text on top. */
.li-grouphead {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; user-select: none;
  background: var(--ds-surface-sunken); border-radius: var(--ds-r-sm);
}
.li-caret { font-size: 10px; color: rgba(255,255,255,.85); transition: transform .12s; }
.li-caret.is-collapsed { transform: rotate(-90deg); }
.li-groupname { font: 700 12.5px var(--ds-font-ui); color: #fff; letter-spacing: .2px; }
.li-groupn { font-size: 11.5px; color: rgba(255,255,255,.72); margin-left: 2px; }
.li-groupideas { font-size: 11px; color: rgba(255,255,255,.45); }

/* ---- subsection lanes (Inbox / Todo) ---- */
.li-subhead {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px 3px 24px;
}
.li-sublabel {
  font: 600 10.5px var(--ds-font-ui); color: var(--ds-ink-3);
  text-transform: uppercase; letter-spacing: .6px;
}
.li-subn { font-size: 10.5px; color: var(--ds-ink-4); }
.li-subempty { padding: 4px 8px 8px 24px; font: italic 12px var(--ds-font-ui); color: var(--ds-ink-4); }
/* collapsible lane header (Ideas) */
.li-subtoggle { cursor: pointer; padding-left: 12px; }
.li-subtoggle:hover .li-sublabel { color: var(--ds-ink-2); }
.li-subcaret { font-size: 9px; color: var(--ds-ink-4); transition: transform .12s; }
.li-subcaret.is-collapsed { transform: rotate(-90deg); }
/* "show N more" toggle (Todo overflow) */
.li-submore {
  padding: 6px 8px 8px 26px; cursor: pointer;
  font: 600 11px var(--ds-font-ui); color: var(--ds-ink-3);
}
.li-submore:hover { color: var(--ds-accent); }

/* ---- rows ---- */
.li-row {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 8px;
  border-bottom: 1px solid var(--ds-border);
  cursor: pointer;
}
.li-row:hover { background: var(--ds-surface-raised); }
.li-row.is-done .li-title { color: var(--ds-ink-4); text-decoration: line-through; }
.li-row.is-expanded { background: var(--ds-surface-raised); border-bottom-color: transparent; }

/* ---- inline detail/edit card (click a row to expand) ---- */
.li-card {
  margin: 0 8px 12px 24px; padding: 14px 16px;
  background: var(--ds-surface-raised); border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-r-md); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  animation: li-card-in .16s ease;
}
@keyframes li-card-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.li-card-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.li-card-row > label { display: flex; align-items: center; gap: 6px; font: 600 11px var(--ds-font-ui); color: var(--ds-ink-3); }
.li-card-lbl { font: 600 10.5px var(--ds-font-ui); color: var(--ds-ink-3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: -4px; }
.li-card-lbl .li-muted { text-transform: none; letter-spacing: 0; color: var(--ds-ink-4); font-weight: 400; }
.li-card textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 8px 10px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-sm);
  font: 400 13px var(--ds-font-ui); color: var(--ds-ink); background: var(--ds-surface);
}
.li-card textarea:focus { outline: 0; border-color: var(--ds-accent); box-shadow: 0 0 0 2px var(--ds-accent-soft); }
.li-card-title { font-weight: 600 !important; font-size: 14px !important; }
.li-card-meta { font: 400 11.5px var(--ds-font-ui); color: var(--ds-ink-4); }
.li-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }

.li-prio, .li-status {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
  border-radius: var(--ds-r-sm); cursor: pointer; color: var(--ds-ink-3);
}
.li-prio:hover, .li-status:hover { background: var(--ds-surface-sunken); }

/* status colors */
.st-idea        { color: var(--ds-ink-4); }
.st-inbox       { color: var(--ds-accent); }
.st-todo        { color: var(--ds-ink-3); }
.st-in_progress { color: var(--ds-warn); }
.st-done        { color: var(--ds-success); }
.st-declined    { color: var(--ds-ink-4); }
.st-review      { color: #8957e5; }   /* awaiting review — violet */
/* priority colors */
.prio-none   { color: var(--ds-ink-4); }
.prio-low    { color: var(--ds-ink-3); }
.prio-med    { color: var(--ds-ink-2); }
.prio-high   { color: var(--ds-ink); }
.prio-urgent { color: var(--ds-warn); }

.li-id { font: 500 11px var(--ds-font-mono); color: var(--ds-ink-4); flex: 0 0 auto; min-width: 30px; white-space: nowrap; }
/* claim-liveness dot — green <15m · amber <2h · grey ≥2h (cold = safe to take over) */
.li-live-col { flex: 0 0 14px; display: flex; align-items: center; justify-content: center; }
.li-live { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ds-surface); }
.li-live-live { background: #2f9e44; }
.li-live-idle { background: #e0922b; }
.li-live-cold { background: #b3b0a7; }
/* the id doubles as a click-to-copy task-NNN handle */
.li-copyid { cursor: copy; }
.li-copyid:hover { color: var(--ds-accent); text-decoration: underline; }
.li-id.is-copied { color: var(--ds-success, #2f8a4e); text-decoration: none; }
.li-id.is-copyfail { color: var(--ds-danger); text-decoration: none; }
/* [auto-ok] property pill — yellow chip, red font; lives in its own fixed-width
   column so every task title starts at the same x (aligned past the pill). */
.li-autook-col { flex: 0 0 66px; display: flex; align-items: center; }
.li-autook {
  font: 700 11px var(--ds-font-ui); letter-spacing: .2px;
  color: #d11f1f; background: #fbeeb0; border: 1px solid #ecd778;
  padding: 2px 9px; border-radius: 999px; text-transform: lowercase; white-space: nowrap;
}
/* single-click [auto] toggle on the expanded card (off = muted outline, on = the autook pill) */
.li-card-auto {
  font: 600 11px var(--ds-font-ui); letter-spacing: .2px; cursor: pointer;
  color: var(--ds-ink-3); background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border); border-radius: 999px;
  padding: 3px 11px; text-transform: lowercase; white-space: nowrap; margin-left: auto;
}
.li-card-auto:hover { border-color: var(--ds-accent); color: var(--ds-ink); }
.li-card-auto.is-on { color: #d11f1f; background: #fbeeb0; border-color: #ecd778; font-weight: 700; }
.li-card-auto:disabled { opacity: .5; cursor: default; }
.li-title {
  font: 400 13.5px var(--ds-font-ui); color: var(--ds-ink); line-height: 1.3;
  outline: 0; border-radius: 3px; padding: 2px 4px; max-width: 620px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.li-title:focus { background: var(--ds-accent-soft); white-space: normal; overflow: visible; box-shadow: 0 0 0 2px var(--ds-accent-soft); }
.li-note { font: 400 12px var(--ds-font-ui); color: var(--ds-ink-4); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* Sender pill — solid topic colour (set inline per sender); these are fallbacks. */
.li-from {
  flex: 0 0 auto; font: 600 10.5px var(--ds-font-ui); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  background: var(--ds-ink-4); border: 1px solid transparent;
}
.li-avatar {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 9.5px var(--ds-font-ui); color: #fff; letter-spacing: .3px;
}
.li-unassigned {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.4px dashed var(--ds-border-strong);
}
.li-del {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
  border-radius: var(--ds-r-sm); color: var(--ds-ink-4); cursor: pointer;
  opacity: 0; transition: opacity .1s;
}
.li-row:hover .li-del { opacity: 1; }
.li-del:hover { color: var(--ds-danger); background: var(--ds-danger-soft); }

/* ---- floating status/priority menu ---- */
.li-menu {
  position: absolute; z-index: 9999; min-width: 168px;
  background: var(--ds-surface-raised); border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-r-md); box-shadow: var(--ds-shadow-overlay); padding: 4px;
}
.li-menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--ds-r-sm); cursor: pointer;
  font: 400 13px var(--ds-font-ui); color: var(--ds-ink-2);
}
.li-menu-item:hover { background: var(--ds-accent-soft); color: var(--ds-ink); }
.li-mi-icon { display: inline-flex; width: 16px; }

/* shared muted-text helper (used by the inline card label) */
.li-muted { font-weight: 400; color: var(--ds-ink-4); }
.li-del-btn { font: 500 13px var(--ds-font-ui); color: var(--ds-danger); background: transparent; border: 1px solid var(--ds-border); border-radius: var(--ds-r-sm); padding: 7px 12px; cursor: pointer; }
.li-del-btn:hover { background: var(--ds-danger-soft); border-color: var(--ds-danger); }

/* ---- loading / error states ---- */
.li-loading { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 48px 16px; color: var(--ds-ink-3); font-size: 13.5px; }
.li-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--ds-border-strong); border-top-color: var(--ds-accent);
  animation: li-spin .7s linear infinite; display: inline-block;
}
@keyframes li-spin { to { transform: rotate(360deg); } }
.li-iconbtn.spin { animation: li-spin .7s linear infinite; }
.li-error { padding: 44px 16px; text-align: center; }
.li-error-msg { font-size: 14px; color: var(--ds-ink-2); font-weight: 600; }
.li-error-detail { font-size: 12px; color: var(--ds-ink-4); margin: 6px 0 14px; font-family: var(--ds-font-mono); }

/* ---- misc ---- */
.li-empty { padding: 48px 16px; text-align: center; color: var(--ds-ink-3); font-size: 13.5px; }
.li-link { background: 0; border: 0; color: var(--ds-accent); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }