/* workbench.css — styles for views/tacks.js, views/notes.js, views/kb.js
 * (TRK-470 / TRK-487).
 *
 * Layout: header (title + filters + actions) over a split pane (list
 * left, detail panel right). Sizes consume the platform scale tokens
 * (--fs-*, --sp-*, --r-*) declared in themes.css. Status-pill palette
 * is declared as local custom properties at the top so the file owns
 * one source of truth for state colors without leaking literals into
 * every selector body (per docs/plan/ui-zero-duplication-2026-04-23.md
 * §4 zero-literal policy).
 */

/* Local tokens — defined here so the workbench palette has one home;
 * MSoT scanner skips lines that declare `--name:` properties. */
.wb-view {
  --wb-detail-w: 420px;

  --wb-pill-open-bg:        #e7f0ff;
  --wb-pill-open-fg:        #0048b3;
  --wb-pill-progress-bg:    #fff4d6;
  --wb-pill-progress-fg:    #8a6300;
  --wb-pill-waiting-bg:     #fde7ec;
  --wb-pill-waiting-fg:     #a8203a;
  --wb-pill-review-bg:      #fff0e0;
  --wb-pill-review-fg:      #a04600;
  --wb-pill-done-bg:        #d8f3df;
  --wb-pill-done-fg:        #166034;

  --wb-danger-fg:           #c0392b;

  /* Tab bar tokens (TRK-508). Geometry kept local because the platform
   * scale (sp-1=4 / sp-2=8 / sp-3=12) doesn't expose a 10px or 14px step
   * and the tab-specific values are intentionally tighter than nav rails. */
  --wb-tab-pad-y:           4px;
  --wb-tab-pad-x:           10px;
  --wb-tab-gap:             6px;
  --wb-tab-icon-size:       14px;
  --wb-tab-hover-bg:        rgba(0, 0, 0, 0.04);
  --wb-tab-active-bg:       rgba(0, 0, 0, 0.06);
  --wb-tab-active-border:   var(--border);

  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--bg);
}

body.theme-dark .wb-view {
  --wb-pill-open-bg:        #1c3057;
  --wb-pill-open-fg:        #cfdcff;
  --wb-pill-progress-bg:    #3a2e0e;
  --wb-pill-progress-fg:    #ffe0a3;
  --wb-pill-waiting-bg:     #3a1620;
  --wb-pill-waiting-fg:     #ffc8d2;
  --wb-pill-review-bg:      #3a2406;
  --wb-pill-review-fg:      #ffd1a3;
  --wb-pill-done-bg:        #1d3825;
  --wb-pill-done-fg:        #b3e8c1;

  --wb-tab-hover-bg:        rgba(255, 255, 255, 0.06);
  --wb-tab-active-bg:       rgba(255, 255, 255, 0.10);
  --wb-tab-active-border:   rgba(255, 255, 255, 0.12);
}

/* Header — matches the height + spacing of table_toolbar so the page
 * heading line lands on the same baseline as transactions/review. */
.wb-view__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
}

.wb-view__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.wb-view__filters {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: var(--sp-4);
}

.wb-view__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Split — list on left, editor pane on right. */
.wb-view__split {
  flex: 1;
  display: flex;
  min-height: 0;
}

.wb-view__list {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.wb-view__detail {
  width: var(--wb-detail-w);
  flex: 0 0 var(--wb-detail-w);
  border-left: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wb-view__detail[hidden] { display: none; }

/* ── Documents preview pane (TRK-495+).
 * Two-pane layout: list on top (resizable height), preview pane below
 * (~2/3 default). Preview pane has three states: empty placeholder,
 * view mode (rendered markdown), edit mode (the form). The form reuses
 * .wb-detail__* classes; in documents view it sits inside .wb-preview__edit
 * instead of being a fixed-width right sidebar. */
.wb-view--documents .wb-view__split {
  flex-direction: column;
}

.wb-view--documents .wb-view__list {
  flex: 0 0 auto;       /* height is driven by the splitter */
  min-height: 0;
  width: 100%;
}

.wb-view__list-splitter {
  flex: 0 0 auto;
}

.wb-view__preview {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* The three pane states stack in the same area; only one is shown at a
 * time. Absolute positioning keeps each state clipped to the preview
 * container regardless of intrinsic content size. Grouped selector =
 * one source of truth for the layout. */
.wb-preview__empty,
.wb-preview__view,
.wb-preview__edit {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.wb-preview__empty[hidden],
.wb-preview__view[hidden],
.wb-preview__edit[hidden] { display: none; }

.wb-preview__view,
.wb-preview__edit { overflow: hidden; }

.wb-preview__empty {
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.wb-preview__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* Crumb / code / title visuals are shared between the preview header and
 * the reader header — group selectors so each class body has one home. */
.wb-preview__crumb,
.wb-reader__crumb {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1;
}

.wb-preview__code,
.wb-reader__code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.wb-preview__title,
.wb-reader__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-preview__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Plain block — md-viewer fills via height: 100%; no flex-column wrapper
 * needed (avoids matching the generic flex-1 pane pattern). */
.wb-preview__content {
  flex: 1;
  min-height: 0;
}

.wb-preview__content .ui-md-viewer {
  --ui-md-pad: var(--sp-4) var(--sp-5);
}

.wb-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.wb-detail__code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.wb-detail__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  overflow: auto;
  min-height: 0;
}

.wb-detail__footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.wb-detail__meta {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Form fields — same shape as edit-txn-modal labels. */
.wb-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.wb-field--inline {
  flex: 1;
  flex-direction: column;
}

.wb-field--grow {
  flex: 1;
  min-height: 0;
}

.wb-row {
  display: flex;
  gap: var(--sp-3);
}

.wb-input,
.wb-select,
.wb-textarea {
  font: inherit;
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-2);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.wb-input:focus,
.wb-select:focus,
.wb-textarea:focus {
  border-color: var(--accent);
}

.wb-textarea {
  flex: 1;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.wb-hint {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: normal;
}

.wb-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.wb-filter {
  font-size: var(--fs-sm);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-2);
}

/* Buttons — flat, themed; primary picks up --accent. */
.wb-btn {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.wb-btn:hover { background: var(--surface); }

.wb-btn--primary {
  background: var(--accent);
  color: var(--accent-fg, white);
  border-color: var(--accent);
}

.wb-btn--primary:hover { filter: brightness(1.05); }

.wb-btn--danger {
  color: var(--wb-danger-fg);
  border-color: color-mix(in srgb, var(--wb-danger-fg) 50%, var(--border));
}

.wb-btn--danger:hover {
  background: color-mix(in srgb, var(--wb-danger-fg) 8%, var(--bg));
}

.wb-btn--ghost {
  background: transparent;
  border: none;
  font-size: var(--fs-lg);
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  color: var(--muted);
}

.wb-btn--ghost:hover {
  color: var(--fg);
  background: var(--surface);
}

/* Status pills — semantic state colors driven by local tokens above. */
.wb-status-pill {
  display: inline-block;
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
}

.wb-status-pill--open         { background: var(--wb-pill-open-bg);     color: var(--wb-pill-open-fg);     border-color: transparent; }
.wb-status-pill--in_progress  { background: var(--wb-pill-progress-bg); color: var(--wb-pill-progress-fg); border-color: transparent; }
.wb-status-pill--waiting      { background: var(--wb-pill-waiting-bg);  color: var(--wb-pill-waiting-fg);  border-color: transparent; }
.wb-status-pill--needs_review { background: var(--wb-pill-review-bg);   color: var(--wb-pill-review-fg);   border-color: transparent; }
.wb-status-pill--done         { background: var(--wb-pill-done-bg);     color: var(--wb-pill-done-fg);     border-color: transparent; }
.wb-status-pill--archived     { background: var(--surface);             color: var(--muted); }

.wb-error {
  padding: var(--sp-6);
  color: var(--wb-danger-fg);
  font-size: var(--fs-base);
}

/* Intent chips — Documents view (TRK-495). Stand-alone row above the
 * platform table_toolbar (which now hosts stats + filter island + actions
 * in the transactions/review style). Flat pills with the accent fill on
 * the active one. */
.wb-view__chips-row,
.wb-view__chips {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4) 0;
  flex: 0 0 auto;
}

/* Platform table_toolbar mount — sits above the table_view, owns stats +
 * filter island + trailing actions. Padding aligns the toolbar with the
 * table cells beneath it. */
.wb-view__toolbar {
  flex: 0 0 auto;
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.wb-view__toolbar:empty { display: none; }

/* Stats slot content — plain count + label. No icon (the table_toolbar
 * filter island carries the visual weight on the right). */
.wb-stats {
  font-size: var(--fs-sm);
  white-space: nowrap;
  color: var(--fg);
}
.wb-stats > strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.wb-stats__lbl { color: var(--muted); }

.wb-chip {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.wb-chip:hover { background: var(--surface); }

.wb-chip.is-active {
  background: var(--accent);
  color: var(--accent-fg, white);
  border-color: var(--accent);
}

/* Documents tab bar (TRK-508) — Mac-native segmented look hosted by
 * views/documents.js. Each tab is an icon + label button; the active tab
 * has a soft fill + slight elevation, the row sits on a faint divider so
 * the body below reads as a separate surface (Finder / Mail convention).
 * The internal chips row in documents-list is suppressed when this tab
 * bar is in use (cfg.chipsRow: 'none'). */
.wb-view__tabs-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  overflow-x: auto;
}
.wb-view__tabs-row::-webkit-scrollbar { display: none; }

.wb-view__tabbody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wb-tab {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--wb-tab-pad-y) var(--wb-tab-pad-x);
  display: inline-flex;
  align-items: center;
  gap: var(--wb-tab-gap);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.wb-tab > i,
.wb-tab > svg {
  width: var(--wb-tab-icon-size);
  height: var(--wb-tab-icon-size);
  flex: 0 0 auto;
  color: var(--muted);
  transition: color 120ms ease;
}

.wb-tab__lbl { line-height: 1; }

.wb-tab:hover { background: var(--wb-tab-hover-bg); }

.wb-tab:hover > i,
.wb-tab:hover > svg { color: var(--fg); }

.wb-tab.is-active {
  background: var(--wb-tab-active-bg);
  color: var(--fg);
  border-color: var(--wb-tab-active-border);
  font-weight: 500;
}

.wb-tab.is-active > i,
.wb-tab.is-active > svg { color: var(--accent); }

.wb-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* When the Documents view is in tabbed mode, the inner documents-list
 * primitive's host fills the body slot. The inner .wb-view picks up
 * height from the flex tabbody container above. */
.wb-view--tabbed > .wb-view__tabbody > .wb-view {
  height: 100%;
}

/* Two-column field row inside the detail panel — used for intent + tags side by side. */
.wb-field-row {
  display: flex;
  gap: var(--sp-3);
}

.wb-field-row > .wb-field { flex: 1; }

/* Source path readout for imported Documents — shows the absolute path the
 * file came from. Styled like a code chip; warning hint when stale. */
.wb-field--source code.wb-source-path {
  display: block;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-2);
  word-break: break-all;
}

.wb-hint--warn {
  color: var(--wb-pill-waiting-fg);
}

/* ── Document reader overlay (double-click on a row in Documents).
 * Mirrors the shed md-viewer pane: TOC sidebar on the left, rendered
 * markdown on the right. Sits absolutely inside the .wb-view, covering
 * the chips/toolbar/split layout so the page reads like a webpage. */
.wb-reader {
  /* Local design tokens — keep all bespoke sizes for this overlay in one
   * declaration so consumers below stay literal-free. */
  --wb-reader-sidebar-w: 240px;
  --wb-reader-content-max: 820px;
  --wb-reader-md-pad-y: 28px;
  --wb-reader-toc-l2-pad: calc(var(--sp-3) * 2);     /* 24 */
  --wb-reader-toc-l3-pad: calc(var(--sp-3) * 3);     /* 36 */
  --wb-reader-toc-l4-pad: calc(var(--sp-3) * 4);     /* 48 */
  --wb-reader-toc-l5-pad: calc(var(--sp-3) * 5);     /* 60 */

  /* Lifecycle field row in the header (Tacks reader). */
  --wb-reader-lc-input-h:    calc(var(--sp-3) * 2 - 2px);   /* 22 */
  --wb-reader-lc-input-pad:  calc(var(--sp-1) + 2px);       /*  6 */
  --wb-reader-lc-tags-basis: calc(var(--sp-3) * 16 + 8px);  /* 200 */
  --wb-reader-lc-tags-min:   calc(var(--sp-3) * 10);        /* 120 */

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 5;
}

.wb-view--documents,
.wb-view--tacks { position: relative; }

/* Lifecycle field row in the reader header — used by the Tacks reader.
 * Inline status select + assignee + tags so the reading view stays
 * primary, while fields that change as a tack moves through its
 * lifecycle remain editable without leaving the page. */
.wb-reader__lifecycle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 1 auto;
  min-width: 0;
}
.wb-reader__lc-field {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}
.wb-reader__lc-field--grow {
  flex: 1 1 var(--wb-reader-lc-tags-basis);
  min-width: var(--wb-reader-lc-tags-min);
}
.wb-reader__lc-lbl {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.wb-reader__lc-select,
.wb-reader__lc-input {
  font-size: var(--fs-sm);
  padding: 2px var(--wb-reader-lc-input-pad);
  height: var(--wb-reader-lc-input-h);
  min-width: 0;
}
.wb-reader__lc-input { width: 100%; }

.wb-reader[hidden] { display: none; }

.wb-reader__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* .wb-reader__crumb / __code / __title are declared earlier alongside
 * .wb-preview__* via grouped selectors — same visual, one source. */

.wb-reader__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.wb-reader__sidebar {
  flex: 0 0 auto;
  width: var(--wb-reader-sidebar-w);
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wb-reader__sidebar-head {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.wb-reader__toc {
  flex: 1;
  overflow: auto;
  padding: var(--sp-1) var(--sp-2) var(--sp-3);
}

.wb-reader__toc-empty {
  padding: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.wb-reader__toc-item {
  display: block;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--r-sm);
  transition: background 80ms ease;
}
.wb-reader__toc-item:hover { background: var(--bg); }

.wb-reader__toc-l1 { font-weight: 600; }
.wb-reader__toc-l2 { padding-left: var(--wb-reader-toc-l2-pad); }
.wb-reader__toc-l3 { padding-left: var(--wb-reader-toc-l3-pad); font-size: var(--fs-xs); color: var(--muted); }
.wb-reader__toc-l4 { padding-left: var(--wb-reader-toc-l4-pad); font-size: var(--fs-xs); color: var(--muted); }
.wb-reader__toc-l5,
.wb-reader__toc-l6 { padding-left: var(--wb-reader-toc-l5-pad); font-size: var(--fs-xs); color: var(--muted); }

.wb-reader__splitter { flex: 0 0 auto; }

.wb-reader__content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Constrain markdown line length for a webpage-like read; centred in pane. */
.wb-reader__content .ui-md-viewer {
  --ui-md-pad: var(--wb-reader-md-pad-y) clamp(var(--sp-5), 6vw, var(--sp-6));
  max-width: var(--wb-reader-content-max);
  width: 100%;
  margin: 0 auto;
}