/* Project tracker — list, view, editor.
 * Layered on top of journal.css (we share entry-card / editor-form / tag-chip).
 */

/* ── Filter bar ────────────────────────────────────────── */

.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.project-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.project-filters__field--grow {
  flex: 1 1 240px;
}

.project-filters__field input,
.project-filters__field select {
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: 1rem; /* ≥16px so iOS Safari doesn't zoom on focus */
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-width: 160px;
}

.project-filters__field input:focus,
.project-filters__field select:focus {
  outline: none;
  border-color: var(--color-primary-soft);
  box-shadow: 0 0 0 3px rgba(74, 124, 168, 0.15);
}

.project-filters__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-left: auto;
}

.project-summary {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

/* ── List ──────────────────────────────────────────────── */

.project-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.task-card {
  display: block;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-fast) var(--ease-soft),
              transform var(--duration-fast) var(--ease-soft);
}

.task-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: inherit;
}

.task-card--pending      { border-left-color: var(--color-muted); }
.task-card--in_progress  { border-left-color: var(--color-primary); }
.task-card--blocked      { border-left-color: var(--color-error); }
.task-card--completed    { border-left-color: var(--color-success); opacity: 0.7; }

.task-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.task-card__id {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  background: var(--color-bg-soft);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.task-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}

.task-card__meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.task-card__deadline { font-family: var(--font-mono); font-size: 0.8rem; }
.task-card__assigned { font-style: italic; }

.task-card__progress {
  height: 4px;
  background: var(--color-bg-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-top: var(--space-2);
}

.task-card__progress span {
  display: block;
  height: 100%;
  background: var(--color-primary-soft);
  transition: width var(--duration-medium) var(--ease-soft);
}

.task-card__deps {
  margin-top: var(--space-2);
  font-size: 0.78rem;
  color: var(--color-muted);
}

.task-card__deps code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* ── Status & priority chips ───────────────────────────── */

.task-status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--color-bg-soft);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.task-status--pending      { background: #f0ede5; color: #6a6a6a; }
.task-status--in_progress  { background: #e3eef6; color: #245581; border-color: #cdddec; }
.task-status--blocked      { background: #f6e0e0; color: #8e3a3a; border-color: #ecc8c8; }
.task-status--completed    { background: #e0efe5; color: #2e6447; border-color: #c6dfd0; }

.task-priority {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}

.task-priority--low       { color: #6b6b6b; }
.task-priority--medium    { color: #6c5a2c; border-color: #d8c79b; }
.task-priority--high      { color: #8a4a1f; border-color: #dcb393; background: #f7ebdf; }
.task-priority--critical  { color: #8e1f1f; border-color: #d99494; background: #f6dcdc; }

/* ── View page ─────────────────────────────────────────── */

.task-view__meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.task-view__id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--color-bg-soft);
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
}

.task-view__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
  line-height: 1.2;
}

.task-view__props {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.task-view__props > div { margin: 0; }

.task-view__props dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 2px;
}

.task-view__props dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text);
}

.task-view__props code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--color-bg-soft);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.task-view__progress {
  margin-bottom: var(--space-5);
}

.task-view__progress-bar {
  height: 6px;
  background: var(--color-bg-soft);
  border-radius: 999px;
  overflow: hidden;
}

.task-view__progress-bar span {
  display: block;
  height: 100%;
  background: var(--color-primary-soft);
}

.task-view__body {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: var(--space-5);
}

.task-view__body p { margin: 0 0 var(--space-4); }

.task-view__empty {
  color: var(--color-muted);
  font-style: italic;
}

/* ── Quick-jump nav (TASK_036b.1) ──────────────────────────
 * Pills above the (often long) brief that skip straight to the
 * discussion card or attachments — the parts revisited most. */
.task-view__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.task-view__jump-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  white-space: nowrap;
}

.task-view__jump-link:hover {
  border-color: var(--color-primary-soft);
}

/* ── Discussion preview (TASK_036b.1) ──────────────────────
 * Collapsible companion-channel card. Reuses the channel message
 * renderer (.ch-msg etc. from channels.css), whose rules read --ch-*
 * vars that are normally only defined under .page-channels. We
 * redefine just the color tokens here (NOT the height:100vh / overflow
 * layout props) so the reused markup resolves correctly inside the
 * task view without inheriting the full-page channel layout. */

.task-view__discussion {
  --ch-bg-page:     #f5efe6;
  --ch-bg-card:     #ede5d6;
  --ch-bg-elevated: #faf6ee;
  --ch-bg-input:    #ffffff;

  --ch-ink:         #2c2620;
  --ch-ink-2:       #5a5043;
  --ch-ink-3:       #8a7f6d;
  --ch-ink-faint:   #b8ad99;

  --ch-navy:        #2e4d6f;
  --ch-navy-deep:   #1f3955;
  --ch-navy-soft:   rgba(46, 77, 111, 0.08);
  --ch-navy-faint:  rgba(46, 77, 111, 0.04);

  --ch-rose:        #b8665c;
  --ch-sage:        #6b8068;

  --ch-border:      rgba(44, 38, 32, 0.08);
  --ch-border-soft: rgba(44, 38, 32, 0.05);

  margin: var(--space-5) 0 var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.task-view__discussion-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-soft);
}

.task-view__discussion-summary:hover {
  background: var(--color-surface);
}

/* Drop the native disclosure triangle — the 💬 icon is our affordance. */
.task-view__discussion-summary::-webkit-details-marker { display: none; }
.task-view__discussion-summary::marker { content: ''; }

.task-view__discussion-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.task-view__discussion-title {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

.task-view__discussion-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.task-view__discussion-link {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.task-view__discussion-link:hover {
  text-decoration: underline;
}

.task-view__discussion-body {
  padding: var(--space-4) 0 var(--space-2);
}

.task-view__discussion-loading {
  font-size: 0.85rem;
  color: var(--color-muted);
  padding: var(--space-3) 0;
}

.task-view__discussion-empty {
  font-size: 0.9rem;
  color: var(--color-muted);
  font-style: italic;
  padding: var(--space-3) 0;
}

.task-view__discussion-footer {
  font-size: 0.78rem;
  color: var(--color-muted);
  text-align: center;
  padding-top: var(--space-3);
}

/* Read-only preview — suppress the inert "add reaction" affordance that
 * renderMessages emits (posting happens in /channels/). */
.task-view__discussion .ch-reaction--add { display: none; }

.task-view__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ── Attachments (TASK_040) ────────────────────────────── */

.task-view__attachments {
  margin: var(--space-5) 0 var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.task-view__attachments-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.task-view__attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* .task-attach* tile styles were moved to css/components.css so the masterpiece
   view (masterpiece↔task parity) shares them with the task view — see the shared
   /js/components/attachments.js renderer. */

@media (min-width: 768px) {
  .task-view__title { font-size: 2.6rem; }
}

/* ── Attribution (TASK_039) ────────────────────────────────
 * "Who did this" — a persona chip (emoji + name + instance tag) reused on
 * both the list card footer and the view's Created/Updated rows. Persona
 * colors mirror the channels thread avatars (rose/navy/sage); tokens are
 * scoped under .page-channels there, so re-declare the hexes here. */

.attr-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: 0.82rem;
  white-space: nowrap;
}

.attr-chip__emoji { font-size: 0.9em; }

.attr-chip__name { font-weight: 600; }

.attr-chip.is-ceo    .attr-chip__name { color: #b8665c; }
.attr-chip.is-cto    .attr-chip__name { color: #2e4d6f; }
.attr-chip.is-worker .attr-chip__name { color: #6b8068; }
.attr-chip.is-yu     .attr-chip__name { color: #2e4d6f; }
.attr-chip.is-crso   .attr-chip__name { color: #6b4e9e; }

.attr-chip__instance {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  opacity: 0.85;
}

/* Card footer line */
.task-card__attr {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-muted);
}

.attr-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  flex-wrap: wrap;
}

.attr-line__label { color: var(--color-muted); }
.attr-line__sep   { color: var(--color-muted); opacity: 0.6; }
.attr-line__time  { color: var(--color-muted); }

/* View Created/Updated dd cells */
.task-view__props dd .attr-chip { font-size: 0.9rem; }
.task-view__sep  { color: var(--color-muted); opacity: 0.6; margin: 0 0.15em; }
.task-view__when { color: var(--color-muted); }

/* ── TASK_051 slice 5 — visibility / arming control ─────────────────────── */
.visibility-control {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}
.visibility-control > legend {
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 var(--space-2);
}
.acl-hint {
  margin: var(--space-2) 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.acl-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}
.acl-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.95rem;
}
.acl-item input[disabled] + span { color: var(--color-muted); }
.effective-readset {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-size: 0.9rem;
}
.confirm-public {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-top: var(--space-2);
  color: var(--color-error);
  font-size: 0.9rem;
}
.visibility-status { color: var(--color-error); font-size: 0.9rem; min-height: 1.2em; }

/* ── TASK_051 — visibility chip on the task view ────────────────────────── */
.task-visibility {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.task-visibility--family {
  background: var(--color-bg-soft);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.task-visibility--restricted {
  background: #fdf0e3;     /* warm amber — "locked to a named set" */
  color: #9a5b1e;
}
.task-visibility--public {
  background: #e6f0fa;     /* cool blue — "out toward humans" */
  color: #2b6098;
}

/* ── M2.1 (TASK_060 board calibration) — read-only line/wait/tags chips ── */
.task-wait {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #f6efdd;   /* honey — matches board 等待态 */
  color: #a1782c;
  border: 1px solid color-mix(in srgb, #a1782c 30%, transparent);
}
.task-tag {
  display: inline-block;
  padding: 0.08em 0.55em;
  margin: 0 0.15em 0.25em 0;
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--color-bg-soft);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

/* ── M2.2 (TASK_060) — Task Edit calibration zone (校准区) ───────────────── */
/* Mirrors .visibility-control (same fieldset language); rows reuse .editor-meta
 * and tags reuse the shared .tags-input / .tag-chip pattern (tokens.css, 米黄). */
.calibration-control {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.calibration-control > legend {
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 var(--space-2);
}
.calibration-control .acl-hint code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
}
.calibration-control #cal-status { min-height: 1.2em; margin: 0; }