/* Hub segmented navigation
 *
 * Journal (Today / Week / Month) and Tracking (Habits / Hobbies) are primary
 * page-level navigation on phones. They should use the full content width,
 * rather than sitting inside a wide padded capsule with unused space.
 */
.journal-tabs,
.tracking-tabs {
  display: grid !important;
  inline-size: 100% !important;
  gap: 10px !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.journal-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.tracking-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.journal-tabs > button,
.tracking-tabs > button {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  min-block-size: 50px !important;
  padding-inline: 10px !important;
  border: 1px solid color-mix(in srgb, var(--athar-border) 84%, transparent) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--athar-neutral-100) 78%, var(--athar-white)) !important;
  color: var(--athar-text-muted) !important;
  box-shadow: none !important;
}

.journal-tabs > button.active,
.tracking-tabs > button.active {
  border-color: color-mix(in srgb, var(--athar-hub) 16%, var(--athar-border)) !important;
  background: var(--athar-white) !important;
  color: var(--athar-text) !important;
  box-shadow: var(--athar-shadow-1) !important;
}

@media (max-width: 599px) {
  .journal-tabs,
  .tracking-tabs {
    gap: 9px !important;
  }

  .journal-tabs > button,
  .tracking-tabs > button {
    min-block-size: 52px !important;
    border-radius: 14px !important;
  }
}