/* ═══════════════════════════════════════════════════════════════
   Half Lens Workspace · view-layer styles on top of DS v4
   Tokens only, logical properties (RTL + LTR), both themes.
   Sections: shell · board head · board grid · cells · kanban ·
             calendar · item drawer · automations · misc
═══════════════════════════════════════════════════════════════ */

html, body { height: 100%; }
body { margin: 0; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-main); }
body > .app-layout { height: 100dvh; }

/* ── Status palette (board labels) ─────────────────────────────
   Solid fills carry meaning, always paired with a text label. */
:root {
  --st-green:  #0f9d6e;
  --st-amber:  #e8a317;
  --st-red:    #df3f4f;
  --st-blue:   #2563eb;
  --st-purple: #7c5ce0;
  --st-cyan:   #0891b2;
  --st-navy:   #2a296d;
  --st-pink:   #d9468f;
  --st-gray:   #8391a7;
  --st-empty:  var(--bg-card-hover);
  --g-blue: #3b82f6; --g-green: #10b981; --g-amber: #f59e0b; --g-purple: #8b5cf6; --g-red: #f43f5e; --g-gray: #8391a7; --g-cyan: #06b6d4;
  --row-h: 40px;
  --cell-border: var(--border-soft);
}
[data-theme="light"] { --st-navy: #2a296d; --st-empty: #eef1f7; --cell-border: #e3e8f1; }

/* ── Shell additions ─────────────────────────────────────────── */
.ws-switch { padding: 0 var(--space-3) var(--space-3); position: relative; }
.ws-switch-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft); background: var(--bg-card);
  color: var(--text-primary); font: inherit; cursor: pointer; text-align: start;
}
.ws-switch-btn:hover { background: var(--bg-card-hover); }
.ws-switch-btn > svg { width: 15px; height: 15px; color: var(--text-muted); margin-inline-start: auto; flex-shrink: 0; }
.ws-switch-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ws-switch-meta b { font-size: var(--text-base-sm); font-weight: var(--weight-bold); }
.ws-switch-meta small { font-size: var(--text-xs); color: var(--text-muted); }
.ws-mark {
  width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: grid; place-items: center; font-size: 11px; font-weight: var(--weight-extrabold);
  background: var(--brand-navy); color: #fff; letter-spacing: .02em;
}
.ws-mark-sm { width: 22px; height: 22px; font-size: 9px; border-radius: 5px; }
.ws-mark-alt { background: var(--st-green); }
.ws-mark-alt2 { background: var(--st-pink); }
.ws-switch .menu { inset-inline: var(--space-3); width: auto; }
.sidebar.collapsed .ws-switch-meta, .sidebar.collapsed .ws-switch-btn > svg { display: none; }
.sidebar.collapsed .ws-switch-btn { justify-content: center; padding: 6px; border-color: transparent; background: none; }
.ws-lang button { min-width: 34px; font-weight: var(--weight-bold); }
.ws-search { max-width: 380px; }
.ws-cmdk { padding: 0; width: min(620px, 94vw); }
.ws-cmdk .cmd-palette { border: 0; box-shadow: none; }

.page-content.flush { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.main-content:has(> .page-content.flush) { overflow: hidden; }

/* ── Board head ─────────────────────────────────────────────── */
.board-head { padding: var(--space-5) var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.board-title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.board-title { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); margin: 0; line-height: 1.2; }
.board-title-row .btn-icon { color: var(--text-muted); }
.board-title-row .fav[aria-pressed="true"] { color: var(--warning); }
.board-title-row .fav[aria-pressed="true"] svg { fill: currentColor; }
.board-desc { color: var(--text-secondary); font-size: var(--text-base-sm); margin: 0; max-width: 72ch; }
.board-head-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }

.view-tabs { display: flex; align-items: center; gap: 2px; border-block-end: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: none; }
.view-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; white-space: nowrap;
  color: var(--text-secondary); font-size: var(--text-base-sm); font-weight: var(--weight-semibold);
  text-decoration: none; border-block-end: 2px solid transparent; margin-block-end: -1px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.view-tab svg { width: 15px; height: 15px; }
.view-tab:hover { color: var(--text-primary); background: var(--bg-card); }
.view-tab[aria-current="page"] { color: var(--accent-text); border-block-end-color: var(--accent); }
.view-tab.add { color: var(--text-muted); }

.board-toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); flex-wrap: wrap; }
.board-toolbar .input-wrap { width: 200px; }
.board-toolbar .sep { width: 1px; height: 20px; background: var(--border-soft); margin-inline: 4px; }
.board-toolbar .btn[aria-pressed="true"] { background: var(--accent-glow-md); color: var(--accent-text); border-color: var(--border-accent); }
.split-btn { display: inline-flex; }
.split-btn > .btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.split-btn > .btn:last-child { border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start: 1px solid rgba(255,255,255,.22); padding-inline: 7px; }
.filter-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 0 var(--space-6) var(--space-3); }

/* ── Board grid (one scroll area, one table per group) ─────── */
.board-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 0 var(--space-12); }
.board-scroll > * { margin-inline: var(--space-6); }
.board-scroll > .bgroup { min-width: calc(100% - 2 * var(--space-6)); }
.bgroup { margin-block-end: var(--space-8); width: max-content; min-width: 100%; }
.bgroup-head {
  position: sticky; inset-inline-start: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px; padding-block: 6px 8px; width: fit-content;
}
.bgroup-toggle {
  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 0; background: none; cursor: pointer;
  color: var(--g, var(--accent)); display: grid; place-items: center;
}
.bgroup-toggle:hover { background: var(--bg-card-hover); }
.bgroup-toggle svg { width: 18px; height: 18px; transition: transform var(--transition-fast); }
.bgroup-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
[dir="rtl"] .bgroup-toggle[aria-expanded="false"] svg { transform: rotate(90deg); }
.bgroup-title { color: var(--g, var(--accent)); font-weight: var(--weight-bold); font-size: var(--text-lg); border-radius: var(--radius-xs); padding: 0 4px; outline: none; }
.bgroup-title:focus { box-shadow: 0 0 0 1px var(--border-accent); }
.bgroup-count { color: var(--text-muted); font-size: var(--text-sm); }
.bgroup-menu { opacity: 0; }
.bgroup-head:hover .bgroup-menu, .bgroup-menu:focus-visible { opacity: 1; }
.bgroup.is-collapsed .btable tbody { display: none; }

.btable { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--text-base-sm); }
.btable th, .btable td {
  height: var(--row-h); padding: 0; border-block-end: 1px solid var(--cell-border); border-inline-end: 1px solid var(--cell-border);
  background: var(--bg-surface); text-align: center; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btable thead th {
  position: sticky; top: 0; z-index: 2; height: 36px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary);
  border-block-start: 1px solid var(--cell-border);
}
.btable thead th:first-child { border-start-start-radius: var(--radius-md); }
.btable thead th:last-child { border-start-end-radius: var(--radius-md); }
.btable th:first-child, .btable td:first-child { border-inline-start: 1px solid var(--cell-border); }
.btable .c-check, .btable .c-item { position: sticky; z-index: 1; }
.btable thead .c-check, .btable thead .c-item { z-index: 3; }
.btable .c-check { inset-inline-start: 0; width: 40px; }
.btable .c-item { inset-inline-start: 40px; width: 340px; text-align: start; box-shadow: inset calc(-1px * var(--dirx, 1)) 0 0 var(--cell-border); }
[dir="rtl"] .btable { --dirx: -1; }
.btable thead .c-item { padding-inline: 12px; }

.th-in { display: flex; align-items: center; justify-content: center; gap: 4px; padding-inline: 8px; position: relative; height: 100%; }
.th-in .th-menu { position: absolute; inset-inline-end: 4px; opacity: 0; width: 22px; height: 22px; padding: 0; }
.btable th:hover .th-menu { opacity: 1; }

.th-in svg.th-type { width: 13px; height: 13px; color: var(--text-muted); }
.btable .c-add { width: 44px; }
.btable .c-add button { width: 100%; height: 100%; background: none; border: 0; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.btable .c-add button:hover { color: var(--accent-text); background: var(--bg-card-hover); }

/* rows */
.btable tbody tr:hover td { background: var(--bg-elevated); }
.btable tbody tr.is-selected td { background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface)); }
.btable tbody tr.is-dragging { opacity: .45; }
.btable tbody tr.drop-before td { box-shadow: inset 0 2px 0 var(--accent); }
.btable tbody tr.row-tint td.c-item { background: color-mix(in srgb, var(--rt) 14%, var(--bg-surface)); }

.item-cell { display: flex; align-items: center; gap: 6px; height: var(--row-h); padding-inline: 4px 6px; position: relative; }
.drag-h { width: 18px; height: 24px; display: grid; place-items: center; color: var(--text-muted); cursor: grab; opacity: 0; border: 0; background: none; padding: 0; flex-shrink: 0; }
.drag-h svg { width: 14px; height: 14px; }
tr:hover .drag-h, .drag-h:focus-visible { opacity: 1; }
.item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 2px 4px; border-radius: var(--radius-xs); outline: none; color: var(--text-primary); }
.item-name[contenteditable="true"] { box-shadow: 0 0 0 1px var(--accent); background: var(--bg-input-focus); text-overflow: clip; }
.item-open {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 24px; padding-inline: 6px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-card);
  color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; opacity: 0;
}
.item-open svg { width: 13px; height: 13px; }
tr:hover .item-open, .item-open:focus-visible { opacity: 1; }
.item-open:hover { color: var(--accent-text); border-color: var(--border-accent); }
.upd-btn { position: relative; width: 30px; height: 28px; flex-shrink: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; border-radius: var(--radius-sm); }
.upd-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.upd-btn svg { width: 17px; height: 17px; }
.upd-btn b { position: absolute; top: 1px; inset-inline-end: 0; min-width: 15px; height: 15px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; display: grid; place-items: center; padding-inline: 3px; }
.item-sub { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* checkbox cell */
.c-check .hl-checkbox { justify-content: center; }

/* ── Cells ──────────────────────────────────────────────────── */
.st {
  width: 100%; height: var(--row-h); border: 0; margin: 0; cursor: pointer;
  background: var(--st, var(--st-empty)); color: #fff; font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-sm);
  display: grid; place-items: center; padding-inline: 8px; position: relative; transition: filter var(--transition-fast);
}
.st:hover { filter: brightness(1.08); }
.st:hover::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; border: 7px solid transparent; border-top-color: rgba(255,255,255,.55); border-inline-end-color: rgba(255,255,255,.55); }
.st:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -3px; }
.st-green { --st: var(--st-green); } .st-amber { --st: var(--st-amber); color: #221600; } .st-red { --st: var(--st-red); }
.st-blue { --st: var(--st-blue); } .st-purple { --st: var(--st-purple); } .st-cyan { --st: var(--st-cyan); }
.st-navy { --st: var(--st-navy); } .st-pink { --st: var(--st-pink); } .st-gray { --st: var(--st-gray); }
.st-empty { --st: var(--st-empty); color: var(--text-muted); font-weight: var(--weight-regular); }
.st.flash { animation: st-flash .5s var(--ease-standard); }
@keyframes st-flash { 0% { filter: brightness(1.5); } 100% { filter: none; } }

/* status label pill (outside the grid: kanban, drawer, tasks) */
.lbl { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 10px; border-radius: var(--radius-sm); background: var(--st); color: #fff; font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.lbl.st-amber { color: #221600; }
.lbl.lbl-sm { height: 20px; padding-inline: 7px; font-size: var(--text-xs); }

.cell-pad { padding-inline: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--row-h); }
.cell-start { justify-content: flex-start; }
.cell-num { font-variant-numeric: tabular-nums; }
.cell-muted { color: var(--text-muted); }
.cell-edit { cursor: text; }
.cell-edit:hover { box-shadow: inset 0 0 0 1px var(--border-medium); }
.cell-date.overdue { color: var(--danger-text); font-weight: var(--weight-semibold); }
.cell-date.today { color: var(--warning-text); font-weight: var(--weight-semibold); }
.cell-date svg { width: 14px; height: 14px; }
.cell-person .av-group .avatar { width: 26px; height: 26px; font-size: 10px; }
.cell-person .empty-person { color: var(--text-muted); opacity: .6; }
.cell-person .empty-person svg { width: 18px; height: 18px; }
.rel-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding-inline: 8px;
  border-radius: var(--radius-full); background: var(--bg-card-hover); border: 1px solid var(--border-soft);
  color: var(--text-primary); font-size: var(--text-sm); text-decoration: none; overflow: hidden; text-overflow: ellipsis;
}
.rel-chip svg { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
.rel-chip:hover { border-color: var(--border-accent); }
.tag-chip { display: inline-flex; height: 22px; align-items: center; padding-inline: 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); background: color-mix(in srgb, var(--st) 18%, transparent); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--st) 40%, transparent); }
.link-cell { color: var(--accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; }
.link-cell svg { width: 14px; height: 14px; flex-shrink: 0; }
.link-cell:hover { text-decoration: underline; }
.cell-check { display: grid; place-items: center; height: var(--row-h); }
.cell-check svg { width: 18px; height: 18px; color: var(--success); }
.timeline-bar { width: 100%; height: 22px; border-radius: var(--radius-full); background: var(--st-empty); position: relative; overflow: hidden; display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.timeline-bar span { position: relative; z-index: 1; }
.timeline-bar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p, 50%); background: var(--st, var(--st-blue)); }
.timeline-bar.on-fill { color: #fff; }

/* add row + footer */
.btable .add-row td { background: var(--bg-surface); }
.btable .add-row .c-item input {
  width: 100%; height: var(--row-h); border: 0; background: transparent; color: var(--text-primary); font: inherit;
  padding-inline: 28px 8px; outline: none;
}
.btable .add-row .c-item input::placeholder { color: var(--text-muted); }
.btable .add-row .c-item input:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.btable tfoot td { background: transparent; border-inline-end-color: transparent; border-block-end: 0; height: 44px; }
.btable tfoot td.sum { border: 1px solid var(--cell-border); border-block-start: 0; border-inline-start: 0; background: var(--bg-surface); }
.btable tfoot tr td.sum:first-of-type { border-inline-start: 1px solid var(--cell-border); }
.sum-val { display: flex; flex-direction: column; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sum-val b { font-size: var(--text-base-sm); }
.sum-val small { color: var(--text-muted); font-size: var(--text-2xs); }
.battery { display: flex; height: 22px; margin-inline: 8px; border-radius: var(--radius-xs); overflow: hidden; background: var(--st-empty); }
.battery i { display: block; height: 100%; background: var(--st); }

/* status picker popup */
.st-picker {
  position: fixed; z-index: var(--z-popover); width: 220px; padding: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: grid; gap: 6px;
}
.st-picker .lbl { width: 100%; justify-content: center; height: 30px; border: 0; cursor: pointer; font-family: inherit; }
.st-picker .lbl:hover { filter: brightness(1.1); }
.st-picker .st-picker-foot { border-block-start: 1px solid var(--border-soft); padding-block-start: 6px; margin-block-start: 2px; }
.st-picker .st-picker-foot button { width: 100%; justify-content: center; }

/* floating bulk bar */
.ws-bulk {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%; translate: -50% 0; z-index: var(--z-dropdown);
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px;
  background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
}
[dir="rtl"] .ws-bulk { translate: 50% 0; }
.ws-bulk[hidden] { display: none; }
.ws-bulk-count { display: flex; align-items: center; gap: 8px; padding-inline: 6px 14px; margin-inline-end: 6px; border-inline-end: 1px solid var(--border-soft); font-weight: var(--weight-semibold); font-size: var(--text-base-sm); }
.ws-bulk-count b { min-width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; display: grid; place-items: center; }
.ws-bulk .btn-ghost { flex-direction: column; height: auto; padding: 6px 10px; gap: 2px; font-size: var(--text-xs); }
.ws-bulk .btn-ghost svg { width: 17px; height: 17px; }

/* ── Kanban ─────────────────────────────────────────────────── */
.kanban { flex: 1; min-height: 0; display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-2) var(--space-6) var(--space-6); align-items: flex-start; }
.kcol { flex: 0 0 280px; display: flex; flex-direction: column; max-height: 100%; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.kcol-head .lbl { height: 26px; }
.kcol-head .count { color: var(--text-muted); font-size: var(--text-sm); }
.kcol-head .sum { margin-inline-start: auto; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.kcol-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 10px; overflow-y: auto; min-height: 60px; }
.kcol-body.drop-on { background: var(--accent-glow-md); border-radius: var(--radius-md); }
.kcard {
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px;
  display: grid; gap: 10px; cursor: grab; font-size: var(--text-base-sm);
}
.kcard:hover { border-color: var(--border-medium); }
.kcard.is-dragging { opacity: .4; }
.kcard-title { font-weight: var(--weight-semibold); line-height: 1.4; }
.kcard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-muted); font-size: var(--text-sm); }
.kcard-meta svg { width: 13px; height: 13px; }
.kcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcard-val { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.kcol-add { margin: 0 10px 10px; justify-content: center; }

/* ── Calendar ──────────────────────────────────────────────── */
.cal-wrap { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 0 var(--space-6) var(--space-6); gap: var(--space-3); }
.cal-head { display: flex; align-items: center; gap: var(--space-2); }
.cal-head h2 { margin: 0 8px; font-size: var(--text-lg); }
.cal { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 36px; grid-auto-rows: minmax(104px, 1fr); border: 1px solid var(--cell-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--cell-border); gap: 1px; }
.cal-dow { background: var(--bg-elevated); padding: 8px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); text-align: center; }
.cal .cal-dow { grid-row: 1; }
.cal-day { background: var(--bg-surface); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day.out { background: var(--bg-base); }
.cal-day.out .cal-n { color: var(--text-disabled); }
.cal-n { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-day.today .cal-n { background: var(--accent); color: #fff; font-weight: var(--weight-bold); }
.cal-ev { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: var(--radius-xs); background: var(--st); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; text-align: start; cursor: pointer; font-family: inherit; }
.cal-ev.st-amber { color: #221600; }
.cal-more { font-size: var(--text-xs); color: var(--text-muted); padding-inline: 4px; }

/* ── Item drawer ───────────────────────────────────────────── */
.drawer.ws-item { width: min(760px, 100vw); max-width: 100vw; }
.ws-item .drawer-hdr { align-items: flex-start; gap: var(--space-3); }
.ws-item-title { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: 0; line-height: 1.3; }
.ws-item-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: 6px; color: var(--text-muted); font-size: var(--text-sm); }
.ws-item .tabs-line { padding-inline: var(--space-6); }
.ws-item .drawer-body { padding-block-start: var(--space-4); }
.field-grid { display: grid; grid-template-columns: 160px 1fr; gap: 2px 12px; align-items: center; }
.field-grid dt { color: var(--text-muted); font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; padding-block: 8px; }
.field-grid dt svg { width: 14px; height: 14px; }
.field-grid dd { margin: 0; padding: 4px 8px; border-radius: var(--radius-sm); min-height: 34px; display: flex; align-items: center; gap: 8px; font-size: var(--text-base-sm); }
.field-grid dd:hover { background: var(--bg-card-hover); }
.composer { border: 1px solid var(--border-medium); border-radius: var(--radius-lg); background: var(--bg-input); overflow: hidden; }
.composer textarea { width: 100%; min-height: 76px; border: 0; background: none; color: var(--text-primary); font: inherit; padding: 12px 14px; resize: vertical; outline: none; }
.composer-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-block-start: 1px solid var(--border-soft); }
.composer-bar .btn-primary { margin-inline-start: auto; }
.update { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 10px; background: var(--bg-card); }
.update-head { display: flex; align-items: center; gap: 10px; }
.update-head .u-name { font-weight: var(--weight-semibold); font-size: var(--text-base-sm); }
.update-head time { color: var(--text-muted); font-size: var(--text-xs); margin-inline-start: auto; }
.update p { margin: 0; line-height: var(--leading-normal); font-size: var(--text-base-sm); }
.mention { color: var(--accent-text); background: var(--accent-glow-md); padding: 0 4px; border-radius: 4px; font-weight: var(--weight-semibold); }
.update-foot { display: flex; gap: 4px; border-block-start: 1px solid var(--border-subtle); padding-block-start: 8px; }
.update-reply { margin-inline-start: 36px; display: flex; gap: 10px; }
.subtask { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); font-size: var(--text-base-sm); }
.subtask:hover { background: var(--bg-card-hover); }
.subtask .grow { flex: 1; min-width: 0; }
.subtask.done .grow { text-decoration: line-through; color: var(--text-muted); }
.subtask time { color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.subtask time.overdue { color: var(--danger-text); }

/* ── Automations ───────────────────────────────────────────── */
.recipe { font-size: var(--text-md); line-height: 2; }
.recipe .tok { color: var(--accent-text); font-weight: var(--weight-bold); border-block-end: 2px solid var(--border-accent); padding-inline: 2px; cursor: pointer; }
.recipe .kw { font-weight: var(--weight-extrabold); }
.flow { display: grid; gap: 0; max-width: 720px; margin-inline: auto; }
.flow-step { position: relative; border: 1px solid var(--border-medium); border-radius: var(--radius-lg); background: var(--bg-surface); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); }
.flow-step-head { display: flex; align-items: center; gap: 10px; }
.flow-kw { font-size: var(--text-sm); font-weight: var(--weight-extrabold); padding: 3px 10px; border-radius: var(--radius-sm); background: var(--st); color: #fff; }
.flow-link { width: 2px; height: 28px; background: var(--border-medium); margin-inline: auto; }
.flow-add { justify-self: center; }

/* ── Misc ──────────────────────────────────────────────────── */
.sec-title { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0; }
.muted { color: var(--text-muted); }
.tnum { font-variant-numeric: tabular-nums; }
.proto-note { font-size: var(--text-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.proto-note svg { width: 13px; height: 13px; }
.kbd-hint { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: var(--text-xs); }

@container app (max-width: 768px) {
  .board-head, .board-toolbar, .filter-row { padding-inline: var(--space-4); }
  .board-scroll > * { margin-inline: var(--space-4); }
  .btable .c-item { width: 220px; }
  .board-toolbar .input-wrap { width: 100%; order: 10; }
  .field-grid { grid-template-columns: 120px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .st.flash { animation: none; } }
.st-slate { --st: #5b6b82; }
.tag-chip.st-slate, .lbl.st-slate { --st: #5b6b82; }

.lbl.st-empty { color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-medium); }
.btable tfoot td.c-check, .btable tfoot td.c-item { background: var(--bg-base); border-inline-end-color: transparent; }
@container app (max-width: 768px) { .board-toolbar .proto-note { display: none; } }
.ws-cmdk a.cmd-item { text-decoration: none; color: inherit; }
.tag-chip, .lbl { white-space: nowrap; }

/* ── Column actions (drag, resize, collapse, rename) ── */
.btable thead th[data-colh] { position: sticky; cursor: grab; }
.btable thead th[data-colh]:active { cursor: grabbing; }
.btable thead th.is-dragging { opacity: .45; }
.btable thead th.col-drop { box-shadow: inset calc(3px * var(--dirx, 1)) 0 0 var(--accent); }
.th-label { cursor: text; border-radius: var(--radius-xs); padding-inline: 2px; outline: none; }
.th-label[contenteditable="true"] { box-shadow: 0 0 0 1px var(--accent); background: var(--bg-input-focus); color: var(--text-primary); text-overflow: clip; cursor: text; }
.th-resize { position: absolute; top: 0; bottom: 0; inset-inline-end: -3px; width: 7px; cursor: col-resize; z-index: 4; }
.th-resize::after { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 2px; width: 3px; border-radius: 2px; }
.btable th:hover .th-resize::after, body.is-resizing .th-resize::after { background: var(--accent); }
body.is-resizing, body.is-resizing * { cursor: col-resize !important; user-select: none; }
.btable .th-collapsed { padding: 0; }
.btable .th-collapsed .btn { width: 100%; height: 100%; border-radius: 0; color: var(--text-muted); }
.btable td.c-collapsed { background: var(--bg-card-hover); }
.cell-check-btn { width: 100%; height: var(--row-h); border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--success); }
.cell-check-btn::before { content: ""; grid-area: 1 / 1; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); }
.cell-check-btn[aria-checked="true"]::before { border-color: var(--success); background: var(--success-bg); }
.cell-check-btn svg { grid-area: 1 / 1; width: 14px; height: 14px; stroke-width: 3; }
.cell-check-btn:hover::before { border-color: var(--accent); }
[data-edit="date"], [data-edit="options"] { cursor: pointer; }
[data-edit="date"]:hover, [data-edit="options"]:hover { box-shadow: inset 0 0 0 1px var(--border-medium); }
[data-edit="date"]:empty::after { content: ""; width: 14px; height: 14px; opacity: 0; }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.type-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-primary); font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: start; }
.type-opt:hover, .type-opt:focus-visible { background: var(--bg-card-hover); }
.type-opt svg { width: 15px; height: 15px; color: var(--accent-text); flex-shrink: 0; }

/* ── Group summary row: hover actions ── */
.btable tfoot td.sum-battery, .btable tfoot td.sum-num { position: relative; overflow: visible; }
.bat-seg { display: block; height: 100%; border: 0; padding: 0; background: var(--st); cursor: pointer; transition: filter var(--transition-fast), transform var(--transition-fast); }
.bat-seg:hover { filter: brightness(1.12); }
.bat-seg.st-empty { background: var(--st-empty); }
.battery.has-active .bat-seg:not(.on) { opacity: .35; }
.sum-pop {
  position: absolute; inset-block-end: calc(100% - 4px); inset-inline-start: 50%; translate: -50% 0; z-index: 6; min-width: 210px;
  display: grid; gap: 2px; padding: 8px; text-align: start;
  background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
[dir="rtl"] .sum-pop { translate: 50% 0; }
.sum-battery:hover .sum-pop, .sum-battery:focus-within .sum-pop { opacity: 1; visibility: visible; transform: none; }
.sum-pop-title { font-size: var(--text-sm); padding: 2px 6px 6px; border-block-end: 1px solid var(--border-soft); margin-block-end: 4px; }
.sum-pop-row { display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 10px; padding: 4px 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-primary); font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: start; }
.sum-pop-row:hover, .sum-pop-row.on { background: var(--bg-card-hover); }
.sum-pop-row .lbl { justify-self: start; }
.sum-pop-line { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: var(--text-sm); color: var(--text-secondary); }
.sum-pop-line b { margin-inline-start: auto; color: var(--text-primary); }
.sum-pop-hint { font-size: var(--text-2xs); color: var(--text-muted); padding: 6px 6px 0; }
.sum-gear { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border: 0; border-radius: var(--radius-xs); background: var(--bg-card-hover); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; opacity: 0; }
.sum-gear svg { width: 13px; height: 13px; }
.sum-num:hover .sum-gear, .sum-gear:focus-visible { opacity: 1; }
.sum-gear:hover { color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .sum-pop { transition: none; } }
.pick-new { display: flex; gap: 6px; padding-block-start: 8px; margin-block-start: 2px; border-block-start: 1px solid var(--border-soft); }
.pick-new .input { flex: 1; min-width: 0; }
.pick-list { display: grid; gap: 1px; max-height: 300px; overflow-y: auto; margin-block-start: 6px; }
.pick-add { color: var(--accent-text); font-weight: var(--weight-semibold); }
.pick-list .menu-item .badge { margin-inline-start: auto; }
/* empty cells stay clickable and show where you are typing */
.cell-edit > .truncate { flex: 1; min-width: 0; display: block; min-height: 1.4em; text-align: inherit; }
.cell-edit > .truncate[contenteditable="true"], .cell-edit[contenteditable="true"] { outline: none; box-shadow: 0 0 0 1px var(--accent); background: var(--bg-input-focus); border-radius: var(--radius-xs); padding: 2px 6px; text-overflow: clip; }
.cell-pick { cursor: pointer; }
.cell-pick:hover { box-shadow: inset 0 0 0 1px var(--border-medium); }
.cell-plus { color: var(--text-muted); opacity: 0; display: grid; place-items: center; }
.cell-plus svg { width: 16px; height: 16px; }
tr:hover .cell-plus, .cell-pick:focus-visible .cell-plus { opacity: 1; }
.cell-edit:empty:not([contenteditable]):hover::after, .cell-edit > .truncate:empty:not([contenteditable]):hover::after { content: "+"; color: var(--text-muted); }

/* ── Monday-style rows, groups, subitems, keyboard ── */
.row-menu { width: 22px; height: 24px; flex-shrink: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; opacity: 0; padding: 0; }
.row-menu svg { width: 15px; height: 15px; }
tr:hover .row-menu, .row-menu:focus-visible, .row-menu[aria-expanded="true"] { opacity: 1; }
.row-menu:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.sub-toggle { height: 22px; min-width: 22px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; padding: 0 3px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-muted); cursor: pointer; font: inherit; font-size: var(--text-2xs); opacity: 0; }
.sub-toggle svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
[dir="rtl"] .sub-toggle svg { transform: scaleX(-1); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.sub-toggle.has, tr:hover .sub-toggle, .sub-toggle:focus-visible { opacity: 1; }
.sub-toggle.has { color: var(--accent-text); }
.sub-toggle:hover { background: var(--bg-card-hover); }
.btable .subs-row td { height: auto; background: var(--bg-base); white-space: normal; overflow: visible; }
.btable .subs-row .subs-cell { text-align: start; padding: 6px 0 10px; }
.subtable { position: sticky; inset-inline-start: 80px; width: 620px; margin-inline-start: 40px; border: 1px solid var(--cell-border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); font-size: var(--text-sm); }
.sub-head, .sub-line { display: grid; grid-template-columns: 1fr 70px 130px 100px; align-items: stretch; }
.sub-head { background: var(--bg-elevated); color: var(--text-secondary); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.sub-head span { padding: 7px 10px; text-align: center; border-inline-start: 1px solid var(--cell-border); }
.sub-head span:first-child { text-align: start; border: 0; }
.sub-line { border-block-start: 1px solid var(--cell-border); min-height: 34px; }
.sub-line:hover { background: var(--bg-elevated); }
.sub-line > * { border: 0; border-inline-start: 1px solid var(--cell-border); background: none; font: inherit; color: inherit; display: grid; place-items: center; cursor: pointer; min-height: 34px; }
.sub-line > .sub-name { border: 0; place-items: center start; padding-inline: 10px; cursor: text; outline: none; }
.sub-name[contenteditable="true"] { box-shadow: inset 0 0 0 1px var(--accent); background: var(--bg-input-focus); }
.sub-line .st { height: 100%; min-height: 34px; }
.sub-date { font-size: var(--text-xs); }
.sub-add { border-block-start: 1px solid var(--cell-border); }
.sub-add input { width: 100%; height: 34px; border: 0; background: transparent; color: var(--text-primary); font: inherit; padding-inline: 10px; outline: none; }
.sub-add input:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.bgroup-drag { width: 18px; height: 26px; display: grid; place-items: center; color: var(--text-muted); cursor: grab; opacity: 0; }
.bgroup-drag svg { width: 14px; height: 14px; }
.bgroup-head:hover .bgroup-drag { opacity: 1; }
.bgroup.is-dragging { opacity: .5; }
.bgroup.group-drop { box-shadow: 0 -3px 0 var(--accent); }
.bgroup-title[contenteditable="true"] { box-shadow: 0 0 0 1px var(--accent); background: var(--bg-input-focus); }
.swatches { display: flex; gap: 6px; padding: 4px 8px 6px; }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; background: var(--g); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--g); }
.gdot { width: 10px; height: 10px; border-radius: 50%; background: var(--g); flex-shrink: 0; }
.btable td.gc { outline: none; }
.btable td.gc:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.btable td.gc:focus .st { box-shadow: inset 0 0 0 2px var(--accent); }
.sub-line > .sub-st { background: var(--st, var(--st-empty)); color: #fff; font-weight: var(--weight-semibold); border-inline-start: 1px solid var(--cell-border); }
.sub-line > .sub-st.st-amber { color: #221600; }
.sub-line > .sub-st.st-empty { color: var(--text-muted); }

/* ── Key documents (projects) ── */
.docs-cell { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding-inline: 8px; margin: 7px auto; border-radius: var(--radius-full); border: 1px solid var(--border-soft); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; }
.btable td > .docs-cell { display: flex; width: fit-content; }
.docs-cell small { color: var(--text-muted); font-weight: var(--weight-regular); }
.docs-meter { display: inline-flex; gap: 3px; }
.docs-meter i { width: 8px; height: 8px; border-radius: 2px; background: var(--border-medium); }
.docs-ok .docs-meter i.on { background: var(--success); }
.docs-part .docs-meter i.on { background: var(--warning); }
.docs-ok { border-color: var(--success-border); background: var(--success-bg); }
.docs-part { border-color: var(--warning-border); background: var(--warning-bg); }
.docs-none { border-color: var(--danger-border); background: var(--danger-bg); }
.docs-cell:hover { border-color: var(--border-accent); }
.keydocs { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3); background: var(--bg-card); }
.keydocs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.keydocs-head .docs-cell { margin: 0; }
.keydocs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.keydoc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px dashed var(--border-medium); }
.keydoc.has { border-style: solid; border-color: var(--border-soft); background: var(--bg-surface); }
.keydoc-ico { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--bg-card-hover); color: var(--text-secondary); flex-shrink: 0; }
.keydoc.has .keydoc-ico { color: var(--success-text); background: var(--success-bg); }
.keydoc-ico svg { width: 16px; height: 16px; }
.keydoc-meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.keydoc-name { font-size: var(--text-base-sm); font-weight: var(--weight-semibold); }
.keydoc-file, .keydoc-missing { font-size: var(--text-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keydoc-file svg { width: 12px; height: 12px; color: var(--success-text); }