:root {
  --bg: #f7f8fa;
  --card: #ffffff;
  --border: #e3e6ec;
  --ink: #1c2430;
  --muted: #6b7684;
  --accent: #1f3a60;
  --accent-hover: #2a4d7d;
  --warn: #a66b00;
  --ok: #2f7a3e;
  --ai-bg: #eef4fb;
  --human-bg: #f2f5ee;
}

* { box-sizing: border-box; }

/* Disable the browser's automatic scroll-anchoring feature so our manual
 * card-level scroll preservation in patch() is the only thing adjusting
 * scroll position. Without this, the browser silently shifts scroll on
 * content changes and our scrollBy compounds on top, causing a small
 * 2–3 line jump on every save. */
html, body { overflow-anchor: none; scroll-behavior: auto; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  padding: 2rem;
  line-height: 1.5;
}

header { max-width: 880px; margin: 0 auto 1.5rem; }
header h1 { margin: 0 0 .25rem; color: var(--accent); }
.tagline { color: var(--muted); margin: 0; }

main {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

h2 { margin: 0 0 .75rem; font-size: 1.1rem; color: var(--accent); }
.muted { color: var(--muted); font-weight: normal; font-size: .9rem; }

textarea, input[type="text"], select {
  width: 100%;
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

textarea { resize: vertical; min-height: 5rem; }

.row {
  display: flex;
  gap: .75rem;
  align-items: end;
  margin-top: .75rem;
}
.row label { flex: 1; display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); }
.row label select { margin-top: .25rem; }

button {
  padding: .55rem 1.1rem;
  font: inherit;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
button:hover { background: var(--accent-hover); }
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
button.ghost:hover { background: var(--bg); }
button.danger { background: transparent; color: #a33; border: 1px solid var(--border); }
button.danger:hover { background: #fbecec; }

.list { display: grid; gap: .75rem; }

.item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .85rem 1rem;
  background: #fafbfd;
}
.item.empty { color: var(--muted); text-align: center; padding: 1.25rem; background: transparent; border-style: dashed; }

.item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
}

/* --- Domain groups (Filed pane) --- */
.domain-group {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: .5rem;
  background: #fff;
}
.domain-group-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
}
.domain-group-header:hover { background: rgba(31, 58, 96, 0.04); }
.domain-group-name { flex: 1; font-weight: 600; color: var(--accent); }
.domain-group-count {
  font-size: .8rem;
  color: var(--muted);
  background: var(--bg);
  padding: .1rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.domain-group.collapsed .domain-group-body { display: none; }
.domain-group:not(.collapsed) .domain-group-body {
  padding: 0 .75rem .75rem;
  display: grid;
  gap: .5rem;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
}

/* --- Collapsible item: clickable header, hideable body --- */
.item-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
  padding: .15rem 0;
  border-radius: 4px;
}
.item-header:hover { background: rgba(31, 58, 96, 0.04); }
.item-chevron {
  display: inline-block;
  width: 1rem;
  font-size: .7rem;
  color: var(--muted);
  text-align: center;
  flex: 0 0 auto;
}
.item-spacer { flex: 1 1 auto; }
.item-header > .item-subject { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item.collapsed .item-body { display: none; }
.item:not(.collapsed) .item-body { margin-top: .5rem; }
.item-subject { font-weight: 600; }
.item-subject.placeholder { color: var(--muted); font-weight: normal; font-style: italic; }

.pill {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  color: var(--muted);
  border: 1px solid var(--border);
  background: #fff;
}
.pill.domain { background: #f4effc; color: #5a3a8a; border-color: #e4d6f5; }
.pill.ai { background: var(--ai-bg); color: var(--accent); border-color: #d3e2f2; }
.pill.human { background: var(--human-bg); color: var(--ok); border-color: #d9e4cc; }
.pill.missing { background: #fdf2e4; color: var(--warn); border-color: #f3dcbd; }

.content-preview {
  font-size: .9rem;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 4em;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid var(--border);
  padding-left: .6rem;
  margin: .25rem 0 .5rem;
}

.completion-form { display: grid; gap: .5rem; margin-top: .5rem; }
.completion-form label {
  display: grid;
  gap: .15rem;
  font-size: .85rem;
  color: var(--muted);
}
.completion-form .actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .25rem; }

.field-note { font-size: .75rem; color: var(--muted); }
.field-note.ai { color: var(--accent); }
.field-note.missing { color: var(--warn); }

/* --- Dropzone --- */
.dropzone {
  position: relative;
  border: 2px dashed transparent;
  border-radius: 8px;
  transition: border-color 120ms, background-color 120ms;
}
.dropzone.drag-over {
  border-color: var(--accent);
  background: var(--ai-bg);
}
.dropzone-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--accent);
  font-weight: 600;
  background: rgba(238, 244, 251, 0.85);
  border-radius: 6px;
}
.dropzone.drag-over .dropzone-overlay { display: flex; }

/* --- File picker styled as a link --- */
.file-picker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}
.file-picker input[type="file"] {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  position: absolute;
}
.file-picker span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile: stack the dump-row controls and give the file picker a
 * generous tap target so iOS users don't miss it. */
@media (max-width: 600px) {
  body { padding: 1rem; }
  .row {
    flex-wrap: wrap;
    gap: .5rem;
  }
  #dump .row .file-picker {
    flex: 1 1 100%;
    padding: .65rem .5rem;
    border: 1px dashed var(--border);
    border-radius: 6px;
    justify-content: center;
    background: var(--bg);
  }
  #dump .row #dump-btn { flex: 1 1 auto; }
  .overview-tabs { gap: .35rem; }
}

.hint {
  font-size: .78rem;
  color: var(--muted);
  margin: .6rem 0 0;
}

/* --- Summary pills (click to edit completed fields) --- */
.summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .5rem;
}
.pill.summary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  cursor: pointer;
  user-select: none;
}
.pill.summary:hover { filter: brightness(0.96); }
.pill.summary .label { font-weight: 600; color: var(--ink); }
.pill.summary .prov { font-size: .7rem; color: var(--muted); }

/* --- List inputs (Participants / Issues / Actions) --- */
.list-input { display: grid; gap: .3rem; }
.list-input .item-row {
  display: flex;
  gap: .4rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .3rem .5rem;
}
.list-input .item-row input {
  flex: 1;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
}
.list-input .item-row input:focus { outline: none; }
.list-input .item-row .remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .2rem;
}
.list-input .item-row .remove:hover { color: #a33; }
.list-input .add-row {
  display: flex;
  gap: .3rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--accent);
  padding: .35rem .6rem;
  cursor: pointer;
  font-size: .85rem;
  width: 100%;
}
.list-input .add-row:hover { background: var(--ai-bg); border-color: var(--accent); }

/* --- Action list rows: checkbox + text + date + remove --- */
.list-input.action-list .item-row { gap: .5rem; }
.list-input.action-list .item-row.completed input[type="text"] {
  text-decoration: line-through;
  color: var(--muted);
}
.list-input.action-list .item-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  cursor: pointer;
}
.list-input.action-list .deadline-input,
.list-input.action-list .complete-input {
  flex: 0 0 auto;
  width: 9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .15rem .35rem;
  font-size: .8rem;
  color: var(--muted);
  background: #fff;
}
.list-input.action-list .deadline-input:focus,
.list-input.action-list .complete-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  color: var(--ink);
}

/* --- Per-action dependency editor (under each action row) --- */
.action-block {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .15rem;
}
.action-deps {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-left: 1.6rem;     /* indent under the action row's checkbox column */
  font-size: .8rem;
  color: var(--muted);
}
.action-dep-line {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: transparent;
}
.action-dep-line.picker {
  background: transparent;
}
.action-dep-arrow {
  flex: 0 0 auto;
  font-size: .8rem;
  color: var(--muted);
  white-space: nowrap;
}
.action-dep-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  background: var(--ai-bg);
  border: 1px solid #d3e2f2;
  border-radius: 999px;
  padding: .05rem .55rem;
}
.action-dep-line .remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .25rem;
}
.action-dep-line .remove:hover { color: #a33; }
.action-dep-input {
  flex: 1 1 auto;
  font: inherit;
  padding: .25rem .5rem;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.action-dep-input:focus {
  outline: none;
  border-color: var(--accent);
  border-style: solid;
}

/* --- Dependency editor (rows of: target picker + note + open + remove) --- */
.list-input.dep-list .item-row.dep-row {
  display: grid;
  /* target | note | Open | remove */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  gap: .4rem;
  align-items: center;
}
.list-input.dep-list .dep-target,
.list-input.dep-list .dep-note {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  min-width: 0;
}
.list-input.dep-list .dep-target:focus,
.list-input.dep-list .dep-note:focus { outline: none; }
.list-input.dep-list .dep-open {
  font-size: .75rem;
  padding: .2rem .55rem;
}

/* --- Chat tab (conversational reasoning over the corpus) --- */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: 60vh;
  min-height: 12rem;
  overflow-y: auto;
  padding: .5rem .25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  margin-bottom: .75rem;
}
.chat-message {
  display: flex;
  max-width: 100%;
}
.chat-message.chat-user { justify-content: flex-end; }
.chat-message.chat-assistant { justify-content: flex-start; }
.chat-bubble {
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: 12px;
  max-width: 85%;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.chat-message.chat-user .chat-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-message.chat-assistant .chat-bubble {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-bubble p { margin: .25rem 0; }
.chat-bubble p:first-child { margin-top: 0; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul, .chat-bubble ol {
  padding-left: 1.4rem;
  margin: .35rem 0;
}
.chat-bubble li { margin: .15rem 0; }
.chat-bubble strong { font-weight: 600; }
.chat-bubble code {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: .85em;
  background: var(--bg);
  padding: .05rem .3rem;
  border-radius: 3px;
}
.chat-bubble.chat-thinking {
  color: var(--muted);
  font-style: italic;
  background: var(--ai-bg);
  border-color: #d3e2f2;
}
.chat-tool-footer {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed var(--border);
}

.chat-input-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.chat-input-row textarea {
  flex: 1 1 auto;
  resize: vertical;
  min-height: 4rem;
  font: inherit;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.chat-input-row textarea:focus {
  outline: 2px solid var(--accent);
}
.chat-input-row button {
  align-self: flex-end;
  padding: .55rem 1.1rem;
}
.chat-input-row button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* --- Lifecycle pane filter toolbar (Pending / Classified / Filed) --- */
.lifecycle-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .85rem;
  color: var(--muted);
}
/* Reusable filter-chips container — also used by the lifecycle toolbar
 * (and intended for future shared use across Actions/Map). Same chip
 * pieces (.filter-chip / .filter-chip-clear / .filter-chip-clear-all)
 * are styled elsewhere; this just provides the row layout. */
.filter-chips {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

/* --- Map tab: Venn + Lanes (toggleable) --- */
#map-body {
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Toolbar: view toggle on the left, Domain filter chips on the right.
 * Stays at the top of the body across both views so flipping or
 * clearing is one click in either view. */
.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: .6rem;
  font-size: .85rem;
  color: var(--muted);
}
.map-toolbar-group {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.map-toolbar-group.filter { justify-content: flex-end; }
.map-toolbar-label { padding-right: .15rem; }
.map-view-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  font: inherit;
  padding: .25rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 80ms, border-color 80ms, color 80ms;
}
.map-view-btn:hover {
  background: var(--ai-bg);
  border-color: var(--accent);
}
.map-view-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Center the SVG within the body; auto-shrink to fit narrow viewports. */
svg.venn-map,
svg.dep-map {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

/* --- Lanes view styles --- */
.dep-lane-bg.even { fill: #fafbfd; }
.dep-lane-bg.odd  { fill: #ffffff; }
.dep-lane-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: var(--accent);
}
.dep-box { cursor: pointer; }
.dep-box-bg {
  fill: #ffffff;
  stroke: var(--border);
  stroke-width: 1;
  transition: fill 80ms, stroke 80ms;
}
.dep-box:hover .dep-box-bg {
  fill: var(--ai-bg);
  stroke: var(--accent);
}
.dep-box-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  fill: var(--ink);
  pointer-events: none;
  user-select: none;
}
.dep-edge {
  fill: none;
  stroke-width: 1.5;
}
.dep-edge.intra {
  stroke: var(--border);
  opacity: .6;
}
.dep-edge.cross {
  stroke: var(--accent);
  stroke-width: 2;
  opacity: .85;
}
.dep-marker.intra path { fill: var(--border); }
.dep-marker.cross path { fill: var(--accent); }

/* --- Timeline view styles --- */
svg.timeline-map {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.timeline-lane-bg.even { fill: #fafbfd; }
.timeline-lane-bg.odd  { fill: #ffffff; }
.timeline-lane-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: var(--accent);
}
.timeline-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: .55;
}
.timeline-axis-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  fill: var(--muted);
}
/* Today indicator — vertical accent line + label above. */
.timeline-today {
  stroke: var(--accent);
  stroke-width: 2;
}
.timeline-today-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: var(--accent);
  text-transform: uppercase;
  letter-spacing: .5px;
}
/* Per-Object chronological connector — thin line through one Object's
 * actions in date order. The "time creates dependencies" visualization. */
.timeline-obj-connector {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: .35;
  stroke-dasharray: 4 3;
}
/* Action markers — urgency palette mirrors the Actions tab. Closed
 * markers render hollow + faded so historical rhythm stays visible
 * without competing with what's open. */
.timeline-action {
  cursor: pointer;
  stroke: #ffffff;
  stroke-width: 2;
  transition: r 80ms;
}
.timeline-action:hover { r: 8; }
.timeline-action.overdue   { fill: #c53030; }
.timeline-action.due-today { fill: #b8860b; }
.timeline-action.soon      { fill: var(--accent); }
.timeline-action.future    { fill: #6b7684; }
.timeline-action.closed {
  fill: #ffffff;
  stroke: var(--muted);
  stroke-width: 1.5;
  opacity: .55;
}

/* Captioned statement above the Venn — makes the visual speakable.
 * Sits between the toolbar and the SVG; light tinted background to
 * read as a caption rather than competing with the chart. */
.venn-with-statement {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
}
.venn-statement {
  background: var(--ai-bg);
  border: 1px solid #d3e2f2;
  border-radius: 6px;
  padding: .55rem .85rem;
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.5;
}

/* --- Venn view styles --- */

/* Domain circles — translucent fills, deterministic per-Domain hues
 * (computed in JS as inline fill/stroke). Where two circles overlap,
 * the alpha compounds and the intersection darkens — exactly the Venn
 * visual the user asked for. Click toggles the Actions filter. */
.venn-domain {
  cursor: pointer;
  transition: stroke-width 80ms, filter 80ms;
}
.venn-domain:hover {
  filter: brightness(0.95);
}

/* Domain labels — bold, deterministic-hue text drawn just above each
 * circle so they don't collide with Object dots near the center. */
.venn-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  pointer-events: none;
}

/* Object dots — small filled circles, colored by their home Domain.
 * Cross-domain dots are slightly larger and outlined, so the
 * differentiator pops without the user having to read the legend. */
.venn-dot {
  cursor: pointer;
  stroke: #ffffff;
  stroke-width: 1.5;
  transition: r 80ms, stroke-width 80ms;
}
.venn-dot:hover {
  stroke-width: 3;
}
.venn-dot.cross {
  stroke: var(--accent);
  stroke-width: 2;
}
.venn-dot.cross:hover {
  stroke-width: 3.5;
}

/* --- Attachments pill in item headers + explicit section in body --- */
.pill.attachment {
  background: #f4f1eb;
  border-color: #e2d9c4;
  color: #6b5c2a;
  font-size: .75rem;
  padding: .12rem .55rem;
  font-variant-numeric: tabular-nums;
}
.attachments-section {
  background: #fcfaf2;
  border: 1px solid #e2d9c4;
  border-radius: 6px;
  padding: .55rem .8rem;
  margin: .25rem 0 .6rem;
  font-size: .85rem;
}
.attachments-label {
  font-weight: 600;
  color: #6b5c2a;
  margin-bottom: .3rem;
}
.attachments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .2rem;
}
.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .15rem .4rem;
  background: #fff;
  border: 1px solid #ece4cf;
  border-radius: 4px;
}
.attachment-filename {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: .8rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.attachment-status {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex: 0 0 auto;
}
.attachment-item.extracted .attachment-status { color: var(--ok); }
.attachment-item.not-extracted .attachment-status { color: var(--warn); }

/* --- Dependencies count pill in item headers --- */
.pill.dep {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .75rem;
  padding: .12rem .55rem;
  font-variant-numeric: tabular-nums;
}
/* Cross-domain dependencies get the accent treatment so the v1
 * differentiator pops in the header at a glance. */
.pill.dep.cross-domain {
  background: var(--ai-bg);
  border-color: #d3e2f2;
  color: var(--accent);
  font-weight: 600;
}

/* --- Deadline pill in item headers --- */
.pill.deadline {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .75rem;
  padding: .12rem .55rem;
}
.pill.deadline.overdue {
  background: #fdecec;
  border-color: #f5c2c2;
  color: #a33;
  font-weight: 600;
}
.pill.deadline.due-today {
  background: #fff4d6;
  border-color: #f0d68a;
  color: #8a6500;
  font-weight: 600;
}
.pill.deadline.soon {
  background: var(--ai-bg);
  border-color: #d3e2f2;
  color: var(--accent);
}

/* --- Actions tab toolbar (filter chip + Show closed toggle) --- */
.actions-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
  font-size: .85rem;
  color: var(--muted);
}
.actions-filter-slot {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  background: var(--ai-bg);
  border: 1px solid #d3e2f2;
  color: var(--accent);
  border-radius: 999px;
  font-size: .8rem;
}
.filter-chip-label { color: var(--muted); }
.filter-chip-value { font-weight: 600; }
.filter-chip-clear {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
  padding: 0 .15rem;
  cursor: pointer;
  border-radius: 50%;
}
.filter-chip-clear:hover { background: rgba(31, 58, 96, 0.12); }
.filter-chip-clear-all {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 .25rem;
}
.filter-chip-clear-all:hover { color: var(--accent); }
.show-closed-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  user-select: none;
}
.show-closed-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

/* Clickable domain pill on action rows — turns the existing pill style
 * into a button so it reads as interactive on hover. */
.pill.pill-filter {
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  line-height: 1.2;
  padding: .1rem .5rem;
}
.pill.pill-filter:hover { filter: brightness(0.95); }
.pill.pill-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Action-row pill mirrors the overview row's active state when the
 * domain is part of the current filter. */
.pill.pill-filter.active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --- Actions tab: two-line action card --- */
.action-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .55rem .75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  font-size: .92rem;
}
.action-card.overdue   { border-left-color: #c53030; background: #fdf3f3; }
.action-card.due-today { border-left-color: #b8860b; background: #fffaef; }
.action-card.soon      { border-left-color: var(--accent); background: var(--ai-bg); }
.action-card.closed {
  background: #fafbfd;
  border-left-color: var(--border);
  color: var(--muted);
}
.action-card.closed .action-text {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
}
.action-card.closed .action-deadline,
.action-card.closed .action-owner { opacity: .6; }

.action-line {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.action-line-1 { /* Open · #ID · text · delete */ }
.action-line-2 {
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--muted);
  row-gap: .35rem;
}

.action-id {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: .8rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .4rem;
  flex: 0 0 auto;
}
.action-card .action-text {
  flex: 1 1 auto;
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.action-card .action-open {
  font-size: .8rem;
  padding: .25rem .7rem;
  flex: 0 0 auto;
}
.action-card .action-delete,
.action-card .action-prompt {
  font-size: 1.05rem;
  line-height: 1;
  padding: .15rem .45rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 2rem;
  text-align: center;
}
.action-card .action-delete:hover {
  color: #a33;
  border-color: #f0c4c4;
  background: #fdecec;
}
.action-card .action-prompt:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--ai-bg);
}
.action-card .action-prompt:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Line 2 meta items — labeled inline controls so they read as
 * "Due: <date>", "Owner: <name>", etc., inside the same row. */
.action-card .action-meta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.action-card .action-meta-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.action-card .action-meta-subject {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.action-card .action-deadline,
.action-card .action-complete {
  width: 9rem;
  font-size: .8rem;
  padding: .15rem .35rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
}
.action-card .action-deadline:focus,
.action-card .action-complete:focus {
  color: var(--ink);
  outline: 2px solid var(--accent);
}
.action-card .action-owner {
  width: 8rem;
  font: inherit;
  font-size: .82rem;
  padding: .2rem .45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.action-card .action-owner:focus {
  outline: 2px solid var(--accent);
}

/* Line 3: Note. Full-width row beneath the meta line. Collapsed by
 * default to a single line with ellipsis; expands to a multi-line
 * textarea on click. Designed to be unobtrusive when unused (faint
 * dashed "+ note" affordance) and clearly distinct when populated
 * (warm parchment tint, matching the Correspondent's slip-alert
 * email styling). */
.action-card .action-note {
  width: 100%;
}
.action-card .action-note-display {
  font-size: .82rem;
  line-height: 1.35;
  padding: .25rem .55rem;
  border-radius: 4px;
  cursor: text;
  background: #fcfaf2;
  border: 1px solid #e2d9c4;
  color: #4a3f1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: background-color .12s ease, border-color .12s ease;
}
.action-card .action-note-display:hover {
  background: #f5efd9;
  border-color: #c4b88c;
}
.action-card .action-note-display.empty {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-style: italic;
}
.action-card .action-note-display.empty:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--ai-bg);
}
.action-card .action-note-input {
  width: 100%;
  box-sizing: border-box;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c4b88c;
  border-radius: 4px;
  resize: vertical;
  min-height: 4.5rem;
  outline: none;
}
.action-card .action-note-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Editor variant — used inside the in-form actionListInput. Same
 * collapsed/expand pattern as the Actions-tab row, scoped under a
 * different class so the dense form layout can tune spacing. */
.edit-action-note-row {
  grid-column: 1 / -1; /* full-width below the action-row grid */
  margin: .25rem 0 .15rem 1.85rem; /* indent past the checkbox column */
}
.edit-action-note-display {
  font-size: .8rem;
  line-height: 1.35;
  padding: .22rem .5rem;
  border-radius: 4px;
  cursor: text;
  background: #fcfaf2;
  border: 1px solid #e2d9c4;
  color: #4a3f1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.edit-action-note-display:hover {
  background: #f5efd9;
  border-color: #c4b88c;
}
.edit-action-note-display.empty {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-style: italic;
}
.edit-action-note-display.empty:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--ai-bg);
}
.edit-action-note-input {
  width: 100%;
  box-sizing: border-box;
  padding: .4rem .55rem;
  font: inherit;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c4b88c;
  border-radius: 4px;
  resize: vertical;
  min-height: 3.5rem;
}
.edit-action-note-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* --- Legacy .action-row styles kept for the in-form action editor
 *     (action-list class), which still uses the single-row grid for
 *     each editable action. The Actions tab no longer renders these. --- */
.action-row {
  display: grid;
  /* checkbox | action-text (flex) | Due | Complete | parent (Domain↑/Subject↓) | Open | × */
  /* A blank Due cell signals "no deadline." A blank Complete cell signals
   * "still open." Both are always visible — closing a row populates
   * Complete; nothing swaps places. */
  grid-template-columns: auto minmax(0, 1fr) 8.5rem 8.5rem 12rem auto auto;
  gap: .55rem;
  align-items: center;
  padding: .55rem .75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  font-size: .92rem;
}
.action-row.overdue { border-left-color: #c53030; background: #fdf3f3; }
.action-row.due-today { border-left-color: #b8860b; background: #fffaef; }
.action-row.soon { border-left-color: var(--accent); background: var(--ai-bg); }
/* Closed rows: muted, struck through, no urgency color. Visible only
 * when the user toggles "Show closed" in the Actions tab. */
.action-row.closed {
  background: #fafbfd;
  border-left-color: var(--border);
  color: var(--muted);
}
.action-row.closed .action-text {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
}
.action-row.closed .action-deadline { opacity: .6; }
.action-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
/* Action text wraps to as many lines as needed instead of truncating —
 * the full action is the most important content in this row, so seeing
 * it should never require a hover. The grid row grows to fit; other
 * columns vertically center. word-break: break-word handles unusually
 * long URLs or words by breaking inside them. */
.action-row .action-text {
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.action-row .action-deadline,
.action-row .action-complete {
  width: 8.25rem;
  font-size: .8rem;
  padding: .2rem .4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
}
.action-row .action-deadline:focus,
.action-row .action-complete:focus {
  color: var(--ink);
  outline: 2px solid var(--accent);
}
/* Stacked parent cell: Domain pill on top, Subject muted below. Single
 * grid cell, two visual rows. */
.action-row .action-parent.stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  min-width: 0;
}
.action-row .action-parent .pill {
  align-self: flex-start;
}
/* Parent subject wraps too — the whole point of the parent column is
 * context, and truncated context is barely context. Falls back to a
 * hover tooltip via the title attribute for any remaining clipping. */
.action-row .action-parent-subject {
  font-size: .8rem;
  color: var(--muted);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.action-row .action-open {
  font-size: .8rem;
  padding: .25rem .7rem;
  flex: 0 0 auto;
}
.action-row .action-delete {
  font-size: 1.05rem;
  line-height: 1;
  padding: .15rem .45rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.action-row .action-delete:hover {
  background: #fdecec;
  border-color: #f5c2c2;
  color: #a33;
}

/* Brief highlight when an action's "Open" button navigates to its parent */
.item.highlight {
  box-shadow: 0 0 0 3px var(--accent);
  transition: box-shadow 200ms;
}

/* Brief highlight on the specific Action row inside the parent's
 * action editor when Open is clicked from the Actions tab or a
 * Timeline marker. Pairs with the card-level highlight: the card
 * pulses, then the specific action row pulses inside it, leading
 * the eye to the editable target. */
.action-block.highlight {
  background: var(--ai-bg);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--accent);
  transition: box-shadow 200ms, background-color 200ms;
}
.action-block.highlight .action-row { background: transparent; }

/* --- Sticky Overview: Corpus stays at top; clicked sections land below it --- */
#overview {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Solid background so content scrolling underneath doesn't bleed through */
  background: var(--card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* When the corpus state buttons jump to a pane (or Summarize opens the
 * generate panel), leave room at the top equal to the sticky overview's
 * height so the section lands below it, not behind it. --scroll-offset
 * is set by JS based on the actual measured height of the overview. */
:root { --scroll-offset: 200px; }
#pending, #classified, #filed, #generate-panel {
  scroll-margin-top: calc(var(--scroll-offset) + 0.75rem);
}

/* --- Overview card (Ship B + Tabbed workflow) --- */
.overview-tabs {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.tab-divider {
  display: inline-block;
  width: 1px;
  height: 1.4rem;
  background: var(--border);
  margin: 0 .35rem;
}
.overview-tabs button.stat {
  font-size: .9rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--ai-bg);
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid #d3e2f2;
  cursor: pointer;
  transition: background-color 80ms, border-color 80ms, color 80ms;
}
.overview-tabs button.stat:hover {
  background: #d3e2f2;
  border-color: var(--accent);
}
.overview-tabs button.stat.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.overview-tabs button.stat.active:hover {
  background: var(--accent-hover);
}
.overview-tabs button.stat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Fetch mail is an action button (not a tab), so it gets a filled
 * accent style to distinguish it from the navigation tabs. */
.overview-tabs button.stat.fetch-mail {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.overview-tabs button.stat.fetch-mail:hover { background: var(--accent-hover); }
.overview-tabs button.stat.fetch-mail:disabled {
  background: var(--bg);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
}
.fetch-mail-result {
  font-size: .8rem;
  white-space: nowrap;
}

/* Compact Fetch mail group — vertical stack so the Auto checkbox and
 * ingested-count meta tuck under the button instead of pushing the rest
 * of the tab row onto a second line. */
.fetch-mail-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  /* Cap width to roughly the button's intrinsic size so the meta line
   * underneath doesn't widen the group's slot in the tab row. */
  flex: 0 0 auto;
}
.fetch-mail-group .stat.fetch-mail { width: 100%; }

/* Send-digest group reuses the same vertical-stack pattern as the
 * mail fetcher, so the inbound/outbound capture controls sit
 * symmetrically in the corpus row. The button gets a faint accent
 * tint to distinguish "outbound" (HARI writing to you) from
 * "inbound" (HARI reading from your mailbox). */
.send-digest-group .stat.send-digest {
  width: 100%;
  background: #fcfaf2;
  border-color: #e2d9c4;
  color: #4a3f1f;
}
.send-digest-group .stat.send-digest:not(:disabled):hover {
  background: #f5efd9;
  border-color: #c4b88c;
}
.send-digest-group .stat.send-digest:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.send-digest-result {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fetch-mail-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: var(--muted);
  padding: 0 .15rem;
}
.fetch-mail-meta .auto-fetch-toggle { margin-left: 0; }

/* Auto-fetch checkbox sits next to the Fetch mail button. Compact,
 * label-only on the right, sized to match the action-button row. */
.auto-fetch-toggle {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  margin-left: .15rem;
}
.auto-fetch-toggle input[type="checkbox"] {
  width: .95rem;
  height: .95rem;
  cursor: pointer;
}
.auto-fetch-toggle input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .5;
}
/* Domain listings group — collapsible header + scrolling list. The
 * sticky overview is bounded so a long Domain catalog doesn't push the
 * lifecycle panes off the visible card. Buttons above stay persistent;
 * only the list collapses/scrolls. */
.overview-domains-group {
  margin-bottom: .5rem;
}
.overview-domains-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .15rem;
  cursor: pointer;
  user-select: none;
  font-size: .85rem;
  color: var(--muted);
}
.overview-domains-header:hover { color: var(--accent); }
.overview-domains-header .item-chevron {
  width: 1rem;
  font-size: .7rem;
  text-align: center;
  flex: 0 0 auto;
}
.overview-domains-header .overview-domains-label {
  font-weight: 600;
  color: var(--ink);
}
.overview-domains-group.collapsed .overview-domains { display: none; }

.overview-domains {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
  max-height: 14rem;
  overflow-y: auto;
}
.overview-domains li.overview-domain-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background-color 80ms, border-color 80ms;
}
.overview-domains li.overview-domain-row:hover {
  background: var(--ai-bg);
  border-color: #d3e2f2;
}
/* Active filter state — the row is currently part of the Actions filter. */
.overview-domains li.overview-domain-row.active {
  background: var(--ai-bg);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.overview-domains .domain-name { flex: 1; font-weight: 500; }
/* Quiet inline count — replaces the noisy pill the user flagged. */
.overview-domains .domain-count-quiet {
  font-size: .8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.overview-domains button.ghost {
  font-size: .8rem;
  padding: .25rem .7rem;
}
.overview-domains button.ghost.domain-rename {
  /* Rename is secondary to Summarize — same shape, slightly muted. */
  color: var(--muted);
  border-color: var(--border);
}
.overview-domains button.ghost.domain-rename:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--ai-bg);
}
.overview-last { font-size: .8rem; }

#generate-panel { background: var(--ai-bg); border-color: #d3e2f2; }
#generate-panel h3 { margin: 0 0 .5rem; color: var(--accent); }
.summary-output {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .75rem 1.25rem;
  margin: .5rem 0;
  color: var(--ink);
}
.summary-output h1,
.summary-output h2,
.summary-output h3,
.summary-output h4 {
  margin: .8rem 0 .35rem;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.3;
}
.summary-output h1 { font-size: 1.15rem; }
.summary-output h2 { font-size: 1.05rem; }
.summary-output h3 { font-size: 1rem; }
.summary-output h4 { font-size: .95rem; }
.summary-output p { margin: .4rem 0; }
.summary-output ul,
.summary-output ol {
  padding-left: 1.4rem;
  margin: .35rem 0;
}
.summary-output li { margin: .2rem 0; }
.summary-output strong { font-weight: 600; color: var(--ink); }
.summary-output em { font-style: italic; }
.summary-output code {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: .85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: .05rem .35rem;
  border-radius: 3px;
}
.summary-output pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .5rem .75rem;
  overflow-x: auto;
  font-size: .85rem;
}
.summary-output blockquote {
  margin: .5rem 0;
  padding-left: .75rem;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.summary-output a {
  color: var(--accent);
  text-decoration: underline;
}

.add-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}
/* "+ Field" buttons in the optional-zone opener row. Match the dashed
 * "+ add item" affordance used inside list inputs so the visual language
 * is consistent and the click target is the entire button — not just
 * the "+" character. Equal-share width via flex:1 keeps each button
 * generous in width regardless of label length. */
.add-field-row button.ghost {
  flex: 1 1 8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--accent);
  padding: .55rem 1rem;
  cursor: pointer;
  font-size: .9rem;
  font-family: inherit;
  transition: background-color 80ms, border-color 80ms;
}
.add-field-row button.ghost:hover {
  background: var(--ai-bg);
  border-color: var(--accent);
  border-style: solid;
}
.add-field-row button.ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.add-field-row button.ghost:active {
  background: #d9e6f4;
}