*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0; padding: 1.5rem;
  color: #1a1a1a; background: #fafafa;
  line-height: 1.6;
}

/* Nav */
nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
nav strong { font-size: 1.125rem; }
nav a { color: #2563eb; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.nav-sep { color: #a3a3a3; }
hr { border: none; border-top: 1px solid #e5e5e5; margin: 0 0 1.5rem 0; }

/* Map grid: activities span, tasks are columns, stories stack */
.map-grid {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0;
  overflow-x: auto; padding-bottom: 1rem;
}

/* Row 1: activity backbone */
.activity-header {
  grid-row: 1;
  background: #fff; border: 1px solid #d4d4d4;
  border-bottom: 2px solid #2563eb;
  padding: 0.5rem 0.75rem;
}
.activity-header h3 { margin: 0; font-size: 0.95rem; }

/* Row 2: task headers */
.task-col {
  grid-row: 2;
  background: #f9fafb; border: 1px solid #e5e7eb; border-top: none;
  padding: 0.375rem 0.5rem;
}
.task-col h4 { margin: 0; font-size: 0.85rem; color: #525252; }

/* Row 3: story columns */
.task-stories {
  grid-row: 3;
  border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.375rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  align-self: stretch;
}

/* Release slice headers */
.slice-header {
  background: #f3f4f6; border-top: 2px dashed #d1d5db;
  padding: 0.375rem 0.75rem;
  display: flex; align-items: center;
}
.slice-label { font-size: 0.85rem; font-weight: 600; color: #374151; }

/* Header rows with inline add-links */
.header-row { display: flex; justify-content: space-between; align-items: baseline; }
.add-link-header { font-size: 0.75rem; color: #94a3b8; text-decoration: none; }
.add-link-header:hover { color: #2563eb; text-decoration: underline; }

.persona-badges { margin-bottom: 0.25rem; }
.persona-badge {
  display: inline-block; padding: 0.125rem 0.5rem;
  border-radius: 99px; font-size: 0.7rem;
  background: #e0e7ff; color: #3730a3;
  margin-right: 0.25rem; margin-bottom: 0.25rem;
}
.story-card {
  padding: 0.375rem 0.5rem; margin: 0.25rem 0;
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 3px; font-size: 0.825rem;
}
.story-released { opacity: 0.5; }
/* Map header */
.map-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.map-title { margin: 0; font-size: 1.25rem; }
.map-actions { display: flex; gap: 0.5rem; align-items: center; }
.filter-toggle {
  font-size: 0.8rem; color: #2563eb; text-decoration: none;
  padding: 0.25rem 0.75rem; border: 1px solid #2563eb; border-radius: 4px;
}
.filter-toggle:hover { background: #eff6ff; }

/* Story card layout */
.story-header { display: flex; justify-content: space-between; align-items: baseline; }
.story-description { font-size: 0.75rem; color: #525252; margin-top: 0.25rem; }
.story-assignees { margin-top: 0.25rem; }
.story-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }

/* State labels */
.state-label { font-size: 0.7rem; }
.state-planned { color: #737373; }
.state-solo { color: #dc2626; }
.state-paired { color: #16a34a; }
.state-ensemble { color: #2563eb; }
.state-released { color: #7c3aed; }

/* Assignee badges */
.assignee-badge {
  display: inline-block; padding: 0.125rem 0.5rem;
  border-radius: 99px; font-size: 0.7rem;
  background: #fef3c7; color: #92400e;
  margin-right: 0.25rem; margin-bottom: 0.25rem;
}
.inline-form { display: inline; }
.unassign-btn {
  background: none; border: none; cursor: pointer;
  color: #92400e; font-size: 0.7rem; padding: 0 0 0 0.25rem;
}
.release-btn {
  background: none; border: none; cursor: pointer;
  padding: 0; font-size: 0.8rem; color: #7c3aed;
  margin-top: 0.375rem;
}
.release-btn:hover { text-decoration: underline; }
.archive-btn {
  background: none; border: none; cursor: pointer;
  padding: 0; font-size: 0.8rem; color: #737373;
}
.archive-btn:hover { text-decoration: underline; }

.add-link { font-size: 0.8rem; color: #2563eb; text-decoration: none; display: inline-block; margin-top: 0.375rem; }
.add-link:hover { text-decoration: underline; }

/* Page headings */
.page-title { font-size: 1.125rem; }
.page-subtitle { font-size: 0.875rem; color: #525252; }

/* Forms */
.form-container { max-width: 480px; }
label { display: block; margin-top: 1rem; font-weight: 500; font-size: 0.875rem; }
input[type=text], textarea, select {
  width: 100%; padding: 0.5rem; margin-top: 0.25rem;
  border: 1px solid #d4d4d4; border-radius: 4px; font-size: 0.875rem;
}
textarea { height: 80px; resize: vertical; }
.checkbox-group label { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; margin-top: 0.5rem; }
.btn {
  display: inline-block; padding: 0.5rem 1rem; margin-top: 1rem;
  background: #2563eb; color: #fff;
  border: none; border-radius: 4px; cursor: pointer;
  font-size: 0.875rem; text-decoration: none;
}
.btn:hover { background: #1d4ed8; }
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8rem; }
.btn-sm-mt { padding: 0.25rem 0.75rem; font-size: 0.8rem; margin-top: 0.75rem; }
.cancel-link { margin-left: 1rem; font-size: 0.875rem; }
.flash { padding: 0.75rem 1rem; background: #dcfce7; border-radius: 4px; margin-bottom: 1rem; font-size: 0.875rem; }
.template-fields[hidden] { display: none; }
.errors { color: #dc2626; font-size: 0.875rem; margin-top: 0.5rem; }
.errors li { margin: 0.25rem 0; }
.empty-state { color: #737373; font-style: italic; }

/* Team dashboard */
.team-title { font-size: 1.25rem; }
.section { margin-top: 1.5rem; }
.section-title { font-size: 1rem; margin: 0 0 0.75rem; }
.plain-list { list-style: none; padding: 0; }
.plain-list li { padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.875rem; }
.muted { color: #737373; }
.manage-row { margin-top: 0.75rem; }
.manage-link { margin-left: 1rem; font-size: 0.8rem; color: #2563eb; }

/* Persona list on map */
.persona-list { margin-top: 2rem; }
.persona-list h2 { font-size: 1rem; }
.persona-list li { font-size: 0.875rem; margin: 0.25rem 0; }

/* Landing page (standalone) */
body.landing {
  padding: 0;
  background: #fff;
}
.hero {
  text-align: center;
  padding: 4rem 2rem 3rem;
}
.hero h1 {
  font-size: 2.5rem; font-weight: 700;
  margin: 0 0 0.5rem;
}
.hero p {
  font-size: 1.125rem; color: #525252;
  margin: 0 0 2rem;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.features {
  max-width: 720px; margin: 0 auto;
  padding: 0 2rem 4rem;
}
.features h2 {
  font-size: 1rem; font-weight: 600;
  margin: 2rem 0 0.5rem;
}
.features p {
  font-size: 0.9375rem; color: #404040;
  margin: 0;
}
footer.landing {
  text-align: center;
  padding: 2rem;
  border-top: 1px solid #e5e5e5;
  font-size: 0.8125rem; color: #a3a3a3;
}

.history-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.history-table th { text-align: left; border-bottom: 2px solid #e5e5e5; padding: 0.5rem; font-size: 0.875rem; }
.history-table td { border-bottom: 1px solid #f0f0f0; padding: 0.5rem; font-size: 0.875rem; }
.history-when { white-space: nowrap; color: #737373; }
.history-who { white-space: nowrap; }

.split-candidate { font-size: 0.7rem; font-weight: 600; margin-left: 0.25rem; color: #d97706; }

/* Drag and drop */
.drag-handle { cursor: grab; color: #a3a3a3; user-select: none; font-size: 0.9rem; line-height: 1; }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.4; border: 2px dashed #93c5fd; background: #eff6ff; }