/* detail panel — slides in from right */
.detail-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 380px;
  background: var(--surface);
  border-left: 1px solid var(--hair);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s var(--ease);
  box-shadow: -8px 0 32px rgba(0,0,0,.3);
}
.detail-panel.is-open { transform: translateX(0); }

/* Empty state */
.dp-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  color: var(--ink-faint);
}
.dp-empty-icon {
  width: 48px; height: 48px;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}
.dp-empty-title { font-size: var(--t-sm); font-weight: 500; color: var(--ink-mute); }
.dp-empty-sub   { font-size: var(--t-sm); color: var(--ink-faint); max-width: 200px; line-height: 1.6; }

/* Toolbar */
.dp-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hair);
  flex-shrink: 0;
  background: var(--surface-2);
}
.dp-toolbar-spacer { flex: 1; }

/* Body */
.dp-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-5); }

.dp-zone-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 3px 8px;
  border-radius: var(--r-1);
}
.dp-zone-tag.is-overdue  { background: var(--overdue-soft);  color: var(--overdue);  }
.dp-zone-tag.is-progress { background: var(--accent-soft);   color: var(--accent);   }
.dp-zone-tag.is-blocked  { background: var(--blocked-soft);  color: var(--blocked);  }
.dp-zone-tag.is-done     { background: var(--done-soft);     color: var(--done);     }

.dp-title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-style: italic;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.dp-flags { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.dp-desc {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.7;
  white-space: pre-wrap;
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-1);
}

/* Section */
.dp-section { display: flex; flex-direction: column; gap: var(--s-2); }
.dp-section-label {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.dp-section-label::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

/* Status selector */
.status-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--hair);
  border-radius: var(--r-1);
  border: 1px solid var(--hair-2);
  overflow: hidden;
}
.status-btn {
  padding: 8px var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-mute);
  text-align: center;
  transition: background .12s, color .12s;
  background: var(--surface-2);
  cursor: pointer;
}
.status-btn:hover { background: var(--surface-3); color: var(--ink); }
.status-btn.is-progress[aria-pressed="true"] { background: var(--accent-soft);  color: var(--accent);  }
.status-btn.is-blocked[aria-pressed="true"]  { background: var(--blocked-soft); color: var(--blocked); }
.status-btn.is-done[aria-pressed="true"]     { background: var(--done-soft);    color: var(--done);    }

/* Meta grid */
.dp-meta-grid { display: flex; flex-direction: column; }
.dp-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  font-size: var(--t-sm);
}
.dp-meta-row:last-child { border-bottom: 0; }
.dp-meta-key { color: var(--ink-mute); }
.dp-meta-val { font-weight: 500; color: var(--ink); }
.dp-meta-val.is-overdue { color: var(--overdue); }
.dp-meta-val.is-done    { color: var(--done); }

/* Comments */
.comment-list { display: flex; flex-direction: column; gap: var(--s-3); }
.comment-item { display: flex; gap: var(--s-2); }
.comment-bubble {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 0 var(--r-2) var(--r-2) var(--r-2);
  padding: var(--s-2) var(--s-3);
}
.comment-author {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.comment-time { font-size: 10px; color: var(--ink-faint); font-weight: 400; margin-left: 6px; }
.comment-text { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; }

.comment-composer { display: flex; gap: var(--s-2); align-items: flex-end; }
.comment-composer textarea {
  flex: 1; resize: none; min-height: 54px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-1);
  font-size: var(--t-sm);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.5;
}
.comment-composer textarea:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.comment-composer textarea::placeholder { color: var(--ink-faint); }

/* Time logs */
.time-log-list { display: flex; flex-direction: column; gap: var(--s-2); }
.time-log-item {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-1);
  font-size: var(--t-xs);
}
.tl-duration { font-family: var(--f-mono); color: var(--accent); min-width: 40px; font-weight: 600; }
.tl-body { flex: 1; min-width: 0; }
.tl-by { font-size: var(--t-xs); font-weight: 600; color: var(--ink); }
.tl-note { color: var(--ink-mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-time { color: var(--ink-faint); margin-top: 2px; font-family: var(--f-mono); font-size: 10px; }

.time-log-form {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: var(--s-2);
  align-items: end;
}
.time-log-total {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.time-log-total span { color: var(--accent); font-weight: 700; }