/* Map View */
#view-map {
  gap: var(--space-3);
}

/* Header */
.map-header {
  margin-bottom: var(--space-2);
}

.map-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
}

.map-header-left {
  text-align: left;
  flex: 1;
}

.map-header .page-title {
  font-size: 1.5rem;
  font-weight: var(--font-light);
  margin-bottom: var(--space-1);
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.map-sync-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Domains Container */
.domains-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--space-2);
  max-width: 100%;
}

/* Domain Cards */
.domain-card {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.domain-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.domain-card[data-domain="health"]::before { background-color: var(--accent-health); }
.domain-card[data-domain="wealth"]::before { background-color: var(--accent-wealth); }
.domain-card[data-domain="creativity"]::before { background-color: var(--accent-creative); }
.domain-card[data-domain="exploration"]::before { background-color: var(--accent-exploration); }
.domain-card[data-domain="clarity"]::before { background-color: var(--accent-clarity); }
.domain-card[data-domain="innerLife"]::before { background-color: var(--accent-innerlife); }
.domain-card[data-domain="relationships"]::before { background-color: var(--accent-relationships); }

/* Domain Header */
.domain-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.domain-icon {
  font-size: 1rem;
}

.domain-label {
  font-size: 0.75rem;
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.domain-card[data-domain="health"] .domain-label { color: var(--accent-health); }
.domain-card[data-domain="wealth"] .domain-label { color: var(--accent-wealth); }
.domain-card[data-domain="creativity"] .domain-label { color: var(--accent-creative); }
.domain-card[data-domain="exploration"] .domain-label { color: var(--accent-exploration); }
.domain-card[data-domain="clarity"] .domain-label { color: var(--accent-clarity); }
.domain-card[data-domain="innerLife"] .domain-label { color: var(--accent-innerlife); }
.domain-card[data-domain="relationships"] .domain-label { color: var(--accent-relationships); }

/* Domain Inputs */
.domain-focus,
.domain-questions {
  width: 100%;
  min-height: 40px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: none;
  padding: 0;
}

.domain-focus::placeholder,
.domain-questions::placeholder,
.domain-tone::placeholder {
  color: var(--text-subtle);
}

.domain-focus:focus,
.domain-questions:focus,
.domain-tone:focus {
  outline: none;
}

.domain-tone {
  width: 100%;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.75rem;
  padding: var(--space-1) 0 0 0;
  margin-top: var(--space-1);
}

/* =============================================
   RESPONSIVE / MOBILE STYLES - MAP VIEW
   ============================================= */

/* Touch device detection - show subtle focus affordance */
@media (hover: none) and (pointer: coarse) {
  .domain-focus,
  .domain-questions,
  .domain-tone {
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    margin: 0 calc(-1 * var(--space-1));
  }

  .domain-focus:focus,
  .domain-questions:focus,
  .domain-tone:focus {
    background-color: var(--bg-tertiary);
  }

  /* Make any delete buttons visible on touch */
  .domain-card .item-delete-btn {
    opacity: 0.6;
  }
}

/* Tablet breakpoint */
@media (max-width: 768px) {
  .map-header {
    margin-bottom: var(--space-1);
  }

  .map-header .page-title {
    font-size: 1.375rem;
  }

  .page-subtitle {
    font-size: 0.8125rem;
  }

  .domain-card {
    padding: var(--space-2);
  }
}

/* Phone breakpoint */
@media (max-width: 480px) {
  #view-map {
    gap: var(--space-1);
  }

  .map-header {
    margin-bottom: var(--space-1);
  }

  .map-header .page-title {
    font-size: 1.25rem;
  }

  .page-subtitle {
    font-size: 0.75rem;
  }

  .map-sync-actions {
    gap: 4px;
  }

  /* 2-column grid for domains */
  .domains-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: var(--space-1);
  }

  /* Compact collapsed domain cards */
  .domain-card {
    padding: 10px 10px 10px 14px;
    gap: 4px;
    min-height: 70px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .domain-header {
    margin-bottom: 0;
  }

  .domain-icon {
    font-size: 1rem;
  }

  .domain-label {
    font-size: 0.625rem;
  }

  /* Hide inputs by default, show preview */
  .domain-card .domain-focus,
  .domain-card .domain-questions,
  .domain-card .domain-tone {
    display: none;
  }

  /* Focus preview - shows truncated text */
  .domain-card .domain-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    min-height: 0;
  }

  .domain-card .domain-preview.empty {
    color: var(--text-subtle);
    font-style: italic;
  }

  /* Expanded state - full width */
  .domain-card.expanded {
    grid-column: 1 / -1;
    min-height: auto;
    padding: var(--space-2);
    gap: var(--space-1);
  }

  .domain-card.expanded .domain-preview {
    display: none;
  }

  .domain-card.expanded .domain-focus,
  .domain-card.expanded .domain-questions,
  .domain-card.expanded .domain-tone {
    display: block;
  }

  /* Textarea inputs when expanded */
  .domain-card.expanded .domain-focus,
  .domain-card.expanded .domain-questions {
    min-height: 50px;
    font-size: 0.875rem;
    padding: var(--space-1);
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
  }

  .domain-card.expanded .domain-focus:focus,
  .domain-card.expanded .domain-questions:focus {
    background-color: var(--bg-tertiary);
  }

  .domain-card.expanded .domain-tone {
    font-size: 0.75rem;
    padding: var(--space-1) 0;
    margin-top: var(--space-1);
  }

  /* Collapse button */
  .domain-collapse-btn {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
  }

  .domain-card.expanded .domain-collapse-btn {
    display: flex;
  }
}

/* Small phone breakpoint */
@media (max-width: 320px) {
  .map-header .page-title {
    font-size: 1.125rem;
  }

  .page-subtitle {
    font-size: 0.6875rem;
  }

  .domains-container {
    gap: 6px;
  }

  .domain-card {
    padding: 8px 8px 8px 12px;
    min-height: 60px;
  }

  .domain-icon {
    font-size: 0.875rem;
  }

  .domain-label {
    font-size: 0.5625rem;
  }

  .domain-card .domain-preview {
    font-size: 0.6875rem;
    -webkit-line-clamp: 2;
  }

  .domain-card.expanded .domain-focus,
  .domain-card.expanded .domain-questions {
    font-size: 0.8125rem;
    min-height: 44px;
  }

  .domain-card.expanded .domain-tone {
    font-size: 0.6875rem;
  }
}